:root{
  --bg:#f5f7fb;
  --card:#fff;
  --ink:#111827;
  --muted:#64748b;
  --line:#e5e7eb;
  --blue:#2563eb;
  --blue2:#dbeafe;
  --green:#16a34a;
  --green2:#dcfce7;
  --red:#dc2626;
  --red2:#fee2e2;
  --amber:#d97706;
  --shadow:0 18px 45px rgba(15,23,42,.08);
  --r:22px
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:linear-gradient(135deg,#eef4ff,#f8fafc 45%,#f5f7fb);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;
  color:var(--ink)
}
button,input,select,textarea{
  font:inherit
}
.app{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh
}
.side{
  position:sticky;
  top:0;
  height:100vh;
  padding:22px;
  background:rgba(255,255,255,.86);
  border-right:1px solid var(--line);
  backdrop-filter:blur(14px)
}
.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:#1d4ed8;
  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:var(--shadow);
  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:999px;
  padding:8px 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:.16s
}
.option input{
  margin-top:3px
}
.option.selected{
  background:var(--blue2);
  border-color:var(--blue);
  box-shadow:0 8px 22px rgba(37,99,235,.14)
}
.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{
  background:var(--green2);
  color:#166534;
  border:1px solid #86efac
}
.feedback.bad{
  background:var(--red2);
  color:#991b1b;
  border:1px solid #fecaca
}
.feedback.warn{
  background:#fffbeb;
  color:#92400e;
  border:1px solid #fde68a
}
.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:0 28px 80px rgba(15,23,42,.28);
  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:#93c5fd;
  background:#eff6ff
}
.bank-item .row-actions{
  justify-content:flex-end
}
details{
  margin-top:10px
}
summary{
  cursor:pointer;
  font-weight:900;
  color:#1d4ed8
}
.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(37,99,235,.12)
}
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:0 14px 38px rgba(15,23,42,.18);
  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{
  display:none!important
}
body.practice-focus .app{
  display:block;
  min-height:100vh;
  background:#f7f9fd
}
body.practice-focus .main{
  padding:0;
  max-width:none;
  width:100%
}
body.practice-focus .view{
  display:none!important
}
body.practice-focus #practice.view{
  display:block!important;
  min-height:100vh;
  padding:18px;
  background:linear-gradient(180deg,#f8fbff,#eef4ff)
}
body.practice-focus #practice>.card:first-child{
  display:none!important
}
body.practice-focus #practice-card{
  max-width:920px;
  margin:0 auto;
  min-height:calc(100vh - 36px);
  box-shadow:0 18px 50px rgba(15,23,42,.12);
  border-radius:24px;
  padding:28px
}
.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:#2563eb
}
.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(37,99,235,.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:#2563eb;
  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:#2563eb;
  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:linear-gradient(135deg,#eff5ff,#ffffff 58%,#f6f9ff);
  border:1px solid rgba(37,99,235,.12);
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)
}
.hero-visual-card::before{
  content:"";
  position:absolute;
  left:-30px;
  bottom:-34px;
  width:140px;
  height:140px;
  border-radius:999px;
  background:rgba(37,99,235,.10);
  filter:blur(8px)
}
.hero-visual-card::after{
  content:"";
  position:absolute;
  top:-24px;
  right:-20px;
  width:120px;
  height:120px;
  border-radius:999px;
  background:rgba(147,197,253,.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(37,99,235,.14);
  background:#fff;
  box-shadow:0 10px 24px rgba(37,99,235,.12)
}
.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:linear-gradient(135deg,#eef5ff,#ffffff 62%,#f7faff);
  border:1px solid rgba(37,99,235,.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(37,99,235,.10);
  color:#4b5d77;
  font-size:12px;
  font-weight:800
}
.stage-tag.active{
  background:rgba(37,99,235,.10);
  color:#1d4ed8;
  border-color:rgba(37,99,235,.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:#2563eb;
  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:blur(18px);
    display:flex!important;
    grid-template-columns:none!important;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    box-shadow:0 20px 50px rgba(15,23,42,.14);
    -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:linear-gradient(180deg,#2d6df6,#3b82f6);
    color:#fff;
    box-shadow:0 10px 22px rgba(37,99,235,.22)
  }
  .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:blur(14px)
  }
  .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(37,99,235,.10);
  border-radius:20px;
  background:linear-gradient(135deg,#f4f8ff,#fff 58%,#f8fbff);
  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;
  filter:drop-shadow(0 10px 20px rgba(37,99,235,.10))
}
.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:#2563eb
}
.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(37,99,235,.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.1: Web/App 素材布局融合优化
目标：一页一图，但让图片进入说明卡/状态卡内部，不再像单独贴在页面一侧。 */
.hero-card,
.import-stage-panel,
.page-art-strip{
  position:relative;
  isolation:isolate;
}
.hero-card{
  overflow:hidden;
  background:
  radial-gradient(circle at 88% 12%, rgba(147,197,253,.24), transparent 30%),
  linear-gradient(135deg, rgba(255,255,255,.96), rgba(249,252,255,.94) 52%, rgba(239,246,255,.88));
}
.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:
  radial-gradient(circle at 88% 50%, rgba(37,99,235,.10), transparent 38%),
  linear-gradient(135deg, rgba(239,246,255,.78), rgba(255,255,255,.92));
}
.hero-visual-card::before{
  left:auto;
  right:38px;
  bottom:-48px;
  width:170px;
  height:170px;
  background:rgba(37,99,235,.08);
  filter:blur(10px);
}
.hero-visual-card::after{
  top:-28px;
  right:-28px;
  width:146px;
  height:146px;
  background:rgba(191,219,254,.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:
  radial-gradient(circle at 90% 55%, rgba(147,197,253,.26), transparent 34%),
  linear-gradient(135deg,#eef5ff,#fff 60%,#f8fbff);
}
.import-stage-panel::before{
  content:"";
  position:absolute;
  right:18px;
  bottom:-48px;
  width:190px;
  height:190px;
  border-radius:999px;
  background:rgba(37,99,235,.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;
  filter:drop-shadow(0 14px 24px rgba(37,99,235,.14));
}
.page-art-strip{
  display:block;
  min-height:118px;
  padding:18px 160px 18px 20px;
  margin:0 0 16px;
  border-color:rgba(37,99,235,.12);
  background:
  radial-gradient(circle at 90% 50%, rgba(147,197,253,.24), transparent 34%),
  linear-gradient(135deg,#f4f8ff,#fff 60%,#f8fbff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
.page-art-strip::before{
  content:"";
  position:absolute;
  right:18px;
  top:50%;
  width:128px;
  height:128px;
  transform:translateY(-50%);
  border-radius:999px;
  background:rgba(37,99,235,.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;
  filter:drop-shadow(0 16px 24px rgba(37,99,235,.12));
}
.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:
  radial-gradient(circle at 91% 52%, rgba(203,213,225,.24), transparent 35%),
  linear-gradient(135deg,#f8fafc,#fff 58%,#f8fbff);
}
.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.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(96,165,250,.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(42px,1fr));gap:8px;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:#eff6ff;color:#1d4ed8}
.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:#f4f8ff;
  --card:#ffffff;
  --ink:#0f1f3a;
  --muted:#5f7290;
  --line:#dbe8fb;
  --blue:#2f6fed;
  --blue2:#eaf3ff;
  --blue3:#f5f9ff;
  --blue-soft:#f0f6ff;
  --shadow:0 18px 48px rgba(37,99,235,.10);
}
body{
  background:
    radial-gradient(circle at 16% 8%, rgba(96,165,250,.20), transparent 26%),
    radial-gradient(circle at 86% 4%, rgba(191,219,254,.24), transparent 28%),
    linear-gradient(135deg,#f6faff 0%,#eef5ff 46%,#f9fbff 100%);
  color:var(--ink);
}
.side{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,251,255,.90));
  border-right:1px solid rgba(47,111,237,.12);
  box-shadow:8px 0 30px rgba(37,99,235,.04);
}
.brand img{
  background:linear-gradient(135deg,#eef6ff,#ffffff);
  border:1px solid rgba(47,111,237,.14);
  box-shadow:0 10px 26px rgba(47,111,237,.10);
}
.brand b{color:#15305a}
.nav{
  color:#405675;
}
.nav:hover,
.nav.active{
  background:linear-gradient(135deg,#eaf3ff,#f6fbff);
  color:#2f6fed;
  box-shadow:inset 0 0 0 1px rgba(47,111,237,.08);
}
.kicker{color:#2f6fed}
.card,.hero-card{
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(250,253,255,.94));
  border-color:rgba(47,111,237,.13);
  box-shadow:0 18px 48px rgba(37,99,235,.09);
}
.primary{
  background:linear-gradient(135deg,#2f6fed,#4f8dfd);
  box-shadow:0 12px 24px rgba(47,111,237,.18);
}
.ghost{
  background:linear-gradient(180deg,#ffffff,#f6faff);
  border-color:rgba(47,111,237,.15);
  color:#38506f;
}
input,select,textarea{
  border-color:rgba(47,111,237,.15);
  background:rgba(255,255,255,.96);
}
input:focus,select:focus,textarea:focus{
  outline:2px solid rgba(47,111,237,.22);
  border-color:rgba(47,111,237,.40);
}
.table-wrap, .list, .bank-list{
  border-color:rgba(47,111,237,.10);
}

/* Hero: make mascot part of the hero panel instead of a pasted square. */
.hero-card{
  overflow:hidden;
  background:
    radial-gradient(circle at 84% 48%, rgba(96,165,250,.22), transparent 32%),
    linear-gradient(135deg,#ffffff 0%,#f5f9ff 48%,#eaf3ff 100%);
}
.hero-card::before{
  content:"";
  position:absolute;
  right:-90px;
  top:-90px;
  width:260px;
  height:260px;
  border-radius:999px;
  background:rgba(47,111,237,.07);
  z-index:0;
}
.hero-card::after{
  content:"";
  position:absolute;
  right:22px;
  bottom:18px;
  width:46%;
  height:46%;
  border-radius:36px;
  background:linear-gradient(135deg,rgba(219,234,254,.30),rgba(255,255,255,0));
  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!important;
  overflow:visible;
  justify-content:center;
}
.hero-mascot-main{
  border-radius:34px;
  opacity:.96;
  filter:saturate(.86) hue-rotate(8deg) brightness(1.03) drop-shadow(0 18px 34px rgba(47,111,237,.16))!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(255,255,255,.74);
  border-color:rgba(47,111,237,.13);
}

/* Import panel: blue card composition, no hard purple/rectangular boundary. */
.import-stage-panel{
  overflow:hidden;
  border:1px solid rgba(47,111,237,.12);
  background:
    radial-gradient(circle at 88% 52%, rgba(96,165,250,.24), transparent 32%),
    linear-gradient(135deg,#f6faff 0%,#ffffff 56%,#eaf3ff 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
}
.import-stage-panel::before{
  background:rgba(47,111,237,.08)!important;
}
.import-stage-panel::after{
  background:rgba(191,219,254,.20)!important;
}
.import-art-main{
  border-radius:30px;
  opacity:.94;
  filter:saturate(.84) hue-rotate(8deg) brightness(1.04) drop-shadow(0 16px 30px rgba(47,111,237,.15))!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:linear-gradient(135deg,#dcecff,#f5f9ff);
  color:#2f6fed;
}

/* Page art cards: unified blue-white panels; images are softly masked and tinted. */
.page-art-strip{
  overflow:hidden;
  border-color:rgba(47,111,237,.12)!important;
  background:
    radial-gradient(circle at 88% 50%, rgba(96,165,250,.20), transparent 33%),
    linear-gradient(135deg,#f6faff 0%,#ffffff 56%,#eef6ff 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 12px 32px rgba(37,99,235,.05);
}
.page-art-strip::before{
  background:rgba(47,111,237,.07)!important;
}
.page-art-strip b{color:#16335d!important}
.page-art-strip span{color:#60738f!important}
.page-art-strip img{
  border-radius:28px;
  opacity:.90!important;
  filter:saturate(.82) hue-rotate(8deg) brightness(1.04) drop-shadow(0 16px 26px rgba(47,111,237,.13))!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:
    radial-gradient(circle at 90% 52%, rgba(147,197,253,.18), transparent 34%),
    linear-gradient(135deg,#f8fbff 0%,#ffffff 58%,#f1f7ff 100%)!important;
}
.asset-reference-details{
  border-color:rgba(47,111,237,.12);
  background:#f8fbff;
}
.asset-reference-details img{
  -webkit-mask-image:none!important;
  mask-image:none!important;
  filter:saturate(.86) hue-rotate(8deg) brightness(1.03)!important;
}

/* Progress, quiz and wrongbook states stay in the same blue visual language. */
.pill,.notice,.builtin-bank-card-v252{
  border-color:rgba(47,111,237,.15)!important;
  background:linear-gradient(180deg,#f6faff,#ffffff)!important;
}
.practice-nav-grid-v26 button.current{
  background:#eaf3ff!important;
  color:#2f6fed!important;
  outline-color:rgba(47,111,237,.65)!important;
}
.practice-nav-grid-v26 button.favorite{
  box-shadow:inset 0 -3px 0 rgba(96,165,250,.75)!important;
}
.favorite-item-v27{
  border-color:rgba(47,111,237,.14)!important;
  background:rgba(248,251,255,.86)!important;
}

@media(max-width:900px){
  .hero-card::after{display:none}
  .hero-mascot-main,.import-art-main,.page-art-strip img{
    filter:saturate(.82) hue-rotate(8deg) brightness(1.04) drop-shadow(0 12px 20px rgba(47,111,237,.12))!important;
  }
}
@media(max-width:720px){
  .hero-card{
    background:linear-gradient(135deg,#ffffff,#f1f7ff)!important;
  }
  .page-art-strip{
    background:linear-gradient(135deg,#f8fbff,#ffffff 58%,#eef6ff)!important;
  }
  .page-art-strip img,
  .import-art-main{
    opacity:.84!important;
  }
}



/* SHIROHA_V28_1_BANK_MOBILE_LAYOUT_START
   题库管理移动端结构优化：当前题库上方统一选择，卡片只展示信息，单题库操作收进更多菜单。 */
.bank-manage-toolbar-v28{
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,247,255,.92))!important;
  border:1px solid rgba(47,111,237,.16)!important;
  box-shadow:0 16px 36px rgba(47,111,237,.08)!important;
}
.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(47,111,237,.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:linear-gradient(135deg,rgba(255,255,255,.98),rgba(247,251,255,.94))!important;
  border:1px solid rgba(47,111,237,.13)!important;
  border-radius:20px!important;
  box-shadow:0 12px 30px rgba(37,99,235,.055)!important;
}
.bank-item-compact-v28.active-bank{
  border-color:rgba(47,111,237,.32)!important;
  background:linear-gradient(135deg,#ffffff,#edf6ff)!important;
}
.bank-item-compact-v28.selected-bank-v28{
  box-shadow:0 16px 36px rgba(37,99,235,.11)!important;
}
.bank-card-check-v28{
  padding:2px 0 0!important;
}
.bank-card-check-v28 input{
  accent-color:#2f6fed;
}
.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(47,111,237,.16);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#2f6fed;
  font-weight:900;
  padding:8px 13px;
  box-shadow:0 8px 18px rgba(47,111,237,.08);
}
.bank-more-menu-v28 summary::-webkit-details-marker{
  display:none;
}
.bank-more-menu-v28[open] summary{
  background:#eaf3ff;
}
.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(47,111,237,.14);
  border-radius:16px;
  box-shadow:0 20px 45px rgba(15,23,42,.14);
}
.bank-more-panel-v28 button{
  width:100%;
  min-height:38px;
  padding:8px 10px;
}
@media(max-width:720px){
  .main{
    padding-bottom:calc(152px + env(safe-area-inset-bottom))!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:0 10px 26px rgba(47,111,237,.18)!important;
  }
  .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:
    radial-gradient(circle at 88% 18%, rgba(147,197,253,.16), transparent 26%),
    radial-gradient(circle at 12% 100%, rgba(191,219,254,.18), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,250,255,.96))!important;
  box-shadow:0 18px 42px rgba(37,99,235,.06), inset 0 1px 0 rgba(255,255,255,.88)!important;
  backdrop-filter: blur(10px) saturate(1.04);
  -webkit-backdrop-filter: blur(10px) saturate(1.04);
}
.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:radial-gradient(circle, rgba(191,219,254,.34), rgba(191,219,254,0) 70%);
  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!important;
  opacity:.98!important;
  filter: drop-shadow(0 18px 34px rgba(59,130,246,.14)) 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:#2f6fed}
.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:#2f6fed;
  --sq-blue-2:#60a5fa;
  --sq-blue-soft:#eaf3ff;
  --sq-card-border:rgba(47,111,237,.13);
  --sq-card-shadow:0 18px 45px rgba(37,99,235,.07);
}
.hero-card{
  min-height:244px;
  align-items:center;
  background:
    radial-gradient(circle at 74% 22%, rgba(147,197,253,.24), transparent 30%),
    radial-gradient(circle at 16% 100%, rgba(219,234,254,.65), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(242,248,255,.96) 48%, rgba(232,243,255,.90))!important;
  border:1px solid var(--sq-card-border)!important;
  box-shadow:var(--sq-card-shadow), inset 0 1px 0 rgba(255,255,255,.88)!important;
  overflow:hidden;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.82), rgba(255,255,255,.34) 56%, rgba(255,255,255,.08)),
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.64), transparent 24%);
  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(47,111,237,.12)!important;
  background:rgba(255,255,255,.76)!important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.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(47,111,237,.13)!important;
  background:
    radial-gradient(circle at 92% 16%, rgba(147,197,253,.18), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,249,255,.95))!important;
  box-shadow:0 16px 36px rgba(37,99,235,.06), inset 0 1px 0 rgba(255,255,255,.86)!important;
}
.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:
    radial-gradient(circle at 94% 18%, rgba(147,197,253,.14), transparent 30%),
    linear-gradient(135deg, rgba(248,251,255,.96), rgba(255,255,255,.98))!important;
}
.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:#eaf3ff;
  color:#2f6fed;
  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:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.98) 62%, rgba(239,246,255,.94) 100%) !important;
  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: drop-shadow(0 16px 28px rgba(59,130,246,.10)) saturate(1.02) brightness(1.01) !important;
}
@media(max-width:720px){
  .import-stage-panel{
    background:
      linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,250,255,.98) 72%, rgba(239,246,255,.95) 100%) !important;
  }
}
/* 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:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.98) 62%, rgba(239,246,255,.94) 100%) !important;
  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: drop-shadow(0 16px 28px rgba(59,130,246,.10)) 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:linear-gradient(135deg,rgba(248,251,255,.96),rgba(255,255,255,.98)) !important;
}
@media(max-width:720px){
  .import-stage-panel{
    background:
      linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,250,255,.98) 72%, rgba(239,246,255,.95) 100%) !important;
  }
}
/* 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:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.98) 58%, rgba(239,246,255,.95) 100%) !important;
  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 !important;
  filter:drop-shadow(0 16px 28px rgba(59,130,246,.12)) 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:
      linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,251,255,.98) 70%, rgba(239,246,255,.95) 100%) !important;
  }
  .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:
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.98) 58%, rgba(240,247,255,.96) 100%) !important;
  border:1px solid rgba(47,111,237,.12) !important;
  box-shadow:0 14px 34px rgba(37,99,235,.055), inset 0 1px 0 rgba(255,255,255,.86) !important;
  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 !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  filter:drop-shadow(0 12px 24px rgba(59,130,246,.10)) 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:
    linear-gradient(135deg, rgba(255,255,255,.985) 0%, rgba(248,251,255,.985) 60%, rgba(241,248,255,.965) 100%) !important;
  border:1px solid rgba(47,111,237,.12) !important;
  box-shadow:0 14px 34px rgba(37,99,235,.052), inset 0 1px 0 rgba(255,255,255,.88) !important;
  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 !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  filter:drop-shadow(0 10px 20px rgba(59,130,246,.10)) 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(47,111,237,.08) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9) !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{
  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(47,111,237,.10) !important;
    box-shadow:0 18px 44px rgba(37,99,235,.16), inset 0 1px 0 rgba(255,255,255,.86) !important;
    backdrop-filter:blur(14px) saturate(1.08) !important;
    -webkit-backdrop-filter:blur(14px) saturate(1.08) !important;
    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 !important;
    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:linear-gradient(180deg,#eaf4ff 0%,#f7fbff 100%) !important;
    color:#2f6fed !important;
    box-shadow:0 10px 24px rgba(47,111,237,.16), inset 0 1px 0 rgba(255,255,255,.82) !important;
  }

  .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:#2f6fed !important;
    stroke:#2f6fed !important;
  }
}

/* 兼容旧的侧边栏在移动端变成底部导航的实现。 */
@media(max-width:720px){
  .sidebar .nav{
    border-radius:18px !important;
  }
  .sidebar .nav.active{
    background:linear-gradient(180deg,#eaf4ff 0%,#f7fbff 100%) !important;
    color:#2f6fed !important;
    box-shadow:0 10px 24px rgba(47,111,237,.14), inset 0 1px 0 rgba(255,255,255,.82) !important;
  }
}
/* 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 !important;
    -webkit-backdrop-filter:none !important;
  }

  .card,
  .hero-card,
  .page-art-strip,
  .import-stage-panel,
  .data-tool-card-v23{
    box-shadow:0 8px 20px rgba(37,99,235,.045) !important;
  }

  .mobile-bottom-nav,
  .bottom-nav,
  nav.mobile-nav,
  .sidebar{
    box-shadow:0 10px 24px rgba(37,99,235,.10) !important;
  }

  .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:0 6px 16px rgba(47,111,237,.10) !important;
  }
}

@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_WEB_V28_1_DESKTOP_LAYOUT_REBALANCE_START
   目标：
   1) 桌面端核心内容不要铺得过宽；
   2) 顶部题库选择并入白色区域；
   3) 错题本 / 刷题记录 / 设置导出隐藏顶部题库选择条；
   4) 刷题/考试答题区进一步收窄，减少横向空旷感。 */
@media (min-width: 721px){
  .main{
    padding:18px 28px 28px 16px !important;
  }

  .main > .topbar,
  .main > .view.active{
    width:min(1260px, calc(100vw - 360px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .topbar{
    justify-content:flex-end !important;
    align-items:center !important;
    gap:0 !important;
    padding:16px 20px !important;
    margin:0 0 12px !important;
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,253,255,.96)) !important;
    border:1px solid rgba(47,111,237,.12) !important;
    border-radius:24px !important;
    box-shadow:0 14px 34px rgba(37,99,235,.07) !important;
  }

  .topbar.is-hidden-by-view,
  body[data-active-view="wrongbook"] .topbar,
  body[data-active-view="records"] .topbar,
  body[data-active-view="settings"] .topbar{
    display:none !important;
  }

  .topbar .top-actions{
    width:100% !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:12px !important;
    margin-left:0 !important;
  }

  .topbar .top-actions select{
    min-width:320px !important;
    max-width:520px !important;
    flex:0 1 420px !important;
  }

  .topbar .top-actions button{
    flex:0 0 auto !important;
  }

  .view.active{
    margin-top:0 !important;
  }

  .card,
  .hero-card{
    padding:20px !important;
  }

  .hero-card{
    grid-template-columns:minmax(0,1.18fr) minmax(290px,.82fr) !important;
    gap:16px !important;
  }

  .hero-stats{
    gap:10px !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) 164px !important;
    min-height:92px !important;
    gap:12px !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:148px !important;
    max-height:108px !important;
  }

  #practice > .card:first-child,
  #exam > .card:first-child{
    max-width:980px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  #practice-card,
  #exam-card{
    max-width:980px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  body.practice-focus #practice.view{
    padding:16px !important;
  }

  body.practice-focus #practice-card{
    max-width:860px !important;
    min-height:calc(100vh - 32px) !important;
    padding:24px !important;
  }
}
/* SHIROHA_WEB_V28_1_DESKTOP_LAYOUT_REBALANCE_END */

/* SHIROHA_WEB_V28_2_SIDEBAR_AND_FOCUS_POLISH_START
   左侧导航可收起；收起后主画面居中并保持左右留白；
   顶部题库条与核心内容等宽；考试模式也进入沉浸式；放大刷题收藏/退出按钮。 */
@media (min-width:721px){
  .app{
    grid-template-columns:260px minmax(0,1fr) !important;
  }

  .side{
    transition:transform .18s ease, opacity .18s ease !important;
    z-index:60 !important;
  }

  .sidebar-toggle{
    position:fixed !important;
    left:18px !important;
    bottom:20px !important;
    z-index:1200 !important;
    min-height:40px !important;
    padding:0 14px !important;
    border-radius:999px !important;
    border:1px solid rgba(47,111,237,.16) !important;
    background:rgba(255,255,255,.94) !important;
    color:#2f6fed !important;
    box-shadow:0 12px 26px rgba(37,99,235,.12) !important;
    cursor:pointer !important;
    font-weight:850 !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
  }

  body.side-collapsed .app{
    grid-template-columns:0 minmax(0,1fr) !important;
  }

  body.side-collapsed .side{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    width:260px !important;
    transform:translateX(-105%) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  body.side-collapsed .sidebar-toggle{
    left:20px !important;
  }

  .main{
    padding:18px 32px 32px 32px !important;
  }

  body.side-collapsed .main{
    padding-left:72px !important;
    padding-right:72px !important;
  }

  .main > .topbar,
  .main > .view.active{
    width:min(1080px, calc(100vw - 360px)) !important;
    max-width:1080px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  body.side-collapsed .main > .topbar,
  body.side-collapsed .main > .view.active{
    width:min(1080px, calc(100vw - 144px)) !important;
  }

  .topbar{
    min-height:76px !important;
    border-radius:24px !important;
  }

  .topbar .top-actions select{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:none !important;
  }

  .topbar .top-actions{
    width:100% !important;
    max-width:100% !important;
  }

  #practice > .card:first-child,
  #exam > .card:first-child,
  #practice-card,
  #exam-card{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* 进入练习/考试后缩窄答题纸，避免横向阅读距离过长。 */
  body.practice-focus #practice-card,
  body.exam-focus #exam-card{
    max-width:880px !important;
    width:min(880px, calc(100vw - 80px)) !important;
    min-height:calc(100vh - 36px) !important;
    margin:0 auto !important;
  }

  body.practice-focus #practice.view,
  body.exam-focus #exam.view{
    padding:18px 0 !important;
  }
}

@media (max-width:720px){
  .sidebar-toggle{display:none !important;}
}

body.exam-focus .side,
body.exam-focus .topbar{
  display:none !important;
}
body.exam-focus .app{
  display:block !important;
  min-height:100vh !important;
  background:#f7f9fd !important;
}
body.exam-focus .main{
  padding:0 !important;
  max-width:none !important;
  width:100% !important;
}
body.exam-focus .view{
  display:none !important;
}
body.exam-focus #exam.view{
  display:block !important;
  min-height:100vh !important;
  background:linear-gradient(180deg,#f8fbff,#eef4ff) !important;
}
body.exam-focus #exam-setup{
  display:none !important;
}
body.exam-focus #exam-card{
  box-shadow:0 18px 50px rgba(15,23,42,.12) !important;
  border-radius:24px !important;
  padding:26px !important;
}
.exam-focus-head{
  position:sticky !important;
  top:0 !important;
  z-index:5 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  padding:0 0 16px !important;
  margin-bottom:18px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.94)) !important;
  border-bottom:1px solid rgba(47,111,237,.12) !important;
}
.exam-focus-head b{
  display:block !important;
  font-size:18px !important;
  color:#10233f !important;
}
.exam-focus-head span{
  display:block !important;
  margin-top:4px !important;
  color:#2f6fed !important;
  font-weight:800 !important;
}
.exam-head-actions,
.exam-focus-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.exam-focus-actions{
  position:sticky !important;
  bottom:0 !important;
  z-index:5 !important;
  padding:14px 0 0 !important;
  margin-top:18px !important;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 36%) !important;
}
.focus-mini-btn,
.practice-tools-v26 .mini-btn,
.practice-focus-head .mini-btn{
  min-height:42px !important;
  padding:0 16px !important;
  border-radius:14px !important;
  font-size:14px !important;
  font-weight:850 !important;
}
.practice-tools-v26{
  gap:10px !important;
}

