/* Mascot visibility: hidden by default, shown via ?mascots=1 */
.app-splash-logo,
.app-splash-card img,
.brand img,
.hero-mascot,
.hero-mascot-main,
.import-art-main,
.page-art-strip img,
.asset-reference-details img,
.hero-visual-card img,
.import-stage-art img,
img[src*="media/"],
img[src*="app-icon"]{display:none!important}

body.show-mascots .app-splash-logo,
body.show-mascots .app-splash-card img,
body.show-mascots .brand img,
body.show-mascots .hero-mascot,
body.show-mascots .hero-mascot-main,
body.show-mascots .import-art-main,
body.show-mascots .page-art-strip img,
body.show-mascots .asset-reference-details img,
body.show-mascots .hero-visual-card img,
body.show-mascots .import-stage-art img,
body.show-mascots img[src*="media/"],
body.show-mascots img[src*="app-icon"]{display:revert!important}

:root{
  --bg:#f8f5f0;
  --card:#fefcf8;
  --ink:#1a1a2e;
  --muted:#8b7e6a;
  --line:#e0d8cc;
  --blue:#1e3a5f;
  --blue2:#e8e0d0;
  --green:#5a8a4a;
  --green2:#e8f0e0;
  --red:#c44a3a;
  --red2:#f8e8e4;
  --amber:#c49a3a;
  --shadow:0 18px 45px rgba(26,26,46,.08);
  --r:22px
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:#fff;
  font-family:'Noto Serif SC','Source Han Serif SC','STSong','Microsoft YaHei',serif;
  color:var(--ink)
}
button,input,select,textarea{
  font:inherit
}
.app{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh;
  background:#fff
}
.side{
  position:sticky;
  top:0;
  height:100vh;
  padding:22px;
  background:var(--blue);
  border-right:none;
  color:#e5e7eb;
  display:flex;
  flex-direction:column;
  overflow-y:auto
}
.side .brand{color:#e5e7eb}
.side .brand b{color:#fff}
.side .brand span{color:rgba(255,255,255,.55)}
.side .nav{color:rgba(255,255,255,.7);background:transparent;border-color:transparent}
.side .nav:hover{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}
.side .nav.active{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.25)}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:24px
}
.brand img{
  width:46px;
  height:46px;
  border-radius:14px
}
.brand b{
  display:block;
  font-size:18px
}
.brand span{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:3px
}
.nav{
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:13px 14px;
  border-radius:14px;
  margin:3px 0;
  color:#334155;
  cursor:pointer
}
.nav:hover,.nav.active{
  background:var(--blue2);
  color:var(--blue);
  font-weight:800
}
.main{
  padding:24px;
  min-width:0
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px
}
.kicker{
  margin:0 0 8px;
  color:var(--blue);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px
}
h1,h2,h3{
  margin:0;
  letter-spacing:-.03em
}
h1{
  font-size:30px
}
.top-actions{
  display:flex;
  gap:10px;
  align-items:center
}
.top-actions select{
  min-width:260px
}
.view{
  display:none
}
.view.active{
  display:block
}
.card,.hero-card{
  background:rgba(255,255,255,.94);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:none;
  padding:22px;
  margin-bottom:18px
}
.hero-card{
  display:grid;
  grid-template-columns:1.5fr .9fr;
  gap:18px;
  align-items:center
}
.hero-card h2{
  font-size:32px;
  margin-bottom:12px
}
.hero-card p{
  color:var(--muted);
  line-height:1.8
}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}
.hero-stats div,.metric{
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px
}
.hero-stats b{
  display:block;
  font-size:30px
}
.hero-stats span,.metric span{
  color:var(--muted);
  font-size:13px
}
.grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:16px
}
label{
  display:grid;
  gap:7px;
  font-weight:800;
  color:#334155
}
input,select,textarea{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:11px 12px;
  color:var(--ink)
}
textarea{
  width:100%;
  min-height:220px;
  resize:vertical;
  line-height:1.6;
  font-family:"Consolas","Microsoft YaHei",monospace
}
.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px
}
button{
  border:0;
  border-radius:14px;
  padding:11px 16px;
  cursor:pointer;
  font-weight:900
}
.primary{
  background:var(--blue);
  color:white
}
.ghost{
  background:#f8fafc;
  border:1px solid var(--line);
  color:#334155
}
.danger{
  background:var(--red);
  color:white
}
.ghost.danger{
  color:var(--red);
  background:#fff;
  border-color:#fecaca
}
button:disabled{
  opacity:.45;
  cursor:not-allowed
}
.notice{
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:14px;
  padding:13px;
  margin-bottom:12px;
  color:var(--muted)
}
.notice.ok{
  background:var(--green2);
  border-color:#86efac;
  color:#166534
}
.notice.warn{
  background:#fffbeb;
  border-color:#fde68a;
  color:#92400e
}
.table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:16px
}
table{
  width:100%;
  border-collapse:collapse;
  background:#fff
}
th,td{
  border-bottom:1px solid var(--line);
  padding:11px;
  text-align:left;
  vertical-align:top
}
th{
  background:#f8fafc;
  color:#475569;
  font-size:13px;
  white-space:nowrap
}
td{
  font-size:14px
}
.bank-list,.list{
  display:grid;
  gap:10px
}
.bank-item,.record-item,.wrong-item{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  padding:14px
}
.bank-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}
.muted,.empty{
  color:var(--muted)
}
.pill{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  background:#f8fafc;
  border-radius:8px;
  padding:6px 12px;
  color:#475569;
  font-weight:900
}
.quiz-card .question-title{
  font-size:20px;
  line-height:1.55;
  margin:8px 0 16px
}
.qmeta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:8px
}
.option{
  display:flex;
  gap:10px;
  align-items:flex-start;
  width:100%;
  padding:15px;
  border:2px solid var(--line);
  border-radius:16px;
  background:#fff;
  margin:10px 0;
  cursor:pointer;
  transition:background .16s,border-color .16s,box-shadow .16s,color .16s
}
.option input{
  margin-top:3px;pointer-events:none;outline:none
}
.option input:focus,.option input:focus-visible{
  outline:none;box-shadow:none}
.option.selected{
  border-color:var(--blue)
}
.option.correct{
  background:var(--green2);
  border-color:var(--green)
}
.option.wrong{
  background:var(--red2);
  border-color:var(--red)
}
.option-key{
  font-weight:900;
  min-width:26px
}
.feedback{
  border-radius:16px;
  padding:14px;
  margin-top:14px;
  font-weight:800
}
.feedback.ok{
  color:#166534;
  border:1px solid #86efac
}
.feedback.bad{
  color:#991b1b;
  border:1px solid #fecaca
}
.feedback.warn{
  color:#92400e;
  border:1px solid #fde68a
}

