.template-course-home .container { max-width: 1380px; }
.course-shell { margin: 24px 0 36px; }
.course-hero { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 20px; }
.course-kicker { margin: 0 0 8px; color: var(--site-accent-soft, #77d0ff); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.86rem; }
.course-hero h1 { margin: 0; }
.course-subtitle { margin: 10px 0 0; color: rgba(223, 232, 246, 0.8); line-height: 1.6; }
.course-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, 0.9fr); gap: 20px; }
.course-card, .course-main-panel, .course-login-hint, .course-empty { border: 1px solid rgba(119, 152, 224, 0.18); border-radius: 22px; background: rgba(9, 15, 30, 0.7); box-shadow: 0 20px 50px rgba(7, 9, 18, 0.22); backdrop-filter: blur(10px); }
.course-main-panel { padding: 20px; }
.course-card, .course-login-hint { padding: 18px; }
.course-login-hint { max-width: 360px; }
.course-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; margin-bottom: 18px; }
.toolbar-group { display: grid; gap: 6px; min-width: 140px; }
.toolbar-group label { font-size: 0.92rem; color: rgba(209, 223, 244, 0.74); }
.toolbar-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.course-btn, .mode-tabs button, .text-btn, .rule-chip { border-radius: 999px; border: 1px solid rgba(121, 159, 223, 0.2); background: rgba(255, 255, 255, 0.04); color: inherit; cursor: pointer; padding: 10px 16px; }
.course-btn.primary { background: linear-gradient(135deg, var(--site-accent-soft, #6fd8ff), var(--site-accent, #3c8fff)); color: #fff; border: 0; }
.course-btn.danger { background: rgba(219, 87, 87, 0.14); border-color: rgba(219, 87, 87, 0.2); color: #ffb6b6; }
.course-btn.subtle, .text-btn { background: transparent; }
.mode-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.mode-tabs button.is-active { background: rgba(116, 214, 255, 0.16); border-color: rgba(116, 214, 255, 0.28); }
.course-toolbar select, .course-toolbar input, .field-row input, .field-row select, .field-row textarea { width: 100%; min-height: 42px; border-radius: 14px; border: 1px solid rgba(121, 159, 223, 0.2); background: rgba(255, 255, 255, 0.04); color: inherit; padding: 10px 12px; box-sizing: border-box; }
.field-row { display: grid; gap: 8px; margin-bottom: 14px; }
.field-row.field-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.field-head-inline { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.weeks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rule-chip { display: block; text-align: center; padding: 0; border: 0; background: transparent; user-select: none; cursor: pointer; }
.rule-chip:hover .chip-label { border-color: rgba(120, 210, 255, 0.34); }
.rule-chip.is-active,
.rule-chip[aria-pressed='true'] { background: transparent; border: 0; box-shadow: none; transform: none; color: inherit; }
.chip-input { position: absolute; opacity: 0; pointer-events: none; }
.chip-label { display: block; width: 100%; padding: 8px 10px; border: 1px solid rgba(121, 159, 223, 0.2); border-radius: 999px; background: rgba(255, 255, 255, 0.04); transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease, color .16s ease; }
.rule-chip.is-active .chip-label,
.rule-chip[aria-pressed='true'] .chip-label,
.chip-input:checked + .chip-label { background: linear-gradient(135deg, #2284d8, #45b7ff); border-color: rgba(120, 210, 255, 0.82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 8px 18px rgba(35, 125, 214, 0.28); transform: translateY(-1px); font-weight: 700; color: #fff; }
.course-editor-panel { display: grid; gap: 16px; align-self: start; position: sticky; top: 94px; }
.course-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 12px; }
.editor-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.form-message { min-height: 20px; margin-top: 8px; font-size: 0.92rem; color: #ffbf85; }
.form-message.is-success { color: #9de3bc; }
.rule-list { display: grid; gap: 10px; }
.rule-list-item { border: 1px solid rgba(121, 159, 223, 0.16); border-radius: 16px; padding: 12px 14px; background: rgba(255, 255, 255, 0.03); cursor: pointer; }
.rule-list-item:hover, .rule-list-item.is-active { border-color: rgba(120, 210, 255, 0.28); }
.rule-title { font-weight: 700; }
.rule-meta { margin-top: 6px; color: rgba(209, 223, 244, 0.72); font-size: 0.9rem; line-height: 1.5; }
.semester-grid { display: grid; grid-template-columns: 70px repeat(7, minmax(0, 1fr)); gap: 8px; }
.grid-head, .grid-period, .grid-cell, .day-list-item { border-radius: 16px; border: 1px solid rgba(121, 159, 223, 0.14); background: rgba(255, 255, 255, 0.03); }
.grid-head, .grid-period { padding: 12px 10px; text-align: center; font-weight: 700; }
.grid-cell { min-height: 78px; position: relative; overflow: hidden; }
.course-event { border-radius: 14px; margin: 6px; padding: 8px 10px; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; border: 0; color: #fff; width: calc(100% - 12px); }
.course-event.is-grid { position: absolute; left: 0; right: 0; }
.course-event.color-sky { background: linear-gradient(135deg, #2b7cb7, #4bc3f2); }
.course-event.color-mint { background: linear-gradient(135deg, #1d8b76, #45cfaf); }
.course-event.color-amber { background: linear-gradient(135deg, #b66a16, #f3ae34); }
.course-event.color-rose { background: linear-gradient(135deg, #aa476d, #eb7a9f); }
.course-event.color-violet { background: linear-gradient(135deg, #6d53bc, #a58dff); }
.course-event.color-slate { background: linear-gradient(135deg, #4a6077, #738ba4); }
.course-event-title { font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-event-location, .course-event-meta { font-size: 0.88rem; line-height: 1.4; opacity: 0.92; }
.day-list-wrap { display: grid; gap: 10px; }
.day-list-item { padding: 14px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start; }
.day-period { font-weight: 700; text-align: center; padding-top: 6px; }
.course-empty { padding: 14px 16px; margin-bottom: 14px; color: rgba(215, 226, 244, 0.78); }
.checkbox-line { display: flex; gap: 8px; align-items: center; }
@media (max-width: 1120px) { .course-layout { grid-template-columns: 1fr; } .course-editor-panel { position: static; } }
@media (max-width: 760px) { .chip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .weeks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .field-row.field-inline, .course-hero { grid-template-columns: 1fr; display: grid; } .semester-grid { grid-template-columns: 58px repeat(7, minmax(120px, 1fr)); overflow-x: auto; } .course-main-panel { overflow: auto; } }
:root[data-theme='light'] .course-subtitle, :root[data-theme='light'] .rule-meta, :root[data-theme='light'] .course-empty, :root[data-theme='light'] .toolbar-group label { color: rgba(30, 52, 82, 0.72); }
:root[data-theme='light'] .course-card, :root[data-theme='light'] .course-main-panel, :root[data-theme='light'] .course-login-hint, :root[data-theme='light'] .course-empty { background: rgba(255, 255, 255, 0.88); border-color: rgba(88, 121, 188, 0.14); box-shadow: 0 18px 40px rgba(43, 74, 124, 0.08); }
:root[data-theme='light'] .grid-head, :root[data-theme='light'] .grid-period, :root[data-theme='light'] .grid-cell, :root[data-theme='light'] .day-list-item, :root[data-theme='light'] .rule-list-item, :root[data-theme='light'] .course-toolbar select, :root[data-theme='light'] .course-toolbar input, :root[data-theme='light'] .field-row input, :root[data-theme='light'] .field-row select, :root[data-theme='light'] .field-row textarea { background: rgba(245, 249, 255, 0.82); border-color: rgba(88, 121, 188, 0.16); }
:root[data-theme='light'] .rule-chip { color: #1f2d44; }
:root[data-theme='light'] .chip-label { background: rgba(245, 249, 255, 0.82); border-color: rgba(88, 121, 188, 0.16); color: #1f2d44; }
:root[data-theme='light'] .rule-chip.is-active .chip-label,
:root[data-theme='light'] .rule-chip[aria-pressed='true'] .chip-label,
:root[data-theme='light'] .chip-input:checked + .chip-label { background: linear-gradient(135deg, #2f7ef7, #55b3ff); border-color: rgba(47, 126, 247, 0.54); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 8px 18px rgba(47, 126, 247, 0.18); color: #fff; }