@media(max-width:720px){
  body.exam-focus #exam.view{
    padding:8px !important;
  }
  body.exam-focus #exam-card{
    width:100% !important;
    min-height:calc(100vh - 16px) !important;
    border-radius:18px !important;
    padding:18px !important;
  }
  .exam-focus-head{
    align-items:flex-start !important;
  }
  .exam-head-actions{
    width:100% !important;
  }
  .exam-head-actions button,
  .exam-focus-actions button,
  .practice-tools-v26 .mini-btn{
    flex:1 1 120px !important;
  }
}
/* SHIROHA_WEB_V28_2_SIDEBAR_AND_FOCUS_POLISH_END */


/* SHIROHA_WEB_V28_4_SPLASH_AND_STABLE_CENTER_START
   同步 App 端开屏动画；桌面端导航收窄并与主体布局解耦，
   收起导航时不再改变中心内容宽度，避免画面跳动。 */
.app-splash{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:linear-gradient(180deg,#eff6ff 0%,#f8fbff 54%,#ffffff 100%);
  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(37,99,235,.12);
  box-shadow:0 24px 70px rgba(37,99,235,.16);
  animation:splashCardIn .72s cubic-bezier(.18,.86,.32,1.08) both;
}
.app-splash-logo{
  width:min(48vw,168px);
  max-height:168px;
  object-fit:contain;
  filter:drop-shadow(0 18px 24px rgba(37,99,235,.14));
  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:#3b82f6;
  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}

@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}
}