/* Scrollbar: hidden until hover */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:transparent;border-radius:3px}
body:hover::-webkit-scrollbar-thumb,
.main:hover::-webkit-scrollbar-thumb,
.view:hover::-webkit-scrollbar-thumb,
.card:hover::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12)}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25) !important}
*{scrollbar-width:thin;scrollbar-color:transparent transparent}
body:hover,html:hover{scrollbar-color:rgba(0,0,0,.15) transparent}
.exam-q{
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  margin:14px 0;
  background:#fff
}
.exam-q h3{
  font-size:17px;
  line-height:1.5
}
.score-card{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:16px
}
.score-card .metric b{
  display:block;
  font-size:26px;
  margin-top:6px
}
@media(max-width:900px){
  .app{
    grid-template-columns:1fr
  }
  .side{
    position:relative;
    height:auto
  }
  .main{
    padding:16px
  }
  .topbar,.hero-card,.section-head{
    display:block
  }
  .top-actions{
    margin-top:14px
  }
  .grid3,.form-grid,.hero-stats,.score-card{
    grid-template-columns:1fr
  }
  .top-actions select{
    min-width:0;
    width:100%
  }
  .top-actions{
    display:grid
  }
  .nav{
    display:inline-flex;
    width:auto
  }
  .side{
    white-space:nowrap;
    overflow:auto
  }
  .brand{
    position:sticky;
    left:0;
    background:white
  }
  .card,.hero-card{
    padding:16px
  }
}
.import-help code{
  display:block;
  margin-top:8px;
  padding:10px;
  border-radius:12px;
  background:#f6f8fb;
  color:#25324b;
  white-space:pre-wrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  line-height:1.45
}
.help-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:12px
}
.help-grid>div{
  border:1px solid #e6ebf2;
  border-radius:16px;
  padding:12px;
  background:#fff
}
@media(max-width:800px){
  .help-grid{
    grid-template-columns:1fr
  }
}
.split-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:12px
}
.split-grid textarea{
  min-height:180px
}
.small-area{
  min-height:95px
}
.status-ok{
  color:#166534;
  font-weight:900
}
.status-warn{
  color:#92400e;
  font-weight:900
}
.status-error{
  color:#991b1b;
  font-weight:900
}
.row-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.mini-btn{
  padding:7px 10px;
  border-radius:10px;
  font-size:12px
}
.modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px
}
.modal.hidden{
  display:none
}
.modal-panel{
  width:min(920px,96vw);
  max-height:92vh;
  overflow:auto;
  background:#fff;
  border-radius:24px;
  box-shadow:none;
  padding:22px;
  border:1px solid var(--line)
}
#edit-status{
  margin-top:10px
}
.source-badge{
  display:inline-flex;
  border-radius:999px;
  padding:4px 8px;
  background:#eef2ff;
  color:#3730a3;
  font-size:12px;
  font-weight:900;
  margin-left:6px
}
@media(max-width:900px){
  .split-grid{
    grid-template-columns:1fr
  }
  .modal{
    align-items:flex-start
  }
  .modal-panel{
    max-height:96vh
  }
}
.active-bank{
  border-color:#c9b87a;
  background:#f0ebe0
}
.bank-item .row-actions{
  justify-content:flex-end
}
details{
  margin-top:10px
}
summary{
  cursor:pointer;
  font-weight:900;
  color:var(--blue)
}
.wrong-item .section-head{
  margin-bottom:0
}
.record-item details .table-wrap{
  margin-top:10px
}
.exam-q .option input:checked+span{
  font-weight:900
}
@media(max-width:900px){
  .bank-item{
    display:block
  }
  .bank-item .row-actions{
    margin-top:10px;
    justify-content:flex-start
  }
}
.answer-input-wrap{
  margin:12px 0
}
.text-answer{
  width:100%;
  border:2px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:#fff;
  line-height:1.6
}
.text-answer:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(30,58,95,.12)
}
.text-answer.is-editing{
  border-color:var(--blue);
  background:#fbfdff;
}
input.text-answer{
  min-height:52px
}
textarea.text-answer{
  min-height:140px;
  font-family:inherit
}
.feedback .actions{
  margin-top:10px
}
/* v9: 导入提示窗口 */
.app-toast{
  position:fixed;
  right:18px;
  top:18px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:min(420px,calc(100vw - 36px));
  pointer-events:none
}
.toast-item{
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-radius:16px;
  background:#fff;
  border:1px solid #d8e2f2;
  box-shadow:none;
  animation:toastIn .18s ease-out;
  color:#172033
}
.toast-item b{
  display:block;
  margin-bottom:4px;
  font-size:15px
}
.toast-item p{
  margin:0;
  line-height:1.5;
  color:#34445d;
  font-size:13px
}
.toast-item button{
  border:0;
  background:transparent;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  color:#64748b;
  padding:0 2px
}
.toast-item.ok{
  border-left:6px solid #16a34a
}
.toast-item.warn{
  border-left:6px solid #f59e0b
}
.toast-item.danger{
  border-left:6px solid #dc2626
}
.toast-item.hide{
  opacity:0;
  transform:translateY(-6px);
  transition:all .25s ease
}
@keyframes toastIn{
  from{
    opacity:0;
    transform:translateY(-8px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}
/* v9: 沉浸式刷题页面 */
body.practice-focus .side,body.practice-focus .topbar,body.practice-focus .appbar,body.practice-focus .tabbar,
body.exam-focus .side,body.exam-focus .topbar,body.exam-focus .appbar,body.exam-focus .tabbar{
  display:none!important
}
body.practice-focus .app,
body.exam-focus .app{
  display:block;
  min-height:100vh;
  background:#fff
}
body.practice-focus .main,
body.exam-focus .main{
  padding:0;
  max-width:none;
  width:100%
}
body.practice-focus .view,
body.exam-focus .view{
  display:none!important
}
body.practice-focus #practice.view,
body.exam-focus #exam.view{
  display:block!important;
  min-height:100vh;
  padding:28px 36px;
  background:transparent
}
body.practice-focus #practice>.card:first-child,
body.exam-focus #exam>.card:first-child{
  display:none!important
}
body.practice-focus #practice-card,
body.exam-focus #exam-card{
  max-width:none;
  margin:0;
  min-height:calc(100vh - 24px);
  box-shadow:none;
  border-radius:16px;
  padding:16px 20px
}
.practice-focus-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:16px;
  margin-bottom:18px;
  border-bottom:1px solid #e5edf8;
  color:#0f172a
}
.practice-focus-head span{
  font-weight:700;
  color:var(--blue)
}
.mini-btn{
  padding:6px 10px!important;
  font-size:12px!important;
  border-radius:10px!important
}
@media(max-width:720px){
  .app-toast{
    left:12px;
    right:12px;
    top:12px;
    max-width:none
  }
  body.practice-focus #practice.view{
    padding:8px
  }
  body.practice-focus #practice-card{
    min-height:calc(100vh - 16px);
    border-radius:18px;
    padding:18px
  }
  .practice-focus-head{
    position:sticky;
    top:0;
    background:#fff;
    z-index:3
  }
}
.seq-cell{
  min-width:72px;
  white-space:nowrap;
}
.seq-cell b{
  display:block;
  font-size:14px;
  color:#111827;
}
.seq-cell small{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:#64748b;
  line-height:1.2;
}
/* v13: import preview issue-first controls */
.inline-filter{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#64748b;
  font-weight:700
}
.inline-filter select{
  min-width:110px;
  padding:8px 10px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  font-weight:700;
  color:#0f172a
}
.issue-row{
  background:#fffaf0
}
.error-row{
  background:#fff1f2
}
.import-report{
  margin-bottom:8px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(30,58,95,.08);
  color:#1e3a8a;
  line-height:1.6
}
#import-summary b{
  color:#0f172a
}
.select-cell{
  width:42px;
  text-align:center
}
.select-cell input,#import-select-all-visible{
  width:18px;
  height:18px;
  accent-color:var(--blue);
  cursor:pointer
}
#import-preview th:first-child,#import-preview td:first-child{
  text-align:center
}
button:disabled{
  opacity:.45;
  cursor:not-allowed
}
/* v20 import report */
.report-panel{
  margin:12px 0 16px;
  padding:14px;
  border:1px solid var(--border,#e5e7eb);
  border-radius:14px;
  background:rgba(15,23,42,.03)
}
.report-panel.hidden{
  display:none
}
.report-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px
}
.report-grid>div{
  border:1px solid var(--border,#e5e7eb);
  border-radius:12px;
  padding:12px;
  background:#fff;
  min-height:78px
}
.report-grid span{
  display:block;
  font-size:12px;
  color:#64748b;
  margin-bottom:4px
}
.report-grid b{
  display:block;
  font-size:20px;
  line-height:1.25;
  color:#0f172a
}
.report-grid small{
  display:block;
  margin-top:4px;
  color:#64748b;
  line-height:1.35
}
.report-grid .ok{
  border-color:#86efac;
  background:#f0fdf4
}
.report-grid .warn{
  border-color:#fcd34d;
  background:#fffbeb
}
.report-detail{
  margin-top:10px;
  color:#334155;
  font-size:13px;
  line-height:1.6
}
.candidate-details{
  margin-top:10px
}
.candidate-details summary{
  cursor:pointer;
  color:var(--blue);
  font-weight:600
}
.candidate-details table{
  width:100%;
  margin-top:8px;
  border-collapse:collapse;
  font-size:13px;
  background:#fff;
  border-radius:10px;
  overflow:hidden
}
.candidate-details th,.candidate-details td{
  border:1px solid #e5e7eb;
  padding:8px;
  text-align:left
}
@media(max-width:900px){
  .report-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:560px){
  .report-grid{
    grid-template-columns:1fr
  }
}
/* v24 shared visual refinement */
.hero-stats-app{
  grid-template-columns:1fr 1fr;
  align-items:stretch
}
.hero-visual-card{
  position:relative;
  grid-column:1/-1;
  min-height:220px;
  border-radius:24px;
  padding:18px;
  background:#fff;
  border:1px solid rgba(30,58,95,.12);
  overflow:hidden;
  box-shadow:none}
.hero-visual-card::before{
  content:"";
  position:absolute;
  left:-30px;
  bottom:-34px;
  width:140px;
  height:140px;
  border-radius:999px;
  background:rgba(30,58,95,.10);
  filter:blur(8px)
}
.hero-visual-card::after{
  content:"";
  position:absolute;
  top:-24px;
  right:-20px;
  width:120px;
  height:120px;
  border-radius:999px;
  background:rgba(201,168,76,.18);
  filter:blur(10px)
}
.hero-mascot{
  display:block;
  user-select:none;
  pointer-events:none
}
.hero-mascot-main{
  position:absolute;
  right:14px;
  bottom:-6px;
  width:min(22vw,240px);
  max-width:240px
}
.hero-mascot-badge{
  position:absolute;
  left:16px;
  top:16px;
  width:84px;
  height:84px;
  border-radius:24px;
  border:1px solid rgba(30,58,95,.14);
  background:#fff;
  box-shadow:none}
.import-stage-panel{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:14px;
  align-items:center;
  padding:16px 16px 14px;
  margin-bottom:14px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(30,58,95,.10);
  overflow:hidden;
  position:relative
}
.import-stage-panel::after{
  content:"";
  position:absolute;
  right:-18px;
  top:-22px;
  width:118px;
  height:118px;
  border-radius:999px;
  background:rgba(125,177,255,.12);
  filter:blur(12px)
}
.import-stage-copy b{
  display:block;
  font-size:16px;
  line-height:1.4;
  color:#132238;
  margin-bottom:8px
}
.import-stage-copy p{
  margin:0;
  color:#5f728d;
  line-height:1.7;
  font-size:13px
}
.import-stage-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px
}
.stage-tag{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(30,58,95,.10);
  color:#4b5d77;
  font-size:12px;
  font-weight:800
}
.stage-tag.active{
  background:rgba(30,58,95,.10);
  color:var(--blue);
  border-color:rgba(30,58,95,.18)
}
.import-stage-art{
  position:relative;
  min-height:156px
}
.import-art-main{
  position:absolute;
  right:-2px;
  bottom:-4px;
  width:min(20vw,176px);
  max-width:176px
}
.import-art-float{
  position:absolute;
  left:6px;
  top:8px;
  width:72px;
  transform:rotate(-10deg)
}
.import-help-details>summary{
  list-style:none;
  cursor:pointer;
  font-size:18px;
  font-weight:800;
  color:#172033
}
.import-help-details>summary::-webkit-details-marker{
  display:none
}
.import-help-details>summary::after{
  content:"展开";
  float:right;
  font-size:12px;
  color:var(--blue);
  font-weight:800
}
.import-help-details[open]>summary::after{
  content:"收起"
}
@media(max-width:900px){
  .hero-stats-app{
    grid-template-columns:1fr
  }
  .hero-visual-card{
    min-height:200px
  }
  .hero-mascot-main{
    width:min(44vw,220px)
  }
  .import-stage-panel{
    grid-template-columns:1fr
  }
  .import-art-main{
    width:min(34vw,180px)
  }
}
/* v25 bugfix: mobile layout, asset density and overflow control */
html,body{
  max-width:100%;
  overflow-x:hidden
}
.main,.view,.card,.hero-card,.form-grid,.split-grid,.section-head{
  min-width:0
}
.hero-mascot-badge,.import-art-float{
  display:none!important
}
.hero-visual-card{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  min-height:190px
}
.hero-mascot-main{
  position:relative;
  right:auto;
  bottom:auto;
  width:min(28vw,220px);
  max-width:220px;
  margin-left:auto
}
.import-stage-art{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  min-height:138px
}
.import-art-main{
  position:relative;
  right:auto;
  bottom:auto;
  width:min(18vw,160px);
  max-width:160px;
  margin-left:auto
}
.import-help code{
  overflow-wrap:anywhere;
  word-break:break-word
}
textarea,input,select,button{
  max-width:100%
}
@media(max-width:720px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden
  }
  .app{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0
  }
  .main{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:12px 12px calc(92px + env(safe-area-inset-bottom))!important
  }
  .view,.card,.hero-card{
    width:100%;
    max-width:100%;
    min-width:0
  }
  .side{
    position:fixed;
    left:10px;
    right:10px;
    bottom:10px;
    top:auto;
    z-index:30;
    height:auto;
    max-height:none;
    padding:8px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
    border:1px solid rgba(229,231,235,.88);
    border-radius:22px;
    background:rgba(255,255,255,.94);
    backdrop-filter:none;
    display:flex!important;
    grid-template-columns:none!important;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    box-shadow:none;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none
  }
  .side::-webkit-scrollbar{
    display:none
  }
  .brand{
    display:none!important
  }
  .nav{
    flex:0 0 auto;
    width:auto!important;
    min-width:84px;
    min-height:46px;
    margin:0;
    padding:10px 12px;
    border-radius:16px;
    font-size:12px;
    line-height:1.15;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-weight:800;
    color:#60738f
  }
  .nav.active{
    background:var(--blue);
    color:#fff;
    box-shadow:none}
  .topbar{
    display:grid;
    gap:8px;
    margin-bottom:12px;
    position:sticky;
    top:0;
    z-index:12;
    padding:12px;
    border:1px solid rgba(229,231,235,.88);
    border-radius:18px;
    background:rgba(255,255,255,.94);
    backdrop-filter:none}
  .top-actions,.actions,.row-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px
  }
  .top-actions select,.top-actions button,.actions button,.row-actions button{
    width:100%
  }
  .grid3,.form-grid,.split-grid,.hero-stats,.score-card,.help-grid{
    grid-template-columns:1fr!important
  }
  .hero-card{
    display:block
  }
  .hero-visual-card{
    min-height:150px;
    margin-top:12px
  }
  .hero-mascot-main{
    width:min(52vw,180px)
  }
  .import-stage-panel{
    grid-template-columns:1fr!important;
    gap:10px;
    padding:14px;
    margin-bottom:12px
  }
  .import-stage-art{
    min-height:108px
  }
  .import-art-main{
    width:min(42vw,146px)
  }
  .stage-tag{
    padding:7px 10px;
    font-size:11px
  }
  .card,.hero-card{
    padding:16px;
    border-radius:20px
  }
  .table-wrap{
    max-width:100%;
    overflow:auto;
    -webkit-overflow-scrolling:touch
  }
  table{
    min-width:680px
  }
  th,td{
    padding:10px 9px;
    font-size:13px
  }
  textarea{
    min-height:148px;
    overflow-wrap:anywhere;
    word-break:break-word
  }
}
/* v25.1: complete UI asset usage without dense image stacking */
.page-art-strip{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  margin:0 0 16px;
  padding:14px 16px;
  border:1px solid rgba(30,58,95,.10);
  border-radius:20px;
  background:#fff;
  overflow:hidden;
  min-width:0
}
.page-art-strip b{
  display:block;
  color:#132238;
  font-size:15px;
  line-height:1.35;
  margin-bottom:5px
}
.page-art-strip span{
  display:block;
  color:#64748b;
  font-size:13px;
  line-height:1.55;
  overflow-wrap:anywhere
}
.page-art-strip img{
  width:96px;
  max-height:96px;
  object-fit:contain;
  display:block;
  user-select:none;
  pointer-events:none;
}
.bank-art-strip img,.records-art-strip img,.settings-art-strip img{
  width:88px;
  max-height:88px
}
.practice-art-strip img,.wrongbook-art-strip img,.exam-art-strip img{
  width:104px;
  max-height:104px
}
.asset-reference-details{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#f8fafc;
  padding:12px
}
.asset-reference-details summary{
  cursor:pointer;
  font-weight:900;
  color:var(--blue)
}
.asset-reference-details img{
  display:block;
  width:min(100%,360px);
  max-height:260px;
  object-fit:contain;
  margin:12px auto 0;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(30,58,95,.10)
}
@media(max-width:720px){
  .page-art-strip{
    grid-template-columns:1fr;
    gap:8px;
    padding:13px;
    margin-bottom:12px
  }
  .page-art-strip img{
    justify-self:end;
    width:min(34vw,118px);
    max-height:118px
  }
  .bank-art-strip img,.records-art-strip img,.settings-art-strip img{
    width:min(30vw,102px);
    max-height:102px
  }
  .asset-reference-details img{
    max-height:210px
  }
}
/* v25 App shell lightweight motion */
.app-splash{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:#fff;
  animation:splashFadeOut 1.45s ease 1.05s both;
  pointer-events:none;
}
.app-splash-card{
  width:min(76vw,320px);
  min-height:300px;
  border-radius:30px;
  padding:26px 22px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(30,58,95,.12);
  box-shadow:none;
  animation:splashCardIn .72s cubic-bezier(.18,.86,.32,1.08) both;
}
.app-splash-logo{
  width:min(48vw,168px);
  max-height:168px;
  object-fit:contain;
  animation:splashLogoFloat 1.6s ease-in-out infinite;
}
.app-splash-title{
  margin-top:2px;
  font-size:24px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.2px;
  color:#132238;
}
.app-splash-subtitle{
  font-size:13px;
  color:#64748b;
  font-weight:700;
}
.app-splash-dots{
  display:flex;
  gap:6px;
  margin-top:8px
}
.app-splash-dots span{
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--blue);
  opacity:.35;
  animation:splashDot 1s ease-in-out infinite;
}
.app-splash-dots span:nth-child(2){
  animation-delay:.15s
}
.app-splash-dots span:nth-child(3){
  animation-delay:.3s
}
.hero-mascot-main{
  animation:shirohaBreathe 4.8s ease-in-out infinite
}
.import-art-main{
  animation:shirohaFloat 4.2s ease-in-out infinite
}
.bank-art-strip img{
  animation:shirohaFadeRise .7s ease both
}
.practice-art-strip img{
  animation:shirohaFloat 4.6s ease-in-out infinite
}
.exam-art-strip img{
  animation:shirohaBreathe 4.4s ease-in-out infinite
}
.wrongbook-art-strip img{
  animation:shirohaNudge 5.2s ease-in-out infinite
}
.records-art-strip img{
  animation:shirohaBreathe 5.6s ease-in-out infinite
}
.settings-art-strip img{
  animation:shirohaFloat 5s ease-in-out infinite
}
.asset-reference-details img{
  animation:shirohaFadeRise .55s ease both
}
.page-art-strip{
  animation:shirohaCardIn .48s ease both
}
.card{
  animation:shirohaCardIn .38s ease both
}
@keyframes splashCardIn{
  from{
    opacity:0;
    transform:translateY(18px) scale(.96)
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1)
  }
}
@keyframes splashLogoFloat{
  0%,100%{
    transform:translateY(0)
  }
  50%{
    transform:translateY(-7px)
  }
}
@keyframes splashDot{
  0%,100%{
    opacity:.28;
    transform:translateY(0)
  }
  50%{
    opacity:1;
    transform:translateY(-3px)
  }
}
@keyframes splashFadeOut{
  0%{
    opacity:1;
    visibility:visible
  }
  92%{
    opacity:0;
    visibility:visible
  }
  100%{
    opacity:0;
    visibility:hidden
  }
}
@keyframes shirohaFloat{
  0%,100%{
    transform:translateY(0)
  }
  50%{
    transform:translateY(-6px)
  }
}
@keyframes shirohaBreathe{
  0%,100%{
    transform:scale(1)
  }
  50%{
    transform:scale(1.025)
  }
}
@keyframes shirohaNudge{
  0%,100%{
    transform:rotate(0deg) translateY(0)
  }
  45%{
    transform:rotate(-1.6deg) translateY(-3px)
  }
  55%{
    transform:rotate(1.4deg) translateY(-3px)
  }
}
@keyframes shirohaFadeRise{
  from{
    opacity:0;
    transform:translateY(8px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes shirohaCardIn{
  from{
    opacity:.88;
    transform:translateY(4px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}
@media(max-width:720px){
  .app-splash-card{
    width:min(82vw,300px);
    min-height:276px;
    border-radius:28px;
    padding:22px 18px
  }
  .app-splash-logo{
    width:min(54vw,156px)
  }
  .app-splash-title{
    font-size:22px
  }
  .app-splash-subtitle{
    font-size:12px
  }
}
@media(prefers-reduced-motion:reduce){
  .app-splash{
    animation:splashFadeOut .2s linear .15s both
  }
  .app-splash-card,.app-splash-logo,.app-splash-dots span,.hero-mascot-main,.import-art-main,.bank-art-strip img,.practice-art-strip img,.exam-art-strip img,.wrongbook-art-strip img,.records-art-strip img,.settings-art-strip img,.asset-reference-details img,.page-art-strip,.card{
    animation:none!important;
    transition:none!important;
  }
}
/* v25.1: Web/App 素材布局融合优化
目标：一页一图，但让图片进入说明卡/状态卡内部，不再像单独贴在页面一侧。 */
.hero-card,
.import-stage-panel,
.page-art-strip{
  position:relative;
  isolation:isolate;
}
.hero-card{
  overflow:hidden;
  background:
  #fff;
}
.hero-card>div:first-child{
  position:relative;
  z-index:2;
}
.hero-stats-app{
  position:relative;
  z-index:1;
  gap:12px;
}
.hero-visual-card{
  min-height:158px;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  background:
  #fff;
}
.hero-visual-card::before{
  left:auto;
  right:38px;
  bottom:-48px;
  width:170px;
  height:170px;
  background:rgba(30,58,95,.08);
  filter:blur(10px);
}
.hero-visual-card::after{
  top:-28px;
  right:-28px;
  width:146px;
  height:146px;
  background:rgba(201,168,76,.25);
}
.hero-mascot-main{
  position:relative!important;
  right:auto!important;
  bottom:auto!important;
  width:min(20vw,210px)!important;
  max-width:210px!important;
  margin-left:auto;
  z-index:2;
}
.import-stage-panel{
  grid-template-columns:minmax(0,1fr) 172px;
  min-height:148px;
  padding:18px 22px;
  background:
  #fff;
}
.import-stage-panel::before{
  content:"";
  position:absolute;
  right:18px;
  bottom:-48px;
  width:190px;
  height:190px;
  border-radius:999px;
  background:rgba(30,58,95,.07);
  z-index:-1;
}
.import-stage-panel::after{
  right:-42px;
  top:-54px;
  width:160px;
  height:160px;
}
.import-stage-copy{
  position:relative;
  z-index:2;
  max-width:820px;
}
.import-stage-art{
  min-height:128px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.import-art-main{
  position:relative!important;
  right:auto!important;
  bottom:auto!important;
  width:min(14vw,150px)!important;
  max-width:150px!important;
  margin:0!important;
  z-index:2;
}
.page-art-strip{
  display:block;
  min-height:118px;
  padding:18px 160px 18px 20px;
  margin:0 0 16px;
  border-color:rgba(30,58,95,.12);
  background:
  #fff;
  box-shadow:none;
}
.page-art-strip::before{
  content:"";
  position:absolute;
  right:18px;
  top:50%;
  width:128px;
  height:128px;
  transform:translateY(-50%);
  border-radius:999px;
  background:rgba(30,58,95,.07);
  z-index:-1;
}
.page-art-strip>div{
  position:relative;
  z-index:2;
  max-width:760px;
}
.page-art-strip b{
  font-size:16px;
  color:#10213b;
}
.page-art-strip span{
  max-width:660px;
}
.page-art-strip img{
  position:absolute;
  right:22px;
  top:50%;
  width:122px!important;
  max-width:122px!important;
  max-height:122px!important;
  transform:translateY(-50%);
  object-fit:contain;
  opacity:.88;
}
.bank-art-strip img,
.records-art-strip img,
.settings-art-strip img{
  width:108px!important;
  max-width:108px!important;
  max-height:108px!important;
  opacity:.72;
}
.practice-art-strip img,
.exam-art-strip img,
.wrongbook-art-strip img{
  width:126px!important;
  max-width:126px!important;
  max-height:126px!important;
}
.settings-art-strip{
  background:
  #fff;
}
.asset-reference-details img{
  opacity:1;
  filter:none;
}
@media(min-width:1180px){
  .hero-card{
    grid-template-columns:minmax(0,1.45fr) minmax(320px,.9fr);
  }
  .page-art-strip{
    padding-right:190px;
  }
  .page-art-strip img{
    right:34px;
  }
}
@media(max-width:900px){
  .hero-visual-card{
    min-height:138px
  }
  .hero-mascot-main{
    width:min(42vw,180px)!important
  }
  .import-stage-panel{
    grid-template-columns:minmax(0,1fr) 136px!important;
    padding:16px;
    min-height:132px
  }
  .import-art-main{
    width:min(30vw,128px)!important
  }
  .page-art-strip{
    min-height:104px;
    padding:16px 128px 16px 16px
  }
  .page-art-strip img{
    right:16px;
    width:96px!important;
    max-width:96px!important;
    max-height:96px!important
  }
}
@media(max-width:720px){
  .hero-visual-card{
    min-height:124px;
    margin-top:10px
  }
  .hero-mascot-main{
    width:min(46vw,156px)!important
  }
  .import-stage-panel{
    display:block!important;
    padding:14px 118px 14px 14px;
    min-height:126px
  }
  .import-stage-art{
    position:absolute;
    right:12px;
    bottom:8px;
    min-height:0;
    width:96px;
    height:96px;
    display:block
  }
  .import-art-main{
    width:94px!important;
    max-width:94px!important
  }
  .page-art-strip{
    display:block!important;
    min-height:104px;
    padding:14px 106px 14px 14px;
  }
  .page-art-strip b{
    font-size:15px
  }
  .page-art-strip span{
    font-size:12.5px;
    line-height:1.5
  }
  .page-art-strip img{
    justify-self:auto!important;
    right:12px;
    width:82px!important;
    max-width:82px!important;
    max-height:82px!important;
  }
  .practice-art-strip img,
  .exam-art-strip img,
  .wrongbook-art-strip img{
    width:88px!important;
    max-width:88px!important;
    max-height:88px!important;
  }
  .asset-reference-details img{
    position:static;
    transform:none;
    width:min(100%,300px)!important;
    max-width:300px!important;
    max-height:210px!important;
    margin:12px auto 0;
  }
}
@media(prefers-reduced-motion:reduce){
  .hero-mascot-main,.import-art-main,.page-art-strip img{
    animation:none!important;
    transition:none!important
  }
}
/* v25.1 app webview: 避免绝对定位图片与旧动画 transform 冲突，仅保留开屏和卡片淡入。 */
.bank-art-strip img,
.practice-art-strip img,
.exam-art-strip img,
.wrongbook-art-strip img,
.records-art-strip img,
.settings-art-strip img,
.import-art-main,
.hero-mascot-main{
  animation:none!important;
}


/* v25.2-v28: 内置题库加载、答题卡、收藏复习、移动端增强 */
.dashboard-quick-actions{margin:16px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.builtin-bank-card-v252{margin-top:14px;padding:14px;border:1px dashed rgba(201,168,76,.55);border-radius:18px;background:rgba(239,246,255,.68)}
.practice-nav-v26{margin-top:14px;padding-top:12px;border-top:1px solid rgba(148,163,184,.25)}
.practice-nav-grid-v26{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:10px;margin-top:8px}
.practice-nav-grid-v26 button{min-height:38px;border-radius:12px;border:1px solid rgba(148,163,184,.35);background:#fff;cursor:pointer;font-weight:700;color:#334155}
.practice-nav-grid-v26 button.current{outline:2px solid rgba(59,130,246,.75);background:#f0ebe0;color:var(--blue)}
.practice-nav-grid-v26 button.done.ok{background:#dcfce7;color:#166534;border-color:#86efac}
.practice-nav-grid-v26 button.done.bad{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.practice-nav-grid-v26 button.favorite{box-shadow:inset 0 -3px 0 rgba(250,204,21,.75)}
.practice-tools-v26{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.favorite-panel-v27{margin-top:16px;padding-top:16px;border-top:1px solid rgba(148,163,184,.22)}
.favorite-item-v27{border:1px solid rgba(148,163,184,.25);border-radius:16px;padding:12px;margin:10px 0;background:rgba(255,255,255,.72)}
.mobile-safe-note-v28{font-size:12px;color:#64748b;margin-top:8px}
@media(max-width:720px){
  .dashboard-quick-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .practice-focus-head{gap:8px;align-items:flex-start}
  .practice-tools-v26{width:100%}
  .practice-tools-v26 button{flex:1 1 120px;min-height:44px}
  .practice-nav-grid-v26{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:7px}
  .practice-nav-grid-v26 button{min-height:40px;padding:0}
}

/* v28.1: blue-white UI cohesion and integrated asset treatment
   Goal: keep the site blue/white, reduce purple tint, and make inserted illustrations blend into cards. */
:root{
  --bg:#f8f5f0;
  --card:#fefcf8;
  --ink:#1a1a2e;
  --muted:#8b7e6a;
  --line:#e0d8cc;
  --blue:#1e3a5f;
  --blue2:#e8e0d0;
  --blue3:#f5f0e8;
  --blue-soft:#f0ebe0;
  --shadow:0 18px 48px rgba(26,26,46,.10);
}
body{
  background:
    #fff;
  color:var(--ink);
}
.side{
  background:#fff;
  border-right:1px solid rgba(30,58,95,.12);
  box-shadow:none;
}
.brand img{
  background:#fff;
  border:1px solid rgba(30,58,95,.14);
  box-shadow:none;
}
.brand b{color:#1a1a2e}
.nav{
  color:#5a5a7a;
}
.nav:hover,
.nav.active{
  background:#fff;
  color:var(--blue);
  box-shadow:inset 0 0 0 1px rgba(30,58,95,.08);
}
.kicker{color:var(--blue)}
.card,.hero-card{
  background:#fff;
  border-color:rgba(30,58,95,.13);
  box-shadow:none;
}
.primary{
  background:var(--blue);
  box-shadow:none;
}
.ghost{
  background:#fff;
  border-color:rgba(30,58,95,.15);
  color:#5a5a7a;
}
input,select,textarea{
  border-color:rgba(30,58,95,.15);
  background:rgba(254,252,248,.96);
}
input:focus,select:focus,textarea:focus{
  outline:2px solid rgba(30,58,95,.22);
  border-color:rgba(30,58,95,.40);
}
.table-wrap, .list, .bank-list{
  border-color:rgba(30,58,95,.10);
}

/* Hero: make mascot part of the hero panel instead of a pasted square. */
.hero-card{
  overflow:hidden;
  background:
    #fff;
}
.hero-card::before{
  content:"";
  position:absolute;
  right:-90px;
  top:-90px;
  width:260px;
  height:260px;
  border-radius:999px;
  background:rgba(30,58,95,.07);
  z-index:0;
}
.hero-card::after{
  content:"";
  position:absolute;
  right:22px;
  bottom:18px;
  width:46%;
  height:46%;
  border-radius:36px;
  background:#fff;
  z-index:0;
  pointer-events:none;
}
.hero-card>div{position:relative;z-index:1}
.hero-visual-card{
  background:transparent!important;
  border:0!important;
  box-shadow:none;
  overflow:visible;
  justify-content:center;
}
.hero-mascot-main{
  border-radius:34px;
  opacity:.96;
  filter:saturate(.86) brightness(1.03) !important;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 58%,rgba(0,0,0,.86) 74%,transparent 96%);
  mask-image:radial-gradient(ellipse at center,#000 58%,rgba(0,0,0,.86) 74%,transparent 96%);
}
.hero-stats div,.metric{
  background:rgba(254,252,248,.74);
  border-color:rgba(30,58,95,.13);
}

/* Import panel: warm card composition. */
.import-stage-panel{
  overflow:hidden;
  border:1px solid rgba(30,58,95,.12);
  background:
    #fff;
  box-shadow:none;
}
.import-stage-panel::before{
  background:rgba(30,58,95,.08)!important;
}
.import-stage-panel::after{
  background:rgba(201,168,76,.16)!important;
}
.import-art-main{
  border-radius:30px;
  opacity:.94;
  filter:saturate(.84) brightness(1.04) !important;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 58%,rgba(0,0,0,.82) 75%,transparent 95%);
  mask-image:radial-gradient(ellipse at center,#000 58%,rgba(0,0,0,.82) 75%,transparent 95%);
}
.stage-tag.active{
  background:#fff;
  color:var(--blue);
}

/* Page art cards: unified warm panels; images are softly masked and tinted. */
.page-art-strip{
  overflow:hidden;
  border-color:rgba(30,58,95,.12)!important;
  background:
    #fff;
  box-shadow:none;
}
.page-art-strip::before{
  background:rgba(30,58,95,.07)!important;
}
.page-art-strip b{color:#1a1a2e!important}
.page-art-strip span{color:var(--muted)!important}
.page-art-strip img{
  border-radius:28px;
  opacity:.90!important;
  filter:saturate(.82) brightness(1.04) !important;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 60%,rgba(0,0,0,.82) 77%,transparent 96%);
  mask-image:radial-gradient(ellipse at center,#000 60%,rgba(0,0,0,.82) 77%,transparent 96%);
}
.bank-art-strip,
.records-art-strip,
.settings-art-strip{
  background:
    #fff;
}
.asset-reference-details{
  border-color:rgba(30,58,95,.12);
  background:#f5f0e8;
}
.asset-reference-details img{
  -webkit-mask-image:none!important;
  mask-image:none!important;
  filter:saturate(.86) brightness(1.03)!important;
}

/* Progress, quiz and wrongbook states stay in the same warm visual language. */
.pill,.notice,.builtin-bank-card-v252{
  border-color:rgba(30,58,95,.15)!important;
  background:#fff;
}
.practice-nav-grid-v26 button.current{
  background:var(--blue2)!important;
  color:var(--blue)!important;
  outline-color:rgba(30,58,95,.65)!important;
}
.practice-nav-grid-v26 button.favorite{
  box-shadow:inset 0 -3px 0 rgba(201,168,76,.75)!important;
}
.favorite-item-v27{
  border-color:rgba(30,58,95,.14)!important;
  background:rgba(248,245,240,.86)!important;
}

@media(max-width:900px){
  .hero-card::after{display:none}
  .hero-mascot-main,.import-art-main,.page-art-strip img{
    filter:saturate(.82) brightness(1.04) !important;
  }
}
@media(max-width:720px){
  .hero-card{
    background:#fff;
  }
  .page-art-strip{
    background:#fff;
  }
  .page-art-strip img,
  .import-art-main{
    opacity:.84!important;
  }
}



/* SHIROHA_V28_1_BANK_MOBILE_LAYOUT_START
   题库管理移动端结构优化：当前题库上方统一选择，卡片只展示信息，单题库操作收进更多菜单。 */
.bank-manage-toolbar-v28{
  background:#fff;
  border:1px solid rgba(30,58,95,.16)!important;
  box-shadow:none;
}
.bank-current-bar-v28{
  display:grid;
  grid-template-columns:minmax(260px,360px) 1fr;
  gap:12px;
  align-items:end;
  margin:12px 0 14px;
}
.bank-current-bar-v28 label{
  display:grid;
  gap:6px;
  color:#27405f;
  font-weight:900;
}
.bank-current-bar-v28 select{
  width:100%;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(30,58,95,.18);
  color:#15305a;
}
.bank-toolbar-actions-v28{
  padding-top:2px;
}
.bank-list{
  display:grid;
  gap:12px;
}
.bank-item-compact-v28{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
  padding:18px!important;
  background:#fff;
  border:1px solid rgba(30,58,95,.13)!important;
  border-radius:20px!important;
  box-shadow:none;
}
.bank-item-compact-v28.active-bank{
  border-color:rgba(30,58,95,.32)!important;
  background:#fff;
}
.bank-item-compact-v28.selected-bank-v28{
  box-shadow:none;
}
.bank-card-check-v28{
  padding:2px 0 0!important;
}
.bank-card-check-v28 input{
  accent-color:var(--blue);
}
.bank-card-main-v28{
  min-width:0;
}
.bank-card-title-v28{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.bank-card-title-v28 b{
  font-size:18px;
  color:#10213d;
}
.bank-card-meta-v28{
  margin:0!important;
  line-height:1.75;
  overflow-wrap:anywhere;
}
.bank-more-menu-v28{
  position:relative;
  justify-self:end;
}
.bank-more-menu-v28 summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  border:1px solid rgba(30,58,95,.16);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--blue);
  font-weight:900;
  padding:8px 13px;
  box-shadow:none;
}
.bank-more-menu-v28 summary::-webkit-details-marker{
  display:none;
}
.bank-more-menu-v28[open] summary{
  background:var(--blue2);
}
.bank-more-panel-v28{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:20;
  width:150px;
  padding:8px;
  display:grid;
  gap:6px;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(30,58,95,.14);
  border-radius:16px;
  box-shadow:none;
}
.bank-more-panel-v28 button{
  width:100%;
  min-height:38px;
  padding:8px 10px;
}
@media(max-width:720px){
  .main{
    padding-bottom:12px!important;
  }
  .side{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
    overflow:visible!important;
    white-space:normal!important;
    max-width:calc(100vw - 20px)!important;
  }
  .side .nav{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    margin:0!important;
    padding:9px 6px!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:12px!important;
    line-height:1.15!important;
    border-radius:16px!important;
  }
  .side .nav.active{
    box-shadow:none;
  }
  .bank-current-bar-v28{
    grid-template-columns:1fr;
    gap:8px;
  }
  .bank-toolbar-actions-v28{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .bank-toolbar-actions-v28 .check-line-v23,
  .bank-toolbar-actions-v28 button{
    width:100%;
    justify-content:center;
  }
  .bank-item-compact-v28{
    grid-template-columns:auto minmax(0,1fr) auto;
    padding:16px!important;
  }
  .bank-card-title-v28 b{
    font-size:17px;
  }
  .bank-card-meta-v28{
    font-size:14px;
  }
  .bank-more-menu-v28{
    align-self:start;
  }
  .bank-more-menu-v28 summary{
    padding:7px 11px;
    font-size:12px;
  }
  .bank-more-panel-v28{
    position:fixed;
    right:18px;
    left:18px;
    bottom:calc(126px + env(safe-area-inset-bottom));
    top:auto;
    width:auto;
    grid-template-columns:1fr;
  }
}
@media(max-width:380px){
  .side{
    gap:6px!important;
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
  }
  .side .nav{
    font-size:11px!important;
    padding:8px 4px!important;
  }
}
/* SHIROHA_V28_1_BANK_MOBILE_LAYOUT_END */


/* SHIROHA_V28_2_ASSET_REFRESH_START
   首页与分页素材替换：统一蓝白云母亚克力风格，减少素材数量并提升融合度。 */
.hero-card,.import-stage-panel,.page-art-strip,.asset-reference-details{
  position:relative;
  border:1px solid rgba(59,130,246,.12)!important;
  background:
    #fff;
  box-shadow:none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero-card::after,.import-stage-panel::after,.page-art-strip::after{
  content:"";
  position:absolute;
  inset:auto -14% -32% auto;
  width:46%;
  aspect-ratio:1/1;
  border-radius:50%;
  background:transparent;
  pointer-events:none;
}
.hero-mascot-main,.import-art-main,.page-art-strip img,.asset-reference-details img{
  -webkit-mask-image:none!important;
  mask-image:none!important;
  background:none!important;
  border:none!important;
  box-shadow:none;
  opacity:.98!important;
  filter:  saturate(1.01) brightness(1.01)!important;
}
.hero-mascot-main{
  width:min(24vw,260px);
  max-width:260px;
}
.import-art-main{max-width:240px}
.page-art-strip img{
  object-fit:contain;
  max-height:164px;
}
.settings-art-strip img,.records-art-strip img{max-height:154px}
.wrongbook-art-strip img,.practice-art-strip img,.exam-art-strip img{max-height:168px}
.asset-reference-details summary{color:var(--blue)}
.asset-reference-details img{max-width:min(100%,460px)}
@media(max-width:720px){
  .hero-card,.import-stage-panel,.page-art-strip,.asset-reference-details{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .hero-mascot-main{
    width:min(50vw,220px);
    max-width:220px;
  }
  .import-art-main,.page-art-strip img{
    max-width:180px;
    max-height:132px;
  }
}
/* SHIROHA_V28_2_ASSET_REFRESH_END */


/* SHIROHA_V28_3_VISUAL_POLISH_START
   视觉目标：蓝白统一、云母亚克力质感、素材融入卡片；导入备份区域独立，不夹在普通题库导入流程中。 */
:root{
  --sq-blue:#1e3a5f;
  --sq-blue-2:#60a5fa;
  --sq-blue-soft:#e8e0d0;
  --sq-card-border:rgba(30,58,95,.13);
  --sq-card-shadow:0 18px 45px rgba(30,58,95,.07);
}
.hero-card{
  min-height:244px;
  align-items:center;
  background:
    #fff;
  border:1px solid var(--sq-card-border)!important;
  box-shadow:none;
  overflow:hidden;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    #fff;
  pointer-events:none;
}
.hero-card h1,
.hero-card h2{
  letter-spacing:-.02em;
}
.hero-card p{
  color:#5c7190;
}
.hero-visual-card{
  min-height:214px;
}
.hero-mascot-main{
  right:18px!important;
  bottom:-12px!important;
  width:min(25vw,278px)!important;
  max-width:278px!important;
  opacity:.97!important;
  transform:translateZ(0);
}
.hero-stats{
  position:relative;
  z-index:2;
}
.hero-stats div{
  border:1px solid rgba(30,58,95,.12)!important;
  background:rgba(255,255,255,.76)!important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.import-stage-panel{
  min-height:188px;
  border-radius:26px!important;
}
.import-art-main{
  width:min(22vw,250px)!important;
  max-width:250px!important;
  justify-self:end;
}
.page-art-strip{
  min-height:126px;
  padding:18px 22px!important;
  border-radius:24px!important;
}
.page-art-strip img{
  width:auto!important;
  max-width:230px!important;
  max-height:172px!important;
  object-fit:contain!important;
  align-self:center;
}
.practice-art-strip img,
.exam-art-strip img{
  max-width:260px!important;
  max-height:178px!important;
}
.wrongbook-art-strip img{
  max-width:220px!important;
  max-height:168px!important;
}
.records-art-strip img,
.settings-art-strip img{
  max-width:210px!important;
  max-height:154px!important;
}
.bank-art-strip img{
  max-width:210px!important;
  max-height:156px!important;
}
.backup-restore-card-v283{
  margin-top:18px;
  border:1px solid rgba(30,58,95,.13)!important;
  background:
    #fff;
  box-shadow:none;
}
.backup-restore-card-v283 .muted{
  color:#60738f;
  line-height:1.75;
}
.backup-import-grid-v283{
  grid-template-columns:1fr 1fr;
}
.backup-import-grid-v283 label:has(textarea),
.backup-import-grid-v283 label:nth-child(3){
  grid-column:1 / -1;
}
.backup-import-grid-v283 textarea{
  min-height:118px;
  resize:vertical;
}
.import-layout-v283 .backup-restore-card-v283{
  clear:both;
}
@media(max-width:900px){
  .hero-card{
    min-height:auto;
  }
  .hero-mascot-main{
    width:min(34vw,230px)!important;
    max-width:230px!important;
    right:4px!important;
  }
  .page-art-strip img{
    max-width:190px!important;
    max-height:144px!important;
  }
}
@media(max-width:720px){
  .hero-card{
    padding-bottom:18px!important;
  }
  .hero-mascot-main{
    position:relative!important;
    right:auto!important;
    bottom:auto!important;
    margin:8px auto -2px;
    width:min(58vw,210px)!important;
    max-width:210px!important;
  }
  .import-stage-panel{
    grid-template-columns:1fr!important;
  }
  .import-art-main{
    justify-self:center;
    width:min(58vw,190px)!important;
    max-width:190px!important;
  }
  .page-art-strip{
    grid-template-columns:1fr auto!important;
    gap:10px!important;
    padding:15px 16px!important;
  }
  .page-art-strip img{
    max-width:132px!important;
    max-height:118px!important;
  }
  .backup-import-grid-v283{
    grid-template-columns:1fr;
  }
}
@media(max-width:480px){
  .page-art-strip{
    grid-template-columns:1fr!important;
  }
  .page-art-strip img{
    justify-self:center;
    max-width:150px!important;
    max-height:126px!important;
  }
}
/* SHIROHA_V28_3_VISUAL_POLISH_END */


/* SHIROHA_V28_3_1_IMPORT_BACKUP_POSITION_START
   备份 JSON 导入保留在导入题库页底部，不再夹在普通题库导入、双文件导入和识别结果之间。 */
.backup-restore-bottom-v2831{
  margin-top:28px!important;
  border-style:dashed!important;
  background:
    #fff;
}
.backup-restore-bottom-v2831::before{
  content:"备份恢复";
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-bottom:10px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--blue2);
  color:var(--blue);
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
}
.import-layout-v283 .backup-restore-bottom-v2831{
  clear:both;
}
@media(max-width:720px){
  .backup-restore-bottom-v2831{
    margin-top:22px!important;
  }
}
/* SHIROHA_V28_3_1_IMPORT_BACKUP_POSITION_END */


/* SHIROHA_V28_3_3_IMPORT_ART_BG_FIX_START
   修复导入页素材右侧奇怪蓝色圆形背景，改为更干净的蓝白渐变，不干扰素材本身显示。 */
.import-stage-panel{
  background:
    #fff;
  overflow:hidden;
}
.import-stage-panel::before,
.import-stage-panel::after{
  content:none !important;
  display:none !important;
}
.import-art-main{
  position:relative;
  z-index:2;
  background:none !important;
  filter:  saturate(1.02) brightness(1.01) !important;
}
@media(max-width:720px){
  .import-stage-panel{
    background:
      #fff;
  }
}
/* SHIROHA_V28_3_3_IMPORT_ART_BG_FIX_END */


/* SHIROHA_V28_3_4_SAFE_PAGE_FIX_START
   安全修复：不再改写 index.html 的 section 结构，避免页面路由全部落到导入页。
   只通过样式修正导入页视觉和备份区域的呈现，不破坏页面切换。 */
.view{display:none}
.view.active{display:block}
.import-stage-panel{
  background:
    #fff;
  overflow:hidden;
}
.import-stage-panel::before,
.import-stage-panel::after{
  content:none !important;
  display:none !important;
}
.import-art-main{
  position:relative;
  z-index:2;
  background:none !important;
  filter:  saturate(1.02) brightness(1.01) !important;
}
/* 如果备份导入区域存在，降低它的视觉权重，避免看起来夹在主流程里。 */
.backup-restore-card-v283,
.backup-restore-bottom-v2831,
[id*="backup"][class*="card"],
.card:has(#backup-json-file),
.card:has(#backup-json-text),
.card:has(#import-backup-json-btn){
  margin-top:24px !important;
  border-style:dashed !important;
  background:#fff;
}
@media(max-width:720px){
  .import-stage-panel{
    background:
      #fff;
  }
}
/* SHIROHA_V28_3_4_SAFE_PAGE_FIX_END */


/* SHIROHA_V28_4_PRACTICE_ART_FIX_START
   修复刷题练习页素材背后的奇怪蓝色圆形区域，并让素材更大、更靠中。 */
.practice-art-strip{
  grid-template-columns:minmax(0,1fr) minmax(220px,360px) !important;
  align-items:center !important;
  background:
    #fff;
  overflow:hidden;
}
.practice-art-strip::before,
.practice-art-strip::after{
  content:none !important;
  display:none !important;
}
.practice-art-strip img{
  justify-self:center !important;
  width:min(28vw,340px) !important;
  max-width:340px !important;
  max-height:230px !important;
  margin-right:min(3vw,36px) !important;
  background:none !important;
  box-shadow:none;
  filter: saturate(1.02) brightness(1.01) !important;
}
@media(max-width:900px){
  .practice-art-strip{
    grid-template-columns:1fr auto !important;
  }
  .practice-art-strip img{
    width:min(36vw,250px) !important;
    max-width:250px !important;
    max-height:180px !important;
    margin-right:0 !important;
  }
}
@media(max-width:720px){
  .practice-art-strip{
    grid-template-columns:1fr !important;
    text-align:left;
    background:
      #fff;
  }
  .practice-art-strip img{
    justify-self:center !important;
    width:min(62vw,220px) !important;
    max-width:220px !important;
    max-height:160px !important;
  }
}
/* SHIROHA_V28_4_PRACTICE_ART_FIX_END */


/* SHIROHA_V28_4_1_CARD_ART_FIX_START
   修复插画卡片本身的蓝色气泡干扰；图片尺寸改为克制显示，保证素材完整、不挤压卡片。 */

/* 去掉插画卡片内部过重的圆形蓝色气泡，不再让背景块压到素材上。 */
.hero-card::after,
.hero-visual-card::before,
.hero-visual-card::after,
.import-stage-panel::before,
.import-stage-panel::after,
.page-art-strip::before,
.page-art-strip::after,
.practice-art-strip::before,
.practice-art-strip::after,
.exam-art-strip::before,
.exam-art-strip::after,
.wrongbook-art-strip::before,
.wrongbook-art-strip::after,
.records-art-strip::before,
.records-art-strip::after,
.settings-art-strip::before,
.settings-art-strip::after,
.bank-art-strip::before,
.bank-art-strip::after{
  content:none !important;
  display:none !important;
}

/* 统一改为干净的蓝白亚克力卡片底，而不是局部大蓝圆。 */
.hero-card,
.import-stage-panel,
.page-art-strip{
  background:
    #fff;
  border:1px solid rgba(30,58,95,.12) !important;
  box-shadow:none;
  overflow:hidden;
}

/* 插画完整显示：不再激进放大，不裁切，不硬塞。 */
.hero-mascot-main,
.import-art-main,
.page-art-strip img,
.asset-reference-details img{
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:none !important;
  box-shadow:none;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  filter: saturate(1.02) brightness(1.01) !important;
}

/* 首页可以稍大，但仍要完整显示。 */
.hero-mascot-main{
  max-width:min(23vw,250px) !important;
  max-height:250px !important;
  right:18px !important;
  bottom:0 !important;
}

/* 导入页与普通分页插画保持中等尺寸。 */
.import-art-main{
  max-width:min(21vw,220px) !important;
  max-height:190px !important;
  justify-self:center !important;
}

.page-art-strip{
  grid-template-columns:minmax(0,1fr) minmax(150px,220px) !important;
  min-height:118px !important;
  align-items:center !important;
  gap:16px !important;
}

.page-art-strip img{
  justify-self:center !important;
  max-width:200px !important;
  max-height:150px !important;
}

/* 刷题练习、考试页略强调，但不超过卡片高度。 */
.practice-art-strip img,
.exam-art-strip img{
  max-width:220px !important;
  max-height:160px !important;
  margin:0 !important;
}

/* 错题、记录、设置页更克制。 */
.wrongbook-art-strip img,
.records-art-strip img,
.settings-art-strip img,
.bank-art-strip img{
  max-width:188px !important;
  max-height:140px !important;
  margin:0 !important;
}

/* 题库管理、记录、设置等偏工具页，插画不抢内容。 */
.bank-art-strip,
.records-art-strip,
.settings-art-strip{
  min-height:108px !important;
}

/* App / 小屏幕：图片继续缩小，避免撑高卡片和遮挡内容。 */
@media(max-width:900px){
  .hero-mascot-main{
    max-width:min(32vw,210px) !important;
    max-height:210px !important;
  }
  .import-art-main{
    max-width:min(34vw,180px) !important;
    max-height:156px !important;
  }
  .page-art-strip img{
    max-width:160px !important;
    max-height:124px !important;
  }
  .practice-art-strip img,
  .exam-art-strip img{
    max-width:175px !important;
    max-height:132px !important;
  }
}

@media(max-width:720px){
  .hero-mascot-main{
    position:relative !important;
    right:auto !important;
    bottom:auto !important;
    margin:6px auto 0 !important;
    max-width:min(54vw,185px) !important;
    max-height:185px !important;
  }

  .import-stage-panel,
  .page-art-strip{
    grid-template-columns:1fr !important;
    min-height:auto !important;
  }

  .import-art-main,
  .page-art-strip img{
    max-width:min(54vw,150px) !important;
    max-height:122px !important;
    justify-self:center !important;
  }

  .practice-art-strip img,
  .exam-art-strip img{
    max-width:min(56vw,160px) !important;
    max-height:126px !important;
  }
}

/* SHIROHA_V28_4_1_CARD_ART_FIX_END */


/* SHIROHA_V28_4_2_ART_SIZE_TUNING_START
   按页面微调插画在卡片里的尺寸与位置：
   - 题库管理：缩小约20%
   - 刷题练习：放大约20%，并移到更居中的位置
   - 考试模式：适当缩小（原先偏大）
   - 刷题记录：缩小约20%
   - 错题本：缩小约10%
   - 设置/导出：缩小约20%
*/
.bank-art-strip img{
  max-width:150px !important;
  max-height:112px !important;
}

.practice-art-strip{
  grid-template-columns:minmax(0,1fr) minmax(180px,260px) !important;
}
.practice-art-strip img{
  justify-self:center !important;
  align-self:center !important;
  max-width:264px !important;
  max-height:192px !important;
  margin:0 auto !important;
}

.exam-art-strip img{
  max-width:188px !important;
  max-height:140px !important;
}

.records-art-strip img{
  max-width:150px !important;
  max-height:112px !important;
}

.wrongbook-art-strip img{
  max-width:170px !important;
  max-height:126px !important;
}

.settings-art-strip img{
  max-width:150px !important;
  max-height:112px !important;
}

/* 中尺寸屏幕 */
@media (max-width:900px){
  .bank-art-strip img{
    max-width:128px !important;
    max-height:96px !important;
  }

  .practice-art-strip{
    grid-template-columns:1fr auto !important;
  }
  .practice-art-strip img{
    max-width:210px !important;
    max-height:156px !important;
  }

  .exam-art-strip img{
    max-width:156px !important;
    max-height:118px !important;
  }

  .records-art-strip img,
  .settings-art-strip img{
    max-width:128px !important;
    max-height:96px !important;
  }

  .wrongbook-art-strip img{
    max-width:152px !important;
    max-height:114px !important;
  }
}

/* 手机端 */
@media (max-width:720px){
  .bank-art-strip img{
    max-width:min(44vw,120px) !important;
    max-height:92px !important;
  }

  .practice-art-strip img{
    max-width:min(62vw,190px) !important;
    max-height:144px !important;
  }

  .exam-art-strip img{
    max-width:min(50vw,142px) !important;
    max-height:108px !important;
  }

  .records-art-strip img,
  .settings-art-strip img{
    max-width:min(44vw,120px) !important;
    max-height:92px !important;
  }

  .wrongbook-art-strip img{
    max-width:min(48vw,136px) !important;
    max-height:102px !important;
  }
}
/* SHIROHA_V28_4_2_ART_SIZE_TUNING_END */


/* SHIROHA_V28_4_4_ART_BALANCE_START
   插画尺寸二次收敛：不再激进放大，保证素材在卡片里完整显示，并兼顾卡片高度。
   只调“图片在卡片中的显示尺寸和位置”，不替换素材。 */

/* 卡片底统一为干净蓝白，不再使用圆形气泡背景。 */
.hero-card::after,
.hero-visual-card::before,
.hero-visual-card::after,
.import-stage-panel::before,
.import-stage-panel::after,
.page-art-strip::before,
.page-art-strip::after,
.practice-art-strip::before,
.practice-art-strip::after,
.exam-art-strip::before,
.exam-art-strip::after,
.wrongbook-art-strip::before,
.wrongbook-art-strip::after,
.records-art-strip::before,
.records-art-strip::after,
.settings-art-strip::before,
.settings-art-strip::after,
.bank-art-strip::before,
.bank-art-strip::after{
  content:none !important;
  display:none !important;
}

.hero-card,
.import-stage-panel,
.page-art-strip{
  background:
    #fff;
  border:1px solid rgba(30,58,95,.12) !important;
  box-shadow:none;
  overflow:hidden;
}

/* 基础规则：完整显示，不裁切，不强行撑满。 */
.hero-mascot-main,
.import-art-main,
.page-art-strip img,
.asset-reference-details img{
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:none !important;
  box-shadow:none;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  filter: saturate(1.02) brightness(1.01) !important;
}

/* 首页：略有存在感，但不压文字。 */
.hero-mascot-main{
  max-width:min(22vw,235px) !important;
  max-height:235px !important;
  right:18px !important;
  bottom:2px !important;
}

/* 导入页：中等偏小，避免右侧素材抢主体流程。 */
.import-art-main{
  max-width:min(20vw,205px) !important;
  max-height:170px !important;
  justify-self:center !important;
}

/* 通用分页插画：先收敛到适中比例。 */
.page-art-strip{
  grid-template-columns:minmax(0,1fr) minmax(140px,205px) !important;
  min-height:112px !important;
  align-items:center !important;
  gap:14px !important;
}

.page-art-strip img{
  justify-self:center !important;
  max-width:180px !important;
  max-height:132px !important;
  margin:0 !important;
}

/* 题库管理：偏大，缩小约20%。 */
.bank-art-strip img{
  max-width:144px !important;
  max-height:108px !important;
}

/* 刷题练习：使用原学习素材，但不再激进放大；居中显示。 */
.practice-art-strip{
  grid-template-columns:minmax(0,1fr) minmax(155px,215px) !important;
}
.practice-art-strip img{
  justify-self:center !important;
  align-self:center !important;
  max-width:205px !important;
  max-height:150px !important;
  margin:0 auto !important;
}

/* 考试模式：偏大，缩小一些。 */
.exam-art-strip img{
  max-width:166px !important;
  max-height:122px !important;
}

/* 错题本：缩小约10%。 */
.wrongbook-art-strip img{
  max-width:162px !important;
  max-height:120px !important;
}

/* 刷题记录：缩小约20%。 */
.records-art-strip img{
  max-width:144px !important;
  max-height:108px !important;
}

/* 设置/导出：缩小约20%。 */
.settings-art-strip img{
  max-width:144px !important;
  max-height:108px !important;
}

/* 工具型页面卡片高度不被图片撑高。 */
.bank-art-strip,
.records-art-strip,
.settings-art-strip{
  min-height:104px !important;
}

/* 中屏。 */
@media(max-width:900px){
  .hero-mascot-main{
    max-width:min(30vw,195px) !important;
    max-height:195px !important;
  }
  .import-art-main{
    max-width:min(30vw,160px) !important;
    max-height:136px !important;
  }
  .page-art-strip img{
    max-width:148px !important;
    max-height:112px !important;
  }
  .practice-art-strip img{
    max-width:174px !important;
    max-height:128px !important;
  }
  .exam-art-strip img{
    max-width:142px !important;
    max-height:106px !important;
  }
  .bank-art-strip img,
  .records-art-strip img,
  .settings-art-strip img{
    max-width:122px !important;
    max-height:92px !important;
  }
  .wrongbook-art-strip img{
    max-width:138px !important;
    max-height:104px !important;
  }
}

/* 手机端：优先保证卡片完整和内容可读。 */
@media(max-width:720px){
  .hero-mascot-main{
    position:relative !important;
    right:auto !important;
    bottom:auto !important;
    margin:6px auto 0 !important;
    max-width:min(50vw,170px) !important;
    max-height:170px !important;
  }

  .import-stage-panel,
  .page-art-strip{
    grid-template-columns:1fr !important;
    min-height:auto !important;
  }

  .import-art-main,
  .page-art-strip img{
    justify-self:center !important;
    max-width:min(50vw,132px) !important;
    max-height:104px !important;
  }

  .practice-art-strip img{
    max-width:min(54vw,150px) !important;
    max-height:112px !important;
  }

  .exam-art-strip img{
    max-width:min(48vw,128px) !important;
    max-height:96px !important;
  }

  .bank-art-strip img,
  .records-art-strip img,
  .settings-art-strip img{
    max-width:min(42vw,112px) !important;
    max-height:84px !important;
  }

  .wrongbook-art-strip img{
    max-width:min(45vw,126px) !important;
    max-height:94px !important;
  }
}
/* SHIROHA_V28_4_4_ART_BALANCE_END */


/* SHIROHA_V28_4_6_TITLE_AND_ART_BG_FIX_START
   修复页面双标题重复感：通过差异化内卡标题减弱重复；
   同时将分页插画区右侧背景统一为白色，不再使用淡蓝色块。 */
.page-art-strip,
.practice-art-strip,
.exam-art-strip,
.wrongbook-art-strip,
.records-art-strip,
.settings-art-strip,
.bank-art-strip{
  background:#ffffff !important;
  background-image:none !important;
  border:1px solid rgba(30,58,95,.08) !important;
  box-shadow:none;
}
.page-art-strip::before,
.page-art-strip::after,
.practice-art-strip::before,
.practice-art-strip::after,
.exam-art-strip::before,
.exam-art-strip::after,
.wrongbook-art-strip::before,
.wrongbook-art-strip::after,
.records-art-strip::before,
.records-art-strip::after,
.settings-art-strip::before,
.settings-art-strip::after,
.bank-art-strip::before,
.bank-art-strip::after{
  content:none !important;
  display:none !important;
}
.section-head .kicker + h2{
  letter-spacing:.01em;
}
/* SHIROHA_V28_4_6_TITLE_AND_ART_BG_FIX_END */


/* SHIROHA_V28_4_7_REMOVE_OUTER_TITLE_START
   直接移除顶部外层页面标题区域，仅保留右侧题库选择与保存数据操作。 */
.topbar{
  justify-content:flex-end !important;
  gap:16px !important;
}
.topbar > div:first-child{
  display:none !important;
}
.topbar .top-actions{
  margin-left:auto !important;
}
@media (max-width:720px){
  .topbar{
    padding-top:4px !important;
    padding-bottom:10px !important;
  }
}
/* SHIROHA_V28_4_7_REMOVE_OUTER_TITLE_END */


/* SHIROHA_V28_4_8_APP_READABILITY_NAV_START
   App 成品界面修正：
   1) 隐藏开发阶段用于说明素材/布局的小字提示；
   2) 移动端表单不再横向溢出卡片；
   3) 底部导航做成更清晰的两排浅蓝选中态。 */

/* 页面素材说明文字属于开发提示，成品隐藏；保留标题、按钮、表单标签。 */
.page-art-strip span,
.import-stage-copy p,
.hero-card > div > p:not(.kicker),
.asset-reference-details summary + img + p,
.data-tool-card-v23 > .muted,
.backup-restore-card-v283 > .muted{
  display:none !important;
}

/* 导入/考试/练习页插画卡只保留简短主标题和步骤按钮，不显示解释性小字。 */
.import-stage-copy b,
.page-art-strip b{
  display:block !important;
  color:#10233f !important;
  line-height:1.35 !important;
}

/* 移动端表单输入框、选择框不能超出白色卡片。 */
.form-grid,
.split-grid,
.bank-current-bar-v28,
.backup-import-grid-v283{
  min-width:0 !important;
}

.form-grid label,
.split-grid label,
.bank-current-bar-v28 label,
.backup-import-grid-v283 label{
  min-width:0 !important;
  overflow:hidden !important;
}

input,
select,
textarea,
button{
  max-width:100% !important;
  box-sizing:border-box !important;
}

.card,
.hero-card,
.import-stage-panel,
.page-art-strip,
.data-tool-card-v23{
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* 移动端留出底部导航安全距离，防止最后一个输入框被挡住。 */
@media(max-width:720px){
  body{
    padding-bottom:calc(148px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .main{
    padding-bottom:calc(152px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .form-grid,
  .split-grid{
    grid-template-columns:1fr !important;
  }

  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .split-grid input,
  .split-grid select,
  .split-grid textarea{
    width:100% !important;
  }

  /* App 底部导航：固定两排，浅蓝色选中态，颜色区分更明显。 */
  .mobile-bottom-nav,
  .bottom-nav,
  nav.mobile-nav{
    position:fixed !important;
    left:16px !important;
    right:16px !important;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    z-index:1000 !important;
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:8px 8px !important;
    padding:14px 14px !important;
    border-radius:28px !important;
    background:rgba(255,255,255,.94) !important;
    border:1px solid rgba(30,58,95,.10) !important;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    overflow:hidden !important;
  }

  .mobile-bottom-nav .nav,
  .bottom-nav .nav,
  nav.mobile-nav .nav,
  .mobile-bottom-nav button,
  .bottom-nav button,
  nav.mobile-nav button{
    min-width:0 !important;
    width:100% !important;
    min-height:58px !important;
    padding:8px 4px !important;
    border-radius:18px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    color:#53657d !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none;
    font-size:13px !important;
    line-height:1.2 !important;
    font-weight:750 !important;
    white-space:nowrap !important;
  }

  .mobile-bottom-nav .nav.active,
  .bottom-nav .nav.active,
  nav.mobile-nav .nav.active,
  .mobile-bottom-nav button.active,
  .bottom-nav button.active,
  nav.mobile-nav button.active{
    background:#fff;
    color:var(--blue) !important;
    box-shadow:none;
  }

  .mobile-bottom-nav svg,
  .bottom-nav svg,
  nav.mobile-nav svg{
    width:22px !important;
    height:22px !important;
    stroke-width:2.2 !important;
  }

  .mobile-bottom-nav .nav.active svg,
  .bottom-nav .nav.active svg,
  nav.mobile-nav .nav.active svg{
    color:var(--blue) !important;
    stroke:var(--blue) !important;
  }
}

/* 兼容旧的侧边栏在移动端变成底部导航的实现。 */
@media(max-width:720px){
  .sidebar .nav{
    border-radius:18px !important;
  }
  .sidebar .nav.active{
    background:#fff;
    color:var(--blue) !important;
    box-shadow:none;
  }
}
/* SHIROHA_V28_4_8_APP_READABILITY_NAV_END */


/* SHIROHA_V28_4_11_MOBILE_PERF_START
   移动端性能优化：
   - 导航切换不再触发全量 renderAll；
   - 移动端禁用/弱化 blur、backdrop-filter、大阴影和过多动画；
   - 保持蓝白风格，但减少 WebView 合成层压力。 */
@media (max-width: 720px){
  *{
    scroll-behavior:auto !important;
  }

  .card,
  .hero-card,
  .page-art-strip,
  .import-stage-panel,
  .data-tool-card-v23,
  .bank-card,
  .question-card,
  .mobile-bottom-nav,
  .bottom-nav,
  nav.mobile-nav,
  .sidebar{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .card,
  .hero-card,
  .page-art-strip,
  .import-stage-panel,
  .data-tool-card-v23{
    box-shadow:none;
  }

  .mobile-bottom-nav,
  .bottom-nav,
  nav.mobile-nav,
  .sidebar{
    box-shadow:none;
  }

  .hero-mascot-main,
  .import-art-main,
  .page-art-strip img,
  .asset-reference-details img{
    filter:none !important;
  }

  .view{
    transition:none !important;
    animation:none !important;
  }

  .nav,
  button,
  .card,
  .page-art-strip,
  .import-stage-panel{
    transition:background-color .12s ease, color .12s ease, border-color .12s ease !important;
  }

  .mobile-bottom-nav .nav.active,
  .bottom-nav .nav.active,
  nav.mobile-nav .nav.active,
  .sidebar .nav.active{
    box-shadow:none;
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
/* SHIROHA_V28_4_11_MOBILE_PERF_END */

/* SHIROHA_V28_2_DUAL_LAYOUT_REFINEMENT_START
   双端通用精修：稳定移动端页面位置、收紧底部导航、统一角色素材落点。 */
@media(max-width:720px){
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    background:#fff;
  }

  .main{
    padding:16px 18px calc(174px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .view.active{
    min-width:0 !important;
    padding-bottom:18px !important;
  }

  .topbar{
    position:relative !important;
    top:auto !important;
    z-index:8 !important;
    margin:0 4px 22px !important;
    padding:12px 16px !important;
    border-radius:28px !important;
    border:1px solid rgba(30,58,95,.08) !important;
    background:rgba(255,255,255,.965) !important;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .topbar .top-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin:0 !important;
  }

  .topbar .top-actions select,
  .topbar .top-actions button{
    width:100% !important;
    min-height:54px !important;
    border-radius:18px !important;
  }

  .topbar .top-actions select{
    text-align:center !important;
    text-align-last:center !important;
    padding-left:14px !important;
    padding-right:34px !important;
  }

  .card,
  .hero-card{
    padding:22px 26px !important;
    margin-bottom:22px !important;
    border-radius:28px !important;
    border:1px solid rgba(30,58,95,.09) !important;
    background:rgba(255,255,255,.985) !important;
    box-shadow:none;
  }

  .section-head{
    align-items:flex-start !important;
    gap:12px !important;
    margin-bottom:16px !important;
  }

  .section-head > .actions,
  .section-head > .row-actions{
    width:100% !important;
  }

  .section-head > button{
    width:auto !important;
    align-self:flex-start !important;
  }

  .form-grid,
  .split-grid{
    gap:16px !important;
    margin-bottom:18px !important;
  }

  label{
    gap:9px !important;
    font-size:16px !important;
    color:#263a53 !important;
  }

  input,
  select{
    min-height:54px !important;
    border-radius:18px !important;
    border-color:rgba(30,58,95,.12) !important;
  }

  textarea{
    border-radius:20px !important;
    border-color:rgba(30,58,95,.12) !important;
  }

  .actions button,
  .row-actions button,
  .primary,
  .ghost,
  .danger{
    min-height:52px !important;
    border-radius:18px !important;
  }

  .side,
  .mobile-bottom-nav,
  .bottom-nav,
  nav.mobile-nav{
    position:fixed !important;
    left:18px !important;
    right:18px !important;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    z-index:1000 !important;
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:6px 8px !important;
    width:auto !important;
    max-width:calc(100vw - 36px) !important;
    height:auto !important;
    padding:12px !important;
    border-radius:30px !important;
    border:1px solid rgba(30,58,95,.08) !important;
    background:rgba(255,255,255,.965) !important;
    box-shadow:none;
    overflow:hidden !important;
    white-space:normal !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .side .brand{
    display:none !important;
  }

  .side .nav,
  .mobile-bottom-nav .nav,
  .bottom-nav .nav,
  nav.mobile-nav .nav,
  .mobile-bottom-nav button,
  .bottom-nav button,
  nav.mobile-nav button{
    width:100% !important;
    min-width:0 !important;
    min-height:46px !important;
    padding:6px 2px !important;
    margin:0 !important;
    border-radius:18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    color:#3d4f66 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none;
    font-size:13px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    white-space:nowrap !important;
  }

  .side .nav.active,
  .mobile-bottom-nav .nav.active,
  .bottom-nav .nav.active,
  nav.mobile-nav .nav.active,
  .mobile-bottom-nav button.active,
  .bottom-nav button.active,
  nav.mobile-nav button.active{
    color:var(--blue) !important;
    background:#fff;
    box-shadow:none;
  }

  .import-stage-panel{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 128px !important;
    align-items:center !important;
    min-height:136px !important;
    padding:18px 18px 16px !important;
    gap:8px !important;
    border-radius:26px !important;
    background:#fff !important;
    border:1px solid rgba(30,58,95,.09) !important;
    box-shadow:none;
  }

  .import-stage-copy{
    min-width:0 !important;
    position:relative !important;
    z-index:2 !important;
  }

  .import-stage-copy b{
    font-size:16px !important;
    line-height:1.38 !important;
  }

  .import-stage-tags{
    gap:8px !important;
    margin-top:14px !important;
  }

  .stage-tag{
    min-height:34px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    font-size:12px !important;
  }

  .import-stage-art{
    min-height:100px !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:flex-end !important;
    overflow:hidden !important;
  }

  .import-art-main{
    position:relative !important;
    right:auto !important;
    bottom:auto !important;
    justify-self:end !important;
    align-self:end !important;
    max-width:126px !important;
    max-height:106px !important;
    margin:0 -2px -6px 0 !important;
    object-fit:contain !important;
    object-position:center bottom !important;
  }

  .page-art-strip,
  .practice-art-strip,
  .exam-art-strip,
  .wrongbook-art-strip,
  .records-art-strip,
  .settings-art-strip,
  .bank-art-strip{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 122px !important;
    align-items:center !important;
    min-height:78px !important;
    max-height:88px !important;
    padding:12px 12px 12px 18px !important;
    gap:8px !important;
    border-radius:26px !important;
    background:#fff !important;
    border:1px solid rgba(30,58,95,.08) !important;
    box-shadow:none;
    overflow:hidden !important;
  }

  .page-art-strip > div,
  .practice-art-strip > div,
  .exam-art-strip > div,
  .wrongbook-art-strip > div,
  .records-art-strip > div,
  .settings-art-strip > div,
  .bank-art-strip > div{
    min-width:0 !important;
    position:relative !important;
    z-index:2 !important;
  }

  .page-art-strip b,
  .practice-art-strip b,
  .exam-art-strip b,
  .wrongbook-art-strip b,
  .records-art-strip b,
  .settings-art-strip b,
  .bank-art-strip b{
    font-size:15px !important;
    line-height:1.35 !important;
    white-space:normal !important;
  }

  .page-art-strip img,
  .practice-art-strip img,
  .exam-art-strip img,
  .wrongbook-art-strip img,
  .records-art-strip img,
  .settings-art-strip img,
  .bank-art-strip img{
    justify-self:end !important;
    align-self:center !important;
    width:auto !important;
    height:auto !important;
    max-width:124px !important;
    max-height:92px !important;
    margin:0 -8px -4px 0 !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    filter:none !important;
  }

  .practice-art-strip img{
    max-width:132px !important;
    max-height:98px !important;
  }

  .exam-art-strip img,
  .wrongbook-art-strip img{
    max-width:128px !important;
    max-height:94px !important;
  }

  .bank-art-strip img,
  .records-art-strip img,
  .settings-art-strip img{
    max-width:118px !important;
    max-height:88px !important;
  }
}

@media(max-width:380px){
  .main{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  .card,
  .hero-card{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  .side,
  .mobile-bottom-nav,
  .bottom-nav,
  nav.mobile-nav{
    left:14px !important;
    right:14px !important;
    max-width:calc(100vw - 28px) !important;
    gap:5px 6px !important;
    padding:10px !important;
  }
  .side .nav,
  .mobile-bottom-nav .nav,
  .bottom-nav .nav,
  nav.mobile-nav .nav,
  .mobile-bottom-nav button,
  .bottom-nav button,
  nav.mobile-nav button{
    min-height:44px !important;
    font-size:12px !important;
  }
  .import-stage-panel{
    grid-template-columns:minmax(0,1fr) 108px !important;
  }
  .import-art-main{
    max-width:108px !important;
  }
  .page-art-strip,
  .practice-art-strip,
  .exam-art-strip,
  .wrongbook-art-strip,
  .records-art-strip,
  .settings-art-strip,
  .bank-art-strip{
    grid-template-columns:minmax(0,1fr) 104px !important;
  }
  .page-art-strip img,
  .practice-art-strip img,
  .exam-art-strip img,
  .wrongbook-art-strip img,
  .records-art-strip img,
  .settings-art-strip img,
  .bank-art-strip img{
    max-width:106px !important;
  }
}
/* SHIROHA_V28_2_DUAL_LAYOUT_REFINEMENT_END */


/* SHIROHA_APP_V28_5_STAGE_CARD_COMPACT_START
   App 专属：除首页外，将角色说明区收束为更靠上的扁平卡片，参考导入页节奏，节省练习/考试等页面上方空白。 */
@media(max-width:720px){
  #banks.view > .card:first-child,
  #practice.view > .card:first-child,
  #exam.view > .card:first-child,
  #wrongbook.view > .card:first-child,
  #records.view > .card:first-child,
  #settings.view > .card:first-child{
    padding-top:22px !important;
  }

  #banks .section-head,
  #practice .section-head,
  #exam .section-head,
  #wrongbook .section-head,
  #records .section-head,
  #settings .section-head{
    margin-bottom:10px !important;
    align-items:flex-start !important;
  }

  #banks .section-head h2,
  #practice .section-head h2,
  #exam .section-head h2,
  #wrongbook .section-head h2,
  #records .section-head h2,
  #settings h2{
    line-height:1.14 !important;
  }

  #banks .page-art-strip,
  #practice .page-art-strip,
  #exam .page-art-strip,
  #wrongbook .page-art-strip,
  #records .page-art-strip,
  #settings .page-art-strip{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 132px !important;
    min-height:76px !important;
    height:76px !important;
    padding:10px 14px 10px 16px !important;
    margin:4px 0 18px !important;
    border-radius:22px !important;
    align-items:center !important;
    gap:10px !important;
    background:#fff !important;
    background-image:none !important;
    border:1px solid rgba(30,58,95,.10) !important;
    box-shadow:none;
    overflow:hidden !important;
  }

  #banks .page-art-strip b,
  #practice .page-art-strip b,
  #exam .page-art-strip b,
  #wrongbook .page-art-strip b,
  #records .page-art-strip b,
  #settings .page-art-strip b{
    font-size:17px !important;
    line-height:1.28 !important;
    color:#10233f !important;
    margin:0 !important;
    letter-spacing:-.01em !important;
  }

  #banks .page-art-strip span,
  #practice .page-art-strip span,
  #exam .page-art-strip span,
  #wrongbook .page-art-strip span,
  #records .page-art-strip span,
  #settings .page-art-strip span{
    display:none !important;
  }

  #banks .page-art-strip img,
  #practice .page-art-strip img,
  #exam .page-art-strip img,
  #wrongbook .page-art-strip img,
  #records .page-art-strip img,
  #settings .page-art-strip img{
    justify-self:end !important;
    align-self:center !important;
    width:auto !important;
    height:auto !important;
    max-width:138px !important;
    max-height:112px !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    margin:0 -4px -14px 0 !important;
    filter:none !important;
    background:none !important;
  }

  #practice .page-art-strip,
  #exam .page-art-strip{
    min-height:72px !important;
    height:72px !important;
    margin-top:0 !important;
    margin-bottom:16px !important;
  }

  #practice .page-art-strip img,
  #exam .page-art-strip img{
    max-width:150px !important;
    max-height:120px !important;
    margin-right:-8px !important;
    margin-bottom:-18px !important;
  }

  #settings .page-art-strip img,
  #records .page-art-strip img,
  #banks .page-art-strip img{
    max-width:132px !important;
    max-height:106px !important;
  }

  #wrongbook .page-art-strip img{
    max-width:144px !important;
    max-height:112px !important;
  }

  #practice .form-grid,
  #exam .form-grid,
  #banks .form-grid,
  #wrongbook .form-grid,
  #records .form-grid{
    margin-top:0 !important;
  }
}

@media(max-width:380px){
  #banks .page-art-strip,
  #practice .page-art-strip,
  #exam .page-art-strip,
  #wrongbook .page-art-strip,
  #records .page-art-strip,
  #settings .page-art-strip{
    grid-template-columns:minmax(0,1fr) 112px !important;
    padding-left:14px !important;
    padding-right:10px !important;
  }
  #banks .page-art-strip b,
  #practice .page-art-strip b,
  #exam .page-art-strip b,
  #wrongbook .page-art-strip b,
  #records .page-art-strip b,
  #settings .page-art-strip b{
    font-size:16px !important;
  }
  #banks .page-art-strip img,
  #practice .page-art-strip img,
  #exam .page-art-strip img,
  #wrongbook .page-art-strip img,
  #records .page-art-strip img,
  #settings .page-art-strip img{
    max-width:116px !important;
  }
}
/* SHIROHA_APP_V28_5_STAGE_CARD_COMPACT_END */

/* SHIROHA_APP_V28_6_TITLE_ACTION_ART_TIGHTEN_START
   App 专属：标题区右上角化、首页版本卡片收紧、插画白底和素材缩小，避免文字/图片被挤压。 */
@media(max-width:720px){
  /* 首页版本卡片：标题单行、整体收紧 */
  #dashboard .hero-card{
    padding:18px 22px 20px !important;
    margin-bottom:16px !important;
    display:block !important;
  }
  #dashboard .hero-card > div:first-child{
    margin:0 0 14px !important;
  }
  #dashboard .hero-card h2{
    display:block !important;
    width:100% !important;
    font-size:clamp(27px,7.05vw,31px) !important;
    line-height:1.12 !important;
    letter-spacing:-.045em !important;
    white-space:nowrap !important;
    overflow:visible !important;
    margin:6px 0 0 !important;
  }
  #dashboard .hero-card .kicker{
    margin-bottom:4px !important;
  }
  #dashboard .hero-stats-app{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    align-items:stretch !important;
  }
  #dashboard .hero-visual-card{
    grid-column:1/-1 !important;
    min-height:158px !important;
    max-height:166px !important;
    padding:10px !important;
    border-radius:22px !important;
    background:#fff !important;
    background-image:none !important;
    overflow:hidden !important;
  }
  #dashboard .hero-visual-card::before,
  #dashboard .hero-visual-card::after{
    display:none !important;
    content:none !important;
  }
  #dashboard .hero-mascot-main{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    bottom:8px !important;
    transform:translateX(-50%) !important;
    width:auto !important;
    max-width:154px !important;
    max-height:140px !important;
    object-fit:contain !important;
    object-position:center center !important;
    margin:0 !important;
  }
  #dashboard .hero-stats-app > div:not(.hero-visual-card){
    min-width:0 !important;
    padding:13px 10px !important;
    border-radius:18px !important;
  }
  #dashboard .hero-stats-app > div:not(.hero-visual-card) b{
    font-size:28px !important;
    line-height:1 !important;
    margin-bottom:6px !important;
  }
  #dashboard .hero-stats-app > div:not(.hero-visual-card) span{
    font-size:12px !important;
    line-height:1.25 !important;
  }

  /* 所有页面标题下方的小功能区移动到右上角 */
  .section-head,
  #settings.view > .card:first-child > h2{
    position:relative !important;
  }
  .section-head{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:10px !important;
    margin-bottom:10px !important;
  }
  .section-head > div:first-child{
    min-width:0 !important;
    flex:1 1 auto !important;
  }
  .section-head .kicker{
    margin-bottom:4px !important;
  }
  .section-head h2{
    margin:0 !important;
    line-height:1.12 !important;
    letter-spacing:-.02em !important;
  }
  .section-head > button,
  .section-head > .pill,
  .section-head > .actions,
  .section-head > .row-actions{
    flex:0 0 auto !important;
    width:auto !important;
    align-self:flex-start !important;
    margin:26px 0 0 !important;
  }
  .section-head > button,
  .section-head > .pill{
    min-height:38px !important;
    padding:0 14px !important;
    border-radius:16px !important;
    font-size:14px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  #wrongbook .section-head > button,
  #records .section-head .danger{
    min-height:38px !important;
    padding:0 14px !important;
    border-radius:15px !important;
    font-size:14px !important;
  }
  #records .section-head > .actions{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    margin-top:24px !important;
  }
  #records .section-head > .actions button{
    width:auto !important;
    min-height:36px !important;
    padding:0 10px !important;
    border-radius:14px !important;
    font-size:12px !important;
    white-space:nowrap !important;
  }

  /* 导入页阶段卡片：上移、白底、文字不分行、图片缩小 */
  .import-stage-panel{
    grid-template-columns:minmax(0,1fr) 106px !important;
    min-height:112px !important;
    padding:14px 14px 12px 16px !important;
    margin:2px 0 16px !important;
    gap:8px !important;
    background:#fff !important;
    background-image:none !important;
    border-radius:22px !important;
  }
  .import-stage-panel::before,
  .import-stage-panel::after{
    display:none !important;
    content:none !important;
  }
  .import-stage-copy b{
    font-size:16px !important;
    line-height:1.18 !important;
    white-space:nowrap !important;
    letter-spacing:-.02em !important;
    margin-bottom:10px !important;
  }
  .import-stage-art{
    min-height:88px !important;
    align-items:center !important;
    justify-content:center !important;
    background:#fff !important;
  }
  .import-art-main{
    max-width:102px !important;
    max-height:86px !important;
    margin:0 !important;
    object-fit:contain !important;
    object-position:center center !important;
  }
  .import-stage-tags{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
    margin-top:8px !important;
    max-width:116px !important;
  }
  .stage-tag{
    min-height:30px !important;
    padding:0 10px !important;
    font-size:12px !important;
    justify-content:center !important;
  }

  /* 其他角色卡片：白底、文字单行、素材稍微缩小，防止遮挡 */
  .page-art-strip,
  .practice-art-strip,
  .exam-art-strip,
  .wrongbook-art-strip,
  .records-art-strip,
  .settings-art-strip,
  .bank-art-strip{
    grid-template-columns:minmax(0,1fr) 104px !important;
    min-height:70px !important;
    height:70px !important;
    max-height:76px !important;
    padding:10px 12px 10px 16px !important;
    margin:2px 0 16px !important;
    border-radius:22px !important;
    background:#fff !important;
    background-image:none !important;
    overflow:hidden !important;
  }
  .page-art-strip::before,
  .page-art-strip::after,
  .practice-art-strip::before,
  .practice-art-strip::after,
  .exam-art-strip::before,
  .exam-art-strip::after,
  .wrongbook-art-strip::before,
  .wrongbook-art-strip::after,
  .records-art-strip::before,
  .records-art-strip::after,
  .settings-art-strip::before,
  .settings-art-strip::after,
  .bank-art-strip::before,
  .bank-art-strip::after{
    display:none !important;
    content:none !important;
  }
  .page-art-strip > div,
  .practice-art-strip > div,
  .exam-art-strip > div,
  .wrongbook-art-strip > div,
  .records-art-strip > div,
  .settings-art-strip > div,
  .bank-art-strip > div{
    min-width:0 !important;
    overflow:visible !important;
  }
  .page-art-strip b,
  .practice-art-strip b,
  .exam-art-strip b,
  .wrongbook-art-strip b,
  .records-art-strip b,
  .settings-art-strip b,
  .bank-art-strip b{
    display:block !important;
    font-size:15px !important;
    line-height:1.16 !important;
    white-space:nowrap !important;
    letter-spacing:-.02em !important;
    margin:0 !important;
  }
  .page-art-strip span,
  .practice-art-strip span,
  .exam-art-strip span,
  .wrongbook-art-strip span,
  .records-art-strip span,
  .settings-art-strip span,
  .bank-art-strip span{
    display:none !important;
  }
  .page-art-strip img,
  .practice-art-strip img,
  .exam-art-strip img,
  .wrongbook-art-strip img,
  .records-art-strip img,
  .settings-art-strip img,
  .bank-art-strip img{
    justify-self:end !important;
    align-self:center !important;
    max-width:104px !important;
    max-height:80px !important;
    margin:0 !important;
    object-fit:contain !important;
    object-position:center center !important;
    filter:none !important;
    background:transparent !important;
  }
  #practice .page-art-strip img,
  #exam .page-art-strip img,
  #wrongbook .page-art-strip img{
    max-width:108px !important;
    max-height:84px !important;
  }

  #banks .form-grid,
  #practice .form-grid,
  #exam .form-grid,
  #wrongbook .form-grid,
  #records .form-grid,
  #settings .form-grid{
    margin-top:0 !important;
  }
}

