/* ===== Study tabs (notes / mindmap / list) ===== */
:root { --mm-line: rgba(32, 36, 58, 0.55); --d1: #e0a000; --d2: #3a8fe0; --d3: #e75151; --d1-soft: #fff0bd; --d2-soft: #dcebff; --d3-soft: #ffe0df; }

.tabbar { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: calc(env(safe-area-inset-top, 0px) + 61px); z-index: 15; }
.tabbar-inner { max-width: 1100px; margin: 0 auto; padding: 0 12px; display: flex; gap: 4px; overflow-x: auto; }
.tab-btn { flex: none; border: 0; background: none; color: var(--text-dim); font-size: 15px; font-weight: 500; padding: 12px 14px; cursor: pointer; border-bottom: 3px solid transparent; min-height: 44px; }
.tab-btn:hover { color: var(--text); }
.tab-btn.is-active { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 700; }

.study { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }
.study h1 { font-size: 26px; margin-bottom: 6px; }
.study .sub { color: var(--text-dim); margin: 0 0 18px; font-size: 15px; }
.tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.tools input[type=search], .tools select { font: inherit; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); min-height: 40px; }
.tools input[type=search] { flex: 1 1 220px; min-width: 0; }
.chip-btn { font: inherit; font-size: 14px; padding: 8px 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; cursor: pointer; min-height: 40px; }
.chip-btn:hover { border-color: var(--accent); }
.chip-btn.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

.day-block { margin-bottom: 28px; }
.day-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 20px; }
.day-badge { font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; color: #fff; }
.day-1 .day-badge { background: var(--d1); } .day-2 .day-badge { background: var(--d2); } .day-3 .day-badge { background: var(--d3); }
html[data-theme="dark"] .day-badge, :root:not([data-theme="light"]) .day-badge { color: #0a1220; }
.unit-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 12px; box-shadow: var(--shadow); }
.unit-box > summary { cursor: pointer; padding: 14px 16px; font-weight: 700; list-style: none; display: flex; gap: 10px; align-items: center; min-height: 48px; }
.unit-box > summary::-webkit-details-marker { display: none; }
.unit-box > summary::before { content: "▸"; color: var(--text-dim); transition: transform .15s; }
.unit-box[open] > summary::before { transform: rotate(90deg); }
.unit-box .cnt { margin-left: auto; font-weight: 400; font-size: 13px; color: var(--text-dim); }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 0 16px 16px; }
.topic-card { background: var(--surface-alt); border-radius: var(--radius-sm); padding: 12px 14px; }
.topic-card h3 { font-size: 15px; margin-bottom: 6px; color: var(--accent-ink); }
.topic-card ul { margin: 0; padding-left: 18px; font-size: 14.5px; }
.topic-card li { margin: 3px 0; }
.empty { color: var(--text-dim); padding: 24px 0; }
mark { background: var(--warn-soft); color: inherit; border-radius: 3px; padding: 0 1px; }

/* mind map */
.mm-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: auto; padding: 20px; max-height: 76vh; box-shadow: var(--shadow); }
.mm-item { display: flex; align-items: center; position: relative; padding: 4px 0 4px 26px; }
.mm-root-item { padding-left: 0; }
.mm-item:not(.mm-root-item)::before { content: ""; position: absolute; left: 0; top: 50%; width: 26px; border-top: 2px solid var(--mm-line); }
.mm-item:not(.mm-root-item)::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--mm-line); }
.mm-kids > .mm-item:first-child::after { top: 50%; }
.mm-kids > .mm-item:last-child::after { bottom: 50%; }
.mm-kids > .mm-item:only-child::after { display: none; }
.mm-kids { position: relative; margin-left: 26px; display: flex; flex-direction: column; }
.mm-kids::before { content: ""; position: absolute; left: -26px; top: 50%; width: 26px; border-top: 2px solid var(--mm-line); }
#mmBody > .mm-item { width: max-content; min-width: 100%; }
.mm-node { flex: none; width: max-content; font: inherit; font-size: 14.5px; text-align: left; border: 2px solid var(--accent); background: var(--surface); color: var(--text); border-radius: 10px; padding: 8px 12px; cursor: pointer; max-width: 280px; min-height: 40px; line-height: 1.4; }
.mm-node[aria-expanded="false"]::after { content: " ＋"; color: var(--text-dim); }
.mm-node[aria-expanded="true"]::after { content: " －"; color: var(--text-dim); }
.mm-node.is-root { background: var(--accent); color: var(--surface); font-weight: 900; font-size: 16px; border-color: var(--accent); }
.mm-node.is-root::after { content: ""; }
.lvl-day-1 > .mm-node { border-color: var(--d1); background: var(--d1-soft); font-weight: 700; }
.lvl-day-2 > .mm-node { border-color: var(--d2); background: var(--d2-soft); font-weight: 700; }
.lvl-day-3 > .mm-node { border-color: var(--d3); background: var(--d3-soft); font-weight: 700; }
.lvl-unit > .mm-node { border-color: var(--border); }
.lvl-topic > .mm-node { border-style: dashed; font-size: 14px; }
.mm-leaf { flex: none; width: max-content; font-size: 14px; max-width: 320px; padding: 6px 10px; background: var(--surface-alt); border-radius: 8px; color: var(--text); line-height: 1.45; }

/* checklist */
.pt-list { list-style: none; margin: 0; padding: 0; }
.pt-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; }
.pt-row input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.pt-row.is-done .pt-text { color: var(--text-dim); text-decoration: line-through; }
.pt-meta { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.pt-label { display: flex; gap: 12px; cursor: pointer; flex: 1; }
.progress-line { font-size: 14px; color: var(--text-dim); margin-left: auto; }
@media (max-width: 600px) { .study h1 { font-size: 22px; } .mm-wrap { padding: 12px; } .tab-btn { padding: 12px 11px; font-size: 14.5px; } }

body[data-tab="notes"] #app, body[data-tab="mindmap"] #app, body[data-tab="list"] #app { max-width: 1180px; }
.study { padding-left: 0; padding-right: 0; }
#study-list .pt-list, #study-list .tools { max-width: 860px; }