@media (min-width:721px){
  :root{
    --shiroha-side-width:220px;
    --shiroha-content-width:1080px;
  }

  .app{
    grid-template-columns:var(--shiroha-side-width) minmax(0,1fr) !important;
  }

  .side{
    width:var(--shiroha-side-width) !important;
    padding:18px 16px !important;
  }

  .brand{
    gap:10px !important;
    margin-bottom:22px !important;
  }
  .brand img{
    width:40px !important;
    height:40px !important;
    border-radius:13px !important;
  }
  .brand b{
    font-size:16px !important;
  }
  .brand span{
    font-size:11px !important;
  }
  .nav{
    padding:12px 12px !important;
    border-radius:13px !important;
    font-size:14px !important;
  }

  /* 收起时保留同等布局列宽，只隐藏导航本身，中心区不会位移或变宽。 */
  body.side-collapsed .app{
    grid-template-columns:var(--shiroha-side-width) minmax(0,1fr) !important;
  }
  body.side-collapsed .side{
    width:var(--shiroha-side-width) !important;
    transform:translateX(-112%) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  body.side-collapsed .main{
    padding:18px 32px 32px 32px !important;
  }
  body.side-collapsed .main > .topbar,
  body.side-collapsed .main > .view.active{
    width:min(var(--shiroha-content-width), calc(100vw - 360px)) !important;
    max-width:var(--shiroha-content-width) !important;
  }

  .sidebar-toggle{
    left:16px !important;
    bottom:18px !important;
    min-height:38px !important;
    padding:0 13px !important;
    font-size:13px !important;
  }
  body.side-collapsed .sidebar-toggle{
    left:18px !important;
  }

  .main > .topbar,
  .main > .view.active{
    width:min(var(--shiroha-content-width), calc(100vw - 360px)) !important;
    max-width:var(--shiroha-content-width) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* 大屏下进一步保证主体以视口为中心，不因为导航收起产生跳动。 */
  @media (min-width:1500px){
    .app{
      grid-template-columns:0 minmax(0,1fr) !important;
    }
    .side{
      position:fixed !important;
      left:24px !important;
      top:24px !important;
      bottom:24px !important;
      height:auto !important;
      border-radius:24px !important;
      z-index:60 !important;
      overflow:auto !important;
    }
    .main{
      width:100% !important;
      padding:24px 36px 34px !important;
    }
    .main > .topbar,
    .main > .view.active,
    body.side-collapsed .main > .topbar,
    body.side-collapsed .main > .view.active{
      width:min(1080px, calc(100vw - 560px)) !important;
      max-width:1080px !important;
      margin-left:auto !important;
      margin-right:auto !important;
    }
  }
}

@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{animation:none !important}
}
/* SHIROHA_WEB_V28_4_SPLASH_AND_STABLE_CENTER_END */

/* SHIROHA_WEB_V28_5_CENTER_LOCK_START
   最后微调：桌面端主体区域以视口为基准居中；左侧导航改为固定浮层，
   因此收起/展开导航不会改变中心区域的位置和宽度。 */
@media (min-width:1100px){
  :root{
    --shiroha-side-width:188px;
    --shiroha-side-left:20px;
    --shiroha-content-width:1080px;
    --shiroha-content-safe-gap:456px;
  }

  .app{
    display:block !important;
    grid-template-columns:none !important;
    min-height:100vh !important;
  }

  .side{
    position:fixed !important;
    left:var(--shiroha-side-left) !important;
    top:18px !important;
    bottom:18px !important;
    width:var(--shiroha-side-width) !important;
    height:auto !important;
    padding:16px 14px !important;
    border-radius:24px !important;
    z-index:60 !important;
    overflow:auto !important;
    transition:transform .22s ease, opacity .18s ease !important;
  }

  .brand{
    gap:9px !important;
    margin-bottom:18px !important;
  }
  .brand img{
    width:38px !important;
    height:38px !important;
  }
  .brand b{
    font-size:15px !important;
  }
  .brand span{
    font-size:10.5px !important;
    line-height:1.25 !important;
  }
  .nav{
    padding:11px 11px !important;
    margin:3px 0 !important;
    font-size:13.5px !important;
    border-radius:13px !important;
  }

  .main,
  body.side-collapsed .main{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    padding:18px 0 34px !important;
  }

  .main > .topbar,
  .main > .view.active,
  body.side-collapsed .main > .topbar,
  body.side-collapsed .main > .view.active{
    width:min(var(--shiroha-content-width), calc(100vw - var(--shiroha-content-safe-gap))) !important;
    max-width:var(--shiroha-content-width) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  body.side-collapsed .app{
    display:block !important;
    grid-template-columns:none !important;
  }

  body.side-collapsed .side{
    transform:translateX(calc(-1 * (var(--shiroha-side-width) + 52px))) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  .sidebar-toggle{
    position:fixed !important;
    left:22px !important;
    bottom:20px !important;
    z-index:80 !important;
  }

  body.side-collapsed .sidebar-toggle{
    left:22px !important;
  }
}

@media (min-width:1100px) and (max-width:1280px){
  :root{
    --shiroha-side-width:176px;
    --shiroha-side-left:16px;
    --shiroha-content-safe-gap:416px;
  }
  .brand span{display:none !important;}
  .nav{font-size:13px !important;padding:10px 10px !important;}
}
/* SHIROHA_WEB_V28_5_CENTER_LOCK_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:linear-gradient(180deg,#f7f8fd 0%,#dcebff 44%,#f8fbff 100%) fixed !important;
  }

  .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(47,111,237,.08) !important;
    background:rgba(255,255,255,.965) !important;
    box-shadow:0 8px 24px rgba(37,99,235,.055), inset 0 1px 0 rgba(255,255,255,.92) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .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(47,111,237,.09) !important;
    background:rgba(255,255,255,.985) !important;
    box-shadow:0 10px 26px rgba(37,99,235,.045), inset 0 1px 0 rgba(255,255,255,.92) !important;
  }

  .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(47,111,237,.12) !important;
  }

  textarea{
    border-radius:20px !important;
    border-color:rgba(47,111,237,.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(47,111,237,.08) !important;
    background:rgba(255,255,255,.965) !important;
    box-shadow:0 14px 32px rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.94) !important;
    overflow:hidden !important;
    white-space:normal !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .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 !important;
    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:#2f6fed !important;
    background:linear-gradient(180deg,#edf7ff 0%,#f8fcff 100%) !important;
    box-shadow:0 6px 18px rgba(47,111,237,.12), inset 0 1px 0 rgba(255,255,255,.92) !important;
  }

  .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(47,111,237,.09) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.92) !important;
  }

  .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(47,111,237,.08) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.92) !important;
    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_WEB_V28_3_HOME_DASHBOARD_REFLOW_START
   Web 首页专属：解决首页主卡片大面积空白，换用压缩后的原始挥手素材，并按桌面端仪表盘重新排布。 */
#dashboard .dashboard-home-hero{
  display:grid !important;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr) !important;
  gap:18px !important;
  align-items:stretch !important;
  padding:22px !important;
  min-height:0 !important;
}
#dashboard .dashboard-home-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
}
#dashboard .dashboard-home-main .kicker{
  width:max-content;
  margin:0;
  padding:7px 12px;
  border-radius:999px;
  background:#eef6ff;
  color:#2f6fed;
  letter-spacing:.03em;
}
#dashboard .dashboard-home-main h2{
  margin:0 !important;
  font-size:clamp(26px,2.4vw,34px) !important;
  line-height:1.18 !important;
  color:#10233f !important;
}
#dashboard .dashboard-home-desc{
  max-width:720px;
  margin:0 !important;
  color:#52657f !important;
  line-height:1.75 !important;
}
#dashboard .dashboard-action-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:2px;
}
#dashboard .dashboard-action-card{
  min-height:126px;
  padding:18px 14px;
  border-radius:20px;
  border:1px solid rgba(47,111,237,.10);
  background:#fff;
  box-shadow:0 12px 26px rgba(37,99,235,.055);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#12233f;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#dashboard .dashboard-action-card::before{
  content:"";
  width:44px;
  height:44px;
  border-radius:16px;
  display:block;
  background:linear-gradient(135deg,#3b82f6,#6aa6ff);
  box-shadow:0 10px 20px rgba(59,130,246,.20);
}
#dashboard .dashboard-action-card.green::before{background:linear-gradient(135deg,#34d399,#60d6bc)}
#dashboard .dashboard-action-card.violet::before{background:linear-gradient(135deg,#8b5cf6,#b69cff)}
#dashboard .dashboard-action-card.amber::before{background:linear-gradient(135deg,#f59e0b,#ffc767)}
#dashboard .dashboard-action-card:hover{
  transform:translateY(-2px);
  border-color:rgba(47,111,237,.24);
  box-shadow:0 18px 34px rgba(37,99,235,.10);
}
#dashboard .dashboard-action-card span{
  font-size:17px;
  font-weight:900;
}
#dashboard .dashboard-action-card small{
  color:#60738f;
  font-size:12px;
  line-height:1.45;
  font-weight:700;
}
#dashboard .dashboard-progress-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:4px;
  padding-top:14px;
  border-top:1px solid rgba(47,111,237,.10);
}
#dashboard .dashboard-mini-metric{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
#dashboard .dashboard-mini-metric b{
  font-size:20px;
  color:#16335d;
  line-height:1;
}
#dashboard .dashboard-mini-metric span{
  color:#60738f;
  font-size:12px;
  font-weight:800;
}
#dashboard .dashboard-home-side{
  display:grid;
  grid-template-rows:minmax(220px,1fr) auto;
  gap:12px;
  min-width:0;
}
#dashboard .dashboard-character-card{
  min-height:230px !important;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px !important;
  border-radius:24px !important;
  background:#fff !important;
  border:1px solid rgba(47,111,237,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 26px rgba(37,99,235,.055) !important;
}
#dashboard .dashboard-character-card .hero-mascot-main{
  position:static !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:min(100%,300px) !important;
  max-height:260px !important;
  object-fit:contain !important;
  filter:none !important;
  margin:0 auto !important;
}
#dashboard .dashboard-stat-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
}
#dashboard .dashboard-stat-grid > div{
  min-height:94px;
  padding:18px 14px !important;
  border-radius:18px !important;
  background:#fff !important;
  border:1px solid rgba(47,111,237,.10) !important;
  box-shadow:0 10px 24px rgba(37,99,235,.05) !important;
}
#dashboard .dashboard-stat-grid b{
  font-size:30px !important;
  line-height:1.05 !important;
  color:#10233f !important;
}
#dashboard .dashboard-stat-grid span{
  margin-top:6px;
  display:block;
  color:#60738f !important;
  font-weight:750;
}
#dashboard .dashboard-lower-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:16px;
  margin-top:16px;
}
#dashboard .dashboard-panel{
  margin-bottom:0 !important;
  min-height:182px;
}
#dashboard .section-head.compact{
  margin-bottom:12px !important;
}
#dashboard .dashboard-quick-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin:0 0 12px !important;
}
#dashboard .dashboard-quick-actions button,
#dashboard .dashboard-card-actions button{
  width:100%;
  min-height:46px;
}
#dashboard .dashboard-tips{
  margin:0;
  padding-left:18px;
  color:#52657f;
  line-height:1.7;
  font-weight:700;
}
@media(max-width:1180px){
  #dashboard .dashboard-home-hero{grid-template-columns:1fr !important;}
  #dashboard .dashboard-home-side{grid-template-columns:minmax(0,1fr) minmax(260px,.9fr);grid-template-rows:auto;}
  #dashboard .dashboard-lower-grid{grid-template-columns:1fr;}
}
@media(max-width:760px){
  #dashboard .dashboard-action-grid,
  #dashboard .dashboard-progress-row,
  #dashboard .dashboard-home-side,
  #dashboard .dashboard-stat-grid,
  #dashboard .dashboard-quick-actions{grid-template-columns:1fr !important;}
  #dashboard .dashboard-action-card{min-height:92px;}
  #dashboard .dashboard-character-card{min-height:190px !important;}
  #dashboard .dashboard-character-card .hero-mascot-main{max-height:190px !important;}
}
/* SHIROHA_WEB_V28_3_HOME_DASHBOARD_REFLOW_END */


/* SHIROHA_WEB_V28_4_QUICK_CARD_IMAGE_FIT_START
   Web 首页小修：快捷卡配色收敛到蓝白体系，并缩小角色素材，优先完整显示。 */
#dashboard .dashboard-action-card{
  min-height:118px !important;
  padding:16px 12px !important;
  border-color:rgba(47,111,237,.12) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,255,.96)) !important;
  box-shadow:0 10px 24px rgba(37,99,235,.055), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