@media(max-width:380px){
  #dashboard .hero-card h2{
    font-size:26px !important;
    letter-spacing:-.055em !important;
  }
  .import-stage-panel{
    grid-template-columns:minmax(0,1fr) 96px !important;
    padding-left:14px !important;
    padding-right:10px !important;
  }
  .import-stage-copy b{
    font-size:15px !important;
  }
  .import-art-main{
    max-width:92px !important;
    max-height:78px !important;
  }
  .page-art-strip,
  .practice-art-strip,
  .exam-art-strip,
  .wrongbook-art-strip,
  .records-art-strip,
  .settings-art-strip,
  .bank-art-strip{
    grid-template-columns:minmax(0,1fr) 92px !important;
    padding-left:14px !important;
    padding-right:10px !important;
  }
  .page-art-strip b,
  .practice-art-strip b,
  .exam-art-strip b,
  .wrongbook-art-strip b,
  .records-art-strip b,
  .settings-art-strip b,
  .bank-art-strip b{
    font-size:14px !important;
    letter-spacing:-.035em !important;
  }
  .page-art-strip img,
  .practice-art-strip img,
  .exam-art-strip img,
  .wrongbook-art-strip img,
  .records-art-strip img,
  .settings-art-strip img,
  .bank-art-strip img{
    max-width:92px !important;
    max-height:76px !important;
  }
  .section-head > button,
  .section-head > .pill{
    font-size:13px !important;
    padding:0 11px !important;
  }
  #records .section-head > .actions button{
    font-size:11px !important;
    padding:0 8px !important;
  }
}
/* SHIROHA_APP_V28_6_TITLE_ACTION_ART_TIGHTEN_END */

