.daily-practice-page { --dp-ink:#1d302e; --dp-muted:#778582; --dp-teal:#27877b; --dp-teal-dark:#1c6e64; --dp-pale:#e9f4f1; --dp-line:#e5ecea; --dp-bg:#f3f7f5; background:var(--dp-bg); color:var(--dp-ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; min-height:100vh; }
.dp-shell { max-width:1440px; padding:28px clamp(16px,4vw,58px) 64px; }
.dp-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:12px 0 30px; }
.dp-kicker { color:var(--dp-teal); font-weight:700; letter-spacing:.14em; font-size:.69rem; display:flex; gap:8px; align-items:center; }
.dp-kicker-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#48aa9c; box-shadow:0 0 0 4px #d9eeea; }
.dp-heading h1 { font-size:clamp(1.65rem,3vw,2.25rem); letter-spacing:-.04em; font-weight:700; margin:9px 0 5px; }
.dp-heading p { color:var(--dp-muted); margin:0; font-size:.93rem; }
.dp-grade { display:inline-block; vertical-align:middle; margin-left:9px; padding:6px 10px; border-radius:999px; color:#28796f; background:#e3f2ee; font-size:.75rem; letter-spacing:0; font-weight:600; }
.dp-date-chip { border:1px solid #dce8e4; background:#fff; color:#52635f; border-radius:999px; padding:10px 15px; font-size:.84rem; white-space:nowrap; }
.dp-layout { display:grid; grid-template-columns:minmax(260px,320px) minmax(0,1fr); gap:25px; align-items:start; }
.dp-settings-card,.dp-workspace { background:#fff; border:1px solid #e6edeb; border-radius:17px; box-shadow:0 8px 28px rgba(35,70,63,.045); }
.dp-settings-card { overflow:hidden; position:sticky; top:18px; }
.dp-settings-toggle { display:none; }
.dp-settings-body { padding:23px 22px 20px; }
.dp-field { border:0; padding:0; margin:0 0 22px; }
.dp-label { display:block; color:#2c413e; font-size:.84rem; font-weight:700; margin-bottom:10px; }
.dp-label .dp-hint { margin-left:6px; font-size:.72rem; font-weight:400; color:#9aa8a5; }
.dp-settings-body .form-control { border-color:#dfe8e5; border-radius:9px; color:var(--dp-ink); font-size:.88rem; box-shadow:none; padding:.6rem .75rem; }
.dp-settings-body .form-control:focus { border-color:#86bdb5; box-shadow:0 0 0 3px rgba(39,135,123,.1); }
.dp-switch-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; color:#52615e; font-size:.87rem; border-top:1px solid #f0f3f2; }
.dp-switch-row .form-check,.dp-grid-toggle .form-check { margin:0; min-height:0; }
.form-check-input:checked { background-color:var(--dp-teal); border-color:var(--dp-teal); }
.dp-check-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.dp-check { display:flex; align-items:center; gap:6px; color:#53635f; font-size:.82rem; padding:9px 8px; background:#f7f9f8; border:1px solid #edf1ef; border-radius:9px; cursor:pointer; }
.dp-check .form-check-input { margin:0; flex:0 0 auto; }
.dp-segmented,.dp-count-options { display:flex; background:#f2f6f4; border-radius:10px; padding:4px; gap:3px; }
.dp-segmented label,.dp-count-options label { flex:1; text-align:center; margin:0; cursor:pointer; }
.dp-segmented input,.dp-count-options input,.dp-custom-count>input[type=radio] { position:absolute; opacity:0; pointer-events:none; }
.dp-segmented span,.dp-count-options span { display:block; border-radius:7px; color:#75827f; padding:8px 6px; font-size:.82rem; font-weight:600; transition:all .16s ease; }
.dp-segmented input:checked+span,.dp-count-options input:checked+span { background:#fff; color:var(--dp-teal-dark); box-shadow:0 1px 4px rgba(29,48,46,.12); }
.dp-segmented input:focus-visible+span,.dp-count-options input:focus-visible+span,.dp-custom-count>input[type=radio]:focus-visible+span { outline:3px solid rgba(39,135,123,.45); outline-offset:2px; }
.dp-count-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:stretch; }
.dp-count-options span { padding:8px 3px; }
.dp-custom-count { display:flex; align-items:center; gap:6px; background:#f7f9f8; border:1px solid #edf1ef; border-radius:9px; padding:4px 6px; min-width:0; cursor:pointer; }
.dp-custom-count>span { color:#75827f; font-size:.76rem; white-space:nowrap; }
.dp-custom-count .form-control { width:55px; min-width:0; text-align:center; padding:.32rem .2rem; font-size:.8rem; }
.dp-custom-count:has(input[type=radio]:checked) { border-color:#88bdb5; background:#eef7f5; }
.dp-grid-toggle { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #eef2f0; padding-top:17px; margin-bottom:19px; }
.dp-hint,.dp-settings-foot { font-size:.72rem; color:#9aa7a4; }
.dp-primary-btn { border:0; border-radius:10px; background:var(--dp-teal); color:#fff; font-weight:700; padding:12px; box-shadow:0 5px 12px rgba(39,135,123,.18); transition:background .15s,transform .15s; }
.dp-primary-btn:hover,.dp-primary-btn:focus { background:var(--dp-teal-dark); color:white; transform:translateY(-1px); }
.dp-primary-btn:disabled { opacity:.75; transform:none; }
.dp-settings-foot { text-align:center; margin-top:12px; }
.dp-workspace { min-height:650px; overflow:hidden; }
.dp-workspace-head { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:20px 23px; border-bottom:1px solid #edf1ef; }
.dp-paper-title { font-weight:700; font-size:1rem; }
.dp-meta { color:#899692; font-size:.77rem; margin-top:4px; }
.dp-toolbar { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.dp-tool-btn { color:#50605c; border:1px solid #e2eae7; background:#fff; border-radius:8px; padding:7px 10px; font-size:.78rem; white-space:nowrap; }
.dp-tool-btn:hover,.dp-tool-btn.active { color:var(--dp-teal-dark); border-color:#a8cec7; background:#f1f8f6; }
.dp-export-group { display:flex; gap:6px; }
.dp-tool-btn:disabled { opacity:.55; cursor:wait; }
.dp-paper-stage { min-height:580px; padding:30px; background:#f5f8f7; }
.dp-paper-stage:has(.dp-paper-page) { display:flex; flex-direction:column; align-items:center; gap:22px; }
.dp-empty-state { min-height:515px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; color:#83918d; }
.dp-empty-icon { width:64px; height:64px; display:grid; place-items:center; border-radius:20px; background:#e8f3f0; color:#4d9b8e; font-size:1.55rem; margin-bottom:19px; transform:rotate(-4deg); }
.dp-empty-state h2 { font-size:1.08rem; color:#425450; font-weight:700; margin-bottom:8px; }
.dp-empty-state p { font-size:.84rem; margin:0; }
.dp-empty-dots { display:flex; gap:5px; margin-top:22px; }
.dp-empty-dots span { width:5px; height:5px; border-radius:50%; background:#a8cfc7; }
.dp-notice { margin:0 0 16px; border:1px solid #d9eae6; background:#eff8f5; border-radius:10px; padding:11px 14px; color:#39796f; font-size:.85rem; }
.dp-notice.error { border-color:#f0d7d1; background:#fff5f2; color:#a64d3d; }
.dp-notice.info { border-color:#dbe6f0; background:#f3f7fb; color:#526f87; }
.dp-progress { padding:13px 22px; border-bottom:1px solid #edf1ef; }
.dp-progress-copy { display:flex; justify-content:space-between; color:#657470; font-size:.76rem; margin-bottom:7px; }
.dp-progress .progress { height:5px; background:#eaf0ee; border-radius:10px; }
.dp-progress .progress-bar { background:var(--dp-teal); transition:width .2s; }
@media (max-width:991px) {
  .dp-layout { grid-template-columns:1fr; gap:16px; }
  .dp-settings-card { position:static; }
  .dp-settings-toggle { display:flex; width:100%; align-items:center; justify-content:space-between; border:0; background:white; padding:16px 19px; color:var(--dp-ink); font-weight:700; text-align:left; }
  .dp-settings-toggle[aria-expanded="true"] .dp-chevron { transform:rotate(180deg); }
  .dp-chevron { transition:transform .2s; color:#83918d; }
  .dp-settings-body { padding:4px 19px 19px; }
  .dp-workspace { min-height:560px; }
  .dp-paper-stage { min-height:500px; padding:18px; }
}
@media (min-width:992px) {
  #settingsBody.collapse:not(.show) { display:block; }
}
@media (max-width:575px) {
  .dp-shell { padding:20px 13px 38px; }
  .dp-heading { align-items:flex-start; margin:5px 0 19px; }
  .dp-heading p { font-size:.82rem; }
  .dp-grade { font-size:.64rem; margin:5px 0 0 0; padding:5px 8px; }
  .dp-heading h1 { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
  .dp-date-chip { font-size:.73rem; padding:8px 10px; }
  .dp-workspace-head { align-items:flex-start; flex-direction:column; padding:16px; }
  .dp-toolbar { justify-content:flex-start; width:100%; }
  .dp-tool-btn { padding:7px 8px; font-size:.72rem; }
  .dp-paper-stage { padding:10px; }
  .dp-empty-state { min-height:400px; }
}