#dashboard .dashboard-action-card::before{
  width:40px !important;
  height:40px !important;
  border-radius:15px !important;
  background:linear-gradient(135deg,#4f8df7,#8bbcff) !important;
  box-shadow:0 10px 20px rgba(47,111,237,.16) !important;
}
#dashboard .dashboard-action-card.blue::before{
  background:linear-gradient(135deg,#3f7df2,#8bbcff) !important;
}
#dashboard .dashboard-action-card.green::before{
  background:linear-gradient(135deg,#5b9cff,#a8d8ff) !important;
}
#dashboard .dashboard-action-card.violet::before{
  background:linear-gradient(135deg,#6f95f4,#bdccff) !important;
}
#dashboard .dashboard-action-card.amber::before{
  background:linear-gradient(135deg,#7fa9dd,#c8ddff) !important;
}
#dashboard .dashboard-action-card span{
  font-size:16px !important;
  letter-spacing:.01em !important;
}
#dashboard .dashboard-action-card small{
  min-height:0 !important;
  color:#667891 !important;
  font-size:12px !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
}
#dashboard .dashboard-character-card{
  padding:22px 26px !important;
  overflow:hidden !important;
}
#dashboard .dashboard-character-card .hero-mascot-main{
  max-width:min(92%,250px) !important;
  max-height:230px !important;
  object-fit:contain !important;
  object-position:center center !important;
}
.hero-visual-card .hero-mascot-main{
  max-width:min(92%,220px) !important;
  max-height:220px !important;
  object-fit:contain !important;
  object-position:center center !important;
}
.import-stage-art{
  overflow:visible !important;
}
.import-art-main{
  max-width:140px !important;
  max-height:132px !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 6px 0 0 !important;
}
.page-art-strip,
.practice-art-strip,
.exam-art-strip,
.wrongbook-art-strip,
.records-art-strip,
.settings-art-strip,
.bank-art-strip{
  overflow:hidden !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{
  width:auto !important;
  max-width:108px !important;
  max-height:86px !important;
  margin:0 8px 0 0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  opacity:.9 !important;
  transform:translateY(-50%) scale(.92) !important;
}
.practice-art-strip img,
.exam-art-strip img,
.wrongbook-art-strip img{
  max-width:112px !important;
  max-height:90px !important;
}
.bank-art-strip img,
.records-art-strip img,
.settings-art-strip img{
  max-width:102px !important;
  max-height:82px !important;
}
.asset-reference-details img{
  max-width:min(100%,420px) !important;
  max-height:240px !important;
  object-fit:contain !important;
}
@media(max-width:760px){
  #dashboard .dashboard-action-card{min-height:88px !important;}
  #dashboard .dashboard-action-card small{white-space:normal !important;}
  #dashboard .dashboard-character-card .hero-mascot-main{max-height:188px !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:96px !important;
    max-height:78px !important;
    margin:0 !important;
    transform:none !important;
  }
}
/* SHIROHA_WEB_V28_4_QUICK_CARD_IMAGE_FIT_END */

/* SHIROHA_WEB_V28_5_ART_WHITE_CARD_FILL_START
   Web 版图片卡片白底修复：透明素材不再透出页面蓝底，所有带图卡片底层统一填充白色。 */
#dashboard .dashboard-character-card,
.hero-visual-card,
.import-stage-panel,
.import-stage-art,
.page-art-strip,
.practice-art-strip,
.exam-art-strip,
.wrongbook-art-strip,
.records-art-strip,
.settings-art-strip,
.bank-art-strip,
.asset-reference-details{
  background:#fff !important;
  background-color:#fff !important;
  border-color:rgba(47,111,237,.10) !important;
  isolation:isolate !important;
}

#dashboard .dashboard-character-card::before,
#dashboard .dashboard-character-card::after,
.hero-visual-card::before,
.hero-visual-card::after,
.import-stage-panel::before,
.import-stage-panel::after,
.import-stage-art::before,
.import-stage-art::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,
.asset-reference-details::before,
.asset-reference-details::after{
  background:#fff !important;
  opacity:1 !important;
}

#dashboard .dashboard-character-card img,
.hero-visual-card img,
.import-stage-art img,
.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,
.asset-reference-details img{
  background:transparent !important;
  mix-blend-mode:normal !important;
}
/* SHIROHA_WEB_V28_5_ART_WHITE_CARD_FILL_END */





/* SHIROHA_WEB_V28_7_HOME_BALANCE_AND_PEEKING_REFINEMENT_START
   Web 首页再平衡：左上版本标签上提、首屏左右区尽量等高；右下角 peeking 素材去卡片化并增加小隐藏按钮。 */
#dashboard .dashboard-home-hero{
  grid-template-columns:minmax(0,1.22fr) minmax(332px,.78fr) !important;
  gap:18px !important;
  padding:18px 22px 20px !important;
  min-height:388px !important;
}
#dashboard .dashboard-home-main{
  justify-content:flex-start !important;
  align-self:stretch !important;
  height:100% !important;
  gap:12px !important;
}
#dashboard .dashboard-home-main .kicker{
  align-self:flex-start;
  margin:0 0 2px 0 !important;
}
#dashboard .dashboard-home-main h2{
  margin:0 !important;
}
#dashboard .dashboard-home-desc{
  margin:0 0 2px 0 !important;
}
#dashboard .dashboard-action-grid{
  margin-top:0 !important;
}
#dashboard .dashboard-progress-row{
  margin-top:auto !important;
}
#dashboard .dashboard-home-side{
  grid-template-rows:minmax(0,1fr) auto !important;
  align-self:stretch !important;
  height:100% !important;
}
#dashboard .dashboard-character-card{
  min-height:0 !important;
}
#dashboard .dashboard-stat-grid{
  align-self:end;
}

.web-peeking-wrap{
  position:fixed;
  right:10px;
  bottom:18px;
  width:clamp(110px, 8.6vw, 145px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  z-index:8;
  pointer-events:none;
  user-select:none;
}
.web-peeking-wrap::before{
  content:none !important;
}
.web-peeking-art{
  display:block;
  width:100%;
  height:auto;
  background:transparent !important;
  position:relative;
  filter:drop-shadow(0 10px 22px rgba(148,162,214,.16));
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.web-peeking-toggle{
  pointer-events:auto;
  appearance:none;
  border:1px solid rgba(210,223,246,.96);
  background:rgba(255,255,255,.88);
  color:#7386a5;
  border-radius:999px;
  padding:4px 10px;
  min-height:24px;
  line-height:1;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 10px 24px rgba(132,156,204,.12);
  backdrop-filter:blur(10px);
  cursor:pointer;
}
.web-peeking-toggle:hover{
  color:#5676ac;
  border-color:rgba(174,198,236,.98);
  background:rgba(255,255,255,.96);
}
.web-peeking-wrap.collapsed{
  width:auto;
  align-items:flex-end;
}
.web-peeking-wrap.collapsed .web-peeking-art{
  opacity:0;
  transform:translateY(8px) scale(.92);
  width:0;
  height:0;
  overflow:hidden;
}
@media (max-width: 1320px){
  .web-peeking-wrap{display:none;}
}
/* SHIROHA_WEB_V28_7_HOME_BALANCE_AND_PEEKING_REFINEMENT_END */

/* SHIROHA_WEB_V28_8_HOME_SPACE_AND_TOGGLE_TUNE_START
   Web 首页二次微调：缩小右侧图片区域，取消左侧下段被 auto 撑开的空白；隐藏按钮右移并降低存在感。 */
#dashboard .dashboard-home-hero{
  min-height:338px !important;
  padding:18px 22px !important;
  align-items:stretch !important;
}
#dashboard .dashboard-home-main{
  gap:10px !important;
  justify-content:flex-start !important;
}
#dashboard .dashboard-home-main .kicker{
  margin-bottom:0 !important;
}
#dashboard .dashboard-home-desc{
  line-height:1.55 !important;
  margin-bottom:0 !important;
}
#dashboard .dashboard-action-grid{
  gap:10px !important;
}
#dashboard .dashboard-action-card{
  min-height:104px !important;
  padding:14px 12px !important;
}
#dashboard .dashboard-action-card::before{
  width:36px !important;
  height:36px !important;
  border-radius:14px !important;
}
#dashboard .dashboard-progress-row{
  margin-top:12px !important;
  padding-top:12px !important;
}
#dashboard .dashboard-mini-metric b{
  font-size:19px !important;
}
#dashboard .dashboard-home-side{
  grid-template-rows:minmax(176px, .82fr) auto !important;
  gap:10px !important;
}
#dashboard .dashboard-character-card{
  min-height:176px !important;
  padding:12px 18px !important;
}
#dashboard .dashboard-character-card .hero-mascot-main{
  max-width:min(84%,205px) !important;
  max-height:176px !important;
}
#dashboard .dashboard-stat-grid{
  gap:10px !important;
}
#dashboard .dashboard-stat-grid > div{
  min-height:78px !important;
  padding:14px 12px !important;
}
#dashboard .dashboard-stat-grid b{
  font-size:26px !important;
}
#dashboard .dashboard-stat-grid span{
  margin-top:4px !important;
  font-size:12px !important;
}
.web-peeking-wrap{
  right:0 !important;
  align-items:flex-end !important;
  gap:4px !important;
}
.web-peeking-art{
  width:94% !important;
}
.web-peeking-toggle{
  align-self:flex-end !important;
  transform:translateX(6px) !important;
  opacity:.42 !important;
  background:rgba(255,255,255,.42) !important;
  border-color:rgba(205,220,246,.45) !important;
  color:rgba(88,107,136,.72) !important;
  box-shadow:none !important;
}
.web-peeking-toggle:hover{
  opacity:.88 !important;
  background:rgba(255,255,255,.82) !important;
}
@media(max-width:1180px){
  #dashboard .dashboard-home-hero{
    min-height:0 !important;
  }
}
/* SHIROHA_WEB_V28_8_HOME_SPACE_AND_TOGGLE_TUNE_END */


/* SHIROHA_WEB_V29_2_FORM_ACTIONS_AND_HOME_TUNE_START */
#practice .web-settings-action-cell,
#exam .web-settings-action-cell{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
}
#practice .web-settings-action-cell .control-label,
#exam .web-settings-action-cell .control-label{
  display:block;
  font-size:14px;
  line-height:1.2;
  font-weight:800;
  color:#39506b;
}
#practice .web-settings-action-cell .settings-action-buttons,
#exam .web-settings-action-cell .settings-action-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  min-height:54px;
}
#practice .web-settings-action-cell .settings-action-buttons button,
#exam .web-settings-action-cell .settings-action-buttons button{
  min-width:128px;
  white-space:nowrap;
}
#dashboard .dashboard-progress-row{
  gap:14px !important;
}
#dashboard .dashboard-mini-metric{
  align-items:flex-start !important;
  gap:10px !important;
}
#dashboard .dashboard-mini-metric b{
  min-width:2.6em;
}
#dashboard .dashboard-mini-metric span{
  font-size:13px !important;
  line-height:1.35 !important;
  font-weight:750 !important;
  color:#6c7f98 !important;
}
#dashboard .dashboard-quick-actions{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  align-items:stretch !important;
}
#dashboard .dashboard-quick-actions button{
  white-space:nowrap !important;
  font-size:15px !important;
  padding-left:14px !important;
  padding-right:14px !important;
}
@media (max-width:980px){
  #practice .web-settings-action-cell,
  #exam .web-settings-action-cell{
    grid-column:1 / -1;
  }
}
@media (max-width:760px){
  #dashboard .dashboard-quick-actions{
    grid-template-columns:1fr !important;
  }
  #dashboard .dashboard-quick-actions button{
    white-space:normal !important;
  }
  #practice .web-settings-action-cell .settings-action-buttons,
  #exam .web-settings-action-cell .settings-action-buttons{
    flex-direction:column;
    align-items:stretch;
  }
  #practice .web-settings-action-cell .settings-action-buttons button,
  #exam .web-settings-action-cell .settings-action-buttons button{
    width:100%;
    min-width:0;
  }
}
/* SHIROHA_WEB_V29_2_FORM_ACTIONS_AND_HOME_TUNE_END */


/* SHIROHA_WEB_V29_3_HOME_BALANCE_REFINE_START
   Web 首页精修：
   - 删除左侧底部三个说明性 mini metric 后，重新平衡左右区域；
   - 版本提示与快捷卡片之间拉开一点；
   - 右侧角色卡片略微缩小；
   - 左右主区域接近等宽，避免左侧过宽、右侧视觉偏重。 */
#dashboard .dashboard-home-hero{
  grid-template-columns:minmax(0,1fr) minmax(320px,.92fr) !important;
  gap:22px !important;
  align-items:center !important;
  padding:22px 24px !important;
  min-height:0 !important;
}

#dashboard .dashboard-home-main{
  justify-content:center !important;
  gap:16px !important;
}

#dashboard .dashboard-home-main .kicker{
  margin-bottom:2px !important;
}

#dashboard .dashboard-home-main h2{
  margin-bottom:4px !important;
}

#dashboard .dashboard-home-desc{
  margin-bottom:4px !important;
}

#dashboard .dashboard-action-grid{
  margin-top:14px !important;
  gap:12px !important;
}

#dashboard .dashboard-progress-row{
  display:none !important;
}

#dashboard .dashboard-home-side{
  grid-template-rows:auto auto !important;
  align-content:center !important;
  gap:12px !important;
}

#dashboard .dashboard-character-card{
  min-height:164px !important;
  max-height:188px !important;
  padding:12px 18px !important;
}

#dashboard .dashboard-character-card .hero-mascot-main{
  max-width:min(78%,190px) !important;
  max-height:160px !important;
}

#dashboard .dashboard-stat-grid{
  gap:10px !important;
}

#dashboard .dashboard-stat-grid > div{
  min-height:74px !important;
  padding:12px 12px !important;
}

#dashboard .dashboard-stat-grid b{
  font-size:25px !important;
}

#dashboard .dashboard-stat-grid span{
  margin-top:4px !important;
  font-size:12px !important;
}

@media(max-width:1180px){
  #dashboard .dashboard-home-hero{
    grid-template-columns:1fr !important;
  }
  #dashboard .dashboard-home-side{
    grid-template-columns:minmax(0,1fr) minmax(260px,.9fr) !important;
    grid-template-rows:auto !important;
  }
}