/* SHIROHA_APP_V28_7_TOP_RIGHT_ART_START
   App 专属：在顶部右侧空白区补充压缩后的行走素材，并统一顶部为蓝白柔和风格。 */
.app-mobile-top-art{
  display:none;
}

@media(max-width:720px){
  html,
  body{
    background:#fff;
  }

  .app-mobile-top-art{
    display:block !important;
    position:fixed !important;
    top:72px !important;
    right:22px !important;
    z-index:998 !important;
    width:min(34vw,150px) !important;
    height:50px !important;
    padding:2px 8px !important;
    border-radius:20px !important;
    background:#fff;
    border:1px solid rgba(30,58,95,.08) !important;
    box-shadow:none;
    object-fit:contain !important;
    object-position:center center !important;
    pointer-events:none !important;
    user-select:none !important;
    opacity:.96 !important;
  }

  /* 顶部题库选择卡片与新增素材统一为白色柔和卡片，不再出现灰蓝割裂。 */
  .topbar{
    background:rgba(255,255,255,.972) !important;
    border-color:rgba(30,58,95,.08) !important;
    box-shadow:none;
  }

  .topbar .top-actions select,
  .topbar .top-actions button{
    background:#fff;
    border-color:rgba(30,58,95,.11) !important;
  }
}

@media(max-width:380px){
  .app-mobile-top-art{
    top:70px !important;
    right:18px !important;
    width:128px !important;
    height:44px !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }
}
/* SHIROHA_APP_V28_7_TOP_RIGHT_ART_END */

/* SHIROHA_APP_V28_8_TOPBAR_AND_CARD_TOP_TIGHTEN_START
   App 专属：顶部题库选择与保存按钮改为单行，选择框左边界对齐页面主卡片内容；各页英文 kicker 上提到白色卡片顶部，进一步节省纵向空间。 */
@media(max-width:720px){
  .main{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .topbar{
    margin:0 0 18px !important;
    padding:12px 28px !important;
    border-radius:28px !important;
  }
  .topbar .top-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 112px !important;
    gap:10px !important;
    align-items:center !important;
    margin:0 !important;
  }
  .topbar .top-actions select,
  .topbar .top-actions button{
    width:100% !important;
    min-width:0 !important;
    min-height:48px !important;
    height:48px !important;
    border-radius:18px !important;
  }
  .topbar .top-actions select{
    text-align:left !important;
    text-align-last:left !important;
    padding-left:18px !important;
    padding-right:32px !important;
    font-size:15px !important;
  }
  .topbar .top-actions button{
    padding:0 12px !important;
    font-size:14px !important;
    white-space:nowrap !important;
  }

  #banks.view > .card:first-child,
  #import.view > .card:first-child,
  #practice.view > .card:first-child,
  #exam.view > .card:first-child,
  #wrongbook.view > .card:first-child,
  #records.view > .card:first-child,
  #settings.view > .card:first-child{
    padding-top:14px !important;
  }

  #banks .section-head,
  #import .section-head,
  #practice .section-head,
  #exam .section-head,
  #wrongbook .section-head,
  #records .section-head{
    margin-top:0 !important;
    margin-bottom:8px !important;
  }
  #banks .section-head .kicker,
  #import .section-head .kicker,
  #practice .section-head .kicker,
  #exam .section-head .kicker,
  #wrongbook .section-head .kicker,
  #records .section-head .kicker{
    margin-top:0 !important;
    margin-bottom:4px !important;
    line-height:1 !important;
  }
  #banks .section-head h2,
  #import .section-head h2,
  #practice .section-head h2,
  #exam .section-head h2,
  #wrongbook .section-head h2,
  #records .section-head h2{
    line-height:1.05 !important;
  }

  #banks .section-head > button,
  #import .section-head > button,
  #practice .section-head > .pill,
  #exam .section-head > .pill,
  #wrongbook .section-head > button,
  #records .section-head > .actions{
    margin-top:24px !important;
  }

  #banks .page-art-strip,
  #import .import-stage-panel,
  #practice .page-art-strip,
  #exam .page-art-strip,
  #wrongbook .page-art-strip,
  #records .page-art-strip,
  #settings .page-art-strip{
    margin-top:2px !important;
  }
}

@media(max-width:380px){
  .topbar{
    padding-left:22px !important;
    padding-right:22px !important;
  }
  .topbar .top-actions{
    grid-template-columns:minmax(0,1fr) 100px !important;
    gap:8px !important;
  }
  .topbar .top-actions select,
  .topbar .top-actions button{
    min-height:46px !important;
    height:46px !important;
  }
  .topbar .top-actions select{
    font-size:14px !important;
    padding-left:14px !important;
  }
  .topbar .top-actions button{
    font-size:13px !important;
    padding:0 8px !important;
  }
}
/* SHIROHA_APP_V28_8_TOPBAR_AND_CARD_TOP_TIGHTEN_END */

/* SHIROHA_APP_V28_9_USER_FACING_IMPORT_REVIEW_START
   App 专属：减少开发侧浅色说明文字；导入核对区增加沉浸模式，提升手机端核对效率。 */
