:root {
    --ink: #16232b;
    --muted: #6e7b80;
    --paper: #f5f3ed;
    --panel: #fffefa;
    --line: #dedfd8;
    --navy: #132b35;
    --navy-2: #1d3a45;
    --teal: #1f857b;
    --teal-dark: #11635d;
    --coral: #e66d50;
    --lime: #b7d965;
    --blue: #6c9ec7;
    --shadow: 0 18px 45px rgba(25, 42, 49, .08);
    font-family: "Manrope", "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--paper);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); }
body { font-size: 14px; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 20px 22px; background: var(--navy); color: white; display: flex; flex-direction: column; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: 12px; margin: 0 8px 42px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--navy); background: var(--lime); font-weight: 800; font-size: 18px; transform: rotate(-4deg); }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.brand strong { font-size: 18px; letter-spacing: -.4px; }
.brand small { margin-top: 4px; color: #9db0b6; font-size: 10px; letter-spacing: 1.7px; text-transform: uppercase; }
.main-nav { display: grid; gap: 6px; }
.main-nav a { display: flex; align-items: center; gap: 13px; color: #b8c6ca; min-height: 46px; padding: 0 13px; border-radius: 12px; font-weight: 600; transition: .18s ease; }
.main-nav a:hover { color: white; background: rgba(255,255,255,.06); }
.main-nav a.active { color: white; background: var(--navy-2); box-shadow: inset 3px 0 0 var(--lime); }
.nav-icon { width: 22px; text-align: center; font-size: 19px; color: var(--lime); }
.sidebar-user { margin-top: auto; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.09); padding: 20px 8px 12px; min-width: 0; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #31535e; display: grid; place-items: center; font-weight: 800; color: var(--lime); flex: none; }
.user-copy { min-width: 0; display: flex; flex-direction: column; }
.user-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.user-copy small { color: #90a5ac; font-size: 10px; margin-top: 2px; }
.logout-form { margin: 0 8px; }
.main-content { min-width: 0; padding: 46px clamp(28px, 4vw, 68px) 70px; }

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.page-header h1 { margin: 6px 0 8px; font-size: clamp(32px, 4vw, 48px); letter-spacing: -2px; line-height: 1.04; }
.page-header p { margin: 0; color: var(--muted); max-width: 720px; font-size: 15px; line-height: 1.6; }
.header-actions, .hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eyebrow { color: var(--teal); font-size: 10px; letter-spacing: 2px; font-weight: 800; text-transform: uppercase; }
.eyebrow.light { color: var(--lime); }
.muted { color: var(--muted); }
.breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.breadcrumb a { color: var(--teal); font-weight: 700; }
.breadcrumb.light, .breadcrumb.light a { color: rgba(255,255,255,.72); }

.button { border: 1px solid var(--line); border-radius: 11px; padding: 10px 16px; background: var(--panel); color: var(--ink); font-weight: 700; display: inline-flex; justify-content: center; align-items: center; transition: .18s ease; }
.button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(26,49,58,.1); }
.button.primary { color: white; background: var(--teal); border-color: var(--teal); }
.button.primary:hover { background: var(--teal-dark); }
.button.ghost { background: transparent; }
.sidebar .button.ghost { color: #b8c6ca; border-color: rgba(255,255,255,.12); }
.button.full { width: 100%; }
.button.large { padding: 13px 21px; }
.button.compact { padding: 7px 10px; font-size: 10px; }
.button.danger { color: #a14332; border-color: #edc9c0; }
.button:disabled { opacity: .55; cursor: wait; transform: none; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 21px; }
.panel-head h2, .section-head h2 { margin: 4px 0 0; font-size: 21px; letter-spacing: -.6px; }
.panel-head > a { color: var(--teal); font-size: 12px; font-weight: 700; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.metric-card { min-height: 150px; border: 1px solid var(--line); background: var(--panel); border-radius: 17px; padding: 21px; display: flex; flex-direction: column; }
.metric-card > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.metric-card strong { font-size: 42px; letter-spacing: -2px; margin: auto 0 2px; }
.metric-card small { color: var(--muted); }
.metric-card.accent { background: var(--navy); border-color: var(--navy); color: white; }
.metric-card.accent > span, .metric-card.accent small { color: #b3c3c8; }
.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.task-list { display: grid; }
.task-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 13px; padding: 13px 3px; border-top: 1px solid #ecece6; }
.task-row:hover strong { color: var(--teal); }
.task-main { display: flex; flex-direction: column; gap: 3px; }
.task-main small, .task-row time { color: var(--muted); font-size: 11px; }
.priority { width: 7px; height: 28px; border-radius: 8px; background: #aab3b5; }
.priority.high, .priority.critical { background: var(--coral); }
.priority.normal { background: var(--blue); }
.flow-stat { display: flex; justify-content: space-between; align-items: center; margin-top: 19px; color: var(--muted); }
.flow-stat strong { color: var(--ink); }
.flow-bar { height: 7px; margin-top: 8px; background: #e8ebe6; border-radius: 10px; overflow: hidden; }
.flow-bar i { display: block; height: 100%; background: var(--blue); border-radius: inherit; }
.flow-bar.coral i { background: var(--coral); }
.flow-bar.green i { background: var(--teal); }

.create-panel { margin: -10px 0 28px; }
.form-grid { display: grid; gap: 17px; }
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
label { color: #4d5a5f; font-size: 11px; font-weight: 800; letter-spacing: .3px; }
input, textarea, select { width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid #d8dbd5; border-radius: 10px; background: #fbfaf6; color: var(--ink); outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31,133,123,.12); }
textarea { resize: vertical; line-height: 1.55; }
.check-row { display: flex; align-items: center; gap: 9px; }
.check-row input { width: auto; margin: 0; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 19px; }
.validation-message { display: block; color: #b94934; margin-top: 5px; font-size: 10px; }
.alert { padding: 11px 13px; border-radius: 9px; margin: 13px 0; }
.alert.error { color: #973e2e; background: #fff0eb; border: 1px solid #f0c1b5; }
.alert.success { color: #14675f; background: #e4f2ed; border: 1px solid #bddfd4; }

.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.project-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; min-height: 280px; display: flex; flex-direction: column; transition: .2s ease; }
.project-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #c5d3ce; }
.project-card-top, .project-card-foot { display: flex; align-items: center; justify-content: space-between; }
.project-key { color: var(--teal); font-weight: 800; letter-spacing: 1.4px; }
.status-pill { border-radius: 20px; padding: 5px 9px; background: #edf0ec; color: #637074; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
.status-pill.active { background: #e2f1ec; color: #177067; }
.status-pill.onhold { background: #fff0d9; color: #a05b1e; }
.status-pill.completed { background: #e8effa; color: #436d94; }
.project-card h2 { margin: 24px 0 9px; font-size: 21px; letter-spacing: -.5px; }
.project-card p { margin: 0; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.project-stats { display: flex; gap: 16px; margin-top: auto; padding-top: 24px; color: var(--muted); font-size: 10px; }
.project-stats strong { color: var(--ink); font-size: 14px; margin-right: 2px; }
.project-progress { height: 5px; border-radius: 10px; background: #e7e9e4; margin: 14px 0 8px; overflow: hidden; }
.project-progress i { display: block; height: 100%; background: var(--teal); }
.project-card-foot { color: var(--muted); font-size: 10px; }
.project-card-foot span:last-child { color: var(--teal); font-weight: 800; }
.project-meta-row { display: flex; align-items: center; gap: 20px; color: var(--muted); font-size: 12px; margin: -20px 0 30px; }

.section-head { display: flex; justify-content: space-between; align-items: end; margin: 34px 0 16px; }
.kanban-board { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 13px; overflow-x: auto; padding-bottom: 8px; }
.kanban-column { background: #ebece6; border-radius: 15px; min-height: 410px; padding: 13px; }
.kanban-column > header { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 3px 10px; }
.kanban-column > header small { margin-left: auto; border-radius: 20px; background: rgba(255,255,255,.65); padding: 3px 7px; }
.column-dot { width: 8px; height: 8px; border-radius: 50%; background: #879498; }
.column-dot.blue { background: var(--blue); }.column-dot.coral { background: var(--coral); }.column-dot.green { background: var(--teal); }
.kanban-items { display: grid; gap: 9px; }
.kanban-card { background: var(--panel); border: 1px solid #dedfd8; padding: 14px; border-radius: 12px; box-shadow: 0 5px 14px rgba(35,48,52,.04); }
.kanban-card.draggable, .release-task-card.draggable { cursor: grab; }.kanban-card.draggable:active, .release-task-card.draggable:active { cursor: grabbing; }.kanban-card.dragging, .release-task-card.dragging { opacity: .42; transform: rotate(1deg) scale(.98); }.kanban-column, .release-task-group { transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease; }.drag-active .kanban-column, .drag-active .release-task-group { box-shadow: inset 0 0 0 1px rgba(31,133,123,.14); }.kanban-column.drag-over, .release-task-group.drag-over { background: #dcebe5; box-shadow: inset 0 0 0 2px var(--teal), 0 12px 24px rgba(25,42,49,.08); transform: translateY(-2px); }.kanban-column.drag-over .column-empty, .release-task-group.drag-over .column-empty { color: var(--teal-dark); font-weight: 800; }
.kanban-card h3 { margin: 10px 0 7px; font-size: 14px; line-height: 1.35; }
.kanban-card p { color: var(--muted); font-size: 11px; line-height: 1.45; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-labels { display: flex; gap: 5px; flex-wrap: wrap; }
.card-labels span { padding: 3px 6px; border-radius: 5px; background: #edf0ec; color: #657276; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.priority-text.high, .priority-text.critical { color: #b94d36 !important; background: #fff0eb !important; }
.card-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; border-top: 1px solid #ecece6; padding-top: 9px; }
.status-select { margin-top: 10px; padding: 6px 7px; font-size: 10px; background: white; }
.column-empty, .compact-empty { color: #8b9699; text-align: center; padding: 28px 10px; font-size: 11px; }
.project-lower-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; margin-top: 25px; }
.resource-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid #ecece6; }
.resource-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: #e5f1ed; color: var(--teal); font-size: 19px; }
.resource-row > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }.resource-row small { color: var(--muted); font-size: 10px; }.resource-row b { color: var(--teal); }
.attach-course { display: grid; grid-template-columns: 1fr auto auto; gap: 9px; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 8px; }.attach-course select { margin: 0; }.attach-course .check-row { white-space: nowrap; }
.timeline-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid #ecece6; }
.timeline-row > i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }.timeline-row > span { display: flex; flex-direction: column; }.timeline-row small { color: var(--muted); }.timeline-row em { font-style: normal; font-size: 9px; color: var(--teal); }
.timeline-row > i.release-dot { background: var(--blue); }
.project-management-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; margin: 26px 0; align-items: start; }.project-member-list { display: grid; }.project-member-row { display: grid; grid-template-columns: 34px minmax(130px, 1fr) minmax(120px, auto) auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid #ecece6; }.project-member-row.inactive { opacity: .58; }.member-copy { display: flex; flex-direction: column; min-width: 0; }.member-copy strong, .member-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.member-copy small { color: var(--muted); font-size: 9px; margin-top: 3px; }.project-member-row select { margin: 0; padding: 7px; font-size: 10px; }.member-add-form { display: grid; grid-template-columns: 1.5fr .8fr auto; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 7px; }.member-add-form select { margin: 0; }.planning-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; margin-bottom: 10px; border-radius: 12px; background: #f3f4ef; }.planning-form input { margin: 0; }.planning-form .button { grid-column: span 2; }.planning-form.release { grid-template-columns: 1fr 1fr; }.planning-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #ecece6; }.planning-row > span:first-child, .planning-link { display: flex; flex-direction: column; gap: 3px; }.planning-link:hover strong { color: var(--teal-dark); }.planning-row small { color: var(--muted); font-size: 9px; }.planning-row select { margin: 0; padding: 7px; font-size: 10px; }
.release-summary-card { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 13px 0; border-top: 1px solid #ecece6; }.release-summary-card > a { min-width: 0; }.release-summary-card > select { width: auto; min-width: 105px; margin: 0; padding: 7px; font-size: 10px; }.release-summary-head, .release-summary-foot { display: flex; justify-content: space-between; gap: 10px; }.release-summary-head small, .release-summary-date, .release-summary-foot { color: var(--muted); font-size: 9px; }.release-summary-date { display: block; margin-top: 3px; }.release-progress { display: block; height: 6px; margin: 9px 0 6px; overflow: hidden; border-radius: 10px; background: #e5e8e3; }.release-progress i { display: block; height: 100%; border-radius: inherit; background: var(--teal); }.release-progress.large { height: 9px; margin: 18px 0 12px; }.release-page-head { align-items: center; }.release-date-badge { padding: 8px 11px; border-radius: 20px; color: var(--teal-dark); background: #e4f0ec; font-size: 10px; font-weight: 800; }.release-status-select { width: auto; min-width: 130px; margin: 0; }.release-overview { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }.release-progress-card { min-height: 150px; border-radius: 17px; padding: 22px; color: white; background: var(--navy); }.release-progress-card > div { display: flex; align-items: center; justify-content: space-between; }.release-progress-card .eyebrow { color: var(--lime); }.release-progress-card strong { font-size: 38px; letter-spacing: -2px; }.release-progress-card .release-progress { background: rgba(255,255,255,.16); }.release-progress-card .release-progress i { background: var(--lime); }.release-progress-card p { color: #b8c8cc; font-size: 10px; margin: 0; }.release-add-task { display: grid; grid-template-columns: 1fr minmax(260px, 1.2fr) auto; align-items: center; gap: 14px; margin-bottom: 26px; }.release-add-task h2 { margin: 5px 0 0; }.release-add-task select { margin: 0; }.release-task-groups { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 13px; overflow-x: auto; padding-bottom: 9px; }.release-task-group { min-height: 330px; padding: 13px; border-radius: 15px; background: #ebece6; }.release-task-group > header { display: flex; align-items: center; gap: 8px; padding: 1px 3px 12px; }.release-task-group > header small { margin-left: auto; padding: 3px 7px; border-radius: 20px; background: rgba(255,255,255,.7); }.release-task-list { display: grid; gap: 9px; }.release-task-card { padding: 14px; border: 1px solid #dedfd8; border-radius: 12px; background: var(--panel); }.release-task-card h3 { margin: 10px 0 5px; font-size: 13px; }.release-task-card p { margin: 0 0 10px; color: var(--muted); font-size: 10px; }.release-task-card select { margin: 10px 0 8px; padding: 7px; font-size: 10px; }.release-task-card .button { width: 100%; }.release-task-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }.cancelled-release-tasks { margin-top: 20px; }.cancelled-release-tasks summary { cursor: pointer; font-weight: 800; }.cancelled-release-tasks > div { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.sprint-details-main { min-width: 0; }.sprint-period-panel { display: grid; grid-template-columns: minmax(230px, .9fr) minmax(260px, 1.4fr) auto; align-items: center; gap: 22px; margin-bottom: 20px; }.sprint-period-copy h2 { margin: 5px 0 7px; font-size: 20px; }.sprint-period-copy p { margin: 0; color: var(--muted); font-size: 10px; }.sprint-calendar-progress { height: 11px; overflow: hidden; border-radius: 20px; background: #e5e8e3; }.sprint-calendar-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--lime)); }.sprint-module-badge, .task-status-readonly { padding: 7px 10px; border-radius: 20px; color: var(--teal-dark); background: #e4f0ec; font-size: 9px; font-weight: 800; }.task-status-readonly { display: inline-block; margin-top: 11px; }.task-due-overdue { color: #b94d36; font-weight: 800; }
.board-catalog-page, .board-details-page, .project-groups-page { min-width: 0; }.board-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.board-catalog-card { display: flex; min-height: 235px; flex-direction: column; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }.board-catalog-card:hover { transform: translateY(-3px); border-color: #adc9c1; box-shadow: var(--shadow); }.board-card-head, .board-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.board-card-head .resource-icon { width: 42px; height: 42px; }.board-catalog-card h2 { margin: 17px 0 7px; }.board-catalog-card > p { flex: 1; margin: 0; color: var(--muted); line-height: 1.55; font-size: 11px; }.board-card-stats { display: flex; gap: 18px; padding: 17px 0; margin-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }.board-card-stats strong { color: var(--ink); font-size: 14px; }.board-card-foot { color: var(--muted); font-size: 9px; }.board-card-foot b { color: var(--teal-dark); }.visibility-badge.restricted { color: #8e4a2f; background: #fff0e8; }.check-card { display: flex !important; align-items: center; gap: 11px; min-height: 52px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; background: #fafaf7; }.check-card input { width: auto; margin: 0; }.check-card span { display: flex; flex-direction: column; gap: 2px; }.check-card small { color: var(--muted); font-size: 8px; }.board-settings-panel { margin-bottom: 22px; }.board-access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 21px; margin-top: 21px; border-top: 1px solid var(--line); }.board-access-grid > section { min-width: 0; padding: 16px; border-radius: 13px; background: #f7f7f3; }.board-access-grid h3 { margin: 0 0 13px; }.access-subject-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #e4e6df; }.access-subject-row > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 2px; }.access-subject-row small { color: var(--muted); font-size: 8px; }.access-subject-row .resource-icon { width: 32px; height: 32px; }.inline-link { display: inline-block; margin-top: 12px; color: var(--teal-dark); font-size: 10px; font-weight: 800; }.danger-zone.compact { margin-top: 22px; padding: 18px; }.board-task-remove { position: absolute; top: 9px; right: 9px; width: 23px; height: 23px; padding: 0; border: 0; border-radius: 50%; color: #a04936; background: #fff0eb; font-size: 16px; line-height: 1; }.kanban-card:has(.board-task-remove) { position: relative; }.group-create-panel { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: 10px; margin-bottom: 18px; }.group-create-panel h2 { margin: 5px 0 0; }.group-create-panel input { margin: 0; }.project-group-grid { display: grid; gap: 16px; }.project-group-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }.project-group-card h2 { margin: 6px 0; }.project-group-card header p { margin: 0; color: var(--muted); font-size: 10px; }.group-member-list { margin-top: 18px; }.group-member-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }.group-member-row > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }.group-member-row small { color: var(--muted); font-size: 8px; }.group-member-add { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 13px; }.group-member-add select { margin: 0; }.group-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }.group-card-actions small { color: var(--muted); }
.board-section-actions { display: flex; align-items: flex-end; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }.project-board-switcher { display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; }.project-board-switcher label { display: grid; gap: 4px; min-width: min(280px, 70vw); color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.project-board-switcher select { min-width: 220px; margin: 0; color: var(--ink); background-color: var(--surface); font-size: 11px; font-weight: 750; letter-spacing: 0; text-transform: none; }.project-board-switcher .button { white-space: nowrap; }

.admin-users-panel { padding: 0; overflow: hidden; }.admin-user-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; border-bottom: 1px solid var(--line); }.admin-user-toolbar h2 { margin: 5px 0 0; }.admin-search { width: min(340px, 45%); margin: 0; }.admin-user-list { display: grid; }.admin-user-row { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(390px, 1.4fr) minmax(210px, .8fr) auto; align-items: center; gap: 18px; padding: 17px 24px; border-bottom: 1px solid #ecece6; }.admin-user-row:last-child { border-bottom: 0; }.admin-user-row.inactive { background: #f1f1ed; }.admin-user-identity { display: grid; grid-template-columns: 38px 1fr; gap: 11px; align-items: center; min-width: 0; }.admin-user-identity > span:last-child { display: flex; flex-direction: column; min-width: 0; }.admin-user-identity small { color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; }.admin-role-options { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }.admin-role-options label { white-space: nowrap; }.admin-password-reset { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: center; }.admin-password-reset input { margin: 0; padding: 8px; }.admin-user-state { display: grid; gap: 7px; justify-items: end; }

.course-filter { display: flex; gap: 7px; margin-bottom: 21px; }
.chip { border: 1px solid var(--line); background: transparent; border-radius: 30px; padding: 8px 13px; color: var(--muted); font-size: 11px; font-weight: 700; }
.chip.active { background: var(--navy); border-color: var(--navy); color: white; }
.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.course-card { overflow: hidden; border: 1px solid var(--line); background: var(--panel); border-radius: 18px; transition: .2s ease; }
.course-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.course-cover { height: 150px; padding: 17px; display: flex; justify-content: space-between; align-items: flex-start; color: white; }
.course-cover > span { align-self: center; margin: auto; font-size: 64px; font-weight: 800; opacity: .82; transform: rotate(-5deg); }
.course-cover small { border: 1px solid rgba(255,255,255,.45); border-radius: 20px; padding: 4px 7px; letter-spacing: 1px; font-size: 8px; }
.tone-1 { background: #1f7c74; }.tone-2 { background: #d4694f; }.tone-3 { background: #557f9f; }.tone-4 { background: #3c5059; }
.course-body { padding: 20px; }
.course-body h2 { margin: 12px 0 7px; font-size: 18px; }.course-body p { min-height: 44px; color: var(--muted); line-height: 1.5; margin: 0; font-size: 11px; }
.course-progress { margin-top: 20px; }.course-progress > div { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }.course-progress > i { display: block; background: #e5e8e3; height: 5px; border-radius: 10px; overflow: hidden; margin-top: 7px; }.course-progress b { display: block; height: 100%; background: var(--teal); }
.course-hero { min-height: 275px; border-radius: 22px; color: white; padding: 36px 42px; display: flex; justify-content: space-between; align-items: center; gap: 30px; box-shadow: var(--shadow); }
.course-hero h1 { font-size: clamp(30px, 4vw, 49px); letter-spacing: -2px; margin: 16px 0 12px; }.course-hero p { max-width: 680px; color: rgba(255,255,255,.78); line-height: 1.6; }
.course-edit { color: white; border-color: rgba(255,255,255,.35); margin-top: 14px; }
.course-authoring { margin-top: 20px; }.authoring-grid { display: grid; grid-template-columns: .8fr 1.4fr .9fr; gap: 20px; }.authoring-grid form { border: 1px solid var(--line); border-radius: 13px; padding: 17px; background: #faf9f4; }.authoring-grid h3 { margin: 0 0 14px; }.authoring-grid label { display: block; margin-bottom: 12px; }.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.course-ring { width: 130px; height: 130px; flex: none; border-radius: 50%; background: conic-gradient(var(--lime) calc(var(--progress) * 1%), rgba(255,255,255,.18) 0); display: grid; place-content: center; text-align: center; position: relative; }
.course-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: inherit; background-color: #26444e; }.course-ring strong, .course-ring span { position: relative; }.course-ring strong { font-size: 27px; }.course-ring span { font-size: 9px; color: #c2d0d4; }
.learning-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; margin-top: 22px; align-items: start; }
.lesson-content { min-height: 470px; }.lesson-kicker { color: var(--teal); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }.lesson-content h2 { font-size: 30px; margin: 13px 0 24px; }.lesson-text, .wiki-content { color: #38474c; font-size: 15px; line-height: 1.85; white-space: normal; }.lesson-actions { border-top: 1px solid var(--line); margin-top: 35px; padding-top: 20px; display: flex; justify-content: flex-end; }.complete-badge { color: var(--teal); font-weight: 800; }
.lesson-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.lesson-title-row h2 { margin-right: auto; }.lesson-edit-form { margin-top: 22px; padding: 22px; border-top: 1px solid var(--line); background: #faf9f4; border-radius: 14px; }.rich-editor { margin-top: 9px; border: 1px solid #d4d8d2; border-radius: 13px; overflow: hidden; background: white; }.rich-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); background: #f2f3ee; }.rich-toolbar button { min-width: 31px; min-height: 30px; border: 1px solid transparent; border-radius: 7px; color: #435158; background: transparent; font-size: 10px; font-weight: 800; }.rich-toolbar button:hover { color: var(--teal-dark); border-color: #cbd8d3; background: white; }.rich-toolbar select { width: auto; min-height: 30px; margin: 0; padding: 5px 27px 5px 9px; border-radius: 7px; color: #435158; background-color: white; font-size: 10px; font-weight: 750; }.rich-format-select { max-width: 165px; }.rich-font-select { max-width: 145px; }.rich-toolbar > span { width: 1px; height: 22px; margin: 0 3px; background: var(--line); }.rich-editor-surface { min-height: 230px; max-height: 620px; overflow: auto; padding: 20px; outline: none; color: #2e3d43; font-size: 14px; line-height: 1.75; }.rich-editor-surface:empty::before { content: attr(data-placeholder); color: #919b9d; pointer-events: none; }.rich-editor-surface:focus { box-shadow: inset 0 0 0 2px rgba(31,133,123,.13); }.rich-media-tools { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto; gap: 7px; align-items: end; padding: 11px; border-top: 1px solid var(--line); background: #faf9f5; }.rich-media-tools label { min-width: 0; }.rich-media-tools input { margin-top: 4px; padding: 8px; font-size: 10px; }.rich-editor-help { margin: 0; padding: 0 12px 11px; color: var(--muted); background: #faf9f5; font-size: 9px; }.rich-content p { margin: 0 0 1em; }.rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4, .rich-content h5, .rich-content h6, .rich-editor-surface h1, .rich-editor-surface h2, .rich-editor-surface h3, .rich-editor-surface h4, .rich-editor-surface h5, .rich-editor-surface h6 { margin: 1.3em 0 .55em; line-height: 1.25; }.rich-content h1, .rich-editor-surface h1 { font-size: 2em; }.rich-content h2, .rich-editor-surface h2 { font-size: 1.65em; }.rich-content h3, .rich-editor-surface h3 { font-size: 1.4em; }.rich-content h4, .rich-editor-surface h4 { font-size: 1.2em; }.rich-content h5, .rich-editor-surface h5 { font-size: 1.05em; }.rich-content h6, .rich-editor-surface h6 { font-size: .92em; letter-spacing: .04em; text-transform: uppercase; }.rich-content blockquote, .rich-editor-surface blockquote { margin: 1.2em 0; padding: 12px 17px; border-left: 4px solid var(--teal); border-radius: 0 9px 9px 0; color: #536267; background: #edf3ef; }.rich-content pre, .rich-editor-surface pre { overflow-x: auto; padding: 14px; border-radius: 10px; color: #e9f0f2; background: var(--navy); }.rich-content code, .rich-editor-surface code { font-family: "Cascadia Code", Consolas, monospace; }.rich-content a, .rich-editor-surface a { color: var(--teal-dark); text-decoration: underline; }.rich-content figure, .rich-editor-surface figure { margin: 24px 0; }.rich-content figcaption, .rich-editor-surface figcaption { margin-top: 7px; color: var(--muted); font-size: 10px; text-align: center; }.rich-content img, .rich-editor-surface img, .rich-content video, .rich-editor-surface video { display: block; width: auto; max-width: 100%; max-height: 620px; margin: 0 auto; border-radius: 12px; }.rich-content iframe, .rich-editor-surface iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #101b20; }
.course-outline h2 { margin: 5px 0 22px; }.outline-section { border-top: 1px solid var(--line); padding-top: 15px; margin-top: 15px; }.outline-section > strong { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; }
.lesson-link { display: grid; grid-template-columns: 29px 1fr; gap: 10px; align-items: center; width: 100%; background: transparent; border: 0; text-align: left; padding: 9px 7px; border-radius: 9px; color: var(--ink); }.lesson-link:hover, .lesson-link.active { background: #edf2ee; }.lesson-link > span:last-child { display: flex; flex-direction: column; font-weight: 700; font-size: 11px; }.lesson-link small { color: var(--muted); margin-top: 2px; font-weight: 500; }.lesson-check { width: 25px; height: 25px; border: 1px solid var(--line); display: grid; place-items: center; border-radius: 50%; color: var(--muted); font-size: 9px; }.lesson-check.done { color: white; border-color: var(--teal); background: var(--teal); }

.wiki-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 17px 21px; margin-bottom: 18px; }.wiki-toolbar label { width: min(320px, 42%); }.wiki-toolbar select { margin-top: 5px; }.wiki-search { width: min(370px, 50%); position: relative; }.wiki-search span { position: absolute; left: 12px; top: 17px; color: var(--muted); }.wiki-search input { padding-left: 34px; margin: 0; }
.wiki-layout { display: grid; grid-template-columns: 370px 1fr; min-height: 540px; border: 1px solid var(--line); border-radius: 19px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }.wiki-tree { border: 0; border-radius: 0; box-shadow: none; border-right: 1px solid var(--line); }.count-badge { background: #edf0ec; border-radius: 20px; padding: 4px 8px; color: var(--muted); font-size: 10px; }.tree-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 7px; align-items: center; margin: 2px -10px; padding-top: 9px; padding-bottom: 9px; padding-right: 10px; border-radius: 8px; font-size: 11px; }.tree-row:hover { background: #edf2ee; }.tree-row > span { color: var(--teal); }.tree-row small { color: var(--muted); }
.wiki-welcome { display: flex; flex-direction: column; justify-content: center; padding: clamp(38px, 7vw, 90px); background: radial-gradient(circle at 80% 20%, rgba(183,217,101,.25), transparent 30%), var(--panel); }.wiki-welcome h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -1.8px; max-width: 570px; margin: 13px 0; }.wiki-welcome p { max-width: 600px; color: var(--muted); line-height: 1.7; font-size: 15px; }.wiki-benefits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }.wiki-benefits span, .visibility-badge { border-radius: 20px; background: #e7f0eb; color: var(--teal-dark); padding: 7px 11px; font-size: 10px; font-weight: 800; }
.wiki-document-head { border-bottom: 1px solid var(--line); padding-bottom: 28px; }.wiki-article { max-width: 920px; margin: 0 auto; padding: clamp(30px, 6vw, 72px); }.article-meta { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 10px; margin-bottom: 38px; }.wiki-content { min-height: 240px; }.editor { font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; }.revision-panel { max-width: 920px; margin: 18px auto 0; }.revision-row { display: grid; grid-template-columns: 55px 1fr auto; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); align-items: center; }.revision-row > span { color: var(--teal); font-weight: 800; }.revision-row time { color: var(--muted); font-size: 10px; }

.auth-page { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: 1.1fr .9fr; background: var(--paper); }.auth-story { padding: clamp(36px, 6vw, 80px); background: radial-gradient(circle at 80% 15%, rgba(183,217,101,.18), transparent 26%), linear-gradient(145deg, #0e2832, #1b4650); color: white; display: flex; flex-direction: column; justify-content: space-between; }.auth-story .brand { margin: 0; align-self: flex-start; }.auth-story h1 { max-width: 760px; font-size: clamp(39px, 5.2vw, 72px); letter-spacing: -3px; line-height: 1.04; margin: 18px 0; }.auth-story p { max-width: 650px; color: #b7c9cd; font-size: 17px; line-height: 1.65; }.auth-proof { display: flex; gap: 13px; flex-wrap: wrap; color: #aec0c5; font-size: 11px; }.auth-proof span { color: var(--lime); font-weight: 800; }.auth-form-wrap { display: grid; place-items: center; padding: 35px; }.auth-form { width: min(430px, 100%); }.auth-form h2 { margin: 10px 0 8px; font-size: 29px; letter-spacing: -1px; }.auth-form > label:not(.check-row) { display: block; margin-top: 20px; }.auth-form .check-row { margin: 16px 0; }.form-foot { color: var(--muted); font-size: 10px; text-align: center; margin-top: 18px; line-height: 1.5; }

.setup-page { position: fixed; inset: 0; z-index: 110; overflow: auto; display: grid; grid-template-columns: minmax(330px, .72fr) minmax(620px, 1.28fr); background: var(--paper); }.setup-aside { position: sticky; top: 0; min-height: 100vh; padding: clamp(34px, 5vw, 68px); background: radial-gradient(circle at 12% 84%, rgba(183,217,101,.16), transparent 30%), linear-gradient(155deg, #102b35, #1a4650); color: white; display: flex; flex-direction: column; }.setup-aside .brand { margin: 0; }.setup-intro { margin: auto 0 42px; }.setup-intro h1 { max-width: 560px; margin: 18px 0; font-size: clamp(38px, 4vw, 61px); line-height: 1.04; letter-spacing: -2.8px; }.setup-intro p { max-width: 580px; color: #b8c9cd; font-size: 15px; line-height: 1.7; }.setup-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }.setup-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; color: #9eb3b9; }.setup-steps li > span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; font-size: 10px; font-weight: 800; }.setup-steps li.done > span { color: var(--navy); border-color: var(--lime); background: var(--lime); }.setup-steps li div { display: flex; flex-direction: column; gap: 3px; }.setup-steps strong { color: white; font-size: 12px; }.setup-steps small { font-size: 9px; }.setup-main { min-height: 100vh; padding: clamp(28px, 5vw, 70px); display: flex; align-items: center; }.setup-form { width: min(900px, 100%); margin: auto; }.setup-form-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }.setup-form h2, .setup-loading h2 { margin: 8px 0 0; font-size: clamp(29px, 3vw, 42px); letter-spacing: -1.5px; }.setup-status { flex: none; border-radius: 30px; padding: 7px 11px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }.setup-status.ok { color: #14675f; background: #deefe9; }.setup-status.bad { color: #a04734; background: #fff0eb; }.alert.info { color: #315e78; background: #ebf4fa; border: 1px solid #c7dde9; }.setup-form fieldset { border: 1px solid var(--line); border-radius: 17px; padding: 23px; margin: 16px 0; background: var(--panel); box-shadow: 0 10px 30px rgba(25,42,49,.04); }.setup-form legend { padding: 0 9px; font-size: 13px; font-weight: 800; }.setup-form legend span { color: var(--teal); margin-right: 6px; }.setup-grid { display: grid; gap: 17px; }.setup-grid.two { grid-template-columns: 1fr 1fr; }.setup-grid.three { grid-template-columns: repeat(3, 1fr); }.setup-check { margin-top: 19px; padding-top: 17px; border-top: 1px solid #ecece6; }.password-hint { margin: 16px 0 0; color: var(--muted); font-size: 10px; }.setup-submit { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; }.setup-submit p { color: var(--muted); font-size: 10px; line-height: 1.5; margin: 0; }.setup-submit strong { color: var(--ink); }.setup-loading, .setup-blocked { margin: auto; text-align: center; }.setup-blocked { max-width: 620px; }.setup-blocked h2 { font-size: 34px; margin: 15px 0 10px; }.setup-blocked p { line-height: 1.7; margin-bottom: 24px; }.setup-blocked code { color: var(--teal-dark); }

.landing-hero { min-height: 540px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8vw; }.landing-copy h1 { font-size: clamp(47px, 6vw, 82px); letter-spacing: -4px; line-height: .98; margin: 20px 0; }.landing-copy p { color: var(--muted); max-width: 650px; font-size: 17px; line-height: 1.7; }.landing-copy .hero-actions { margin-top: 30px; }.hero-visual { height: 390px; background: var(--navy); color: white; border-radius: 28px; padding: 30px; display: flex; flex-direction: column; box-shadow: 0 40px 75px rgba(19,43,53,.2); transform: rotate(2deg); }.visual-top, .visual-caption { display: flex; justify-content: space-between; align-items: center; }.visual-top span { color: #9bb0b6; letter-spacing: 1.6px; font-size: 10px; }.visual-top strong { font-size: 27px; color: var(--lime); }.visual-chart { flex: 1; display: flex; align-items: end; justify-content: space-around; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.16); padding: 34px 8px 0; }.visual-chart i { flex: 1; max-width: 42px; background: linear-gradient(var(--lime), #5ca897); border-radius: 7px 7px 0 0; opacity: .9; }.visual-caption { padding-top: 20px; color: #b1c1c5; }.status-dot::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); margin-right: 7px; }.feature-strip { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); }.feature-strip article { padding: 30px 34px; border-right: 1px solid var(--line); }.feature-strip article:last-child { border-right: 0; }.feature-strip article > span { color: var(--coral); font-size: 10px; font-weight: 800; }.feature-strip h3 { font-size: 19px; margin: 13px 0 7px; }.feature-strip p { color: var(--muted); line-height: 1.55; margin: 0; }
.welcome-redirect, .empty-state { min-height: 55vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.welcome-redirect h1, .empty-state h1 { font-size: clamp(34px, 5vw, 58px); letter-spacing: -2px; max-width: 720px; margin: 15px 0 24px; }.empty-state h2 { font-size: 28px; margin: 10px 0; }.empty-state p { color: var(--muted); margin: 0 0 22px; }.empty-state.compact { min-height: 330px; }.empty-state.panel { min-height: 360px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.skeleton-grid i, .skeleton-page i { display: block; height: 150px; border-radius: 17px; background: linear-gradient(90deg, #e8e8e2 20%, #f4f3ed 45%, #e8e8e2 70%); background-size: 300% 100%; animation: shimmer 1.4s infinite; }.skeleton-page { display: grid; gap: 18px; }.skeleton-page i:first-child { height: 190px; }.skeleton-page i { height: 320px; }@keyframes shimmer { to { background-position: -200% 0; } }

.section-hidden { display: none !important; }
.context-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 24px; }
.context-main { min-width: 0; }
.context-menu { position: sticky; top: 24px; padding: 17px; }
.context-menu > .eyebrow { display: block; padding: 4px 8px 12px; }
.context-menu nav { display: grid; gap: 4px; }
.context-menu nav a { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: center; padding: 11px 9px; border-radius: 10px; color: #435158; }
.context-menu nav a:hover { background: #f0f2ed; }
.context-menu nav a.active { color: var(--teal-dark); background: #e4f1ec; box-shadow: inset 3px 0 0 var(--teal); }
.context-menu nav a > span:first-child { color: var(--teal); text-align: center; font-size: 16px; }
.context-menu nav a > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.context-menu nav strong { font-size: 11px; }
.context-menu nav small { color: var(--muted); font-size: 8px; font-weight: 500; }
.context-main > .project-management-grid, .context-main > .project-lower-grid { grid-template-columns: 1fr; margin-top: 0; }
.course-builder-page { display: grid; gap: 18px; }
.course-section-editor { border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-top: 13px; background: #faf9f5; }
.course-section-fields { display: grid; grid-template-columns: minmax(220px, 1fr) 100px auto auto; gap: 9px; align-items: end; }
.course-section-fields input { margin-top: 5px; }
.lesson-manage-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 12px 7px; border-top: 1px solid #e5e6e0; margin-top: 11px; }
.lesson-manage-row:hover strong, .lesson-manage-row b { color: var(--teal-dark); }
.lesson-manage-row > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.lesson-manage-row small { color: var(--muted); font-size: 9px; }
.lesson-manage-row b { font-size: 9px; }
.lesson-order { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--teal-dark); background: #e3f0eb; font-size: 10px; font-weight: 800; }
.compact-form-panel { margin-top: 18px; }
.lesson-editor-page { padding: 28px; }
.lesson-editor-page .rich-editor-surface { min-height: 480px; max-height: 72vh; }
.editor-label { display: block; margin-top: 24px; }
.course-member-list { display: grid; }
.course-member-row { display: grid; grid-template-columns: 36px minmax(170px, 1fr) minmax(170px, auto) auto; gap: 11px; align-items: center; padding: 14px 3px; border-top: 1px solid #ecece6; }
.course-member-row > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.course-member-row small { color: var(--muted); font-size: 9px; }
.course-member-row select { margin: 0; padding: 8px; }
.course-member-row.inactive { opacity: .58; }
.settings-form { max-width: 980px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.rich-editor.compact .rich-editor-surface { min-height: 150px; max-height: 330px; }
.table-insert-control { position: relative; }
.table-picker { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: 218px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: white; box-shadow: 0 18px 45px rgba(25,42,49,.18); }
.table-picker > strong { display: block; margin-bottom: 8px; color: var(--teal-dark); font-size: 11px; }
.table-picker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.rich-toolbar .table-picker-grid button { min-width: 19px; min-height: 19px; padding: 0; border: 1px solid #bdc5c1; border-radius: 2px; background: #f8f8f5; }
.rich-toolbar .table-picker-grid button.selected { border-color: var(--teal); background: #cce7de; }
.table-picker small { display: block; margin-top: 8px; color: var(--muted); font-size: 8px; }
.table-scroll { max-width: 100%; overflow-x: auto; margin: 20px 0; }
.rich-content table, .rich-editor-surface table, .wiki-content table { width: 100%; border-collapse: collapse; table-layout: auto; background: white; }
.rich-content th, .rich-content td, .rich-editor-surface th, .rich-editor-surface td, .wiki-content th, .wiki-content td { min-width: 90px; padding: 10px 12px; border: 1px solid #bfc8c4; text-align: left; vertical-align: top; }
.rich-content th, .rich-editor-surface th, .wiki-content th { color: #18383d; background: #e5f1ed; font-weight: 800; }
.rich-editor-surface td:focus, .rich-editor-surface th:focus { outline: 2px solid rgba(31,133,123,.28); outline-offset: -2px; }
.task-details-layout { display: grid; gap: 20px; }
.task-editor-panel .rich-editor-surface { min-height: 300px; }
.comment-list { display: grid; }
.comment-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 17px 2px; border-top: 1px solid #ecece6; }
.comment-row > div { min-width: 0; }
.comment-row header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.comment-row time { color: var(--muted); font-size: 9px; }
.comment-content { margin-top: 8px; font-size: 13px; line-height: 1.65; }
.comment-content > :last-child { margin-bottom: 0; }
.comment-form { padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--line); }
.kanban-card h3 a:hover { color: var(--teal-dark); text-decoration: underline; }
.kanban-card.clickable { cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.kanban-card.clickable:hover { transform: translateY(-2px); border-color: #a8c9c0; box-shadow: 0 12px 26px rgba(25,42,49,.1); }
.kanban-card.clickable:focus-visible { outline: 3px solid rgba(31,133,123,.28); outline-offset: 2px; }
.task-open-hint { display: block; margin-top: 12px; color: var(--teal-dark); font-size: 9px; font-weight: 800; }
.task-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.task-detail-grid > div { display: flex; flex-direction: column; gap: 5px; min-height: 67px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fafaf7; }
.task-detail-grid small { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .6px; }
.task-detail-grid strong { font-size: 11px; line-height: 1.4; }
.task-description-view { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.task-description-view .rich-content { margin-top: 12px; line-height: 1.7; }
.task-readonly-panel > .access-note { margin: 24px 0 0; padding: 13px 15px; border-radius: 10px; background: #f0f3ef; }
.task-modal-backdrop { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(8,27,35,.68); backdrop-filter: blur(4px); }
.task-modal { position: relative; width: min(1180px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 28px; border-radius: 20px; background: var(--paper); box-shadow: 0 35px 100px rgba(0,0,0,.32); }
.task-modal-close { position: sticky; z-index: 3; top: 0; float: right; width: 38px; height: 38px; display: grid; place-items: center; margin: -10px -10px 0 14px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: white; font-size: 23px; line-height: 1; box-shadow: 0 6px 18px rgba(25,42,49,.1); }
.task-modal-close:hover { color: white; border-color: var(--teal); background: var(--teal); }
.task-embedded-layout { clear: both; }
.embedded-task-header { padding: 0 50px 20px 0; border-bottom: 1px solid var(--line); }
.embedded-task-header h1 { font-size: clamp(28px, 4vw, 43px); }
.task-embedded-layout .task-details-layout { margin-top: 18px; }
.module-intro { margin: -4px 0 18px; line-height: 1.6; }
.module-card-grid { display: grid; gap: 10px; }
.module-card { display: grid; grid-template-columns: 42px minmax(170px, 1fr) minmax(260px, auto) 24px; gap: 13px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: #fbfbf8; }
.module-card:hover { border-color: #9cc3b9; background: #f2f7f4; transform: translateY(-1px); }
.module-card-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: var(--teal-dark); background: #dff0ea; font-size: 18px; }
.module-card-copy { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.module-card-copy strong { font-size: 13px; }
.module-card-copy small { overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.module-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; color: var(--muted); }
.module-metrics b { font-size: 8px; white-space: nowrap; }
.module-card-arrow { color: var(--teal); font-weight: 800; }
.module-create-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 9px; align-items: start; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.module-create-form textarea { grid-column: span 2; min-height: 86px; }
.module-create-form .button { grid-row: 1 / span 2; grid-column: 3; height: 44px; }
.module-details-page { display: grid; gap: 18px; }
.module-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.module-stat-grid .metric-card { min-height: 125px; }
.module-resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.module-resource-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 2px; border-top: 1px solid #ecece6; color: var(--ink); }
.module-resource-row:not(.static):hover strong { color: var(--teal-dark); }
.module-resource-row > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.module-resource-row small { color: var(--muted); font-size: 9px; }
.module-resource-row b { color: var(--muted); font-size: 9px; }
.status-dot-small { width: 10px; height: 10px; margin-left: 8px; border-radius: 50%; background: #9ca9ad; }
.status-dot-small.inprogress, .status-dot-small.ready { background: #65a5d4; }.status-dot-small.inreview, .status-dot-small.blocked { background: var(--coral); }.status-dot-small.done { background: var(--teal); }
.resource-row-with-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; border-top: 1px solid #ecece6; }
.resource-row-with-action > .resource-row, .resource-row-with-action > .module-resource-row { border-top: 0; }
.settings-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0 24px; }
.settings-summary span { display: flex; min-height: 72px; flex-direction: column; justify-content: center; gap: 5px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #fafaf7; }
.settings-summary small { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .6px; }
.settings-summary strong { font-size: 17px; }
.danger-zone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) auto; gap: 18px; align-items: end; margin-top: 20px; padding: 22px; border: 1px solid #efc5bb; border-radius: 15px; background: #fff8f5; }
.danger-zone h3 { margin: 7px 0; color: #8f3828; font-size: 18px; }
.danger-zone p { max-width: 680px; margin: 0; color: #80665f; font-size: 10px; line-height: 1.55; }
.danger-zone label { font-size: 10px; font-weight: 700; }
.danger-zone input { margin-top: 6px; background: white; }
.danger-zone .button.danger { color: white; border-color: #ad4936; background: #ad4936; }
.danger-zone .button.danger:disabled { cursor: not-allowed; opacity: .45; }
.header-description { max-width: 760px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.header-description p, .course-description p { margin: 0 0 .55em; }
.course-description { max-width: 680px; color: rgba(255,255,255,.78); line-height: 1.6; }
.course-description a { color: white; }
.wiki-settings-layout { display: grid; gap: 18px; }
.visibility-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 18px; }
.visibility-option { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; min-height: 112px; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: #fafaf7; cursor: pointer; }
.visibility-option:hover { border-color: #9abeb5; }
.visibility-option.selected { border-color: var(--teal); background: #eaf4f0; box-shadow: inset 0 0 0 1px var(--teal); }
.visibility-option input { width: auto; margin: 3px 0 0; accent-color: var(--teal); }
.visibility-option span { display: flex; flex-direction: column; gap: 7px; }
.visibility-option strong { font-size: 12px; }
.visibility-option small { color: var(--muted); font-size: 9px; line-height: 1.55; }
.access-summary { margin-top: 16px; padding: 15px 17px; border-radius: 12px; color: #315359; background: #eff4f1; }
.access-summary strong { font-size: 11px; }
.access-summary p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.access-note { margin: -4px 0 14px; }
.wiki-grant-list { display: grid; }
.wiki-grant-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 13px 2px; border-top: 1px solid #ecece6; }
.wiki-grant-row > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.wiki-grant-row small { color: var(--muted); font-size: 9px; }
.grant-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--teal-dark); background: #e3f0eb; font-weight: 800; }
.wiki-access-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.access-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.access-add-row select { margin: 0; }

@media (max-width: 1100px) {
    .metric-grid { grid-template-columns: repeat(2, 1fr); }.project-grid, .course-grid { grid-template-columns: repeat(2, 1fr); }.kanban-board { grid-template-columns: repeat(4, 260px); }.learning-layout { grid-template-columns: 1fr; }.authoring-grid { grid-template-columns: 1fr 1fr; }.landing-hero { grid-template-columns: 1fr; padding: 40px 0; }.hero-visual { max-width: 650px; }.wiki-layout { grid-template-columns: 320px 1fr; }.project-management-grid { grid-template-columns: 1fr 1fr; }.project-management-grid > .panel:first-child { grid-column: span 2; }.admin-user-row { grid-template-columns: 1fr 1.5fr; }.admin-password-reset, .admin-user-state { justify-self: stretch; }.admin-user-state { grid-template-columns: auto 1fr; align-items: center; justify-items: start; }.release-overview { grid-template-columns: 1fr 1fr; }.release-progress-card { grid-column: span 2; }.release-task-groups { grid-template-columns: repeat(4, 260px); }.context-layout { grid-template-columns: 215px minmax(0, 1fr); }.course-section-fields { grid-template-columns: 1fr 90px; }.course-section-fields .button { width: 100%; }.module-stat-grid { grid-template-columns: 1fr 1fr; }.module-card { grid-template-columns: 42px minmax(0, 1fr) 24px; }.module-metrics { grid-column: 2; }.module-card-arrow { grid-column: 3; grid-row: 1 / span 2; }.sprint-period-panel { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 780px) {
    .app-shell { display: block; }.sidebar { position: static; width: 100%; height: auto; padding: 14px 18px; flex-direction: row; align-items: center; gap: 10px; }.brand { margin: 0 auto 0 0; }.brand small, .sidebar-user, .logout-form { display: none; }.main-nav { display: flex; overflow-x: auto; }.main-nav a { min-height: 40px; padding: 0 10px; }.main-nav a span:last-child { display: none; }.main-content { padding: 28px 18px 55px; }.page-header { align-items: flex-start; flex-direction: column; }.page-header h1 { font-size: 36px; }.dashboard-grid, .project-lower-grid, .learning-layout, .wiki-layout, .authoring-grid, .project-management-grid, .context-layout { grid-template-columns: 1fr; }.context-menu { position: static; grid-row: 1; }.context-menu nav { display: flex; overflow-x: auto; }.context-menu nav a { min-width: 165px; }.project-management-grid > .panel:first-child { grid-column: span 1; }.metric-grid, .project-grid, .course-grid, .release-overview { grid-template-columns: 1fr; }.release-progress-card { grid-column: span 1; }.form-grid.three, .form-grid.two { grid-template-columns: 1fr; }.span-2, .span-3 { grid-column: span 1; }.wiki-tree { border-right: 0; border-bottom: 1px solid var(--line); }.wiki-welcome { min-height: 320px; padding: 34px 24px; }.course-hero { padding: 28px; align-items: flex-start; }.course-ring { width: 95px; height: 95px; }.auth-page { position: static; grid-template-columns: 1fr; min-height: 100vh; }.auth-story { min-height: 420px; }.auth-story h1 { font-size: 42px; }.auth-form-wrap { padding: 50px 22px; }.feature-strip { grid-template-columns: 1fr; }.feature-strip article { border-right: 0; border-bottom: 1px solid var(--line); }.wiki-toolbar { align-items: stretch; flex-direction: column; }.wiki-toolbar label, .wiki-search { width: 100%; }.setup-page { position: static; display: block; }.setup-aside { position: static; min-height: 500px; }.setup-main { padding: 42px 20px; }.setup-grid.two, .setup-grid.three { grid-template-columns: 1fr; }.setup-form .span-2 { grid-column: span 1; }.setup-form-head, .setup-submit { align-items: flex-start; flex-direction: column; }.setup-submit .button { width: 100%; }.project-member-row, .course-member-row { grid-template-columns: 34px 1fr; }.project-member-row select, .project-member-row .button, .project-member-row .status-pill, .course-member-row select, .course-member-row .button, .course-member-row .status-pill { grid-column: 2; }.member-add-form, .planning-form, .planning-form.release, .release-add-task, .course-section-fields { grid-template-columns: 1fr; }.planning-form .button { grid-column: span 1; }.admin-user-toolbar { align-items: stretch; flex-direction: column; }.admin-search { width: 100%; }.admin-user-row { grid-template-columns: 1fr; }.admin-user-state { grid-template-columns: 1fr; justify-items: stretch; }.admin-role-options { align-items: flex-start; flex-direction: column; }.release-task-groups { grid-template-columns: repeat(4, 245px); }.rich-media-tools { grid-template-columns: 1fr auto; }.lesson-title-row { align-items: flex-start; flex-direction: column; }.lesson-editor-page { padding: 18px; }.lesson-editor-page .rich-editor-surface { min-height: 360px; }.visibility-options, .wiki-access-forms, .task-detail-grid, .module-stat-grid, .module-resource-grid, .settings-summary { grid-template-columns: 1fr; }.access-add-row { grid-template-columns: 1fr; }.task-modal-backdrop { padding: 0; }.task-modal { width: 100%; max-height: 100vh; min-height: 100vh; padding: 20px 16px; border-radius: 0; }.module-create-form { grid-template-columns: 1fr; }.module-create-form textarea, .module-create-form .button { grid-column: 1; grid-row: auto; }.module-card { grid-template-columns: 38px minmax(0, 1fr) 20px; }.module-metrics { grid-column: 1 / span 3; grid-template-columns: 1fr 1fr; }.danger-zone { grid-template-columns: 1fr; align-items: stretch; }.resource-row-with-action { grid-template-columns: 1fr; }.resource-row-with-action > .button { justify-self: start; margin: 0 0 10px 40px; }
}
@media (max-width: 900px) {
    .board-catalog-grid, .board-access-grid { grid-template-columns: 1fr; }
    .group-create-panel { grid-template-columns: 1fr; align-items: stretch; }
}
@media (max-width: 560px) {
    .board-card-stats { align-items: flex-start; flex-direction: column; gap: 8px; }
    .access-subject-row, .group-member-row { grid-template-columns: 34px minmax(0, 1fr); }
    .access-subject-row .button, .group-member-row .button { grid-column: 2; justify-self: start; }
    .group-member-add { grid-template-columns: 1fr; }
    .project-group-card > header, .group-card-actions { align-items: flex-start; flex-direction: column; }
    .section-head { align-items: flex-start; flex-direction: column; gap: 12px; }
    .board-section-actions, .project-board-switcher { width: 100%; align-items: stretch; flex-direction: column; }
    .project-board-switcher label, .project-board-switcher select { width: 100%; min-width: 0; }
}