@media(max-width:760px){
  #dashboard .dashboard-home-side{
    grid-template-columns:1fr !important;
  }
}
/* SHIROHA_WEB_V29_3_HOME_BALANCE_REFINE_END */


/* SHIROHA_WEB_V29_6_DOCX_IMAGE_IMPORT_FIX_START
   DOCX 图片题导入显示：支持从 Word 中提取 png/jpeg/gif/webp/bmp/svg 图片并在题干中渲染。 */
.question-media{
  margin:12px 0 10px;
  padding:10px;
  border:1px solid rgba(120,150,220,.16);
  border-radius:18px;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
}
.question-image{
  display:block;
  max-width:100%;
  max-height:520px;
  object-fit:contain;
  margin:0 auto;
  border-radius:12px;
}
@media(max-width:720px){
  .question-media{margin:10px 0;padding:8px;border-radius:16px;}
  .question-image{max-height:360px;}
}
/* SHIROHA_WEB_V29_6_DOCX_IMAGE_IMPORT_FIX_END */


/* SHIROHA_WEB_V29_7_DOCX_IMAGE_EXAM_VERIFIED_START
   DOCX 图片题显示优化：导入阶段会压缩大图，这里限制展示尺寸，避免图形题/资料图撑开页面。 */
.question-media{
  margin:14px 0;
  padding:10px;
  border:1px solid rgba(120,154,210,.18);
  border-radius:16px;
  background:#fff;
  overflow:auto;
}
.question-image{
  display:block;
  max-width:100%;
  max-height:520px;
  width:auto;
  height:auto;
  object-fit:contain;
  margin:0 auto;
}
.import-table td .question-media,
.preview-table td .question-media{
  display:none!important;
}
@media(max-width:720px){
  .question-media{padding:8px;border-radius:14px;margin:12px 0;}
  .question-image{max-height:360px;}
}
/* SHIROHA_WEB_V29_7_DOCX_IMAGE_EXAM_VERIFIED_END */


/* SHIROHA_WEB_V29_8_IMPORT_REVIEW_ANALYSIS_AND_LONG_STEM_FIX
   逻辑改动在 app.js；这里保留版本标记，便于确认样式包版本。 */

/* SHIROHA_WEB_V30_PRACTICE_EXAM_CARDS_START
   练习沉浸统计卡 + 考试沉浸答题卡。保持轻量蓝白卡片，避免移动端重阴影/重动画。 */
.practice-stat-card-v30,
.exam-answer-card-v30{
  margin:0 0 16px;
  padding:14px;
  border:1px solid rgba(47,111,237,.14);
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff,#f7fbff);
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.practice-stat-head-v30,
.exam-answer-card-head-v30{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.practice-stat-head-v30 b,
.exam-answer-card-head-v30 b{
  display:block;
  font-size:16px;
  color:#10233f;
}
.practice-stat-head-v30 span,
.exam-answer-card-head-v30 span{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:#5f7290;
  font-weight:700;
}
.practice-stat-grid-v30{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.practice-stat-grid-v30 div,
.exam-answer-mini-stats-v30{
  padding:10px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px;
  background:#fff;
}
.practice-stat-grid-v30 span,
.exam-answer-mini-stats-v30 span{
  display:block;
  font-size:12px;
  color:#64748b;
}
.practice-stat-grid-v30 b,
.exam-answer-mini-stats-v30 b{
  display:block;
  margin-top:4px;
  font-size:20px;
  line-height:1.1;
  color:#1d4ed8;
}
.practice-stat-card-v30 p{
  margin:10px 2px 0;
  color:#64748b;
  font-size:13px;
}
.exam-answer-mini-stats-v30{
  min-width:76px;
  text-align:center;
}
.exam-nav-grid-v30{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(40px,1fr));
  gap:8px;
}
.exam-nav-grid-v30 button{
  min-height:38px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.34);
  background:#fff;
  color:#334155;
  font-weight:800;
  cursor:pointer;
}
.exam-nav-grid-v30 button.answered{
  border-color:rgba(47,111,237,.38);
  background:#eaf3ff;
  color:#1d4ed8;
}
body.exam-focus .exam-q{
  scroll-margin-top:92px;
}
.exam-q-pulse-v30{
  outline:2px solid rgba(47,111,237,.38);
  outline-offset:3px;
}
@media(max-width:720px){
  .practice-stat-card-v30,
  .exam-answer-card-v30{
    margin-bottom:12px;
    padding:12px;
    border-radius:16px;
    box-shadow:none;
  }
  .practice-stat-head-v30,
  .exam-answer-card-head-v30{
    align-items:flex-start;
  }
  .practice-stat-grid-v30{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .practice-stat-grid-v30 div,
  .exam-answer-mini-stats-v30{
    padding:9px;
  }
  .exam-nav-grid-v30{
    grid-template-columns:repeat(auto-fill,minmax(38px,1fr));
    gap:7px;
  }
  .exam-nav-grid-v30 button{
    min-height:38px;
    padding:0;
  }
}
/* SHIROHA_WEB_V30_PRACTICE_EXAM_CARDS_END */

/* SHIROHA_WEB_V31_IMMERSIVE_RIGHT_RAIL_START
   沉浸答题布局重构：正文留在左侧，统计/答题卡固定在右侧轻量侧栏。 */
body.practice-focus #practice-card,
body.exam-focus #exam-card{
  width:min(1180px, calc(100vw - 48px)) !important;
  max-width:1180px !important;
  padding:18px !important;
  margin:0 auto !important;
}
.practice-focus-layout-v31,
.exam-focus-layout-v31{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 236px !important;
  gap:18px !important;
  align-items:start !important;
}
.exam-focus-layout-v31{
  grid-template-columns:minmax(0,1fr) 260px !important;
}
.practice-focus-main-v31,
.exam-focus-main-v31{
  min-width:0 !important;
}
.practice-side-v31,
.exam-side-v31{
  position:sticky !important;
  top:18px !important;
  align-self:start !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  max-height:calc(100vh - 36px) !important;
  overflow:auto !important;
  scrollbar-width:thin !important;
}
.practice-side-v31 .practice-stat-card-v30,
.exam-side-v31 .exam-answer-card-v30{
  margin:0 !important;
  padding:12px !important;
  border-radius:18px !important;
  box-shadow:0 8px 22px rgba(37,99,235,.06) !important;
}
.practice-side-v31 .practice-nav-v26{
  margin:0 !important;
  padding:12px !important;
  border:1px solid rgba(47,111,237,.14) !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#ffffff,#f7fbff) !important;
  box-shadow:0 8px 22px rgba(37,99,235,.05) !important;
}
.practice-side-v31 .practice-nav-v26 > b{
  display:block !important;
  margin-bottom:8px !important;
  color:#10233f !important;
  font-size:14px !important;
}
.practice-stat-head-v30,
.exam-answer-card-head-v30{
  margin-bottom:10px !important;
}
.practice-stat-head-v30 b,
.exam-answer-card-head-v30 b{
  font-size:14px !important;
}
.practice-stat-head-v30 span,
.exam-answer-card-head-v30 span{
  font-size:11px !important;
}
.practice-stat-list-v31{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
}
.practice-stat-list-v31 div{
  padding:9px 8px !important;
  border:1px solid rgba(148,163,184,.18) !important;
  border-radius:14px !important;
  background:#fff !important;
}
.practice-stat-list-v31 span{
  display:block !important;
  color:#64748b !important;
  font-size:11px !important;
  line-height:1.15 !important;
}
.practice-stat-list-v31 b{
  display:block !important;
  margin-top:3px !important;
  color:#1d4ed8 !important;
  font-size:18px !important;
  line-height:1.1 !important;
}
.practice-side-v31 .practice-stat-card-v30 p{
  margin:8px 2px 0 !important;
  font-size:12px !important;
  color:#64748b !important;
}
.practice-side-v31 .practice-nav-grid-v26,
.exam-side-v31 .exam-nav-grid-v30{
  grid-template-columns:repeat(auto-fill,minmax(34px,1fr)) !important;
  gap:7px !important;
}
.practice-side-v31 .practice-nav-grid-v26 button,
.exam-side-v31 .exam-nav-grid-v30 button{
  min-height:34px !important;
  padding:0 !important;
  border-radius:11px !important;
  font-size:12px !important;
}
.exam-side-v31 .exam-answer-card-head-v30{
  align-items:stretch !important;
}
.exam-side-v31 .exam-answer-card-head-v30 > div:first-child{
  min-width:0 !important;
}
.exam-side-v31 .exam-answer-card-head-v30 span{
  line-height:1.35 !important;
}
.exam-side-v31 .exam-answer-mini-stats-v30{
  min-width:66px !important;
  padding:8px !important;
  border-radius:13px !important;
}
.exam-side-v31 .exam-answer-mini-stats-v30 b{
  font-size:18px !important;
}
body.practice-focus .practice-focus-head,
body.exam-focus .exam-focus-head{
  position:sticky !important;
  top:0 !important;
  z-index:6 !important;
}
body.exam-focus .exam-q{
  scroll-margin-top:86px !important;
}
@media(max-width:980px){
  body.practice-focus #practice-card,
  body.exam-focus #exam-card{
    width:calc(100vw - 20px) !important;
    max-width:none !important;
    padding:14px !important;
  }
  .practice-focus-layout-v31,
  .exam-focus-layout-v31{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .practice-side-v31,
  .exam-side-v31{
    position:sticky !important;
    top:0 !important;
    z-index:7 !important;
    max-height:none !important;
    overflow:visible !important;
    order:-1 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
  }
  .practice-side-v31 .practice-stat-card-v30,
  .practice-side-v31 .practice-nav-v26,
  .exam-side-v31 .exam-answer-card-v30{
    box-shadow:none !important;
  }
  .practice-side-v31 .practice-nav-grid-v26,
  .exam-side-v31 .exam-nav-grid-v30{
    display:flex !important;
    gap:7px !important;
    overflow-x:auto !important;
    padding-bottom:2px !important;
  }
  .practice-side-v31 .practice-nav-grid-v26 button,
  .exam-side-v31 .exam-nav-grid-v30 button{
    flex:0 0 36px !important;
  }
}
@media(max-width:720px){
  body.practice-focus #practice-card,
  body.exam-focus #exam-card{
    width:100% !important;
    min-height:calc(100vh - 16px) !important;
    padding:12px !important;
  }
  .practice-focus-layout-v31,
  .exam-focus-layout-v31{
    gap:12px !important;
  }
  .practice-side-v31,
  .exam-side-v31{
    top:0 !important;
  }
  .practice-side-v31 .practice-stat-card-v30{
    padding:10px !important;
  }
  .practice-stat-list-v31{
    grid-template-columns:repeat(4,minmax(64px,1fr)) !important;
    overflow-x:auto !important;
  }
  .practice-stat-list-v31 div{
    min-width:64px !important;
  }
  .practice-side-v31 .practice-nav-v26{
    padding:10px !important;
  }
  .exam-side-v31 .exam-answer-card-v30{
    padding:10px !important;
  }
  .exam-side-v31 .exam-answer-card-head-v30{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:8px !important;
  }
}
@media(min-width:981px){
  .practice-side-v31 .practice-nav-grid-v26,
  .exam-side-v31 .exam-nav-grid-v30{
    max-height:calc(100vh - 244px) !important;
    overflow:auto !important;
  }
}
/* SHIROHA_WEB_V31_IMMERSIVE_RIGHT_RAIL_END */

/* SHIROHA_WEB_V32_RIGHT_EDGE_AND_BANK_DELETE_FIX_START
   练习：右侧只保留轻量统计卡，答题卡回到题目下方；考试答题卡贴右侧边缘；题库管理增加显式删除。 */
.bank-delete-quick-v32{
  flex:0 0 auto !important;
  align-self:center !important;
  min-height:34px !important;
  padding:0 10px !important;
  border-radius:12px !important;
  font-size:12px !important;
}
.bank-item-compact-v28{
  align-items:center !important;
}
.bank-toolbar-actions-v28 .danger:disabled,
.bank-delete-quick-v32:disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
}

.practice-focus-main-v31 > .practice-nav-v26{
  margin-top:16px !important;
  padding:14px !important;
  border:1px solid rgba(47,111,237,.14) !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#ffffff,#f7fbff) !important;
  box-shadow:0 8px 22px rgba(37,99,235,.05) !important;
}
.practice-focus-main-v31 > .practice-nav-v26 > b{
  display:block !important;
  margin-bottom:8px !important;
  color:#10233f !important;
  font-size:14px !important;
}
.practice-focus-main-v31 > .practice-nav-v26 .practice-nav-grid-v26{
  grid-template-columns:repeat(auto-fill,minmax(42px,1fr)) !important;
  gap:8px !important;
  max-height:none !important;
  overflow:visible !important;
}
.practice-focus-main-v31 > .practice-nav-v26 .practice-nav-grid-v26 button{
  min-height:38px !important;
  border-radius:12px !important;
  font-size:13px !important;
}

@media(min-width:981px){
  body.practice-focus #practice.view,
  body.exam-focus #exam.view{
    padding:18px 0 18px 18px !important;
  }
  body.practice-focus #practice-card,
  body.exam-focus #exam-card{
    width:100vw !important;
    max-width:none !important;
    margin:0 !important;
    padding:18px 0 18px 18px !important;
    border-radius:24px 0 0 24px !important;
    box-sizing:border-box !important;
  }
  .practice-focus-layout-v31{
    grid-template-columns:minmax(0,860px) 236px !important;
    justify-content:end !important;
    gap:18px !important;
  }
  .exam-focus-layout-v31{
    grid-template-columns:minmax(0,880px) 260px !important;
    justify-content:end !important;
    gap:18px !important;
  }
  .practice-side-v31,
  .exam-side-v31{
    right:0 !important;
    margin-right:0 !important;
    padding-right:0 !important;
  }
  .practice-side-v31 .practice-stat-card-v30,
  .exam-side-v31 .exam-answer-card-v30{
    border-right:0 !important;
    border-radius:18px 0 0 18px !important;
  }
  .exam-side-v31 .exam-nav-grid-v30{
    max-height:calc(100vh - 170px) !important;
    overflow:auto !important;
  }
}