@media(max-width:720px){
  /* 去掉或压缩面向开发者的浅色说明，保留必要操作信息 */
  #dashboard .grid3 .card p,
  #import .import-stage-copy p,
  #practice.view > .card:first-child > p.muted,
  .builtin-bank-card-v252 .compact-head-v23 p.muted,
  .bank-current-bar-v28 > .muted,
  #settings-backup-panel-v23 > p.muted,
  .data-tools-v23 > p.muted{
    display:none !important;
  }

  #import > .card:nth-of-type(2) > p.muted{
    font-size:13px !important;
    line-height:1.55 !important;
    margin:2px 0 12px !important;
  }

  .builtin-bank-card-v252,
  .data-tool-card-v23,
  #settings-backup-panel-v23{
    padding:14px !important;
    margin:12px 0 !important;
  }

  .builtin-bank-card-v252 .section-head,
  .data-tool-card-v23 .section-head,
  #settings-backup-panel-v23 .section-head{
    margin-bottom:8px !important;
  }

  /* 导入核对卡片：正常模式下也更紧凑，按钮不再挤在一列浪费空间 */
  #import .import-preview-card{
    padding-top:16px !important;
  }
  #import .import-preview-card .section-head{
    display:block !important;
    margin-bottom:10px !important;
  }
  #import .import-preview-card .section-head > div:first-child{
    margin-bottom:10px !important;
  }
  #import .import-preview-card .section-head h2{
    line-height:1.08 !important;
  }
  #import .import-preview-card .section-head .muted{
    display:none !important;
  }
  #import .import-preview-card .row-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    margin:0 !important;
    width:100% !important;
  }
  #import .import-preview-card .row-actions .inline-filter{
    grid-column:1/-1 !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    gap:8px !important;
    align-items:center !important;
    font-weight:900 !important;
  }
  #import .import-preview-card .row-actions button,
  #import .import-preview-card .row-actions select{
    width:100% !important;
    min-height:40px !important;
    height:40px !important;
    border-radius:16px !important;
    font-size:13px !important;
    padding:0 10px !important;
    white-space:nowrap !important;
  }
  #import .import-preview-card #import-summary{
    margin:8px 0 10px !important;
    font-size:13px !important;
    line-height:1.45 !important;
  }
  #import .import-preview-card .report-panel{
    margin:8px 0 !important;
  }
  #import .import-preview-card .table-wrap{
    margin-top:8px !important;
    max-height:320px !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  #import .import-preview-card table{
    min-width:720px !important;
  }

  /* 沉浸核对：隐藏导航和其它导入区，只保留预览表格 */
  body.import-preview-focus{
    overflow:hidden !important;
    background:#f5faff !important;
  }
  body.import-preview-focus .side,
  body.import-preview-focus .topbar,
  body.import-preview-focus .app-mobile-top-art,
  body.import-preview-focus .app-splash{
    display:none !important;
  }
  body.import-preview-focus .app{
    display:block !important;
    min-height:100dvh !important;
    background:#f5faff !important;
  }
  body.import-preview-focus .main{
    height:100dvh !important;
    min-height:100dvh !important;
    max-width:none !important;
    width:100vw !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    background:#f5faff !important;
  }
  body.import-preview-focus .view:not(#import){
    display:none !important;
  }
  body.import-preview-focus #import.view{
    display:block !important;
    height:100dvh !important;
    overflow:hidden !important;
    padding:0 !important;
  }
  body.import-preview-focus #import > .card:not(.import-preview-card),
  body.import-preview-focus #import > details{
    display:none !important;
  }
  body.import-preview-focus #import .import-preview-card{
    position:fixed !important;
    inset:0 !important;
    z-index:9999 !important;
    width:100vw !important;
    height:100dvh !important;
    max-height:none !important;
    margin:0 !important;
    padding:calc(env(safe-area-inset-top,0px) + 12px) 12px calc(env(safe-area-inset-bottom,0px) + 12px) !important;
    border-radius:0 !important;
    border:0 !important;
    box-shadow:none;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    background:#fff !important;
  }
  body.import-preview-focus #import .import-preview-card .section-head{
    flex:0 0 auto !important;
    margin:0 0 8px !important;
  }
  body.import-preview-focus #import .import-preview-card .section-head > div:first-child{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    margin-bottom:8px !important;
  }
  body.import-preview-focus #import .import-preview-card .section-head h2{
    font-size:23px !important;
    margin:0 !important;
  }
  body.import-preview-focus #import .import-preview-card .row-actions{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
  }
  body.import-preview-focus #import .import-preview-card .row-actions .inline-filter{
    grid-column:1/-1 !important;
  }
  body.import-preview-focus #import .import-preview-card .row-actions button,
  body.import-preview-focus #import .import-preview-card .row-actions select{
    min-height:38px !important;
    height:38px !important;
    font-size:12px !important;
    border-radius:14px !important;
    padding:0 8px !important;
  }
  body.import-preview-focus #import-summary{
    flex:0 0 auto !important;
    max-height:86px !important;
    overflow:auto !important;
    margin:0 0 8px !important;
    padding:10px 12px !important;
  }
  body.import-preview-focus #import-report-panel{
    display:none !important;
  }
  body.import-preview-focus #import .import-preview-card .table-wrap{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:auto !important;
    margin:0 !important;
    border-radius:16px !important;
    background:#fff !important;
  }
  body.import-preview-focus #import .import-preview-card table{
    min-width:820px !important;
  }
  body.import-preview-focus #import .import-preview-card th,
  body.import-preview-focus #import .import-preview-card td{
    padding:10px 9px !important;
    font-size:12px !important;
  }
}

@media(max-width:380px){
  body.import-preview-focus #import .import-preview-card .row-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
/* SHIROHA_APP_V28_9_USER_FACING_IMPORT_REVIEW_END */

/* SHIROHA_APP_V28_9_HEADER_ART_AND_TITLE_ACTION_ALIGN_START
   App 专属：顶部行走素材移入 Shiroha Quiz 标题白色区域右侧并放大；页面标题右侧按钮/状态与主标题同高对齐。 */
@media(max-width:720px){
  .topbar{
    position:relative !important;
    overflow:visible !important;
  }
  .topbar-title-group{
    position:relative !important;
    min-height:58px !important;
    padding-right:min(43vw,194px) !important;
  }
  .topbar-title-group .kicker{
    margin-bottom:4px !important;
  }
  .topbar .app-mobile-top-art{
    display:block !important;
    position:absolute !important;
    top:18px !important;
    right:28px !important;
    z-index:3 !important;
    width:min(42vw,192px) !important;
    height:58px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none;
    object-fit:contain !important;
    object-position:center center !important;
    pointer-events:none !important;
    user-select:none !important;
    opacity:.98 !important;
  }
  .topbar .top-actions{
    position:relative !important;
    z-index:2 !important;
    margin-top:2px !important;
  }

  #banks .section-head > button,
  #import .section-head > button,
  #practice .section-head > .pill,
  #exam .section-head > .pill,
  #wrongbook .section-head > button,
  #records .section-head > .actions{
    margin-top:16px !important;
    align-self:flex-start !important;
  }
  #import .section-head > button,
  #exam .section-head > .pill{
    margin-top:15px !important;
  }
}
@media(max-width:380px){
  .topbar-title-group{
    min-height:52px !important;
    padding-right:142px !important;
  }
  .topbar .app-mobile-top-art{
    top:18px !important;
    right:22px !important;
    width:136px !important;
    height:50px !important;
  }
  #banks .section-head > button,
  #import .section-head > button,
  #practice .section-head > .pill,
  #exam .section-head > .pill,
  #wrongbook .section-head > button,
  #records .section-head > .actions{
    margin-top:14px !important;
  }
}
/* SHIROHA_APP_V28_9_HEADER_ART_AND_TITLE_ACTION_ALIGN_END */

/* SHIROHA_APP_V29_HEADER_ART_RECORDS_ACTION_ALIGN_START
   App-only: 基于 v28 继续叠加。
   1) 顶部行走素材固定到最上方 Shiroha Quiz 标题右侧，脱离题库选择/保存按钮区域；
   2) 补齐刷题记录页标题右侧按钮对齐；
   3) 保留 v27：Web 开屏层不显示静态图标。 */
@media(max-width:720px){
  /* 顶部装饰素材：放在 Shiroha Quiz 顶部白色标题区右侧，不再贴着题库选择卡片。 */
  .topbar .app-mobile-top-art,
  .app-mobile-top-art{
    display:block !important;
    position:fixed !important;
    top:86px !important;
    right:26px !important;
    z-index:999 !important;
    width:min(42vw,220px) !important;
    height:72px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none;
    object-fit:contain !important;
    object-position:center center !important;
    pointer-events:none !important;
    user-select:none !important;
    opacity:.98 !important;
  }

  /* 顶部题库选择卡片保持独立，不再为装饰素材预留下方错位空间。 */
  .topbar{
    overflow:visible !important;
  }
  .topbar-title-group{
    min-height:0 !important;
    padding-right:0 !important;
  }

  /* 标题右侧操作统一贴近主标题高度。 */
  #banks .section-head > button,
  #import .section-head > button,
  #practice .section-head > .pill,
  #exam .section-head > .pill,
  #wrongbook .section-head > button,
  #records .section-head > .actions{
    align-self:flex-start !important;
    margin-top:15px !important;
  }

  /* 刷题记录页是两个按钮的 actions 容器，单独压缩高度并保持和标题同一视觉高度。 */
  #records .section-head > .actions{
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:8px !important;
    margin-top:14px !important;
    max-width:48% !important;
  }
  #records .section-head > .actions button{
    min-height:42px !important;
    height:42px !important;
    border-radius:16px !important;
    padding:0 10px !important;
    font-size:12px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  /* 明确保持开屏阶段不显示静态图标，只保留原有开屏过渡/动画。 */
  .app-splash-logo{
    display:none !important;
  }
}
@media(max-width:380px){
  .topbar .app-mobile-top-art,
  .app-mobile-top-art{
    top:84px !important;
    right:22px !important;
    width:168px !important;
    height:60px !important;
  }
  #records .section-head > .actions{
    max-width:50% !important;
    gap:6px !important;
    margin-top:13px !important;
  }
  #records .section-head > .actions button{
    min-height:38px !important;
    height:38px !important;
    padding:0 8px !important;
    font-size:11px !important;
  }
}
/* SHIROHA_APP_V29_HEADER_ART_RECORDS_ACTION_ALIGN_END */


/* SHIROHA_APP_V29_4_NATIVE_SPLASH_TOPBAR_ALIGN_START
   App-only fix: hide native launcher-icon splash, use welcome avatar in launch/splash,
   place walking strip inside the Shiroha Quiz title bar, and center-align favorite review button. */
.app-splash-logo{
  display:block !important;
  width:min(58vw,190px) !important;
  max-height:168px !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  filter: !important;
  animation:splashLogoFloat 1.6s ease-in-out infinite !important;
}
@media(max-width:720px){
  .app{
    animation:appContentAfterSplash .38s ease 1.05s both;
  }
  .topbar{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:"title art" "actions actions" !important;
    align-items:center !important;
    column-gap:10px !important;
    row-gap:10px !important;
    position:relative !important;
    top:auto !important;
    z-index:8 !important;
    margin:-16px -18px 18px !important;
    padding:calc(env(safe-area-inset-top,0px) + 16px) 24px 16px !important;
    border-radius:0 0 28px 28px !important;
    border:0 !important;
    border-bottom:1px solid rgba(30,58,95,.08) !important;
    background:#fff;
    box-shadow:none;
    overflow:hidden !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .topbar > div:first-child,
  .topbar-title-group{
    display:flex !important;
    grid-area:title !important;
    min-width:0 !important;
    min-height:54px !important;
    padding:0 !important;
    margin:0 !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }
  .topbar-title-group .kicker{
    display:block !important;
    margin:0 !important;
    color:#172033 !important;
    font-size:28px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.03em !important;
    text-transform:none !important;
  }
  .topbar-title-group h1{
    display:none !important;
  }
  .topbar .app-mobile-top-art,
  .app-mobile-top-art{
    display:block !important;
    grid-area:art !important;
    position:static !important;
    justify-self:end !important;
    align-self:center !important;
    width:min(40vw,176px) !important;
    height:54px !important;
    max-width:176px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none;
    object-fit:contain !important;
    object-position:center center !important;
    pointer-events:none !important;
    user-select:none !important;
    opacity:.98 !important;
  }
  .topbar .top-actions{
    grid-area:actions !important;
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 112px !important;
    gap:10px !important;
    align-items:center !important;
  }
  #favorite-panel-v27 .section-head{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto auto !important;
    column-gap:12px !important;
    row-gap:4px !important;
    align-items:center !important;
  }
  #favorite-panel-v27 .section-head > div{
    display:contents !important;
  }
  #favorite-panel-v27 .section-head h3{
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:center !important;
    margin:0 !important;
    line-height:1.2 !important;
  }
  #favorite-panel-v27 .section-head p{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    margin:6px 0 0 !important;
  }
  #favorite-panel-v27 .section-head > button{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:center !important;
    justify-self:end !important;
    margin:0 !important;
    min-height:42px !important;
    height:42px !important;
    border-radius:18px !important;
    white-space:nowrap !important;
  }
}
@media(max-width:380px){
  .topbar{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  .topbar-title-group .kicker{
    font-size:26px !important;
  }
  .topbar .app-mobile-top-art,
  .app-mobile-top-art{
    width:140px !important;
    max-width:140px !important;
    height:48px !important;
  }
}
@keyframes appContentAfterSplash{
  from{opacity:0}
  to{opacity:1}
}
/* SHIROHA_APP_V29_4_NATIVE_SPLASH_TOPBAR_ALIGN_END */


/* SHIROHA_APP_V29_6_REMOVE_DUPLICATE_WEB_TOPBAR_TITLE_START
   App-only correction:
   - Do not create or display a second in-Web “Shiroha Quiz” title card.
   - The Web topbar is only the bank selector + save button control card.
   - The walking strip is fixed beside the existing top app title area.
   - Splash logic is intentionally untouched. */
@media(max-width:720px){
  .topbar{
    display:block !important;
    position:relative !important;
    top:auto !important;
    z-index:8 !important;
    margin:0 0 18px !important;
    padding:12px 18px !important;
    min-height:0 !important;
    border-radius:26px !important;
    border:1px solid rgba(30,58,95,.08) !important;
    border-bottom:1px solid rgba(30,58,95,.08) !important;
    background:#fff;
    box-shadow:none;
    overflow:visible !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .topbar-title-group,
  .topbar > .topbar-title-group,
  .topbar-title-group .kicker,
  .topbar-title-group h1,
  .topbar > div:first-child:not(.top-actions){
    display:none !important;
    width:0 !important;
    height:0 !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  .topbar .top-actions{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 112px !important;
    gap:10px !important;
    align-items:center !important;
  }
  .topbar .top-actions select,
  .topbar .top-actions button{
    width:100% !important;
    min-width:0 !important;
    min-height:48px !important;
    height:48px !important;
    border-radius:18px !important;
    background:#fff;
    border-color:rgba(30,58,95,.11) !important;
  }
  .topbar .top-actions select{
    text-align:left !important;
    text-align-last:left !important;
    padding-left:18px !important;
    padding-right:32px !important;
    font-size:15px !important;
  }
  .topbar .top-actions button{
    padding:0 12px !important;
    font-size:14px !important;
    white-space:nowrap !important;
  }

  .topbar .app-mobile-top-art,
  .app-mobile-top-art{
    display:block !important;
    position:fixed !important;
    top:calc(env(safe-area-inset-top,0px) + 72px) !important;
    right:24px !important;
    z-index:1200 !important;
    width:min(38vw,172px) !important;
    max-width:172px !important;
    height:52px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none;
    object-fit:contain !important;
    object-position:center center !important;
    pointer-events:none !important;
    user-select:none !important;
    opacity:.98 !important;
  }

  #favorite-panel-v27 .section-head{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto auto !important;
    column-gap:12px !important;
    row-gap:4px !important;
    align-items:center !important;
  }
  #favorite-panel-v27 .section-head > div{display:contents !important;}
  #favorite-panel-v27 .section-head h3{
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:center !important;
    margin:0 !important;
    line-height:1.2 !important;
  }
  #favorite-panel-v27 .section-head p{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    margin:6px 0 0 !important;
  }
  #favorite-panel-v27 .section-head > button{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:center !important;
    justify-self:end !important;
    margin:0 !important;
    min-height:42px !important;
    height:42px !important;
    border-radius:18px !important;
    white-space:nowrap !important;
  }
}
@media(max-width:380px){
  .topbar{padding-left:16px !important;padding-right:16px !important;}
  .topbar .top-actions{grid-template-columns:minmax(0,1fr) 100px !important;gap:8px !important;}
  .topbar .top-actions select,
  .topbar .top-actions button{min-height:46px !important;height:46px !important;}
  .topbar .top-actions select{font-size:14px !important;padding-left:14px !important;}
  .topbar .top-actions button{font-size:13px !important;padding:0 8px !important;}
  .topbar .app-mobile-top-art,
  .app-mobile-top-art{
    top:calc(env(safe-area-inset-top,0px) + 72px) !important;
    right:18px !important;
    width:138px !important;
    max-width:138px !important;
    height:46px !important;
  }
}
/* SHIROHA_APP_V29_6_REMOVE_DUPLICATE_WEB_TOPBAR_TITLE_END */


/* SHIROHA_APP_V29_10_TOPBAR_EMBED_BLUE_COMPACT_START
   App WebView-only:
   1) 单一 .topbar，不再新增第二个标题卡片；
   2) 走路素材写入 Shiroha Quiz 同一行，禁止 fixed/absolute 悬浮；
   3) 最上端区域改为更短的蓝白色调。 */
@media(max-width:720px){
  html,
  body{
    background:#edf7ff !important;
  }

  body{
    background:
      #fff;
  }

  .app{
    background:transparent !important;
  }

  .main{
    background:transparent !important;
  }

  .topbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    align-items:center !important;
    gap:8px !important;
    position:relative !important;
    top:auto !important;
    z-index:8 !important;
    margin:0 0 14px !important;
    padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 12px !important;
    min-height:0 !important;
    border-radius:0 0 22px 22px !important;
    border:0 !important;
    border-bottom:1px solid rgba(30,58,95,.10) !important;
    background:#fff;
    box-shadow:none;
    overflow:hidden !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .topbar-title-group,
  .topbar > .topbar-title-group,
  .topbar > div:first-child:not(.top-actions){
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:visible !important;
  }

  .topbar-title-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    width:100% !important;
    min-width:0 !important;
    min-height:34px !important;
  }

  .topbar-title-group .kicker,
  .topbar .topbar-title-group .kicker{
    display:block !important;
    flex:0 0 auto !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    color:#152844 !important;
    font-size:23px !important;
    line-height:1.05 !important;
    font-weight:950 !important;
    letter-spacing:-.035em !important;
    text-transform:none !important;
    white-space:nowrap !important;
  }

  .topbar-title-group h1,
  .topbar .topbar-title-group h1{
    display:none !important;
  }

  .topbar .app-mobile-top-art,
  .app-mobile-top-art{
    display:block !important;
    visibility:visible !important;
    position:static !important;
    flex:1 1 auto !important;
    justify-self:auto !important;
    align-self:center !important;
    width:auto !important;
    max-width:min(42vw,156px) !important;
    height:34px !important;
    max-height:34px !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none;
    object-fit:contain !important;
    object-position:right center !important;
    pointer-events:none !important;
    user-select:none !important;
    opacity:.98 !important;
    transform:none !important;
  }

  .topbar .top-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 104px !important;
    gap:8px !important;
    align-items:center !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    position:relative !important;
    z-index:2 !important;
  }

  .topbar .top-actions select,
  .topbar .top-actions button{
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    height:44px !important;
    border-radius:16px !important;
    background:#fff;
    border-color:rgba(30,58,95,.12) !important;
  }

  .topbar .top-actions select{
    text-align:left !important;
    text-align-last:left !important;
    padding-left:14px !important;
    padding-right:28px !important;
    font-size:14px !important;
  }

  .topbar .top-actions button{
    padding:0 8px !important;
    font-size:13px !important;
    white-space:nowrap !important;
  }
}

@media(max-width:380px){
  .topbar{
    gap:7px !important;
    padding:calc(env(safe-area-inset-top,0px) + 9px) 14px 10px !important;
    border-radius:0 0 20px 20px !important;
  }

  .topbar-title-row{
    min-height:32px !important;
  }

  .topbar-title-group .kicker,
  .topbar .topbar-title-group .kicker{
    font-size:21px !important;
  }

  .topbar .app-mobile-top-art,
  .app-mobile-top-art{
    max-width:132px !important;
    height:32px !important;
    max-height:32px !important;
  }

  .topbar .top-actions{
    grid-template-columns:minmax(0,1fr) 94px !important;
    gap:7px !important;
  }

  .topbar .top-actions select,
  .topbar .top-actions button{
    min-height:42px !important;
    height:42px !important;
  }

  .topbar .top-actions select{
    font-size:13px !important;
    padding-left:12px !important;
  }

  .topbar .top-actions button{
    font-size:12px !important;
    padding:0 7px !important;
  }
}
/* SHIROHA_APP_V29_10_TOPBAR_EMBED_BLUE_COMPACT_END */


/* SHIROHA_APP_V29_15_REMOVE_ADDED_TOPBAR_FINAL_START
   APP WebView 内置页最终修正：
   - 已在 index.html 物理删除之前新增的 topbar-title-row / 走路素材；
   - header.topbar 只保留题库选择 + 保存数据；
   - 这里仅负责压短 .topbar、蓝白化、左长右短。 */
@media(max-width:720px){
  html,
  body{
    background:#edf7ff !important;
  }

  body{
    background:#fff;
  }

  .app,
  .main{
    background:transparent !important;
  }

  body .topbar{
    display:block !important;
    position:relative !important;
    top:auto !important;
    z-index:8 !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 0 12px !important;
    padding:8px 16px 10px !important;
    border:0 !important;
    border-bottom:1px solid rgba(30,58,95,.10) !important;
    border-radius:0 0 18px 18px !important;
    background:#fff;
    box-shadow:none;
    overflow:hidden !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  body .topbar-title-group,
  body .topbar-title-row,
  body .topbar .app-mobile-top-art,
  body .app-mobile-top-art{
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    height:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:0 !important;
    max-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    opacity:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }

  body .topbar .top-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 82px !important;
    gap:7px !important;
    align-items:center !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  body .topbar .top-actions select,
  body #active-bank-select{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:40px !important;
    min-height:40px !important;
    border-radius:15px !important;
    padding-left:12px !important;
    padding-right:24px !important;
    font-size:13px !important;
    background:#fff;
    border-color:rgba(30,58,95,.12) !important;
  }

  body .topbar .top-actions button,
  body #save-all-btn{
    width:82px !important;
    min-width:82px !important;
    max-width:82px !important;
    height:40px !important;
    min-height:40px !important;
    border-radius:15px !important;
    padding:0 4px !important;
    font-size:12px !important;
    white-space:nowrap !important;
    background:#fff;
    border-color:rgba(30,58,95,.12) !important;
  }
}

@media(max-width:380px){
  body .topbar{
    margin-bottom:10px !important;
    padding:7px 12px 8px !important;
    border-radius:0 0 16px 16px !important;
  }

  body .topbar .top-actions{
    grid-template-columns:minmax(0,1fr) 76px !important;
    gap:6px !important;
  }

  body .topbar .top-actions select,
  body #active-bank-select{
    height:38px !important;
    min-height:38px !important;
    padding-left:10px !important;
    padding-right:22px !important;
    font-size:12px !important;
  }

  body .topbar .top-actions button,
  body #save-all-btn{
    width:76px !important;
    min-width:76px !important;
    max-width:76px !important;
    height:38px !important;
    min-height:38px !important;
    font-size:11px !important;
  }
}
/* SHIROHA_APP_V29_15_REMOVE_ADDED_TOPBAR_FINAL_END */


/* SHIROHA_APP_V29_16_LIGHT_BLUE_TOPBAR_START
   APP WebView-only: lighten the top .topbar blue so it blends with the page background. */
@media(max-width:720px){
  html,
  body{
    background:#f3f9ff !important;
  }

  body{
    background:#fff;
  }

  body .topbar{
    background:#fff;
    border-bottom-color:rgba(30,58,95,.075) !important;
    box-shadow:none;
  }

  body .topbar .top-actions select,
  body #active-bank-select,
  body .topbar .top-actions button,
  body #save-all-btn{
    background:#fff;
    border-color:rgba(30,58,95,.10) !important;
  }
}
/* SHIROHA_APP_V29_16_LIGHT_BLUE_TOPBAR_END */


/* SHIROHA_APP_V29_18_DASHBOARD_PANEL_START
   APP 首页新增学习仪表盘：
   - 位于当前版本/统计卡片与“加载内置 C1 题库”之间；
   - 使用行走素材；
   - 轻量三项指标：当前题库 / 今日练习 / 待复习。 */
@media(max-width:720px){
  #dashboard .dashboard-study-panel{
    margin:0 0 16px !important;
    padding:16px !important;
    border-radius:24px !important;
    border:1px solid rgba(105,144,255,.10) !important;
    background:#fff;
    box-shadow:none;
  }
  #dashboard .dashboard-study-head{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:10px !important;
    margin-bottom:12px !important;
  }
  #dashboard .dashboard-study-head .kicker{
    margin:0 0 6px !important;
  }
  #dashboard .dashboard-study-head h3{
    margin:0 !important;
    font-size:21px !important;
    line-height:1.15 !important;
    letter-spacing:-.03em !important;
    color:#172b49 !important;
  }
  #dashboard #dashboard-start-practice-btn{
    flex:0 0 auto !important;
    min-height:38px !important;
    padding:0 14px !important;
    border-radius:16px !important;
    font-size:13px !important;
    white-space:nowrap !important;
    box-shadow:none;
  }
  #dashboard .dashboard-study-art-wrap{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:74px !important;
    margin:0 0 12px !important;
    padding:8px 10px !important;
    border-radius:18px !important;
    background:#fff;
    border:1px solid rgba(123,154,255,.08) !important;
  }
  #dashboard .dashboard-study-art{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:72px !important;
    object-fit:contain !important;
    object-position:center center !important;
  }
  #dashboard .dashboard-study-bankline{
    margin:0 0 12px !important;
    color:#7487a4 !important;
    font-size:13px !important;
    line-height:1.4 !important;
  }
  #dashboard .dashboard-study-metrics{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  #dashboard .dashboard-study-metric{
    min-width:0 !important;
    padding:12px 10px !important;
    border-radius:18px !important;
    border:1px solid rgba(123,154,255,.08) !important;
    background:#fff;
    box-shadow:none;
  }
  #dashboard .dashboard-study-metric span{
    display:block !important;
    color:#7b89a5 !important;
    font-size:12px !important;
    line-height:1.2 !important;
    margin-bottom:8px !important;
  }
  #dashboard .dashboard-study-metric b{
    display:block !important;
    color:#173056 !important;
    font-size:23px !important;
    line-height:1 !important;
    letter-spacing:-.03em !important;
  }
}
@media(max-width:380px){
  #dashboard .dashboard-study-panel{
    padding:14px !important;
    border-radius:22px !important;
  }
  #dashboard .dashboard-study-head h3{
    font-size:18px !important;
  }
  #dashboard #dashboard-start-practice-btn{
    min-height:36px !important;
    padding:0 11px !important;
    font-size:12px !important;
  }
  #dashboard .dashboard-study-art-wrap{
    min-height:68px !important;
    padding:8px !important;
    margin-bottom:10px !important;
  }
  #dashboard .dashboard-study-art{
    max-height:64px !important;
  }
  #dashboard .dashboard-study-bankline{
    font-size:12px !important;
    margin-bottom:10px !important;
  }
  #dashboard .dashboard-study-metrics{
    gap:8px !important;
  }
  #dashboard .dashboard-study-metric{
    padding:10px 8px !important;
    border-radius:16px !important;
  }
  #dashboard .dashboard-study-metric span{
    font-size:11px !important;
    margin-bottom:6px !important;
  }
  #dashboard .dashboard-study-metric b{
    font-size:20px !important;
  }
}
/* SHIROHA_APP_V29_18_DASHBOARD_PANEL_END */


