:root {
  --bg: #f3f7ff;
  --surface: #ffffff;
  --surface-soft: #f8faff;
  --line: #e4eaf6;
  --line-strong: #d6def0;
  --text: #171a2c;
  --muted: #69728e;
  --muted-soft: #98a1bc;
  --primary: #5b68f6;
  --primary-dark: #4653dc;
  --primary-weak: #edf1ff;
  --blue-weak: #e8f5ff;
  --purple-weak: #f0edff;
  --green: #24a35a;
  --green-weak: #ecf9ee;
  --amber: #b66b16;
  --amber-weak: #fff6e8;
  --red: #d85459;
  --red-weak: #fff0ee;
  --cyan: #168899;
  --cyan-weak: #e8f8fa;
  --sidebar-width: 212px;
  --control-height: 38px;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body { font-size: 14px; line-height: 1.5; }
.create-route { height: 100vh; overflow: hidden; }
.detail-route .main-shell { width: 100%; padding-right: 32px; padding-left: 32px; }
.detail-route .app-content { width: 100%; max-width: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 18px 18px; background: #eef3ff; border-right: 1px solid rgba(218, 226, 244, .8); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 12px 21px; }
.brand > strong { font-size: 18px; letter-spacing: .2px; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 7px 18px rgba(79, 91, 176, .12); }
.brand-mark img { width: 30px; height: 30px; object-fit: contain; }
.nav-groups { display: flex; flex-direction: column; gap: 12px; }
.nav-group { display: flex; flex-direction: column; gap: 5px; }
.nav-heading { padding: 8px 14px 4px; color: #8e98b6; font-size: 12px; }
.nav-item { height: 43px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: #66708f; text-align: left; font-weight: 600; }
.nav-item:hover { color: var(--primary); background: rgba(255, 255, 255, .65); }
.nav-item.active { color: var(--primary-dark); background: #dfe8ff; }
.nav-icon { width: 18px; text-align: center; color: #929dbc; font-size: 16px; }
.nav-item.active .nav-icon { color: var(--primary); }
.user-profile { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 13px 11px; border-radius: 12px; background: rgba(255,255,255,.55); }
.avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: #6574fc; color: #fff; font-weight: 700; }
.user-profile strong, .user-profile small { display: block; }
.user-profile strong { font-size: 13px; }
.user-profile small { color: var(--muted-soft); font-size: 11px; }

.main-shell { min-width: 0; min-height: 100vh; padding: 24px 28px 96px; }
.app-content { max-width: 1540px; margin: 0 auto; }
.create-route .main-shell { width: 100%; height: 100vh; min-height: 0; overflow: hidden; padding: 24px 32px 88px; }
.create-route .app-content { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; max-width: none; }
.page-header { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.page-title h1 { margin: 0; font-size: 22px; line-height: 1.35; font-weight: 650; }
.page-title p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.page-actions { display: flex; align-items: center; gap: 10px; }
.panel { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 24px rgba(64, 76, 132, .035); }

.btn { min-height: var(--control-height); display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: #424a67; font-weight: 600; transition: border-color .16s, background .16s, color .16s, transform .16s; }
.btn:hover { border-color: #aeb8d5; color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn.primary { border-color: var(--primary); background: var(--primary); color: #fff; box-shadow: 0 7px 16px rgba(93, 101, 237, .14); }
.btn.primary:hover { border-color: var(--primary-dark); background: var(--primary-dark); color: #fff; }
.btn.small { min-height: 31px; padding: 0 12px; border-radius: 9px; font-size: 12px; }
.btn.wide { min-width: 136px; }
.btn.danger { border-color: #f0c7c9; color: var(--red); background: #fff; }
.btn:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.icon-btn { width: 38px; padding: 0; }
.control { width: 100%; height: var(--control-height); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; outline: 0; background: #fff; color: var(--text); }
.control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(93, 101, 237, .08); }
select.control { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2369748f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
select.control:hover { border-color: #c5cee1; }

.task-type, .status-tag, .source-count { display: inline-flex; align-items: center; width: fit-content; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.task-type.course { color: var(--primary-dark); background: var(--primary-weak); }
.task-type.homework { color: var(--cyan); background: var(--cyan-weak); }
.status-tag.completed { color: var(--green); background: var(--green-weak); }
.status-tag.inprogress { color: var(--primary-dark); background: var(--primary-weak); }
.status-tag.todo, .status-tag.scheduled { color: var(--amber); background: var(--amber-weak); }
.status-tag.overdue { color: var(--red); background: var(--red-weak); }
.source-count { color: var(--primary-dark); background: var(--primary-weak); }

.round-back { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; color: #66708c; font-size: 26px; line-height: 1; }
.round-back:hover { border-color: #aeb9dc; color: var(--primary); }
.link-action { min-height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--primary-dark); font-size: 12px; font-weight: 650; }
.link-action:hover { background: var(--primary-weak); color: var(--primary); }
.link-action.secondary { color: var(--muted); }
.more-action { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 800; }
.more-action:hover { background: #eef1f8; }

.empty-state { min-height: 300px; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; color: var(--text); font-size: 15px; }
.empty-state p { margin: 5px 0 0; }
.empty-illustration { width: 58px; height: 46px; display: grid; place-items: center; border: 7px solid #e7edff; border-radius: 4px; color: #9aa8d0; font-size: 19px; }
.notice { margin-bottom: 14px; padding: 12px 14px; border-radius: 11px; background: var(--amber-weak); color: #76502a; font-size: 12px; }
.notice.lock { background: #eef1f7; color: #59617a; }

.toast-root { position: fixed; z-index: 100; top: 24px; left: 50%; transform: translateX(-50%); }
.toast { min-width: 240px; padding: 11px 16px; border: 1px solid #dce3f5; border-radius: 10px; background: #fff; color: #343b58; box-shadow: 0 16px 34px rgba(44, 53, 98, .17); animation: toast-in .2s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }
.modal-backdrop { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(24, 29, 50, .38); backdrop-filter: blur(2px); }
.modal { width: min(520px, 100%); border-radius: 16px; background: #fff; box-shadow: 0 28px 70px rgba(26, 32, 61, .25); }
.modal-head, .modal-body, .modal-foot { padding: 18px 20px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-body p { margin: 0; color: var(--muted); }
.modal-foot { display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--line); }
.homework-group-name-backdrop { background: rgba(24, 29, 50, .34); }
.homework-group-name-modal { width: min(540px, 100%); overflow: hidden; border: 1px solid rgba(225, 230, 241, .9); border-radius: 18px; box-shadow: 0 24px 68px rgba(26, 32, 61, .22); }
.homework-group-name-head { min-height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 14px; }
.homework-group-name-head h2 { margin: 0; font-size: 22px; line-height: 1.35; }
.homework-group-name-head .drawer-close { background: transparent; font-size: 24px; font-weight: 300; }
.homework-group-name-head .drawer-close:hover { background: #f3f5f9; }
.homework-group-name-body { padding: 8px 24px 28px; }
.homework-group-name-body > label { display: block; margin-bottom: 7px; color: #4d5672; font-size: 12px; font-weight: 650; }
.homework-group-name-field { position: relative; }
.homework-group-name-field .control { height: 48px; padding-right: 68px; border-radius: 11px; font-size: 16px; }
.homework-group-name-field > span { position: absolute; top: 50%; right: 14px; color: #7f89a8; font-size: 12px; transform: translateY(-50%); pointer-events: none; }
.homework-group-name-field b { font-weight: 500; }
.homework-group-name-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 24px 24px; }
.homework-group-name-foot .btn { min-width: 88px; }
.delete-modal { position: relative; width: min(480px, 100%); overflow: hidden; border: 1px solid rgba(225, 230, 241, .9); border-radius: 18px; box-shadow: 0 28px 76px rgba(26, 32, 61, .24); }
.delete-modal-main { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 26px 52px 18px 24px; }
.delete-modal-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--red-weak); color: var(--red); }
.delete-modal-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.delete-modal-copy h2 { margin: 1px 0 0; color: var(--text); font-size: 19px; font-weight: 700; line-height: 1.35; }
.delete-task-name { max-width: 330px; margin-top: 8px; overflow: hidden; color: #4e5770; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.delete-modal-copy p { margin: 8px 0 0; color: #69728e; font-size: 13px; line-height: 1.75; text-wrap: pretty; }
.delete-modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #8992aa; }
.delete-modal-close:hover { background: #f3f5f9; color: #4d566e; }
.delete-modal-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.delete-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 24px 22px; }
.delete-modal-foot .btn { min-width: 88px; }
.btn.danger-solid { border-color: var(--red); background: var(--red); color: #fff; box-shadow: 0 7px 16px rgba(216, 84, 89, .16); }
.btn.danger-solid:hover { border-color: #c7464d; background: #c7464d; color: #fff; }
.smart-backdrop { padding: 22px; }
.smart-modal { width: min(1280px, 100%); height: min(820px, calc(100vh - 44px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 28px 70px rgba(26, 32, 61, .25); }
.smart-modal-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.smart-modal-head h2 { margin: 0; font-size: 19px; }
.smart-modal-head p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.smart-modal-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 350px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.smart-config-panel { min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: auto; padding: 18px; border-right: 1px solid var(--line); }
.smart-field { display: grid; gap: 6px; }
.smart-field > span, .smart-plan-title { color: #4d5672; font-size: 12px; font-weight: 650; }
.smart-field > div { padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 10px; }
.smart-field strong, .smart-field small { display: block; }
.smart-field strong { font-size: 12px; }
.smart-field small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.smart-plan { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: left; }
.smart-plan strong, .smart-plan small { display: block; }
.smart-plan strong { font-size: 12px; }
.smart-plan small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.smart-plan.active { border-color: #aeb9ff; background: var(--primary-weak); color: var(--primary-dark); }
.wrong-priority { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.wrong-priority strong, .wrong-priority small { display: block; }
.wrong-priority strong { font-size: 12px; }
.wrong-priority small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.wrong-priority i { width: 38px; height: 22px; position: relative; border-radius: 999px; background: var(--primary); }
.wrong-priority i::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.smart-regenerate { margin-top: auto; }
.smart-result-panel { min-width: 0; display: flex; flex-direction: column; padding: 18px; background: #f8faff; }
.smart-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.smart-result-head h3 { margin: 0; font-size: 15px; }
.smart-result-head p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.smart-result-head > span { color: var(--primary-dark); font-size: 11px; }
.matched-question-list { flex: 1; min-height: 0; display: grid; align-content: start; gap: 10px; overflow: auto; padding-right: 5px; }
.matched-question { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.matched-stem { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 7px; align-items: start; }
.matched-stem > span { color: #4c5572; font-weight: 700; }
.matched-stem strong { font-size: 14px; line-height: 1.65; }
.matched-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 16px; margin: 12px 0 8px 31px; color: #30364e; font-size: 12px; }
.answer-space { margin: 10px 0 7px 31px; padding: 9px 11px; border-radius: 8px; background: #fafbfe; color: var(--muted); font-size: 10px; }
.matched-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.matched-foot > span { display: flex; align-items: center; gap: 6px; }
.question-tags { display: flex; gap: 5px; }
.question-tags em { padding: 3px 6px; border-radius: 5px; background: #f1f3f8; color: #75809a; font-size: 9px; font-style: normal; }
.answer-toggle { border: 0; background: transparent; color: var(--muted); font-size: 11px; }
.smart-empty { min-height: 300px; display: grid; place-items: center; align-content: center; color: var(--muted); text-align: center; }
.smart-empty strong { color: var(--text); }
.smart-empty p { margin: 4px 0 0; font-size: 11px; }
.smart-modal-foot { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--line); }
.smart-modal-foot > div:last-child { display: flex; gap: 8px; }
.smart-modal-foot strong { color: var(--primary); }

.manual-modal { width: min(1280px, 100%); height: min(820px, calc(100vh - 44px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 28px 70px rgba(26, 32, 61, .25); }
.manual-modal-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 310px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.manual-catalog-panel { min-width: 0; padding: 18px 20px; border-right: 1px solid var(--line); background: #fff; }
.manual-catalog-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.manual-catalog-tabs button { position: relative; height: 42px; border: 0; background: transparent; color: #7b84a0; font-weight: 650; }
.manual-catalog-tabs button.active { color: var(--primary-dark); }
.manual-catalog-tabs button.active::after { content: ""; position: absolute; right: 18px; bottom: -1px; left: 18px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }
.manual-book-select { display: block; margin-bottom: 12px; }
.manual-chapter-tree { display: grid; gap: 3px; }
.manual-chapter-tree button { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: #414860; text-align: left; }
.manual-chapter-tree button:hover { background: #f5f7fc; }
.manual-chapter-tree button.active { background: #e8eeff; color: var(--primary-dark); font-weight: 650; }
.manual-chapter-tree button > span { color: #8993b1; font-size: 18px; }
.manual-result-panel { min-width: 0; display: flex; flex-direction: column; padding: 18px 20px; background: #f8faff; }
.manual-toolbar { min-height: 46px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.manual-filter-group, .manual-search-group { display: flex; align-items: center; gap: 8px; }
.manual-filter-group button, .manual-search-group > button { height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: #59617d; font-size: 12px; font-weight: 600; }
.manual-filter-group button:hover, .manual-search-group > button:hover { background: #eef1f8; }
.manual-search-group label { width: 230px; height: 34px; position: relative; display: flex; align-items: center; }
.manual-search-group input { width: 100%; height: 100%; padding: 0 36px 0 13px; border: 1px solid #cfd6e9; border-radius: 999px; outline: 0; background: #fff; color: var(--text); }
.manual-search-group input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(93, 101, 237, .08); }
.manual-search-group label > span { position: absolute; right: 12px; width: 14px; height: 14px; border: 2px solid #8290b4; border-radius: 50%; }
.manual-search-group label > span::after { content: ""; position: absolute; right: -5px; bottom: -3px; width: 6px; height: 2px; border-radius: 2px; background: #8290b4; transform: rotate(45deg); }
.manual-result-title { min-height: 50px; display: flex; align-items: center; gap: 7px; }
.manual-result-title strong { font-size: 14px; }
.manual-result-title span { color: #8993ad; font-size: 11px; }
.manual-question-list { flex: 1; min-height: 0; display: grid; align-content: start; gap: 12px; overflow: auto; padding-right: 5px; }
.manual-question-card { padding: 17px 18px; border: 1px solid var(--line); border-radius: 13px; background: #fff; transition: border-color .16s, box-shadow .16s; }
.manual-question-card.selected { border-color: #bdc6fb; box-shadow: 0 4px 14px rgba(83, 97, 181, .07); }
.manual-question-stem { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; }
.manual-question-stem > span { color: #4c5572; font-size: 15px; font-weight: 700; }
.manual-question-stem strong { font-size: 14px; line-height: 1.7; }
.manual-question-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 13px 0 8px 34px; color: #30364e; font-size: 12px; }
.manual-question-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; padding-top: 11px; border-top: 1px dashed var(--line-strong); }
.manual-question-foot > span { display: flex; align-items: center; gap: 7px; }


.drawer-backdrop { position: fixed; z-index: 60; inset: 0; background: rgba(24, 29, 50, .25); }
.drawer { position: absolute; top: 0; right: 0; width: min(560px, 100%); height: 100%; display: flex; flex-direction: column; background: #fff; box-shadow: -20px 0 55px rgba(26, 32, 61, .18); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 17px; }
.drawer-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.drawer-close { width: 32px; height: 32px; border: 0; border-radius: 7px; background: #f1f3f8; color: var(--muted); }
.drawer-body { flex: 1; overflow: auto; padding: 20px; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main-shell { padding: 18px 16px 96px; }
}

@media (max-width: 760px) {
  .smart-modal-body { grid-template-columns: 1fr; overflow: auto; }
  .smart-config-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .smart-result-panel { min-height: 500px; }
}