@media(max-width:980px){
  .practice-side-v31 .practice-stat-card-v30{
    box-shadow:none !important;
  }
  .practice-focus-main-v31 > .practice-nav-v26 .practice-nav-grid-v26,
  .exam-side-v31 .exam-nav-grid-v30{
    display:flex !important;
    gap:7px !important;
    overflow-x:auto !important;
    padding-bottom:2px !important;
  }
  .practice-focus-main-v31 > .practice-nav-v26 .practice-nav-grid-v26 button,
  .exam-side-v31 .exam-nav-grid-v30 button{
    flex:0 0 36px !important;
  }
}

@media(max-width:720px){
  .bank-delete-quick-v32{
    min-height:32px !important;
    padding:0 8px !important;
  }
  .practice-focus-main-v31 > .practice-nav-v26{
    padding:10px !important;
    box-shadow:none !important;
  }
}
/* SHIROHA_WEB_V32_RIGHT_EDGE_AND_BANK_DELETE_FIX_END */

/* SHIROHA_WEB_V33_RESTORE_FOCUS_AND_EDGE_CARDS_START
   恢复沉浸练习/考试主体的居中答题纸；右侧辅助卡片独立贴边，不再重排正文。 */
.bank-card-actions-v33{
  justify-self:end !important;
  align-self:start !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  min-width:max-content !important;
}
.bank-card-actions-v33 .bank-more-menu-v28{
  justify-self:auto !important;
  align-self:auto !important;
}
.bank-card-actions-v33 .bank-more-menu-v28 summary,
.bank-card-actions-v33 .bank-delete-quick-v32{
  width:56px !important;
  min-width:56px !important;
  height:36px !important;
  min-height:36px !important;
  padding:0 !important;
  border-radius:13px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:12px !important;
  line-height:1 !important;
  box-sizing:border-box !important;
}
.bank-card-actions-v33 .bank-more-panel-v28{
  right:0 !important;
}
.compact-built-in-v33[hidden]{
  display:none !important;
}
.compact-built-in-v33{
  margin:0 0 12px !important;
  padding:12px 14px !important;
  border-radius:16px !important;
  box-shadow:none !important;
}
.compact-built-in-v33 .section-head{
  align-items:center !important;
}
.compact-built-in-v33 h3{
  margin-bottom:4px !important;
}
.compact-built-in-v33 p{
  margin:0 !important;
}

body.practice-focus #practice.view{
  padding:18px !important;
}
body.practice-focus #practice-card{
  width:min(920px, calc(100vw - 36px)) !important;
  max-width:920px !important;
  min-height:calc(100vh - 36px) !important;
  margin:0 auto !important;
  padding:28px !important;
  border-radius:24px !important;
  box-sizing:border-box !important;
}
body.practice-focus #practice-card > .practice-nav-v26{
  margin-top:16px !important;
  padding:14px !important;
  border:1px solid rgba(47,111,237,.14) !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#ffffff,#f7fbff) !important;
  box-shadow:0 8px 22px rgba(37,99,235,.05) !important;
}
body.practice-focus #practice-card > .practice-nav-v26 > b{
  display:block !important;
  margin-bottom:8px !important;
  color:#10233f !important;
  font-size:14px !important;
}
body.practice-focus #practice-card > .practice-nav-v26 .practice-nav-grid-v26{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(42px,1fr)) !important;
  gap:8px !important;
  max-height:none !important;
  overflow:visible !important;
}
body.practice-focus #practice-card > .practice-nav-v26 .practice-nav-grid-v26 button{
  min-height:38px !important;
  border-radius:12px !important;
  font-size:13px !important;
}
body.practice-focus #practice-card > .practice-side-v31{
  position:fixed !important;
  right:0 !important;
  top:132px !important;
  z-index:8 !important;
  width:236px !important;
  max-height:calc(100vh - 152px) !important;
  overflow:auto !important;
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  pointer-events:auto !important;
}
body.practice-focus #practice-card > .practice-side-v31 .practice-stat-card-v30{
  margin:0 !important;
  padding:12px !important;
  border-right:0 !important;
  border-radius:18px 0 0 18px !important;
  background:linear-gradient(180deg,#ffffff,#f7fbff) !important;
  box-shadow:0 8px 22px rgba(37,99,235,.06) !important;
}

body.exam-focus #exam.view{
  padding:18px !important;
}
body.exam-focus #exam-card{
  width:min(920px, calc(100vw - 36px)) !important;
  max-width:920px !important;
  min-height:calc(100vh - 36px) !important;
  margin:0 auto !important;
  padding:26px !important;
  border-radius:24px !important;
  box-sizing:border-box !important;
}
body.exam-focus #exam-card > .exam-side-v31{
  position:fixed !important;
  right:0 !important;
  top:104px !important;
  z-index:8 !important;
  width:280px !important;
  max-height:calc(100vh - 124px) !important;
  overflow:auto !important;
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  pointer-events:auto !important;
}
body.exam-focus #exam-card > .exam-side-v31 .exam-answer-card-v30{
  margin:0 !important;
  padding:12px !important;
  border-right:0 !important;
  border-radius:18px 0 0 18px !important;
  background:linear-gradient(180deg,#ffffff,#f7fbff) !important;
  box-shadow:0 8px 22px rgba(37,99,235,.06) !important;
}
body.exam-focus #exam-card > .exam-side-v31 .exam-nav-grid-v30{
  grid-template-columns:repeat(auto-fill,minmax(34px,1fr)) !important;
  gap:7px !important;
  max-height:calc(100vh - 214px) !important;
  overflow:auto !important;
}
body.exam-focus #exam-card > .exam-side-v31 .exam-nav-grid-v30 button{
  min-height:34px !important;
  padding:0 !important;
  border-radius:11px !important;
  font-size:12px !important;
}

@media(max-width:1279px){
  body.practice-focus #practice-card > .practice-side-v31{
    position:static !important;
    width:100% !important;
    max-height:none !important;
    margin-top:12px !important;
    overflow:visible !important;
  }
  body.practice-focus #practice-card > .practice-side-v31 .practice-stat-card-v30{
    border-right:1px solid rgba(47,111,237,.14) !important;
    border-radius:18px !important;
    box-shadow:none !important;
  }
  body.exam-focus #exam-card{
    display:flex !important;
    flex-direction:column !important;
  }
  body.exam-focus #exam-card > .exam-side-v31{
    order:-1 !important;
    position:sticky !important;
    top:0 !important;
    z-index:9 !important;
    width:100% !important;
    max-height:none !important;
    margin:0 0 12px !important;
    overflow:visible !important;
  }
  body.exam-focus #exam-card > .exam-side-v31 .exam-answer-card-v30{
    border-right:1px solid rgba(47,111,237,.14) !important;
    border-radius:18px !important;
    box-shadow:none !important;
  }
  body.exam-focus #exam-card > .exam-side-v31 .exam-nav-grid-v30{
    display:flex !important;
    overflow-x:auto !important;
    max-height:none !important;
    padding-bottom:2px !important;
  }
  body.exam-focus #exam-card > .exam-side-v31 .exam-nav-grid-v30 button{
    flex:0 0 36px !important;
  }
}
@media(max-width:720px){
  .bank-item-compact-v28{
    grid-template-columns:auto minmax(0,1fr) auto !important;
  }
  .bank-card-actions-v33{
    flex-direction:column !important;
    gap:6px !important;
  }
  .bank-card-actions-v33 .bank-more-menu-v28 summary,
  .bank-card-actions-v33 .bank-delete-quick-v32{
    width:52px !important;
    min-width:52px !important;
    height:32px !important;
    min-height:32px !important;
  }
  body.practice-focus #practice.view,
  body.exam-focus #exam.view{
    padding:8px !important;
  }
  body.practice-focus #practice-card,
  body.exam-focus #exam-card{
    width:100% !important;
    min-height:calc(100vh - 16px) !important;
    padding:18px !important;
    border-radius:18px !important;
  }
  body.practice-focus #practice-card > .practice-nav-v26{
    padding:10px !important;
    box-shadow:none !important;
  }
  body.practice-focus #practice-card > .practice-nav-v26 .practice-nav-grid-v26{
    display:flex !important;
    overflow-x:auto !important;
    gap:7px !important;
    padding-bottom:2px !important;
  }
  body.practice-focus #practice-card > .practice-nav-v26 .practice-nav-grid-v26 button{
    flex:0 0 36px !important;
  }
}
/* SHIROHA_WEB_V33_RESTORE_FOCUS_AND_EDGE_CARDS_END */

/* SHIROHA_WEB_V34_PANEL_ALIGNMENT_AND_HIDE_START
   右侧辅助面板与沉浸答题纸顶部对齐；面板可低调隐藏；题库卡片右侧操作保持并排。 */
.bank-card-actions-v33{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  align-self:center !important;
}
.bank-card-actions-v33 .bank-more-menu-v28,
.bank-card-actions-v33 .bank-delete-quick-v32{
  flex:0 0 auto !important;
}
.bank-card-actions-v33 .bank-more-menu-v28 summary,
.bank-card-actions-v33 .bank-delete-quick-v32{
  width:58px !important;
  min-width:58px !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 !important;
  border-radius:14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  font-size:12px !important;
  line-height:1 !important;
}
.bank-card-actions-v33 .bank-more-panel-v28{
  right:0 !important;
  left:auto !important;
}

@media(min-width:1280px){
  body.practice-focus #practice-card > .practice-side-v31,
  body.exam-focus #exam-card > .exam-side-v31{
    top:18px !important;
    right:0 !important;
    align-self:start !important;
    max-height:calc(100vh - 36px) !important;
  }
  body.practice-focus #practice-card > .practice-side-v31{
    width:236px !important;
  }
  body.exam-focus #exam-card > .exam-side-v31{
    width:280px !important;
  }
  body.practice-focus #practice-card > .practice-side-v31 .practice-stat-card-v30,
  body.exam-focus #exam-card > .exam-side-v31 .exam-answer-card-v30{
    border-right:0 !important;
    border-radius:18px 0 0 18px !important;
  }
}

.practice-stat-card-v30,
.exam-answer-card-v30{
  position:relative !important;
}
.practice-stat-head-v30,
.exam-answer-card-head-v30{
  align-items:flex-start !important;
}
.rail-hide-btn-v34,
.rail-show-btn-v34{
  border:1px solid rgba(148,163,184,.24) !important;
  background:rgba(255,255,255,.72) !important;
  color:#7890b0 !important;
  font-weight:800 !important;
  cursor:pointer !important;
  box-shadow:none !important;
}
.rail-hide-btn-v34{
  flex:0 0 auto !important;
  min-width:42px !important;
  height:24px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  font-size:11px !important;
  line-height:1 !important;
}
.rail-hide-btn-v34:hover,
.rail-show-btn-v34:hover{
  color:#2f6fed !important;
  border-color:rgba(47,111,237,.28) !important;
  background:#f7fbff !important;
}
.rail-show-btn-v34{
  display:none !important;
}
body.practice-rail-collapsed-v34 #practice-card > .practice-side-v31,
body.exam-rail-collapsed-v34 #exam-card > .exam-side-v31{
  width:42px !important;
  overflow:visible !important;
}
body.practice-rail-collapsed-v34 #practice-stat-card-v30,
body.exam-rail-collapsed-v34 #exam-answer-card-v30{
  width:42px !important;
  min-height:92px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}
body.practice-rail-collapsed-v34 #practice-stat-card-v30 > :not(.rail-show-btn-v34),
body.exam-rail-collapsed-v34 #exam-answer-card-v30 > :not(.rail-show-btn-v34){
  display:none !important;
}
body.practice-rail-collapsed-v34 #practice-stat-card-v30 .rail-show-btn-v34,
body.exam-rail-collapsed-v34 #exam-answer-card-v30 .rail-show-btn-v34{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:40px !important;
  min-height:88px !important;
  padding:8px 0 !important;
  border-radius:16px 0 0 16px !important;
  writing-mode:vertical-rl !important;
  letter-spacing:2px !important;
  font-size:12px !important;
  background:rgba(255,255,255,.84) !important;
}
@media(max-width:1279px){
  body.practice-focus #practice-card > .practice-side-v31,
  body.exam-focus #exam-card > .exam-side-v31{
    width:100% !important;
  }
  body.practice-rail-collapsed-v34 #practice-card > .practice-side-v31,
  body.exam-rail-collapsed-v34 #exam-card > .exam-side-v31{
    width:100% !important;
  }
  body.practice-rail-collapsed-v34 #practice-stat-card-v30,
  body.exam-rail-collapsed-v34 #exam-answer-card-v30{
    width:100% !important;
    min-height:42px !important;
    border-radius:16px !important;
  }
  body.practice-rail-collapsed-v34 #practice-stat-card-v30 .rail-show-btn-v34,
  body.exam-rail-collapsed-v34 #exam-answer-card-v30 .rail-show-btn-v34{
    width:100% !important;
    min-height:38px !important;
    border-radius:14px !important;
    writing-mode:horizontal-tb !important;
    letter-spacing:0 !important;
  }
}
@media(max-width:720px){
  .bank-card-actions-v33{
    flex-direction:row !important;
    gap:8px !important;
  }
  .bank-card-actions-v33 .bank-more-menu-v28 summary,
  .bank-card-actions-v33 .bank-delete-quick-v32{
    width:54px !important;
    min-width:54px !important;
    height:34px !important;
    min-height:34px !important;
  }
}
/* SHIROHA_WEB_V34_PANEL_ALIGNMENT_AND_HIDE_END */


/* SHIROHA_WEB_V35_PANEL_MINI_AND_ALIGNMENT_FIX_START
   只修正三处：隐藏态小按钮尺寸、练习/考试右侧面板对齐、题库卡片右侧操作并排。 */
.bank-item-compact-v28{
  grid-template-columns:auto minmax(0,1fr) max-content !important;
  align-items:center !important;
}
.bank-card-actions-v33{
  grid-column:3 !important;
  grid-row:1 !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  justify-self:end !important;
  align-self:center !important;
  gap:10px !important;
  width:max-content !important;
  min-width:max-content !important;
}
.bank-card-actions-v33 .bank-more-menu-v28{
  position:relative !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}