/* SHIROHA_APP_V29_20_COMPACT_DASHBOARD_FINAL_START
   修正首页学习仪表盘：
   - 卡片高度可控；
   - 插画作为右侧小装饰，不再撑满页面；
   - 小屏下改成上文案下横向素材；
   - 包含完整 index/styles/app.js/webp，避免只更新素材导致样式缺失。 */
@media(max-width:720px){
  #dashboard .dashboard-study-panel{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 118px !important;
    gap:12px !important;
    align-items:stretch !important;
    margin:0 0 14px !important;
    padding:14px !important;
    min-height:150px !important;
    max-height:none !important;
    border-radius:24px !important;
    border:1px solid rgba(105,144,255,.10) !important;
    background:#fff;
    box-shadow:none;
    overflow:hidden !important;
  }

  #dashboard .dashboard-study-copy{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    gap:8px !important;
  }

  #dashboard .dashboard-study-head{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:8px !important;
    align-items:start !important;
    margin:0 !important;
  }

  #dashboard .dashboard-study-head .kicker{
    margin:0 0 4px !important;
    font-size:12px !important;
  }

  #dashboard .dashboard-study-head h3{
    margin:0 !important;
    font-size:19px !important;
    line-height:1.12 !important;
    letter-spacing:-.03em !important;
    color:#172b49 !important;
  }

  #dashboard #dashboard-start-practice-btn{
    min-height:34px !important;
    height:34px !important;
    padding:0 11px !important;
    border-radius:14px !important;
    font-size:12px !important;
    white-space:nowrap !important;
    box-shadow:none;
  }

  #dashboard .dashboard-study-bankline{
    margin:0 !important;
    color:#7487a4 !important;
    font-size:12px !important;
    line-height:1.35 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #dashboard .dashboard-study-metrics{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    margin:0 !important;
  }

  #dashboard .dashboard-study-metric{
    min-width:0 !important;
    padding:9px 7px !important;
    border-radius:15px !important;
    border:1px solid rgba(123,154,255,.08) !important;
    background:#fff;
    box-shadow:none;
  }

  #dashboard .dashboard-study-metric span{
    display:block !important;
    color:#7b89a5 !important;
    font-size:10px !important;
    line-height:1.15 !important;
    margin:0 0 6px !important;
    white-space:nowrap !important;
  }

  #dashboard .dashboard-study-metric b{
    display:block !important;
    color:#173056 !important;
    font-size:18px !important;
    line-height:1 !important;
    letter-spacing:-.03em !important;
    white-space:nowrap !important;
  }

  #dashboard .dashboard-study-art-wrap{
    align-self:stretch !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    padding:8px 5px !important;
    border-radius:18px !important;
    background:#fff;
    border:1px solid rgba(123,154,255,.08) !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #dashboard .dashboard-study-art{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:118px !important;
    max-height:128px !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
  }
}

@media(max-width:380px){
  #dashboard .dashboard-study-panel{
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:13px !important;
    min-height:0 !important;
  }

  #dashboard .dashboard-study-head h3{
    font-size:18px !important;
  }

  #dashboard .dashboard-study-art-wrap{
    order:-1 !important;
    height:68px !important;
    padding:6px 8px !important;
    border-radius:17px !important;
  }

  #dashboard .dashboard-study-art{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:60px !important;
  }

  #dashboard .dashboard-study-metrics{
    gap:6px !important;
  }

  #dashboard .dashboard-study-metric{
    padding:8px 6px !important;
    border-radius:14px !important;
  }

  #dashboard .dashboard-study-metric b{
    font-size:17px !important;
  }
}
/* SHIROHA_APP_V29_20_COMPACT_DASHBOARD_FINAL_END */


/* SHIROHA_APP_V29_21_DASHBOARD_NO_IMAGE_UI_FILL_START
   首页学习仪表盘重做：
   - 不再使用图片素材；
   - 仪表盘内部用纯 UI 信息块填满卡片；
   - 布局更紧凑，和现有蓝白卡片风格统一。 */
@media(max-width:720px){
  #dashboard .dashboard-study-panel{
    display:block !important;
    margin:0 0 14px !important;
    padding:15px !important;
    border-radius:24px !important;
    border:1px solid rgba(105,144,255,.10) !important;
    background:#fff;
    box-shadow:none;
    overflow:hidden !important;
  }

  #dashboard .dashboard-study-head{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
    align-items:start !important;
    margin:0 0 12px !important;
  }

  #dashboard .dashboard-study-head .kicker{
    margin:0 0 5px !important;
    font-size:12px !important;
  }

  #dashboard .dashboard-study-head h3{
    margin:0 !important;
    font-size:20px !important;
    line-height:1.15 !important;
    letter-spacing:-.03em !important;
    color:#172b49 !important;
  }

  #dashboard #dashboard-start-practice-btn{
    min-height:36px !important;
    height:36px !important;
    padding:0 12px !important;
    border-radius:15px !important;
    font-size:12px !important;
    white-space:nowrap !important;
    box-shadow:none;
  }

  #dashboard .dashboard-study-art-wrap,
  #dashboard .dashboard-study-art{
    display:none !important;
  }

  #dashboard .dashboard-study-status{
    display:grid !important;
    grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr) !important;
    gap:9px !important;
    margin:0 0 10px !important;
  }

  #dashboard .dashboard-study-status-card{
    min-width:0 !important;
    padding:12px 12px !important;
    border-radius:18px !important;
    border:1px solid rgba(123,154,255,.09) !important;
    background:#fff;
    box-shadow:none;
  }

  #dashboard .dashboard-study-status-main{
    background:#fff;
  }

  #dashboard .dashboard-study-status-card span{
    display:block !important;
    color:#7a8aa6 !important;
    font-size:11px !important;
    line-height:1.15 !important;
    margin-bottom:7px !important;
  }

  #dashboard .dashboard-study-status-card b{
    display:block !important;
    color:#173056 !important;
    font-size:17px !important;
    line-height:1.16 !important;
    letter-spacing:-.03em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #dashboard .dashboard-study-status-card em{
    display:block !important;
    margin-top:7px !important;
    color:#7a8aa6 !important;
    font-style:normal !important;
    font-size:11px !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #dashboard .dashboard-study-metrics{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    margin:0 !important;
  }

  #dashboard .dashboard-study-metric{
    min-width:0 !important;
    padding:10px 8px !important;
    border-radius:16px !important;
    border:1px solid rgba(123,154,255,.08) !important;
    background:#fff;
    box-shadow:none;
  }

  #dashboard .dashboard-study-metric span{
    display:block !important;
    color:#7b89a5 !important;
    font-size:10px !important;
    line-height:1.15 !important;
    margin:0 0 7px !important;
    white-space:nowrap !important;
  }

  #dashboard .dashboard-study-metric b{
    display:block !important;
    color:#173056 !important;
    font-size:19px !important;
    line-height:1 !important;
    letter-spacing:-.03em !important;
    white-space:nowrap !important;
  }
}

@media(max-width:380px){
  #dashboard .dashboard-study-panel{
    padding:13px !important;
    border-radius:22px !important;
  }

  #dashboard .dashboard-study-head h3{
    font-size:18px !important;
  }

  #dashboard .dashboard-study-status{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  #dashboard .dashboard-study-status-card{
    padding:10px 11px !important;
    border-radius:16px !important;
  }

  #dashboard .dashboard-study-status-card b{
    font-size:16px !important;
  }

  #dashboard .dashboard-study-metrics{
    gap:6px !important;
  }

  #dashboard .dashboard-study-metric{
    padding:9px 6px !important;
    border-radius:14px !important;
  }

  #dashboard .dashboard-study-metric b{
    font-size:17px !important;
  }
}
/* SHIROHA_APP_V29_21_DASHBOARD_NO_IMAGE_UI_FILL_END */


/* SHIROHA_APP_V29_23_REMOVE_HOME_LOAD_BUTTONS_DOM_START
   APP 首页物理删除“加载内置 C1 题库 / 在题库管理中加载”两个重复入口。
   这里仅作为缓存/旧结构兜底隐藏，不影响题库管理页和导入页功能。 */
@media(max-width:720px){
  #dashboard .dashboard-quick-actions,
  #dashboard #load-built-in-bank-btn,
  #dashboard #load-built-in-bank-btn-banks{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }
}
/* SHIROHA_APP_V29_23_REMOVE_HOME_LOAD_BUTTONS_DOM_END */


/* SHIROHA_APP_V29_24_DASHBOARD_LAYOUT_FIX_START
   仪表盘细化：
   - 当前题库改为满宽信息卡，不再被并排压缩；
   - 今日建议改为满宽浅蓝提示条；
   - 三个短指标保留三列；
   - 首页重复的两个加载按钮继续物理删除 + CSS 兜底隐藏。 */
@media(max-width:720px){
  #dashboard .dashboard-study-panel{
    display:block !important;
    margin:0 0 14px !important;
    padding:15px !important;
    border-radius:24px !important;
    border:1px solid rgba(105,144,255,.10) !important;
    background:#fff;
    box-shadow:none;
    overflow:hidden !important;
  }

  #dashboard .dashboard-study-head{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
    align-items:start !important;
    margin:0 0 12px !important;
  }

  #dashboard .dashboard-study-head .kicker{
    margin:0 0 5px !important;
    font-size:12px !important;
  }

  #dashboard .dashboard-study-head h3{
    margin:0 !important;
    font-size:20px !important;
    line-height:1.15 !important;
    letter-spacing:-.03em !important;
    color:#172b49 !important;
  }

  #dashboard #dashboard-start-practice-btn{
    min-height:36px !important;
    height:36px !important;
    padding:0 12px !important;
    border-radius:15px !important;
    font-size:12px !important;
    white-space:nowrap !important;
    box-shadow:none;
  }

  #dashboard .dashboard-study-status,
  #dashboard .dashboard-study-status-card,
  #dashboard .dashboard-study-status-main,
  #dashboard .dashboard-study-art-wrap,
  #dashboard .dashboard-study-art{
    display:none !important;
  }

  #dashboard .dashboard-study-bank-card{
    display:block !important;
    margin:0 0 9px !important;
    padding:12px 13px !important;
    border-radius:18px !important;
    border:1px solid rgba(123,154,255,.09) !important;
    background:#fff;
    box-shadow:none;
  }

  #dashboard .dashboard-study-bank-card span,
  #dashboard .dashboard-study-tip-card span{
    display:block !important;
    color:#7a8aa6 !important;
    font-size:11px !important;
    line-height:1.15 !important;
    margin-bottom:7px !important;
  }

  #dashboard .dashboard-study-bank-card b{
    display:block !important;
    color:#173056 !important;
    font-size:18px !important;
    line-height:1.18 !important;
    letter-spacing:-.03em !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    word-break:break-word !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
  }

  #dashboard .dashboard-study-bank-card em{
    display:block !important;
    margin-top:7px !important;
    color:#7a8aa6 !important;
    font-style:normal !important;
    font-size:12px !important;
    line-height:1.25 !important;
    white-space:normal !important;
  }

  #dashboard .dashboard-study-tip-card{
    display:block !important;
    margin:0 0 10px !important;
    padding:11px 13px !important;
    border-radius:17px !important;
    border:1px solid rgba(76,137,255,.09) !important;
    background:#fff;
  }

  #dashboard .dashboard-study-tip-card b{
    display:block !important;
    color:#244368 !important;
    font-size:14px !important;
    line-height:1.35 !important;
    font-weight:850 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  #dashboard .dashboard-study-metrics{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    margin:0 !important;
  }

  #dashboard .dashboard-study-metric{
    min-width:0 !important;
    padding:10px 8px !important;
    border-radius:16px !important;
    border:1px solid rgba(123,154,255,.08) !important;
    background:#fff;
    box-shadow:none;
  }

  #dashboard .dashboard-study-metric span{
    display:block !important;
    color:#7b89a5 !important;
    font-size:10px !important;
    line-height:1.15 !important;
    margin:0 0 7px !important;
    white-space:nowrap !important;
  }

  #dashboard .dashboard-study-metric b{
    display:block !important;
    color:#173056 !important;
    font-size:19px !important;
    line-height:1 !important;
    letter-spacing:-.03em !important;
    white-space:nowrap !important;
  }

  #dashboard .dashboard-quick-actions,
  #dashboard #load-built-in-bank-btn,
  #dashboard #load-built-in-bank-btn-banks{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }
}

@media(max-width:380px){
  #dashboard .dashboard-study-panel{
    padding:13px !important;
    border-radius:22px !important;
  }

  #dashboard .dashboard-study-head h3{
    font-size:18px !important;
  }

  #dashboard .dashboard-study-bank-card{
    padding:10px 11px !important;
    border-radius:16px !important;
  }

  #dashboard .dashboard-study-bank-card b{
    font-size:16px !important;
  }

  #dashboard .dashboard-study-tip-card{
    padding:10px 11px !important;
    border-radius:16px !important;
  }

  #dashboard .dashboard-study-tip-card b{
    font-size:13px !important;
  }

  #dashboard .dashboard-study-metrics{
    gap:6px !important;
  }

  #dashboard .dashboard-study-metric{
    padding:9px 6px !important;
    border-radius:14px !important;
  }

  #dashboard .dashboard-study-metric b{
    font-size:17px !important;
  }
}
/* SHIROHA_APP_V29_24_DASHBOARD_LAYOUT_FIX_END */

/* SHIROHA_APP_V30_1_DOCX_IMAGE_IMPORT_SYNC_START
   WebView App 同步 Web 版 DOCX 图片题/复杂真题导入：限制题干图片展示尺寸，避免图形题和资料图撑开移动端页面。 */
.question-media{
  margin:14px 0;
  padding:10px;
  max-width:100%;
  border:1px solid rgba(120,154,210,.18);
  border-radius:16px;
  background:#fff;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.question-image{
  display:block;
  max-width:100%;
  max-height:min(52vh,520px);
  width:auto;
  height:auto;
  object-fit:contain;
  margin:0 auto;
  cursor:zoom-in;
  touch-action:manipulation;
}
.question-media.is-wide-image .question-image{
  max-width:none;
  max-height:min(48vh,460px);
}
.question-media.is-tall-image .question-image{
  max-height:min(58vh,560px);
}
#import-preview .question-media,
.import-table td .question-media,
.preview-table td .question-media{
  display:none!important;
}
.question-image-viewer-v302{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(13,25,45,.78);
  backdrop-filter:none;
}
.question-image-viewer-v302.active{display:flex;}
.question-image-viewer-stage-v302{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.question-image-viewer-stage-v302 img{
  display:block;
  max-width:none;
  max-height:none;
  width:auto;
  height:auto;
  min-width:min(100%,360px);
  object-fit:contain;
  border-radius:14px;
  background:#fff;
  box-shadow:none;
}
.question-image-viewer-close-v302{
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + 12px);
  right:14px;
  z-index:1;
  width:38px;
  height:38px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#1f3558;
  font-size:26px;
  line-height:38px;
}
.question-image-viewer-tip-v302{
  position:fixed;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  transform:translateX(-50%);
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#42526f;
  font-size:12px;
  white-space:nowrap;
}
body.image-preview-open-v302{overflow:hidden;}
@media(max-width:720px){
  .question-media{padding:8px;border-radius:14px;margin:12px 0;}
  .question-image{max-height:min(42vh,340px);}
  .question-media.is-wide-image .question-image{max-height:min(36vh,300px);}
  .question-media.is-tall-image .question-image{max-height:min(48vh,420px);}
  .question-image-viewer-v302{padding:12px;}
  .question-image-viewer-stage-v302 img{max-width:none;max-height:none;}
}
/* SHIROHA_APP_V30_1_DOCX_IMAGE_IMPORT_SYNC_END */

/* SHIROHA_APP_V32_MOBILE_PRACTICE_EXAM_COMPACT_START
   WebView App 专属修正：撤回右侧悬挂答题卡，只保留考试沉浸；进一步压缩练习/考试选项卡片空白。 */
body.practice-focus #practice.view{
  padding:28px 36px !important;
}
body.practice-focus #practice-card{
  max-width:none !important;
  min-height:calc(100vh - 56px) !important;
  padding:32px 40px !important;
  border-radius:20px !important;
  box-shadow:none;
  font-family:'Noto Serif SC','Source Han Serif SC','STSong',serif !important;
}
body.practice-focus .practice-focus-head{
  position:sticky !important;
  top:0 !important;
  z-index:12 !important;
  gap:20px !important;
  padding:16px 0 20px !important;
  margin:0 0 32px !important;
  background:transparent !important;
  border-bottom:2px solid var(--line) !important;
}
body.practice-focus .practice-focus-head b{
  font-size:20px !important;
  line-height:1.4 !important;
}
body.practice-focus .practice-focus-head span{
  font-size:15px !important;
  line-height:1.4 !important;
}
body.practice-focus .practice-tools-v26{
  width:auto !important;
  margin-left:auto !important;
  display:flex !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
}
body.practice-focus .practice-tools-v26 button,
body.practice-focus .mini-btn,
body.exam-focus .mini-btn,
body.exam-focus .focus-mini-btn{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  min-height:34px !important;
  height:auto !important;
  padding:8px 16px !important;
  border-radius:12px !important;
  font-size:14px !important;
  line-height:1.3 !important;
}
body.practice-focus .qmeta,
body.exam-focus .qmeta{
  gap:12px !important;
  margin:4px 0 16px !important;
}
body.practice-focus .pill,
body.exam-focus .pill{
  padding:8px 16px !important;
  border-radius:10px !important;
  font-size:13px !important;
  line-height:1.4 !important;
}
body.practice-focus .question-title,
body.exam-focus .question-title{
  font-family:'Noto Serif SC','Source Han Serif SC','STSong',serif !important;
  font-size:22px !important;
  line-height:1.9 !important;
  margin:0 0 0 8px !important;
  letter-spacing:0 !important;
  display:inline !important;
}
body.practice-focus .option,
body.exam-focus .option{
  gap:14px !important;
  align-items:flex-start !important;
  padding:20px 24px !important;
  margin:14px 0 !important;
  min-height:auto !important;
  border-width:2px !important;
  border-radius:16px !important;
  font-size:16px !important;
  line-height:1.6 !important;
  font-family:'Noto Serif SC','Source Han Serif SC','STSong',serif !important;
  box-shadow:none;
  transition:none !important;
  contain:layout style;
  border-color:transparent !important;
  background:transparent !important;
}
body.practice-focus .option input,
body.exam-focus .option input{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  min-height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
  margin-top:3px !important;
  flex:0 0 auto !important;
  transform:none !important;
  transition:none !important;
}
body.practice-focus .option-key,
body.exam-focus .option-key,
body.practice-focus .options.simple-options .option-key,
body.exam-focus .options.simple-options .option-key{
  display:none !important;
}
body.practice-focus #practice-card > .actions{
  display:flex !important;
  grid-template-columns:none !important;
  gap:14px !important;
  margin-top:32px !important;
  padding-top:24px !important;
  border-top:1px solid var(--line) !important;
}
body.practice-focus #practice-card > .actions button,
body.practice-focus #p-feedback .actions button{
  min-height:auto !important;
  height:auto !important;
  padding:14px 28px !important;
  border-radius:14px !important;
  font-size:15px !important;
  line-height:1.4 !important;
}
body.practice-focus .feedback,
body.exam-focus .feedback{
  margin-top:28px !important;
  padding:20px 24px !important;
  border-radius:16px !important;
  font-size:16px !important;
  line-height:1.8 !important;
}
body.practice-focus .practice-nav-v26{
  margin-top:0 !important;
  padding-top:0 !important;
}
body.practice-focus .practice-nav-v26 > b{
  font-size:16px !important;
  color:var(--ink) !important;
}
body.practice-focus .practice-nav-grid-v26{
  grid-template-columns:repeat(5,1fr) !important;
  gap:8px !important;
  max-height:none !important;
  overflow:visible !important;
  -webkit-overflow-scrolling:touch !important;
}
body.practice-focus .practice-nav-grid-v26 button{
  min-height:42px !important;
  padding:0 !important;
  border-radius:10px !important;
  font-size:13px !important;
}
body.practice-focus .question-media,
body.exam-focus .question-media{
  margin:8px 0 !important;
  padding:6px !important;
  border-radius:12px !important;
}
body.practice-focus .question-image,
body.exam-focus .question-image{
  max-height:min(36vh,300px) !important;
}
body.practice-focus .question-media.is-wide-image .question-image,
body.exam-focus .question-media.is-wide-image .question-image{
  max-height:min(32vh,260px) !important;
}

body.exam-focus .side,
body.exam-focus .sidebar,
body.exam-focus .topbar,
body.exam-focus .appbar,
body.exam-focus .tabbar,
body.exam-focus .mobile-bottom-nav,
body.exam-focus .bottom-nav,
body.exam-focus nav.mobile-nav{
  display:none !important;
}
body.exam-focus{
  padding-bottom:0 !important;
}
body.exam-focus .app{
  display:block !important;
  min-height:100vh !important;
  background:#fff;
}
body.exam-focus .main{
  width:100% !important;
  max-width:none !important;
  padding:0 !important;
}
body.exam-focus .view{
  display:none !important;
}
body.exam-focus #exam.view{
  display:block !important;
  min-height:100vh !important;
  padding:8px !important;
  background:#fff;
}
body.exam-focus #exam-setup,
body.exam-focus #exam>.card:first-child{
  display:none !important;
}
body.exam-focus #exam-card{
  max-width:none !important;
  min-height:calc(100vh - 56px) !important;
  margin:0 !important;
  padding:32px 40px !important;
  border-radius:20px !important;
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  box-shadow:none;
  font-family:'Noto Serif SC','Source Han Serif SC','STSong',serif !important;
}
body.exam-focus .exam-focus-head{
  position:sticky !important;
  top:0 !important;
  z-index:18 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  margin:0 0 9px !important;
  padding:7px 0 8px !important;
  border-bottom:1px solid rgba(219,232,251,.82) !important;
  background:rgba(255,255,255,.98) !important;
}
body.exam-focus .exam-focus-head > div:first-child{
  min-width:0 !important;
  display:grid !important;
  gap:2px !important;
}
body.exam-focus .exam-focus-head b{
  max-width:44vw !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:15px !important;
  line-height:1.15 !important;
}
body.exam-focus .exam-focus-head span{
  color:var(--blue) !important;
  font-size:12px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}
body.exam-focus .exam-head-actions{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  flex-wrap:nowrap !important;
}
body.exam-focus #exam-card > .notice{
  margin:0 0 9px !important;
  padding:7px 9px !important;
  border-radius:12px !important;
  font-size:12px !important;
  line-height:1.42 !important;
}
body.exam-focus .exam-q{
  margin:0 0 9px !important;
  padding:10px !important;
  border-radius:15px !important;
  border:1px solid rgba(30,58,95,.10) !important;
  background:#fff !important;
  box-shadow:none;
  scroll-margin-top:62px !important;
}
body.exam-focus .exam-focus-actions{
  margin:12px 0 4px !important;
}
body.exam-focus .exam-focus-actions button{
  width:100% !important;
  min-height:38px !important;
  padding:7px 8px !important;
  border-radius:12px !important;
  font-size:13px !important;
}

@media(max-width:420px){
  body.practice-focus #practice-card,
  body.exam-focus #exam-card{
    padding:10px !important;
  }
  body.practice-focus .practice-focus-head,
  body.exam-focus .exam-focus-head{
    gap:6px !important;
  }
  body.practice-focus .practice-tools-v26{
    gap:4px !important;
  }
  body.practice-focus .practice-tools-v26 button,
  body.exam-focus .focus-mini-btn,
  body.exam-focus .mini-btn{
    height:27px !important;
    min-height:27px !important;
    padding-left:7px !important;
    padding-right:7px !important;
    font-size:10.5px !important;
  }
  body.practice-focus #practice-card > .actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  body.practice-focus .option,
  body.exam-focus .option{
    min-height:36px !important;
    padding:6px 8px !important;
    margin:4px 0 !important;
    border-radius:11px !important;
  }
}
/* SHIROHA_APP_V32_MOBILE_PRACTICE_EXAM_COMPACT_END */

/* SHIROHA_APP_V33_RECORDS_AND_MOBILE_COMPACT_START
   WebView App 专属：结果回归记录页；手机端按钮/选项/底部导航做适度收敛，不新增布局。 */
.compact-end-v5{
  padding:16px !important;
  border-radius:16px !important;
  color:#35506d !important;
}
@media(max-width:720px){
  body:not(.exam-focus) .main{
    padding-bottom:calc(118px + env(safe-area-inset-bottom,0px)) !important;
  }
  body:not(.practice-focus):not(.exam-focus) .actions button,
  body:not(.practice-focus):not(.exam-focus) .row-actions button,
  body:not(.practice-focus):not(.exam-focus) button.primary,
  body:not(.practice-focus):not(.exam-focus) button.ghost,
  body:not(.practice-focus):not(.exam-focus) button.danger{
    min-height:42px !important;
    padding:8px 11px !important;
    border-radius:14px !important;
    font-size:13px !important;
    line-height:1.16 !important;
  }
  body:not(.practice-focus):not(.exam-focus) .option{
    min-height:42px !important;
    padding:8px 10px !important;
    margin:6px 0 !important;
    gap:8px !important;
    border-radius:14px !important;
    font-size:14px !important;
    line-height:1.32 !important;
  }
  body:not(.practice-focus):not(.exam-focus) .option input{
    width:18px !important;
    height:18px !important;
    margin:0 !important;
    flex:0 0 auto !important;
  }
  body:not(.practice-focus):not(.exam-focus) .option-key{
    min-width:22px !important;
    font-size:14px !important;
  }
  .side,
  .mobile-bottom-nav,
  .bottom-nav,
  nav.mobile-nav{
    left:12px !important;
    right:12px !important;
    bottom:calc(8px + env(safe-area-inset-bottom,0px)) !important;
    max-width:calc(100vw - 24px) !important;
    padding:8px !important;
    gap:4px 5px !important;
    border-radius:24px !important;
  }
  .side .nav,
  .mobile-bottom-nav .nav,
  .bottom-nav .nav,
  nav.mobile-nav .nav,
  .mobile-bottom-nav button,
  .bottom-nav button,
  nav.mobile-nav button{
    min-height:38px !important;
    padding:4px 1px !important;
    border-radius:14px !important;
    font-size:11.5px !important;
    line-height:1.12 !important;
  }
  body.practice-focus #practice-card,
  body.exam-focus #exam-card{
    padding:20px 18px !important;
    border-radius:18px !important;
  }
  body.practice-focus .question-title,
  body.exam-focus .question-title{
    font-size:19px !important;
    line-height:1.8 !important;
    margin:0 0 0 6px !important;
    display:inline !important;
  }
  body.practice-focus .option,
  body.exam-focus .option{
    min-height:auto !important;
    padding:16px 18px !important;
    margin:10px 0 !important;
    gap:12px !important;
    border-radius:14px !important;
    font-size:15px !important;
    line-height:1.55 !important;
  }
  body.practice-focus .option input,
  body.exam-focus .option input{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
    max-width:20px !important;
    max-height:20px !important;
    transform:none !important;
    transition:none !important;
  }
  body.practice-focus .option-key,
  body.exam-focus .option-key{
    display:none !important;
  }
  body.practice-focus #practice-card > .actions button,
  body.practice-focus #p-feedback .actions button,
  body.exam-focus .exam-focus-actions button{
    min-height:auto !important;
    padding:14px 20px !important;
    border-radius:14px !important;
    font-size:14px !important;
  }
  body.practice-focus .practice-focus-head,
  body.exam-focus .exam-focus-head{
    padding:12px 0 16px !important;
    margin-bottom:24px !important;
  }
  body.exam-focus .exam-q{
    padding:8px !important;
    margin-bottom:8px !important;
    border-radius:13px !important;
  }
}
/* SHIROHA_APP_V33_RECORDS_AND_MOBILE_COMPACT_END */