.bank-card-actions-v33 .bank-more-menu-v28 summary::-webkit-details-marker{
  display:none !important;
}
.bank-card-actions-v33 .bank-more-menu-v28 summary,
.bank-card-actions-v33 .bank-delete-quick-v32{
  width:62px !important;
  min-width:62px !important;
  max-width:62px !important;
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.bank-card-actions-v33 .bank-more-panel-v28{
  right:0 !important;
  left:auto !important;
  top:calc(100% + 8px) !important;
}

@media(min-width:1280px){
  body.practice-focus #practice-card > .practice-side-v31,
  body.exam-focus #exam-card > .exam-side-v31{
    position:fixed !important;
    right:0 !important;
    z-index:8 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:visible !important;
  }
  body.practice-focus #practice-card > .practice-side-v31{
    width:236px !important;
  }
  body.exam-focus #exam-card > .exam-side-v31{
    width:280px !important;
  }
  body.practice-focus #practice-card > .practice-side-v31 .practice-stat-card-v30,
  body.exam-focus #exam-card > .exam-side-v31 .exam-answer-card-v30{
    margin:0 !important;
    border-right:0 !important;
    border-radius:18px 0 0 18px !important;
  }
}

body.practice-rail-collapsed-v34 #practice-card > .practice-side-v31,
body.exam-rail-collapsed-v34 #exam-card > .exam-side-v31{
  width:64px !important;
  max-height:44px !important;
  overflow:visible !important;
}
body.practice-rail-collapsed-v34 #practice-stat-card-v30,
body.exam-rail-collapsed-v34 #exam-answer-card-v30{
  width:64px !important;
  min-width:64px !important;
  max-width:64px !important;
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  border-radius:14px 0 0 14px !important;
  box-shadow:0 6px 18px rgba(37,99,235,.06) !important;
}
body.practice-rail-collapsed-v34 #practice-stat-card-v30 > :not(.rail-show-btn-v34),
body.exam-rail-collapsed-v34 #exam-answer-card-v30 > :not(.rail-show-btn-v34){
  display:none !important;
}
body.practice-rail-collapsed-v34 #practice-stat-card-v30 .rail-show-btn-v34,
body.exam-rail-collapsed-v34 #exam-answer-card-v30 .rail-show-btn-v34{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:62px !important;
  min-width:62px !important;
  max-width:62px !important;
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  padding:0 !important;
  border-radius:13px 0 0 13px !important;
  writing-mode:horizontal-tb !important;
  letter-spacing:0 !important;
  font-size:12px !important;
  background:rgba(255,255,255,.86) !important;
  color:#7d93b2 !important;
}
body.practice-rail-collapsed-v34 #practice-stat-card-v30 .rail-show-btn-v34:hover,
body.exam-rail-collapsed-v34 #exam-answer-card-v30 .rail-show-btn-v34:hover{
  color:#2f6fed !important;
  background:#f7fbff !important;
}
@media(max-width:1279px){
  body.practice-rail-collapsed-v34 #practice-card > .practice-side-v31,
  body.exam-rail-collapsed-v34 #exam-card > .exam-side-v31{
    width:auto !important;
    max-height:none !important;
  }
  body.practice-rail-collapsed-v34 #practice-stat-card-v30,
  body.exam-rail-collapsed-v34 #exam-answer-card-v30{
    width:100% !important;
    max-width:none !important;
    height:38px !important;
    min-height:38px !important;
    border-radius:14px !important;
  }
  body.practice-rail-collapsed-v34 #practice-stat-card-v30 .rail-show-btn-v34,
  body.exam-rail-collapsed-v34 #exam-answer-card-v30 .rail-show-btn-v34{
    width:100% !important;
    max-width:none !important;
    height:36px !important;
    min-height:36px !important;
    border-radius:13px !important;
  }
}
@media(max-width:720px){
  .bank-item-compact-v28{
    grid-template-columns:auto minmax(0,1fr) max-content !important;
  }
  .bank-card-actions-v33{
    gap:8px !important;
  }
  .bank-card-actions-v33 .bank-more-menu-v28 summary,
  .bank-card-actions-v33 .bank-delete-quick-v32{
    width:56px !important;
    min-width:56px !important;
    max-width:56px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
  }
}
/* SHIROHA_WEB_V35_PANEL_MINI_AND_ALIGNMENT_FIX_END */

/* SHIROHA_WEB_V36_HOME_STATS_AND_PRACTICE_RAIL_FIX_START
   首页学习统计改为卡片式；右侧统计/答题卡 top 由 JS 用实际主卡片位置校准。 */
#dashboard .dashboard-stats-row{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-top:14px !important;
  align-items:stretch !important;
}
#dashboard .dashboard-stat-item{
  position:relative !important;
  min-height:96px !important;
  padding:16px 15px !important;
  border:1px solid rgba(47,111,237,.13) !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,251,255,.88)) !important;
  box-shadow:0 10px 24px rgba(37,99,235,.055) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:7px !important;
  overflow:hidden !important;
}
#dashboard .dashboard-stat-item::before{
  content:"" !important;
  position:absolute !important;
  left:14px !important;
  top:12px !important;
  width:28px !important;
  height:4px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#3b82f6,rgba(96,165,250,.28)) !important;
  opacity:.72 !important;
}
#dashboard .dashboard-stat-item b{
  margin-top:10px !important;
  color:#1155d9 !important;
  font-size:28px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.03em !important;
}
#dashboard .dashboard-stat-item span{
  color:#526b93 !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.25 !important;
}
#dashboard .dashboard-panel:has(.dashboard-stats-row){
  min-height:260px !important;
}
@media(max-width:720px){
  #dashboard .dashboard-stats-row{
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
  }
  #dashboard .dashboard-stat-item{
    min-height:82px !important;
    padding:13px 12px !important;
    border-radius:16px !important;
  }
  #dashboard .dashboard-stat-item b{
    font-size:23px !important;
  }
  #dashboard .dashboard-stat-item span{
    font-size:12px !important;
  }
}
@media(min-width:1280px){
  body.practice-focus #practice-card > .practice-side-v31,
  body.exam-focus #exam-card > .exam-side-v31{
    top:var(--unused-focus-rail-top-v36,18px) !important;
  }
}
/* SHIROHA_WEB_V36_HOME_STATS_AND_PRACTICE_RAIL_FIX_END */


/* SHIROHA_WEB_V37_RECORDS_AND_EXAM_CARD_COMPACT_FIX_START
   考试右侧答题卡进一步压缩并限制高度；练习退出直接回设置区；记录导航统一承载练习/考试记录。 */
@media(min-width:1280px){
  body.exam-focus #exam-card.card{
    width:min(920px, calc(100vw - 390px)) !important;
    max-width:920px !important;
  }
  body.exam-focus #exam-card > .exam-side-v31{
    width:232px !important;
    right:12px !important;
    overflow:visible !important;
  }
  body.exam-focus #exam-card > .exam-side-v31 .exam-answer-card-v30{
    max-height:min(500px, calc(100vh - 132px)) !important;
    padding:10px !important;
    border-radius:18px !important;
    border-right:1px solid rgba(47,111,237,.14) !important;
    overflow:hidden !important;
  }
  body.exam-focus #exam-card > .exam-side-v31 .exam-answer-card-head-v30{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:start !important;
    gap:8px !important;
    margin-bottom:8px !important;
  }
  body.exam-focus #exam-card > .exam-side-v31 .exam-answer-card-head-v30 > div:first-child span{
    white-space:normal !important;
    font-size:11px !important;
    line-height:1.25 !important;
  }
  body.exam-focus #exam-card > .exam-side-v31 .exam-answer-card-head-v30 .rail-hide-btn-v34{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:start !important;
  }
  body.exam-focus #exam-card > .exam-side-v31 .exam-answer-mini-stats-v30{
    grid-column:1 / -1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-width:0 !important;
    padding:7px 9px !important;
    border-radius:12px !important;
  }
  body.exam-focus #exam-card > .exam-side-v31 .exam-answer-mini-stats-v30 b{
    margin:0 !important;
    font-size:17px !important;
  }
  body.exam-focus #exam-card > .exam-side-v31 .exam-nav-grid-v30{
    grid-template-columns:repeat(5, 34px) !important;
    justify-content:center !important;
    gap:6px !important;
    max-height:322px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:2px 2px 4px !important;
    scrollbar-width:thin !important;
  }
  body.exam-focus #exam-card > .exam-side-v31 .exam-nav-grid-v30 button{
    width:34px !important;
    min-width:34px !important;
    height:32px !important;
    min-height:32px !important;
    border-radius:10px !important;
    font-size:11.5px !important;
  }
  body.exam-rail-collapsed-v34 #exam-card > .exam-side-v31{
    width:64px !important;
    right:12px !important;
  }
  body.exam-rail-collapsed-v34 #exam-answer-card-v30{
    width:64px !important;
    min-width:64px !important;
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    border-radius:14px !important;
    border-right:1px solid rgba(47,111,237,.14) !important;
  }
  body.exam-rail-collapsed-v34 #exam-answer-card-v30 .rail-show-btn-v34{
    width:62px !important;
    height:36px !important;
    min-height:36px !important;
    border-radius:13px !important;
  }
}
@media(min-width:1280px) and (max-height:760px){
  body.exam-focus #exam-card > .exam-side-v31 .exam-answer-card-v30{
    max-height:430px !important;
  }
  body.exam-focus #exam-card > .exam-side-v31 .exam-nav-grid-v30{
    max-height:252px !important;
  }
}
@media(max-width:1279px){
  body.exam-focus #exam-card > .exam-side-v31 .exam-answer-card-v30{
    max-height:44vh !important;
    overflow:hidden !important;
  }
  body.exam-focus #exam-card > .exam-side-v31 .exam-nav-grid-v30{
    max-height:160px !important;
    overflow:auto !important;
  }
}
/* SHIROHA_WEB_V37_RECORDS_AND_EXAM_CARD_COMPACT_FIX_END */

/* SHIROHA_WEB_V38_EXAM_MINI_AND_HOME_STATS_SOFTEN_START
   修正考试答题卡隐藏态文字被裁切；弱化首页学习统计卡片的重色与蓝色横杠。 */
@media(min-width:1280px){
  body.exam-rail-collapsed-v34 #exam-card > .exam-side-v31{
    width:76px !important;
    right:14px !important;
    overflow:visible !important;
  }
  body.exam-rail-collapsed-v34 #exam-answer-card-v30{
    width:76px !important;
    min-width:76px !important;
    max-width:76px !important;
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    padding:0 !important;
    overflow:visible !important;
    border-radius:14px !important;
  }
  body.exam-rail-collapsed-v34 #exam-answer-card-v30 .rail-show-btn-v34{
    width:74px !important;
    min-width:74px !important;
    max-width:74px !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
    padding:0 !important;
    border-radius:13px !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    font-size:12px !important;
    letter-spacing:0 !important;
  }
}

#dashboard .dashboard-stats-row{
  gap:12px !important;
  margin-top:13px !important;
}
#dashboard .dashboard-stat-item{
  min-height:86px !important;
  padding:14px 16px !important;
  border:1px solid rgba(147,197,253,.26) !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(249,252,255,.94)) !important;
  box-shadow:0 8px 20px rgba(37,99,235,.035) !important;
  justify-content:center !important;
  gap:9px !important;
}
#dashboard .dashboard-stat-item::before{
  display:none !important;
  content:none !important;
}
#dashboard .dashboard-stat-item span{
  order:-1 !important;
  color:#6f83a5 !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
}
#dashboard .dashboard-stat-item b{
  margin:0 !important;
  color:#3f73e6 !important;
  font-size:25px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
}
#dashboard .dashboard-panel:has(.dashboard-stats-row){
  min-height:244px !important;
}
@media(max-width:720px){
  #dashboard .dashboard-stats-row{
    gap:9px !important;
  }
  #dashboard .dashboard-stat-item{
    min-height:78px !important;
    padding:12px 13px !important;
    border-radius:16px !important;
  }
  #dashboard .dashboard-stat-item b{
    font-size:22px !important;
  }
  #dashboard .dashboard-stat-item span{
    font-size:12px !important;
  }
}
/* SHIROHA_WEB_V38_EXAM_MINI_AND_HOME_STATS_SOFTEN_END */

/* SHIROHA_WEB_V40_COLLAPSED_BUTTON_AND_HOME_NUMBER_TONE_FIX_START
   修正右侧栏隐藏态：只显示独立小按钮，不保留卡片外壳；首页学习统计只调整数字色彩，保留卡片材质。 */
@media(min-width:1280px){
  body.practice-focus.practice-rail-collapsed-v34 #practice-card > .practice-side-v31,
  body.exam-focus.exam-rail-collapsed-v34 #exam-card > .exam-side-v31{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    right:14px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
    pointer-events:none !important;
  }
  body.practice-focus.practice-rail-collapsed-v34 #practice-card > .practice-side-v31 #practice-stat-card-v30,
  body.exam-focus.exam-rail-collapsed-v34 #exam-card > .exam-side-v31 #exam-answer-card-v30{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    pointer-events:none !important;
  }
  body.practice-focus.practice-rail-collapsed-v34 #practice-card > .practice-side-v31 #practice-stat-card-v30 > .practice-stat-head-v30,
  body.practice-focus.practice-rail-collapsed-v34 #practice-card > .practice-side-v31 #practice-stat-card-v30 > .practice-stat-list-v31,
  body.practice-focus.practice-rail-collapsed-v34 #practice-card > .practice-side-v31 #practice-stat-card-v30 > p,
  body.exam-focus.exam-rail-collapsed-v34 #exam-card > .exam-side-v31 #exam-answer-card-v30 > .exam-answer-card-head-v30,
  body.exam-focus.exam-rail-collapsed-v34 #exam-card > .exam-side-v31 #exam-answer-card-v30 > .exam-nav-grid-v30{
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    height:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }
  body.practice-focus.practice-rail-collapsed-v34 #practice-card > .practice-side-v31 #practice-stat-card-v30 > .rail-show-btn-v34,
  body.exam-focus.exam-rail-collapsed-v34 #exam-card > .exam-side-v31 #exam-answer-card-v30 > .rail-show-btn-v34{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    pointer-events:auto !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    padding:0 13px !important;
    border:1px solid rgba(180,200,230,.52) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.88) !important;
    box-shadow:0 5px 16px rgba(37,99,235,.04) !important;
    color:#7890b0 !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    writing-mode:horizontal-tb !important;
    overflow:visible !important;
    text-overflow:clip !important;
    box-sizing:border-box !important;
  }
  body.practice-focus.practice-rail-collapsed-v34 #practice-card > .practice-side-v31 #practice-stat-card-v30 > .rail-show-btn-v34{
    width:58px !important;
    min-width:58px !important;
    max-width:58px !important;
  }
  body.exam-focus.exam-rail-collapsed-v34 #exam-card > .exam-side-v31 #exam-answer-card-v30 > .rail-show-btn-v34{
    width:72px !important;
    min-width:72px !important;
    max-width:72px !important;
  }
}
@media(max-width:1279px){
  body.practice-rail-collapsed-v34 #practice-stat-card-v30,
  body.exam-rail-collapsed-v34 #exam-answer-card-v30{
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body.practice-rail-collapsed-v34 #practice-stat-card-v30 > :not(.rail-show-btn-v34),
  body.exam-rail-collapsed-v34 #exam-answer-card-v30 > :not(.rail-show-btn-v34){
    display:none !important;
  }
  body.practice-rail-collapsed-v34 #practice-stat-card-v30 > .rail-show-btn-v34,
  body.exam-rail-collapsed-v34 #exam-answer-card-v30 > .rail-show-btn-v34{
    display:inline-flex !important;
    width:auto !important;
    min-width:58px !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 13px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }
}

#dashboard .dashboard-stat-item{
  border-color:rgba(191,219,254,.42) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,250,255,.92)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 8px 20px rgba(37,99,235,.035) !important;
  opacity:1 !important;
}
#dashboard .dashboard-stat-item::before,
#dashboard .dashboard-stat-item::after{
  display:none !important;
  content:none !important;
}
#dashboard .dashboard-stat-item span{
  color:#6f83a5 !important;
  opacity:1 !important;
}
#dashboard .dashboard-stat-item b{
  color:rgba(191,219,254,.96) !important;
  opacity:1 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.98),0 0 10px rgba(147,197,253,.16) !important;
  font-weight:800 !important;
}
/* SHIROHA_WEB_V40_COLLAPSED_BUTTON_AND_HOME_NUMBER_TONE_FIX_END */

/* SHIROHA_WEB_V41_HOME_VERSION_AND_STAT_REBUILD_START
   首页版本文案更新；学习统计卡片整体重做为蓝白云母/亚克力质感，数字仅用浅蓝白色。 */
#dashboard .dashboard-panel:has(.learning-stats-v41){
  min-height:260px !important;
}
#dashboard .learning-stats-v41{
  display:grid !important;
  grid-template-columns:minmax(0,1.18fr) minmax(116px,.82fr) !important;
  grid-template-rows:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-top:12px !important;
  align-items:stretch !important;
}
#dashboard .learning-stats-v41 > *{
  position:relative !important;
  border:1px solid rgba(172,205,246,.46) !important;
  background:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.98),rgba(255,255,255,0) 36%),
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,252,255,.93)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 10px 24px rgba(37,99,235,.045) !important;
  border-radius:18px !important;
  overflow:hidden !important;
  opacity:1 !important;
}
#dashboard .learning-stats-v41 > *::before,
#dashboard .learning-stats-v41 > *::after{
  display:none !important;
  content:none !important;
}
#dashboard .learning-stat-main-v41{
  grid-column:1 !important;
  grid-row:1 / span 3 !important;
  min-height:172px !important;
  padding:18px 18px 16px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  gap:14px !important;
}
#dashboard .learning-stat-main-v41 span,
#dashboard .learning-stat-rate-v41 span,
#dashboard .learning-stat-mini-v41 span{
  display:block !important;
  margin:0 !important;
  color:#617592 !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.25 !important;
  letter-spacing:.01em !important;
}
#dashboard .learning-stat-main-v41 b,
#dashboard .learning-stat-rate-v41 b,
#dashboard .learning-stat-mini-v41 b{
  display:block !important;
  margin:0 !important;
  color:#c7e0ff !important;
  opacity:1 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.98),0 0 12px rgba(191,219,254,.22) !important;
  font-weight:900 !important;
  letter-spacing:-.035em !important;
  line-height:.95 !important;
}
#dashboard .learning-stat-main-v41 b{
  margin-top:12px !important;
  font-size:58px !important;
}
#dashboard .learning-stat-main-v41 small{
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  max-width:100% !important;
  min-height:28px !important;
  padding:0 11px !important;
  border:1px solid rgba(191,219,254,.48) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.72) !important;
  color:#8aa0bc !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
}
#dashboard .learning-stat-rate-v41,
#dashboard .learning-stat-mini-v41{
  min-height:52px !important;
  padding:11px 13px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}
#dashboard .learning-stat-rate-v41 b,
#dashboard .learning-stat-mini-v41 b{
  font-size:28px !important;
  text-align:right !important;
  flex:0 0 auto !important;
}
#dashboard .learning-stat-rate-v41{
  border-color:rgba(147,197,253,.56) !important;
  background:
    radial-gradient(circle at 10% 0%,rgba(255,255,255,1),rgba(255,255,255,0) 46%),
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(242,248,255,.96)) !important;
}
#dashboard .learning-stat-rate-v41 b{
  color:#b9d8ff !important;
}
@media(max-width:1180px){
  #dashboard .learning-stats-v41{
    grid-template-columns:minmax(0,1.1fr) minmax(120px,.9fr) !important;
  }
}
@media(max-width:720px){
  #dashboard .learning-stats-v41{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto !important;
    gap:9px !important;
  }
  #dashboard .learning-stat-main-v41{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    min-height:118px !important;
    padding:15px !important;
  }
  #dashboard .learning-stat-main-v41 b{
    font-size:42px !important;
  }
  #dashboard .learning-stat-rate-v41,
  #dashboard .learning-stat-mini-v41{
    min-height:66px !important;
    padding:12px !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
  }
  #dashboard .learning-stat-rate-v41 b,
  #dashboard .learning-stat-mini-v41 b{
    font-size:24px !important;
    text-align:left !important;
  }
}
/* SHIROHA_WEB_V41_HOME_VERSION_AND_STAT_REBUILD_END */


/* SHIROHA_WEB_V42_HOME_STAT_SIMPLE_2X2_START
   首页学习统计回到 2×2；数字使用黑色，整体保持干净蓝白卡片，不做特殊透明效果。 */
#dashboard .dashboard-panel:has(.learning-stats-v42){
  min-height:260px !important;
}
#dashboard .learning-stats-v42{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  margin-top:16px !important;
  align-items:stretch !important;
}
#dashboard .learning-stat-tile-v42{
  position:relative !important;
  min-height:92px !important;
  padding:18px 18px 16px !important;
  border:1px solid rgba(191,219,254,.55) !important;
  border-radius:20px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,251,255,.94)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 22px rgba(37,99,235,.045) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  gap:10px !important;
  overflow:hidden !important;
  opacity:1 !important;
}
#dashboard .learning-stat-tile-v42::before,
#dashboard .learning-stat-tile-v42::after{
  display:none !important;
  content:none !important;
}
#dashboard .learning-stat-tile-v42 span{
  margin:0 !important;
  color:#5f7496 !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  letter-spacing:.01em !important;
  opacity:1 !important;
}
#dashboard .learning-stat-tile-v42 b{
  margin:0 !important;
  color:#0f172a !important;
  font-size:30px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:-.03em !important;
  text-shadow:none !important;
  opacity:1 !important;
}
@media(max-width:720px){
  #dashboard .learning-stats-v42{
    gap:10px !important;
    margin-top:13px !important;
  }
  #dashboard .learning-stat-tile-v42{
    min-height:82px !important;
    padding:14px 14px 13px !important;
    border-radius:17px !important;
  }
  #dashboard .learning-stat-tile-v42 span{
    font-size:12px !important;
  }
  #dashboard .learning-stat-tile-v42 b{
    font-size:25px !important;
  }
}
/* SHIROHA_WEB_V42_HOME_STAT_SIMPLE_2X2_END */

/* SHIROHA_WEB_V43_HOME_STAT_NUMBER_CENTER_START
   首页学习统计：数字居中，取消加粗；保持 v42 的 2×2 卡片布局。 */
#dashboard .learning-stat-tile-v42 b{
  width:100% !important;
  text-align:center !important;
  align-self:center !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}
/* SHIROHA_WEB_V43_HOME_STAT_NUMBER_CENTER_END */

/* SHIROHA_WEB_V45_FOCUS_NAV_AND_BANK_EDITOR_START
   修复沉浸页展开导航无效；题库操作改为右侧上下对齐；增加题库二次编辑提示条。 */
@media (min-width:721px){
  body.practice-focus:not(.side-collapsed) .side,
  body.exam-focus:not(.side-collapsed) .side{
    display:block !important;
    position:fixed !important;
    left:var(--shiroha-side-left,20px) !important;
    top:18px !important;
    bottom:18px !important;
    width:var(--shiroha-side-width,188px) !important;
    height:auto !important;
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
    z-index:1160 !important;
    border-radius:24px !important;
    border:1px solid rgba(191,219,254,.62) !important;
    box-shadow:0 18px 42px rgba(37,99,235,.12) !important;
    background:rgba(255,255,255,.94) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
  }
  body.practice-focus .sidebar-toggle,
  body.exam-focus .sidebar-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    z-index:1200 !important;
  }
}

.bank-item-compact-v28{
  grid-template-columns:auto minmax(0,1fr) max-content !important;
  align-items:center !important;
}
.bank-card-actions-v33{
  grid-column:3 !important;
  grid-row:1 !important;
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  justify-content:center !important;
  justify-self:end !important;
  align-self:center !important;
  gap:6px !important;
  width:64px !important;
  min-width:64px !important;
}
.bank-card-actions-v33 .bank-more-menu-v28,
.bank-card-actions-v33 .bank-delete-quick-v32{
  width:64px !important;
  min-width:64px !important;
  max-width:64px !important;
  margin:0 !important;
}
.bank-card-actions-v33 .bank-more-menu-v28 summary,
.bank-card-actions-v33 .bank-delete-quick-v32{
  width:64px !important;
  min-width:64px !important;
  max-width:64px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  padding:0 !important;
  border-radius:14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  line-height:1 !important;
  white-space:nowrap !important;
  font-size:12px !important;
}
.bank-card-actions-v33 .bank-more-panel-v28{
  right:0 !important;
  left:auto !important;
  top:calc(100% + 8px) !important;
  min-width:168px !important;
}
.bank-card-actions-v33 .bank-more-panel-v28 button{
  width:100% !important;
  justify-content:flex-start !important;
  min-height:34px !important;
}

.bank-edit-panel-v45{
  margin:0 0 12px !important;
  padding:12px 14px !important;
  border:1px solid rgba(47,111,237,.16) !important;
  border-radius:18px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,247,255,.92)) !important;
  box-shadow:0 10px 24px rgba(37,99,235,.055), inset 0 1px 0 rgba(255,255,255,.96) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
}
.bank-edit-panel-v45.hidden{
  display:none !important;
}
.bank-edit-panel-v45 b{
  display:block !important;
  color:#10233f !important;
  font-size:15px !important;
  line-height:1.35 !important;
}
.bank-edit-panel-v45 span{
  display:block !important;
  margin-top:2px !important;
  color:#5f7496 !important;
  font-size:13px !important;
  line-height:1.4 !important;
}
.bank-edit-panel-actions-v45{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex:0 0 auto !important;
}
@media(max-width:720px){
  .bank-edit-panel-v45{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .bank-edit-panel-actions-v45{
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }
}
/* SHIROHA_WEB_V45_FOCUS_NAV_AND_BANK_EDITOR_END */

/* v51: import text find / replace */
.import-actions-v51{
  align-items:center;
}
.import-actions-v51 .import-actions-spacer-v51{
  flex:1 1 auto;
  min-width:24px;
}
.import-find-replace-trigger-v51{
  margin-left:auto;
}
.import-find-replace-panel-v51.hidden{
  display:none;
}
.import-find-replace-panel-v51{
  position:fixed;
  inset:0;
  z-index:2200;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:96px 20px 20px;
  background:rgba(15,23,42,.18);
  backdrop-filter:blur(6px);
}
.import-find-replace-card-v51{
  width:min(760px, calc(100vw - 40px));
  border:1px solid rgba(47,111,237,.14);
  border-radius:24px;
  background:rgba(255,255,255,.97);
  box-shadow:0 24px 70px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.94);
  padding:20px;
}
.import-find-replace-head-v51{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.import-find-replace-head-v51 strong{
  font-size:20px;
  color:#0f2544;
}
.import-find-close-v51{
  width:36px;
  height:36px;
  padding:0 !important;
  border-radius:999px !important;
  min-height:36px !important;
}
.import-find-replace-grid-v51{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.import-find-replace-options-v51{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  margin:14px 0 8px;
  color:#52657f;
  font-weight:800;
}
.import-find-replace-options-v51 label{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.import-find-replace-options-v51 input{
  width:auto;
  min-height:0 !important;
}
.import-find-replace-actions-v51{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.import-find-replace-tip-v51{
  margin:12px 0 10px;
}
.import-find-status-v51{
  margin-top:8px;
}
.import-find-status-v51.ok{
  border-color:#bfdbfe;
  background:#eff6ff;
  color:#1d4ed8;
}
.import-find-status-v51.danger{
  border-color:#fecaca;
  background:#fff7f7;
  color:#dc2626;
}
@media (max-width: 760px){
  .import-actions-v51 .import-actions-spacer-v51{
    display:none;
  }
  .import-find-replace-trigger-v51{
    margin-left:0;
  }
  .import-find-replace-panel-v51{
    align-items:flex-end;
    padding:16px;
  }
  .import-find-replace-card-v51{
    width:100%;
    max-height:calc(100vh - 32px);
    overflow:auto;
    border-radius:22px;
  }
  .import-find-replace-grid-v51{
    grid-template-columns:1fr;
  }
  .import-find-replace-actions-v51 button{
    flex:1 1 100%;
  }
}