/* SHIROHA_APP_V34_DASHBOARD_AND_SIMPLE_OPTIONS_FIX_START
   WebView App 专属：学习仪表盘两张状态卡做等高收敛；隐藏默认内置题库加载提示卡；短选项题进一步减少空白。 */
.builtin-bank-card-v252,
#builtin-bank-panel-v252{
  display:none !important;
}
@media(max-width:720px){
  #dashboard .dashboard-study-panel{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    align-items:stretch !important;
  }
  #dashboard .dashboard-study-head,
  #dashboard .dashboard-study-metrics{
    grid-column:1 / -1 !important;
  }
  #dashboard .dashboard-study-bank-card,
  #dashboard .dashboard-study-tip-card{
    min-width:0 !important;
    min-height:94px !important;
    height:100% !important;
    margin:0 !important;
    padding:10px 11px !important;
    border-radius:17px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
  }
  #dashboard .dashboard-study-bank-card span,
  #dashboard .dashboard-study-tip-card span{
    margin-bottom:6px !important;
    font-size:11px !important;
  }
  #dashboard .dashboard-study-bank-card b,
  #dashboard .dashboard-study-tip-card b{
    font-size:15px !important;
    line-height:1.24 !important;
    letter-spacing:-.02em !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  #dashboard .dashboard-study-bank-card em{
    margin-top:6px !important;
    font-size:11px !important;
    line-height:1.22 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  .options.simple-options .option,
  body:not(.practice-focus):not(.exam-focus) .options.simple-options .option{
    min-height:36px !important;
    height:auto !important;
    padding:5px 8px !important;
    margin:3px 0 !important;
    gap:6px !important;
    border-radius:11px !important;
    line-height:1.18 !important;
  }
  .options.simple-options .option input,
  body:not(.practice-focus):not(.exam-focus) .options.simple-options .option input{
    width:16px !important;
    height:16px !important;
    margin:0 !important;
  }
  .options.simple-options .option-key,
  body:not(.practice-focus):not(.exam-focus) .options.simple-options .option-key{
    min-width:18px !important;
    font-size:13.5px !important;
  }
  .options.simple-options .option span:last-child{
    font-size:13.5px !important;
    line-height:1.18 !important;
  }
  body.practice-focus .options.simple-options .option,
  body.exam-focus .options.simple-options .option{
    min-height:auto !important;
    padding:12px 16px !important;
    margin:8px 0 !important;
    gap:10px !important;
    border-radius:14px !important;
    font-size:15px !important;
    line-height:1.5 !important;
  }
  body.practice-focus .options.simple-options .option input,
  body.exam-focus .options.simple-options .option input{
    width:18px !important;
    height:18px !important;
  }
  body.practice-focus .options.simple-options .option-key,
  body.exam-focus .options.simple-options .option-key{
    display:none !important;
  }
  body.practice-focus .options.simple-options .option span:last-child,
  body.exam-focus .options.simple-options .option span:last-child{
    font-size:15px !important;
    line-height:1.5 !important;
  }
}
@media(max-width:360px){
  #dashboard .dashboard-study-panel{
    grid-template-columns:1fr !important;
  }
  #dashboard .dashboard-study-bank-card,
  #dashboard .dashboard-study-tip-card{
    min-height:78px !important;
  }
}
/* SHIROHA_APP_V34_DASHBOARD_AND_SIMPLE_OPTIONS_FIX_END */

/* SHIROHA_APP_V35_EXAM_ANSWER_SHEET_TOGGLE_START
   WebView App 专属：考试沉浸页中部小型答题卡开关；默认收起，不占用主答题区域。 */
body.exam-focus .exam-sheet-toggle-row-v7{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin:-2px 0 7px !important;
}
body.exam-focus .exam-sheet-toggle-v7{
  width:auto !important;
  min-width:96px !important;
  min-height:30px !important;
  height:30px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  padding:5px 12px !important;
  border-radius:999px !important;
  border:1px solid rgba(30,58,95,.18) !important;
  background:#fff;
  color:#244362 !important;
  box-shadow:none;
  font-size:12px !important;
  font-weight:850 !important;
  line-height:1 !important;
}
body.exam-focus .exam-sheet-toggle-v7.open{
  border-color:rgba(30,58,95,.32) !important;
  background:#fff;
  color:var(--blue) !important;
}
body.exam-focus .exam-sheet-toggle-v7 em{
  min-width:34px !important;
  padding:2px 7px !important;
  border-radius:999px !important;
  background:rgba(30,58,95,.10) !important;
  color:var(--blue) !important;
  font-style:normal !important;
  font-size:11px !important;
  font-weight:900 !important;
  line-height:1.25 !important;
}
body.exam-focus .exam-sheet-panel-v7[hidden]{
  display:none !important;
}
body.exam-focus .exam-sheet-panel-v7{
  margin:0 0 8px !important;
  padding:8px !important;
  border-radius:15px !important;
  border:1px solid rgba(30,58,95,.12) !important;
  background:rgba(248,251,255,.96) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72) !important;
  max-height:146px !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
body.exam-focus .exam-sheet-summary-v7{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  margin:0 0 7px !important;
  color:#64748b !important;
  font-size:11px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}
body.exam-focus .exam-sheet-summary-v7 b{
  color:var(--blue) !important;
}
body.exam-focus .exam-sheet-summary-v7 .dot{
  width:7px !important;
  height:7px !important;
  border-radius:999px !important;
  border:1px solid rgba(148,163,184,.62) !important;
  background:#fff !important;
  flex:0 0 auto !important;
}
body.exam-focus .exam-sheet-summary-v7 .dot.answered{
  border-color:rgba(30,58,95,.55) !important;
  background:var(--blue) !important;
}
body.exam-focus .exam-sheet-grid-v7{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(30px,1fr)) !important;
  gap:5px !important;
}
body.exam-focus .exam-sheet-grid-v7 button{
  min-width:0 !important;
  min-height:28px !important;
  height:28px !important;
  padding:0 !important;
  border-radius:9px !important;
  border:1px solid rgba(203,213,225,.86) !important;
  background:#fff !important;
  color:#475569 !important;
  box-shadow:none;
  font-size:11px !important;
  font-weight:850 !important;
  line-height:1 !important;
}
body.exam-focus .exam-sheet-grid-v7 button.answered{
  border-color:rgba(30,58,95,.42) !important;
  background:var(--blue);
  color:#fff !important;
}
@media(max-width:420px){
  body.exam-focus .exam-sheet-toggle-row-v7{
    margin:-1px 0 6px !important;
  }
  body.exam-focus .exam-sheet-toggle-v7{
    min-height:28px !important;
    height:28px !important;
    min-width:88px !important;
    padding:4px 10px !important;
    font-size:11.5px !important;
  }
  body.exam-focus .exam-sheet-panel-v7{
    padding:7px !important;
    border-radius:13px !important;
    max-height:128px !important;
  }
  body.exam-focus .exam-sheet-summary-v7{
    gap:5px !important;
    margin-bottom:6px !important;
    font-size:10.5px !important;
  }
  body.exam-focus .exam-sheet-grid-v7{
    grid-template-columns:repeat(auto-fill,minmax(27px,1fr)) !important;
    gap:4px !important;
  }
  body.exam-focus .exam-sheet-grid-v7 button{
    min-height:26px !important;
    height:26px !important;
    border-radius:8px !important;
    font-size:10.5px !important;
  }
}
/* SHIROHA_APP_V35_EXAM_ANSWER_SHEET_TOGGLE_END */

/* SHIROHA_APP_V36_EXAM_SHEET_HEADER_ALIGN_FIX_START
   WebView App 专属：答题卡按钮移入考试标题栏中间，撤掉单独占一行的小卡；计数文字改为浅蓝。 */
body.exam-focus .exam-focus-head{
  display:grid !important;
  grid-template-columns:minmax(78px,1fr) auto max-content !important;
  align-items:center !important;
  justify-content:normal !important;
  column-gap:8px !important;
  row-gap:0 !important;
}
body.exam-focus .exam-focus-head .exam-head-title{
  min-width:0 !important;
  display:grid !important;
  gap:2px !important;
}
body.exam-focus .exam-head-sheet-v8{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
body.exam-focus .exam-sheet-toggle-row-v7{
  display:none !important;
}
body.exam-focus .exam-head-sheet-v8 .exam-sheet-toggle-v7{
  min-width:86px !important;
  min-height:28px !important;
  height:28px !important;
  padding:4px 10px !important;
  gap:6px !important;
  box-shadow:none;
  border-color:rgba(30,58,95,.18) !important;
  background:#fff;
}
body.exam-focus .exam-head-sheet-v8 .exam-sheet-toggle-v7 span{
  color:#35516e !important;
  font-size:11.5px !important;
  font-weight:850 !important;
}
body.exam-focus .exam-head-sheet-v8 .exam-sheet-toggle-v7 em{
  min-width:34px !important;
  padding:2px 6px !important;
  background:rgba(30,58,95,.07) !important;
  color:rgba(30,58,95,.68) !important;
  font-size:11px !important;
  font-weight:900 !important;
}
body.exam-focus .exam-head-sheet-v8 .exam-sheet-toggle-v7.open{
  border-color:rgba(30,58,95,.28) !important;
  background:#fff;
}
body.exam-focus .exam-sheet-panel-v7{
  margin:-1px 0 8px !important;
}
@media(max-width:420px){
  body.exam-focus .exam-focus-head{
    grid-template-columns:minmax(64px,1fr) auto max-content !important;
    column-gap:5px !important;
  }
  body.exam-focus .exam-focus-head b{
    max-width:22vw !important;
    font-size:14px !important;
  }
  body.exam-focus .exam-focus-head .exam-head-title span{
    font-size:11px !important;
  }
  body.exam-focus .exam-head-sheet-v8 .exam-sheet-toggle-v7{
    min-width:74px !important;
    height:26px !important;
    min-height:26px !important;
    padding:3px 7px !important;
    gap:4px !important;
  }
  body.exam-focus .exam-head-sheet-v8 .exam-sheet-toggle-v7 span{
    font-size:10.5px !important;
  }
  body.exam-focus .exam-head-sheet-v8 .exam-sheet-toggle-v7 em{
    min-width:30px !important;
    padding:1px 5px !important;
    font-size:10px !important;
  }
}
/* SHIROHA_APP_V36_EXAM_SHEET_HEADER_ALIGN_FIX_END */

/* SHIROHA_APP_V37_EXAM_SHEET_LIGHT_ACRYLIC_AND_LIMIT_LABEL_FIX_START
   WebView App 专属：考试头部答题卡按钮居中、浅白浅蓝亚克力质感；题量文案见 index.html。 */
body.exam-focus .exam-focus-head{
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  column-gap:8px !important;
}
body.exam-focus .exam-focus-head .exam-head-title{
  justify-self:start !important;
  min-width:0 !important;
}
body.exam-focus .exam-head-sheet-v8{
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
body.exam-focus .exam-head-actions{
  justify-self:end !important;
  min-width:0 !important;
}
body.exam-focus .exam-head-sheet-v8 .exam-sheet-toggle-v7{
  min-width:88px !important;
  height:28px !important;
  min-height:28px !important;
  padding:4px 11px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:6px !important;
  border:1px solid rgba(139,190,246,.38) !important;
  background:#fff;
  color:#6b86a6 !important;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.exam-focus .exam-head-sheet-v8 .exam-sheet-toggle-v7 span{
  color:#6f87a4 !important;
  font-weight:820 !important;
}
body.exam-focus .exam-head-sheet-v8 .exam-sheet-toggle-v7 em{
  min-width:31px !important;
  padding:1px 5px !important;
  border-radius:999px !important;
  background:rgba(219,234,254,.72) !important;
  color:#8bbcf2 !important;
  box-shadow:inset 0 0 0 1px rgba(201,168,76,.18) !important;
  text-align:center !important;
}
body.exam-focus .exam-head-sheet-v8 .exam-sheet-toggle-v7.open{
  border-color:rgba(125,181,241,.48) !important;
  background:#fff;
  color:#5f7fa4 !important;
  box-shadow:none;
}
@media(max-width:420px){
  body.exam-focus .exam-focus-head{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
    column-gap:5px !important;
  }
  body.exam-focus .exam-focus-head b{
    max-width:24vw !important;
  }
  body.exam-focus .exam-head-actions{
    gap:4px !important;
  }
  body.exam-focus .exam-head-sheet-v8 .exam-sheet-toggle-v7{
    min-width:76px !important;
    height:26px !important;
    min-height:26px !important;
    padding:3px 7px !important;
    gap:4px !important;
  }
  body.exam-focus .exam-head-sheet-v8 .exam-sheet-toggle-v7 em{
    min-width:28px !important;
    padding:1px 4px !important;
  }
}
/* SHIROHA_APP_V37_EXAM_SHEET_LIGHT_ACRYLIC_AND_LIMIT_LABEL_FIX_END */

/* SHIROHA_APP_V38_PRACTICE_FULL_WIDTH_AND_OPTION_TIGHTEN_START
   WebView App 专属：练习沉浸页贴近手机宽度；练习/考试选项卡片再次收紧，重点减少简单选项的大块空白。 */
body.practice-focus .main{
  padding:0 !important;
  width:100% !important;
  max-width:none !important;
}
body.practice-focus #practice.view{
  padding:4px !important;
  width:100% !important;
  max-width:none !important;
}
body.practice-focus #practice-card{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  min-height:calc(100vh - 56px) !important;
  padding:32px 40px !important;
  border-radius:20px !important;
}
body.practice-focus .quiz-card .question-title,
body.exam-focus .quiz-card .question-title,
body.practice-focus .question-title,
body.exam-focus .question-title{
  margin:0 0 0 8px !important;
  line-height:1.9 !important;
  display:inline !important;
}
body.practice-focus .options,
body.exam-focus .options{
  display:grid !important;
  gap:14px !important;
}
body.practice-focus .option,
body.exam-focus .option{
  min-height:auto !important;
  padding:20px 24px !important;
  margin:0 !important;
  gap:14px !important;
  align-items:flex-start !important;
  border-width:2px !important;
  border-radius:16px !important;
  font-size:16px !important;
  line-height:1.6 !important;
  transition:none !important;
  border-color:transparent !important;
  background:transparent !important;
}
body.practice-focus .option input,
body.exam-focus .option input{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  min-height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
  margin-top:3px !important;
  transform:none !important;
  transition:none !important;
}
body.practice-focus .option-key,
body.exam-focus .option-key{
  display:none !important;
}
body.practice-focus .option span:last-child,
body.exam-focus .option span:last-child{
  font-size:16px !important;
  line-height:1.6 !important;
}
body.practice-focus .options.simple-options,
body.exam-focus .options.simple-options{
  gap:10px !important;
}
body.practice-focus .options.simple-options .option,
body.exam-focus .options.simple-options .option{
  min-height:auto !important;
  padding:14px 20px !important;
  gap:12px !important;
  border-radius:14px !important;
}
body.practice-focus .options.simple-options .option input,
body.exam-focus .options.simple-options .option input{
  width:18px !important;
  height:18px !important;
}
body.practice-focus .options.simple-options .option-key,
body.exam-focus .options.simple-options .option-key{
  display:none !important;
}
body.practice-focus .options.simple-options .option span:last-child,
body.exam-focus .options.simple-options .option span:last-child{
  font-size:15px !important;
  line-height:1.5 !important;
}
body.exam-focus .exam-q{
  padding:16px !important;
}
@media(max-width:420px){
  body.practice-focus #practice.view{
    padding:8px !important;
  }
  body.practice-focus #practice-card{
    padding:16px 14px !important;
    border-radius:16px !important;
  }
  body.practice-focus .options,
  body.exam-focus .options{
    gap:10px !important;
  }
  body.practice-focus .option,
  body.exam-focus .option{
    min-height:auto !important;
    padding:14px 16px !important;
    border-radius:14px !important;
  }
  body.practice-focus .options.simple-options .option,
  body.exam-focus .options.simple-options .option{
    min-height:auto !important;
    padding:12px 14px !important;
  }
}
/* SHIROHA_APP_V38_PRACTICE_FULL_WIDTH_AND_OPTION_TIGHTEN_END */

/* v13: WebView App 题库二次编辑入口，仅服务“更多 → 编辑” */
.bank-edit-toolbar-v13{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  margin:10px 0 12px;
  padding:12px 14px;
  border:1px solid rgba(30,58,95,.14);
  border-radius:18px;
  background:#fff;
  box-shadow:none;
}
.bank-edit-toolbar-v13.hidden{display:none!important;}
.bank-edit-toolbar-v13 b{
  display:block;
  color:#0f2442;
  font-size:15px;
  line-height:1.35;
}
.bank-edit-toolbar-v13 span{
  display:block;
  margin-top:3px;
  color:#5c6d86;
  font-size:12px;
  line-height:1.45;
}
.bank-edit-mode-v13 #import .import-preview-card{
  border-color:rgba(30,58,95,.18);
}
.bank-edit-mode-v13 #import-preview-focus-btn,
.bank-edit-mode-v13 #batch-delete-import-btn,
.bank-edit-mode-v13 #clear-import-selection-btn,
.bank-edit-mode-v13 #revalidate-import-btn{
  min-height:34px;
}
@media(max-width:720px){
  .bank-edit-toolbar-v13{
    grid-template-columns:1fr;
    padding:10px 12px;
    border-radius:16px;
  }
  .bank-edit-toolbar-v13 .row-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .bank-edit-toolbar-v13 .row-actions button{
    min-height:36px!important;
    padding:7px 10px!important;
    border-radius:13px!important;
  }
  .bank-more-panel-v28 button{
    min-height:36px;
  }
}

/* v16: 题库管理更多菜单收敛 + 删除按钮放在更多下方 */
.bank-card-actions-v16{
  display:grid;
  justify-items:end;
  align-content:start;
  gap:6px;
}
.bank-card-actions-v16 .bank-more-menu-v28{
  margin-top:0;
}
.bank-delete-under-more-v16{
  min-height:30px!important;
  padding:5px 11px!important;
  border-radius:999px!important;
  font-size:12px!important;
  line-height:1.2!important;
  box-shadow:none;
}
.bank-more-panel-v28{
  width:136px!important;
  padding:6px!important;
  gap:4px!important;
  border-radius:14px!important;
  box-shadow:none;
}
.bank-more-panel-v28 button{
  min-height:30px!important;
  padding:5px 8px!important;
  border-radius:11px!important;
  font-size:12px!important;
  line-height:1.2!important;
  box-shadow:none;
}
@media(max-width:720px){
  .bank-card-actions-v16{
    gap:5px;
  }
  .bank-more-panel-v28{
    position:absolute!important;
    right:0!important;
    top:calc(100% + 6px)!important;
    left:auto!important;
    bottom:auto!important;
    width:128px!important;
    grid-template-columns:1fr!important;
  }
  .bank-more-menu-v28 summary{
    min-height:30px!important;
    padding:6px 10px!important;
    font-size:12px!important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .bank-delete-under-more-v16{
    min-height:28px!important;
    padding:5px 10px!important;
    font-size:12px!important;
  }
}

/* v17: 统一题库卡片“更多 / 删除”两个操作按钮的视觉尺寸 */
.bank-card-actions-v16{
  width:68px!important;
  justify-items:stretch!important;
  gap:6px!important;
}
.bank-card-actions-v16 .bank-more-menu-v28,
.bank-card-actions-v16 .bank-delete-under-more-v16{
  width:68px!important;
  box-sizing:border-box!important;
}
.bank-card-actions-v16 .bank-more-menu-v28 summary,
.bank-card-actions-v16 .bank-delete-under-more-v16{
  width:68px!important;
  min-width:68px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  box-shadow:none;
}
.bank-card-actions-v16 .bank-more-menu-v28 summary{
  border-color:rgba(30,58,95,.18)!important;
  background:rgba(255,255,255,.94)!important;
  color:var(--blue)!important;
}
.bank-card-actions-v16 .bank-delete-under-more-v16{
  border-color:rgba(239,68,68,.22)!important;
  background:rgba(255,255,255,.94)!important;
  color:#d82d2d!important;
}
.bank-card-actions-v16 .bank-more-menu-v28[open] summary{
  background:rgba(234,243,255,.96)!important;
}
@media(max-width:720px){
  .bank-card-actions-v16{
    width:64px!important;
    gap:6px!important;
  }
  .bank-card-actions-v16 .bank-more-menu-v28,
  .bank-card-actions-v16 .bank-delete-under-more-v16,
  .bank-card-actions-v16 .bank-more-menu-v28 summary,
  .bank-card-actions-v16 .bank-delete-under-more-v16{
    width:64px!important;
    min-width:64px!important;
    height:32px!important;
    min-height:32px!important;
    font-size:12px!important;
  }
}

/* v18: 严格统一题库管理卡片“更多 / 删除”的真实盒模型与视觉尺寸 */
#bank-list .bank-card-actions-v16{
  width:66px!important;
  min-width:66px!important;
  max-width:66px!important;
  display:grid!important;
  grid-template-columns:66px!important;
  grid-auto-rows:32px!important;
  align-content:start!important;
  justify-content:end!important;
  justify-items:stretch!important;
  align-items:stretch!important;
  gap:8px!important;
}
#bank-list .bank-card-actions-v16 .bank-more-menu-v28,
#bank-list .bank-card-actions-v16 .bank-more-menu-v28 summary,
#bank-list .bank-card-actions-v16 .bank-delete-under-more-v16{
  box-sizing:border-box!important;
  width:66px!important;
  min-width:66px!important;
  max-width:66px!important;
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
  margin:0!important;
  padding:0!important;
  border-width:1px!important;
  border-style:solid!important;
  border-radius:16px!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:30px!important;
  text-align:center!important;
  white-space:nowrap!important;
  letter-spacing:0!important;
  transform:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
#bank-list .bank-card-actions-v16 .bank-more-menu-v28{
  position:relative!important;
  display:block!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none;
  overflow:visible!important;
}
#bank-list .bank-card-actions-v16 .bank-more-menu-v28 summary,
#bank-list .bank-card-actions-v16 .bank-delete-under-more-v16{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  box-shadow:none;
}
#bank-list .bank-card-actions-v16 .bank-more-menu-v28 summary{
  list-style:none!important;
  cursor:pointer!important;
  color:var(--blue)!important;
  border-color:rgba(30,58,95,.18)!important;
  background:#fff;
}
#bank-list .bank-card-actions-v16 .bank-more-menu-v28 summary::-webkit-details-marker{
  display:none!important;
}
#bank-list .bank-card-actions-v16 .bank-delete-under-more-v16{
  color:#d82d2d!important;
  border-color:rgba(239,68,68,.22)!important;
  background:#fff;
}
#bank-list .bank-card-actions-v16 .bank-more-menu-v28[open] summary{
  background:#fff;
}
@media(max-width:720px){
  #bank-list .bank-card-actions-v16{
    width:62px!important;
    min-width:62px!important;
    max-width:62px!important;
    grid-template-columns:62px!important;
    grid-auto-rows:31px!important;
    gap:7px!important;
  }
  #bank-list .bank-card-actions-v16 .bank-more-menu-v28,
  #bank-list .bank-card-actions-v16 .bank-more-menu-v28 summary,
  #bank-list .bank-card-actions-v16 .bank-delete-under-more-v16{
    width:62px!important;
    min-width:62px!important;
    max-width:62px!important;
    height:31px!important;
    min-height:31px!important;
    max-height:31px!important;
    border-radius:15.5px!important;
    font-size:12px!important;
    line-height:29px!important;
  }
}

/* SHIROHA_WEBVIEW_V20_IMPORT_REVIEW_MOBILE_CARDS_START
   WebView App：导入识别结果移动端沉浸核对改为卡片式列表，并调整顶部操作顺序。 */
.import-preview-mobile-list{
  display:none;
}

@media(max-width:720px){
  #import .import-preview-card .import-review-toolbar{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
    margin:0 !important;
  }
  #import .import-preview-card .import-review-toolbar .inline-filter{
    grid-column:1/-1 !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:8px !important;
  }
  #import .import-preview-card .import-review-toolbar button,
  #import .import-preview-card .import-review-toolbar select{
    width:100% !important;
    min-height:40px !important;
    height:40px !important;
    border-radius:16px !important;
    font-size:13px !important;
    padding:0 10px !important;
    white-space:nowrap !important;
  }

  body.import-preview-focus #import .import-preview-card .import-review-toolbar{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  body.import-preview-focus #import .import-preview-card .import-review-toolbar .inline-filter{
    grid-column:1/-1 !important;
  }
  body.import-preview-focus #import .import-preview-card .import-review-toolbar button,
  body.import-preview-focus #import .import-preview-card .import-review-toolbar select{
    min-height:38px !important;
    height:38px !important;
    font-size:12px !important;
    border-radius:14px !important;
    padding:0 8px !important;
  }

  body.import-preview-focus #import .import-preview-card .table-wrap{
    display:none !important;
  }
  body.import-preview-focus #import .import-preview-mobile-list{
    display:flex !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    flex-direction:column !important;
    gap:10px !important;
    padding:2px 0 6px !important;
  }
  .import-preview-item{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:10px;
    padding:12px;
    border:1px solid rgba(30,58,95,.13);
    border-radius:18px;
    background:rgba(255,255,255,.94);
    box-shadow:none;
  }
  .import-preview-item.issue-card{
    border-color:rgba(245,158,11,.24);
    background:#fff;
  }
  .import-preview-item.error-card{
    border-color:rgba(239,68,68,.24);
    background:#fff;
  }
  .import-preview-check{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    color:#6b7b91;
    font-size:11px;
    font-weight:800;
    line-height:1;
    padding-top:2px;
  }
  .import-preview-check input{
    width:18px;
    height:18px;
    margin:0;
    accent-color:var(--blue);
  }
  .import-preview-item-main{
    min-width:0;
  }
  .import-preview-item-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    margin-bottom:6px;
  }
  .import-preview-item-head b{
    min-width:0;
    color:#11253f;
    font-size:14px;
    line-height:1.35;
  }
  .import-preview-item-head span{
    flex:0 0 auto;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
  }
  .import-preview-meta{
    margin-bottom:5px;
    color:#6b7b91;
    font-size:12px;
    line-height:1.35;
  }
  .import-preview-question{
    color:#172033;
    font-size:13px;
    line-height:1.55;
    word-break:break-word;
    overflow-wrap:anywhere;
  }
  .import-preview-meta-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-top:9px;
    color:#526174;
    font-size:12px;
    line-height:1.35;
  }
  .import-preview-meta-grid span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding:7px 9px;
    border-radius:12px;
    background:rgba(30,58,95,.06);
  }
  .import-card-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:10px;
  }
  .import-card-actions button{
    min-height:34px !important;
    height:34px !important;
    width:100% !important;
    border-radius:14px !important;
    padding:0 10px !important;
    font-size:12px !important;
  }
}
/* SHIROHA_WEBVIEW_V20_IMPORT_REVIEW_MOBILE_CARDS_END */

/* ===== V36 DASHBOARD REDESIGN ===== */
.db-welcome{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  padding:28px 32px;margin-bottom:18px;
  border-radius:24px;
  background:var(--blue);
  color:#fff;overflow:hidden;position:relative;
}
.db-welcome::after{
  content:"";position:absolute;right:-40px;top:-40px;
  width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,.06);pointer-events:none;
}
.db-welcome-text{position:relative;z-index:1}
.db-welcome-text .kicker{color:rgba(255,255,255,.75);margin:0 0 6px}
.db-welcome-text h2{font-size:28px;margin:0 0 8px;color:#fff}
.db-welcome-text p{color:rgba(255,255,255,.8);margin:0;line-height:1.6;font-size:14px}
.db-welcome-actions{position:relative;z-index:1}
.db-btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border:0;border-radius:16px;
  background:#fff;color:var(--blue);font-weight:900;font-size:16px;
  cursor:pointer;box-shadow:none;
  transition:transform .15s,box-shadow .15s;
}
.db-btn-primary:hover{transform:translateY(-2px);box-shadow:none}
.db-btn-primary:active{transform:translateY(0)}

/* Stats Row */
.db-stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;
}
.db-stat-card{
  display:flex;align-items:center;gap:14px;
  padding:20px;border-radius:18px;
  background:var(--card);border:1px solid var(--line);
  box-shadow:none;transition:transform .12s,box-shadow .12s;
}
.db-stat-card:hover{transform:translateY(-1px);box-shadow:none}
.db-stat-icon{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.db-stat-icon svg{width:24px;height:24px}
.db-icon-total{background:#e8f0e0;color:#5a8a4a}
.db-icon-today{background:var(--blue2);color:var(--blue)}
.db-icon-wrong{background:#f8e8e4;color:#c44a3a}
.db-icon-records{background:#f0ebe0;color:#c49a3a}
.db-stat-body b{display:block;font-size:28px;line-height:1.2;color:var(--ink)}
.db-stat-body span{font-size:13px;color:var(--muted)}

/* Main Row */
.db-main-row{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;
}
.db-card{
  padding:22px;border-radius:18px;
  background:var(--card);border:1px solid var(--line);
  box-shadow:none;
}
.db-card-head{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  font-weight:800;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.04em;
}
.db-card-head svg{width:18px;height:18px}
.db-bank-card b{display:block;font-size:22px;color:var(--ink);margin-bottom:6px}
.db-bank-card em{font-style:normal;font-size:13px;color:var(--muted)}
.db-tip-card{background:#fff;border-color:rgba(201,168,76,.25)}
.db-tip-card b{display:block;font-size:16px;color:var(--ink);line-height:1.6}

/* Quick Actions */
.db-quick-actions{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.db-action-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:16px;border:2px solid var(--line);border-radius:16px;
  background:var(--card);color:var(--ink);font-weight:800;font-size:14px;
  cursor:pointer;transition:all .15s;
}
.db-action-btn:hover{background:var(--blue2);border-color:var(--blue);color:var(--blue)}
.db-action-btn svg{width:20px;height:20px}

/* --- Mobile --- */
@media(max-width:900px){
  .db-welcome{grid-template-columns:1fr;padding:22px}
  .db-stats-row{grid-template-columns:repeat(2,1fr)}
  .db-main-row{grid-template-columns:1fr}
  .db-quick-actions{grid-template-columns:1fr}
  .db-welcome-text h2{font-size:22px}
}
@media(max-width:480px){
  .db-stats-row{grid-template-columns:1fr}
  .db-stat-card{padding:16px}
  .db-stat-body b{font-size:24px}
}
/* ===== END V36 DASHBOARD ===== */

/* ===== V36 PRACTICE LAYOUT REDESIGN ===== */
/* Spacious serif layout — matching 线上学伴 design language */

.p-layout{display:flex;gap:36px;min-height:0;flex:1}
.p-main{flex:1;min-width:0;padding:0}
.p-sidebar{width:280px;flex-shrink:0;transition:width .3s ease,opacity .25s}


/* Header */
.practice-focus-head-v36{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px 0 20px;margin-bottom:32px;
  border-bottom:2px solid var(--line);
  position:relative;
}
.p-head-left{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.p-head-left b{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.p-head-left span{font-size:15px;color:var(--muted);font-weight:600}
.p-head-right{display:flex;align-items:center;gap:12px}

/* Countdown */
.p-countdown{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:58px;height:34px;padding:0 16px;
  border-radius:17px;background:var(--blue2);color:var(--blue);
  font-size:15px;font-weight:800;letter-spacing:.03em;
  transition:background .3s,color .3s;
}
.p-countdown-warn{background:#fef3cd;color:#c49a3a;animation:pulse-countdown .6s ease-in-out infinite}
.p-countdown-expired{background:var(--red2);color:var(--red);animation:none}
@keyframes pulse-countdown{0%,100%{opacity:1}50%{opacity:.5}}

/* ☆ Favorite */
.p-fav-btn{
  border:0;background:transparent;cursor:pointer;
  font-size:26px;line-height:1;padding:8px;color:var(--amber);
  transition:transform .15s;border-radius:50%;
}
.p-fav-btn:hover{transform:scale(1.2)}

/* Exit — wine red (header variant) */
.p-exit-top{padding:8px 18px;font-size:13px;border-radius:10px}

/* Exit — wine red */
.p-exit-btn{
  border:0;border-radius:14px;padding:14px 32px;cursor:pointer;
  font-weight:800;font-size:15px;letter-spacing:.02em;
  background:#722f37;color:#fce4e4;
  box-shadow:none;
  transition:all .15s;
}
.p-exit-btn:hover{background:#8b3a44;box-shadow:none;transform:translateY(-1px)}

/* Actions bar */
.p-actions{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;padding-top:24px;
  border-top:1px solid var(--line);align-items:center;
}
.p-actions button{padding:14px 28px;font-size:15px;font-weight:800;border-radius:14px}
.p-actions .primary{padding:15px 36px;font-size:16px}

/* Answer card */
.practice-nav-v36{
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:20px;max-height:calc(100vh - 200px);overflow-y:auto;
  box-shadow:none;
}
.p-nav-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;font-weight:800;font-size:16px;color:var(--ink);
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.p-nav-head span{font-size:13px;color:var(--muted);font-weight:600}
.practice-nav-v36 .practice-nav-grid-v26{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
}
.p-nav-btn{
  aspect-ratio:1;border-radius:10px;border:1px solid var(--line);
  background:var(--card);cursor:pointer;font-weight:700;font-size:13px;
  color:var(--muted);transition:all .15s;
  display:flex;align-items:center;justify-content:center;
  min-width:0;overflow:hidden;padding:0;
}
.p-nav-btn:hover{background:var(--blue2);color:var(--blue);border-color:var(--blue);transform:translateY(-1px)}
.p-nav-btn.current{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:none}
.p-nav-btn.done.ok{background:var(--green2);color:var(--green);border-color:var(--green)}
.p-nav-btn.done.bad{background:var(--red2);color:var(--red);border-color:var(--red)}
.p-nav-btn.favorite{box-shadow:inset 0 -2px 0 var(--amber)}

/* Focus card */
body.practice-focus #practice-card{
  padding:32px 40px;max-width:none;border-radius:20px;
  background:var(--card);border:1px solid var(--line);
  box-shadow:none;
}
body.practice-focus .p-layout{min-height:calc(100vh - 220px)}

/* === 本体-style typography for question area === */
body.practice-focus .p-question-area .question-title{
  font-family:'Noto Serif SC','Source Han Serif SC','STSong',serif;
  font-size:22px;line-height:1.9;margin:0 0 0 8px;font-weight:600;color:var(--ink);display:inline;
}
body.practice-focus .p-question-area .qmeta{margin-bottom:16px;gap:12px}
body.practice-focus .p-question-area .pill{
  padding:8px 16px;font-size:13px;border-radius:10px;font-family:inherit;
}

body.practice-focus .p-question-area .option{
  padding:20px 24px;margin:14px 0;border-radius:16px;
  border-width:2px;font-size:16px;gap:14px;line-height:1.6;
  transition:none;font-family:inherit;
}
body.practice-focus .p-question-area .option:hover{
  /* no visual change — prevent layout shake */
}
body.practice-focus .p-question-area .option.selected{
  /* only the radio circle lights up via accent-color */
}
body.practice-focus .p-question-area .option-key{
  display:none;
}

body.practice-focus #p-feedback{margin-top:28px}
body.practice-focus #p-feedback .feedback{
  padding:20px 24px;border-radius:16px;font-size:16px;line-height:1.8;
}

body.practice-focus .p-question-area .text-answer{
  padding:18px 20px;border-radius:16px;font-size:16px;
  border-width:2px;min-height:60px;font-family:inherit;line-height:1.7;
}

/* Mobile */
@media(max-width:720px){
  .p-layout{flex-direction:column;gap:24px}
  .p-sidebar{width:100%!important;max-height:none}
  .practice-nav-v36{max-height:none;border-radius:16px;padding:16px}
  body.practice-focus #practice-card{padding:20px 18px}
  body.practice-focus .p-question-area .question-title{font-size:19px;line-height:1.8}
  body.practice-focus .p-question-area .option{padding:16px 18px;font-size:15px}
  .p-actions{flex-wrap:wrap;gap:10px}
  .p-actions button{flex:1 1 auto;min-width:80px;padding:14px 18px}
}
/* ===== V36 EXAM RESULT SCREEN ===== */
.exam-result-v36{max-width:760px;margin:0 auto;padding:20px 0}
.er-banner{text-align:center;padding:40px 24px;border-radius:20px;margin-bottom:20px;color:#fff}
.er-passed{background:#5a8a4a}
.er-failed{background:#c44a3a}
.er-score{font-size:64px;font-weight:900;line-height:1;letter-spacing:-.02em}
.er-score span{font-size:28px;opacity:.7;margin-left:4px}
.er-status{font-size:24px;font-weight:800;margin:8px 0}
.er-meta{font-size:14px;opacity:.85;margin-top:6px}
.er-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.er-stats>div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;text-align:center}
.er-stats span{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.er-stats b{display:block;font-size:28px}
.er-nav{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;margin-bottom:20px;box-shadow:none}
.er-nav-head{font-weight:800;font-size:16px;color:var(--ink);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.er-nav-head span{font-size:13px;color:var(--muted);font-weight:600}
.er-nav .practice-nav-grid-v26{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.er-detail{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;margin-bottom:20px;box-shadow:none}
.er-detail .question-title{font-size:19px;line-height:1.8;margin:8px 0 16px}
.er-detail .option{padding:16px 20px;margin:10px 0;border-radius:14px;font-size:15px}
.er-detail .feedback{padding:16px 20px;border-radius:14px;font-size:15px;margin-top:14px}
/* Result answer card — light green for correct, light red for wrong */
.p-nav-btn.ok{background:#e6f7ec;color:#166534;border-color:#86efac}
.p-nav-btn.bad{background:#fde8e8;color:#991b1b;border-color:#fca5a5}
.er-detail.ok-question{background:#f0fdf4;border-color:#bbf7d0}
.er-detail.bad-question{background:#fef2f2;border-color:#fecaca}
/* Result action buttons */
.er-actions{display:flex;justify-content:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.er-btn-records{padding:12px 28px;font-size:14px;border-radius:10px;background:var(--blue);color:#fff;border:0;cursor:pointer;font-weight:700}
.er-btn-records:hover{opacity:.9}
.er-btn-exit{padding:12px 28px;font-size:14px;border-radius:10px;background:#f1f5f9;color:#475569;border:1px solid #cbd5e1;cursor:pointer;font-weight:700}
.er-btn-exit:hover{background:#e2e8f0}

@media(max-width:720px){
  .er-score{font-size:48px}
  .er-banner{padding:28px 18px}
  .er-stats{grid-template-columns:repeat(2,1fr)}
  .er-nav .practice-nav-grid-v26{grid-template-columns:repeat(6,1fr)}
}
/* ===== END V36 EXAM RESULT ===== */

/* ===== END V36 PRACTICE LAYOUT ===== */

/* ===== MINIMAL UI: hide borders/backgrounds until hover ===== */
.side .nav{
  background:transparent;
  border:1px solid transparent;
  color:rgba(255,255,255,.7);
  transition:all .2s;
}
.side .nav:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.25);
  color:#fff;
}
.side .nav.active{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.35);
  color:#fff;
}

.card{
  border-color:transparent;
  box-shadow:none;
  transition:all .25s;
}
.card:hover{
  border-color:var(--line);
  box-shadow:none;
}

.topbar button,
.topbar select{
  background:transparent;
  border-color:transparent;
  transition:all .2s;
}
.topbar button:hover,
.topbar select:hover{
  background:var(--card);
  border-color:var(--line);
}

button.primary{
  opacity:.88;
  transition:all .2s;
}
button.primary:hover{
  opacity:1;
}

button.ghost{
  background:transparent;
  border-color:transparent;
  transition:all .2s;
}
button.ghost:hover{
  background:#f8fafc;
  border-color:var(--line);
}

button.danger{
  opacity:.85;
  transition:all .2s;
}
button.danger:hover{
  opacity:1;
}

input, select, textarea{
  border-color:transparent;
  background:transparent;
  transition:all .2s;
}
input:hover, select:hover, textarea:hover,
input:focus, select:focus, textarea:focus{
  border-color:var(--line);
  background:var(--card);
}

.db-stat-card,
.db-card{
  border-color:transparent;
  box-shadow:none;
  transition:all .25s;
}
.db-stat-card:hover,
.db-card:hover{
  border-color:var(--line);
  box-shadow:none;
}

.db-quick-actions .db-action-btn{
  background:transparent;
  border:1px solid transparent;
  transition:all .2s;
}
.db-quick-actions .db-action-btn:hover{
  background:var(--blue2);
  border-color:var(--blue);
}

.list > div,
.record-item,
.wrong-item{
  border-color:transparent;
  box-shadow:none;
  transition:all .2s;
}
.list > div:hover,
.record-item:hover,
.wrong-item:hover{
  border-color:var(--line);
}

.table-wrap table th{
  background:transparent;
}
.table-wrap table tr:hover td{
  background:var(--bg);
}

.brand{
  opacity:.85;
  transition:opacity .2s;
}
.brand:hover{
  opacity:1;
}

.section-head{
  border-bottom-color:transparent;
  transition:border-color .25s;
}
.card:hover .section-head{
  border-bottom-color:var(--line);
}

/* ===== Dashboard compact tag-style stats ===== */
.db-stats-tags{
  display:flex;flex-wrap:wrap;gap:8px;padding:0 0 12px;
  border-bottom:1px solid var(--line);
}
.db-stat-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 12px;border-radius:8px;
  background:var(--blue2);color:var(--blue);
  font-size:13px;font-weight:600;
  border:1px solid var(--blue);
  transition:all .2s;
  cursor:default;
}
.db-stat-tag:hover{background:var(--blue);color:#fff}
.db-stat-tag b{font-weight:800}
.db-tip-sticky{
  margin-top:14px;padding:10px 18px;background:#fffef5;
  border:1px solid #e8dba0;border-radius:4px 14px 14px 14px;
  font-size:13px;color:#6b5e30;line-height:1.6;
  display:inline-block;position:relative;
  box-shadow:none;
}
.db-tip-sticky::before{
  content:'';position:absolute;top:-8px;left:16px;
  width:16px;height:16px;background:#e8dba0;
  border-radius:50%;box-shadow:none;
}

/* Dashboard section dividers */
.db-welcome{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:4px}
.db-quick-actions{padding-top:14px;border-top:1px solid var(--line);margin-top:14px}

/* Exam setup: score values inline right of label */
.form-grid label.score-inline{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
}
.form-grid label.score-inline input{
  width:80px;text-align:center;
}
#exam-name{width:180px !important;text-align:right}

/* Non-dashboard: remove card backgrounds — flat UI */
#practice .card,#exam .card,#wrongbook .card,#records .card,#banks .card,#import .card,#settings .card{
  background:transparent;border-color:transparent;box-shadow:none;
  padding-left:0;padding-right:0;
}
#practice .card:hover,#exam .card:hover,#wrongbook .card:hover,
#records .card:hover,#banks .card:hover,#import .card:hover,#settings .card:hover{
  border-color:transparent;box-shadow:none;
}

/* Form row dividers for practice/exam setup */
.form-grid label{
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.form-grid label:last-child{
  border-bottom:none;
}
#exam-setup .actions,
#practice .card:first-child .actions{
  padding-top:14px;
  border-top:1px solid var(--line);
}
.page-art-strip{
  padding-bottom:14px;margin-bottom:4px;
  border-bottom:1px solid var(--line);
}

/* Sidebar bottom: bank select + save */
.side-bottom{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.15)}
.side-bottom select,.side-bottom button{width:100%;padding:8px 12px;border-radius:8px;font-size:12px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.15);margin-bottom:6px}
.side-bottom select option{color:#1a1a2e}
.side-bottom button{background:rgba(255,255,255,.15);cursor:pointer}
.side-bottom button:hover{background:rgba(255,255,255,.25)}

/* Hide topbar permanently */
.topbar{display:none !important}

/* Override: sidebar theme color + body white + nav white text */
body{background:#fff !important}
.side{background:var(--blue) !important}
.side .nav{color:rgba(255,255,255,.75) !important}
.side .nav:hover,.side .nav.active{color:#fff !important;background:rgba(255,255,255,.15) !important}

/* Fill-in-blank: visible underlines and input rows */
.blank-line{text-decoration:underline;text-underline-offset:4px;padding:0 2px;color:var(--blue)}
.blank-inputs-wrap{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.blank-input-row{display:flex;align-items:center;gap:8px}
.blank-label{font-size:14px;font-weight:600;color:var(--blue);min-width:40px}
.blank-input-row .text-answer{flex:1;max-width:300px}

/* Layout polish: keep the existing palette, improve hierarchy and rhythm. */
.main{
  max-width:1040px;
  padding-top:28px;
}
.appbar{
  padding:12px 24px;
}
.appbar-title b{font-size:17px}
.appbar .bank-picker{
  max-width:58%;
  padding:9px 14px;
  border-radius:12px;
}
.db-hero{
  min-height:116px;
  padding:24px 28px;
  margin-bottom:20px;
}
.db-stats-row{
  gap:14px;
  margin-bottom:20px;
}
.db-stat-card{
  min-height:78px;
  padding:14px 16px;
  border-radius:16px;
}
.db-main-row{
  gap:20px;
  margin-bottom:20px;
}
.db-card{
  min-height:136px;
  padding:22px 24px;
  border-radius:18px;
}
.db-quick-actions{
  padding:16px 8px 4px;
  margin-top:0;
}
.db-action-btn{
  min-height:54px;
  border-radius:14px;
}

#practice .card:first-child,
#exam .card:first-child,
#wrongbook .card,
#records .card,
#banks .card,
#import .card,
#settings .card{
  padding:26px 30px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
}
#practice .card:first-child .section-head,
#exam .card:first-child .section-head{
  margin-bottom:22px;
}
#practice .card:first-child .form-grid,
#exam .card:first-child .form-grid{
  gap:18px;
}
#practice .card:first-child .actions,
#exam-setup .actions{
  margin-top:22px;
  padding-top:18px;
}
#practice-card{
  margin-top:18px;
}

@media(max-width:720px){
  .main{padding:18px 14px 112px}
  .appbar{padding:10px 14px}
  .appbar .bank-picker{max-width:60%;padding:8px 10px}
  .db-hero{min-height:0;padding:20px}
  .db-stats-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .db-main-row{grid-template-columns:1fr;gap:12px}
  .db-card{min-height:0;padding:18px}
  #practice .card:first-child,
  #exam .card:first-child,
  #wrongbook .card,
  #records .card,
  #banks .card,
  #import .card,
  #settings .card{padding:20px 16px;border-radius:16px}
}

/* Welcome strip: subtle particles add movement without competing with the copy. */
.db-hero-text{position:relative;z-index:2;flex:1;min-width:0}
.db-hero{isolation:isolate}
.db-hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.8;background-image:radial-gradient(circle at 42% 28%,rgba(255,255,255,.85) 0 3px,transparent 4px),radial-gradient(circle at 56% 64%,rgba(255,255,255,.72) 0 2px,transparent 3px),radial-gradient(circle at 73% 38%,rgba(255,255,255,.78) 0 3px,transparent 4px),radial-gradient(circle at 88% 72%,rgba(255,255,255,.75) 0 2px,transparent 3px);animation:dbParticleGlow 6s ease-in-out infinite}
.db-hero-particles{position:absolute;inset:0;z-index:1;display:block;overflow:hidden;pointer-events:none;opacity:.95;background-image:radial-gradient(circle at 42% 28%,rgba(255,255,255,.8) 0 3px,transparent 4px),radial-gradient(circle at 56% 64%,rgba(255,255,255,.72) 0 2px,transparent 3px),radial-gradient(circle at 73% 38%,rgba(255,255,255,.7) 0 3px,transparent 4px),radial-gradient(circle at 88% 72%,rgba(255,255,255,.75) 0 2px,transparent 3px)}
.db-hero-particles::before,.db-hero-particles::after{content:'';position:absolute;height:1px;background:rgba(255,255,255,.16);transform-origin:left center;animation:dbParticleLine 8s ease-in-out infinite}
.db-hero-particles::before{width:190px;left:42%;top:28%;transform:rotate(17deg)}
.db-hero-particles::after{width:230px;left:61%;top:68%;transform:rotate(-14deg);animation-delay:-3s}
.db-hero-particles i{display:block;position:absolute;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.86);box-shadow:0 0 14px rgba(255,255,255,.48);animation:dbParticleFloat 7s ease-in-out infinite}
.db-hero-particles i:nth-child(1){left:39%;top:22%;animation-delay:-1s}.db-hero-particles i:nth-child(2){left:48%;top:58%;animation-delay:-4s}.db-hero-particles i:nth-child(3){left:57%;top:31%;animation-delay:-2s}.db-hero-particles i:nth-child(4){left:67%;top:18%;animation-delay:-5s}
.db-hero-particles i:nth-child(5){left:74%;top:58%;animation-delay:-3s}.db-hero-particles i:nth-child(6){left:83%;top:35%;animation-delay:-6s}.db-hero-particles i:nth-child(7){left:91%;top:70%;animation-delay:-2.5s}.db-hero-particles i:nth-child(8){left:52%;top:82%;animation-delay:-4.5s}
.db-hero-particles i:nth-child(9){left:44%;top:75%;animation-delay:-6.5s}.db-hero-particles i:nth-child(10){left:63%;top:78%;animation-delay:-1.5s}.db-hero-particles i:nth-child(11){left:79%;top:24%;animation-delay:-5.5s}.db-hero-particles i:nth-child(12){left:88%;top:48%;animation-delay:-3.5s}
.db-hero-particles i:nth-child(13){left:70%;top:43%;animation-delay:-7s}.db-hero-particles i:nth-child(14){left:96%;top:26%;animation-delay:-4s}.db-hero-particles i:nth-child(15){left:58%;top:66%;animation-delay:-6s}
@keyframes dbParticleFloat{0%,100%{opacity:.35;transform:translate3d(0,3px,0) scale(.8)}50%{opacity:1;transform:translate3d(0,-7px,0) scale(1.25)}}
@keyframes dbParticleGlow{0%,100%{opacity:.42;transform:translateX(0)}50%{opacity:.95;transform:translateX(-8px)}}
@keyframes dbParticleLine{0%,100%{opacity:.25;transform:rotate(17deg) scaleX(.8)}50%{opacity:.8;transform:rotate(17deg) scaleX(1)}}
@media(prefers-reduced-motion:reduce){.db-hero-particles i,.db-hero-particles::before,.db-hero-particles::after{animation:none}}