:root {
    --bg: #f3f6f4;
    --bg-elevated: #ffffff;
    --ink: #14231c;
    --ink-soft: #4a5c53;
    --line: #d7e0da;
    --brand: #1f6b4f;
    --brand-deep: #124434;
    --brand-soft: #e6f2ec;
    --accent: #c47a2c;
    --danger: #9b2c2c;
    --danger-soft: #f8e8e8;
    --success: #1f6b4f;
    --success-soft: #e6f2ec;
    --shadow: 0 18px 50px rgba(20, 35, 28, 0.08);
    --radius: 18px;
    --font: "DM Sans", sans-serif;
    --display: "Source Serif 4", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background:
        linear-gradient(145deg, var(--brand) 0%, var(--brand-deep) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
    display: inline-block;
    position: relative;
}
.brand-mark::after {
    content: "";
    position: absolute;
    inset: 9px 8px 8px 9px;
    border: 2px solid rgba(255,255,255,0.85);
    border-radius: 999px 999px 6px 999px;
    transform: rotate(-18deg);
}
.brand-mark--lg { width: 48px; height: 48px; border-radius: 14px; }

.btn {
    border: 0;
    border-radius: 12px;
    padding: 0.75rem 1.1rem;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
    background: linear-gradient(160deg, var(--brand), var(--brand-deep));
    color: #fff;
    box-shadow: 0 10px 24px rgba(31, 107, 79, 0.25);
}
.btn--ghost {
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--line);
}
.btn--block { width: 100%; }

.guest-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}
.guest-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(31,107,79,0.18), transparent 40%),
        radial-gradient(circle at 85% 10%, rgba(196,122,44,0.16), transparent 35%),
        linear-gradient(160deg, #eef4f0 0%, #f7faf8 45%, #e8efe9 100%);
    animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift {
    from { transform: scale(1) translateY(0); }
    to { transform: scale(1.04) translateY(-12px); }
}
.guest-panel {
    position: relative;
    width: min(440px, 100%);
    z-index: 1;
    animation: rise .55s ease both;
}
@keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-card {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(215,224,218,0.9);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: var(--shadow);
}
.auth-card__header {
    text-align: center;
    margin-bottom: 1.5rem;
}
.auth-card__header h1 {
    font-family: var(--display);
    font-size: 1.7rem;
    margin: 0.85rem 0 0.35rem;
}
.auth-card__header p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.5;
}

.auth-form { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.4rem; }
.field span { font-size: 0.92rem; color: var(--ink-soft); font-weight: 500; }
.field input {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.8rem 0.95rem;
    background: #fff;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(31,107,79,0.12);
}
.field__error { color: var(--danger); font-size: 0.85rem; font-style: normal; }
.checkbox {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--ink-soft);
}

.alert {
    border-radius: 12px;
    padding: 0.8rem 0.95rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.alert--error { background: var(--danger-soft); color: var(--danger); }
.alert--success { background: var(--success-soft); color: var(--success); }

.app-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(31,107,79,0.04), transparent 180px),
        var(--bg);
}
.sidebar {
    background: linear-gradient(180deg, #12382c 0%, #184537 100%);
    color: #edf5f0;
    padding: 1.4rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.sidebar__brand {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    padding: 0.4rem 0.55rem;
}
.sidebar__brand strong { display: block; font-size: 0.98rem; }
.sidebar__brand small { color: rgba(237,245,240,0.65); }
.sidebar__nav { display: grid; gap: 0.35rem; }
.nav-link {
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    color: rgba(237,245,240,0.78);
}
.nav-link.is-active,
.nav-link:hover:not(.is-disabled) {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.nav-link.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.app-main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.6rem;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 5;
}
.topbar h1 {
    margin: 0;
    font-family: var(--display);
    font-size: 1.45rem;
}
.topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.user-chip {
    text-align: right;
    line-height: 1.25;
}
.user-chip span { display: block; font-weight: 600; }
.user-chip small { color: var(--ink-soft); }

.content { padding: 1.6rem; }
.page-intro h2 {
    margin: 0 0 0.35rem;
    font-family: var(--display);
    font-size: 1.7rem;
}
.page-intro p { margin: 0 0 1.4rem; color: var(--ink-soft); }

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.info-block {
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
}
.info-block h3 {
    margin: 0 0 0.45rem;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
}
.info-block p { margin: 0; font-size: 1.05rem; font-weight: 600; }

.empty-state {
    border: 1px dashed #b7c8be;
    border-radius: var(--radius);
    padding: 1.4rem;
    background: rgba(255,255,255,0.55);
    color: var(--ink-soft);
}

.error-panel {
    text-align: center;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: var(--shadow);
}
.error-panel h1 {
    font-family: var(--display);
    margin-top: 0;
}
.error-trace {
    text-align: left;
    background: #111;
    color: #d7e0da;
    padding: 0.8rem;
    border-radius: 10px;
    overflow: auto;
    font-size: 0.8rem;
}

@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { padding-bottom: 0.6rem; }
    .sidebar__nav {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        padding-bottom: 0.4rem;
    }
    .info-grid, .info-grid--4 { grid-template-columns: 1fr; }
    .topbar { flex-direction: column; align-items: flex-start; }
    .form-grid { grid-template-columns: 1fr; }
}

.nav-group { display: grid; gap: 0.2rem; margin-top: 0.6rem; }
.nav-group__label {
    padding: 0.55rem 0.85rem 0.2rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(237,245,240,0.45);
}
.banner {
    border-radius: 14px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    font-weight: 500;
}
.banner--trial {
    background: linear-gradient(120deg, rgba(196,122,44,0.16), rgba(31,107,79,0.1));
    border: 1px solid rgba(196,122,44,0.35);
    color: #7a4a12;
}
.page-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.2rem;
}
.page-toolbar h2 { margin: 0 0 0.25rem; font-family: var(--display); }
.page-toolbar p { margin: 0; color: var(--ink-soft); }
.panel-form, .panel-block {
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.field--full { grid-column: 1 / -1; }
.form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}
.form-section { margin-top: 1.25rem; }
.form-section h3 { margin: 0 0 0.7rem; font-size: 1rem; }
.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.45rem 0.8rem;
}
.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    color: var(--ink-soft);
    font-size: 0.92rem;
}
.table-wrap {
    overflow: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th, .data-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.data-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}
.actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.actions form { margin: 0; }
.link-danger, .actions button {
    background: none;
    border: 0;
    color: var(--danger);
    cursor: pointer;
    padding: 0;
    font: inherit;
}
.link-ok { background: none; border: 0; color: var(--brand); cursor: pointer; padding: 0; font: inherit; }
.search-bar {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.search-bar input {
    flex: 1;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    background: #fff;
}
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.9rem;
    color: var(--ink-soft);
}
.branch-switcher select {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    background: #fff;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
.info-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.simple-list { margin: 0; padding-left: 1.1rem; }
.simple-list li { margin: 0.35rem 0; }
.muted { color: var(--ink-soft); }
.perm-module { margin-bottom: 1rem; }
.perm-module h4 {
    margin: 0 0 0.45rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}
.field select {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.8rem 0.95rem;
    background: #fff;
}
.field textarea {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.8rem 0.95rem;
    background: #fff;
    font: inherit;
    width: 100%;
}
.alert--warning {
    background: #fff7e8;
    color: #7a4a12;
    border: 1px solid rgba(196,122,44,0.35);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}
.filter-panel {
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}
.badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-deep);
    font-size: 0.78rem;
    font-weight: 600;
}
.badge--green { background: #e6f2ec; color: #124434; }
.badge--red { background: #f8e8e8; color: #9b2c2c; }
.badge--amber, .badge--orange { background: #fff3e0; color: #8a4b12; }
.badge--blue, .badge--indigo, .badge--violet, .badge--cyan, .badge--teal { background: #e8f1ff; color: #1d4f91; }
.badge--slate { background: #eef1ef; color: #4a5c53; }
.metric-grid, .today-grid, .perf-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.today-grid, .perf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric-card {
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow);
}
.metric-card span { display: block; color: var(--ink-soft); font-size: 0.82rem; margin-bottom: 0.35rem; }
.metric-card strong { font-size: 1.6rem; font-family: var(--display); }
.metric-card small { display: block; color: var(--ink-soft); margin-top: 0.25rem; font-size: 0.75rem; }
.lead-header {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
    margin-bottom: 1.2rem;
    padding: 1.2rem;
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(31,107,79,0.08), rgba(255,255,255,0.9)),
        var(--bg-elevated);
    border: 1px solid var(--line);
}
.lead-header h2 { margin: 0.2rem 0; font-family: var(--display); }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; color: var(--ink-soft); }
.quick-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.lead-header__meta { display: grid; gap: 0.7rem; }
.lead-header__meta span { display: block; color: var(--ink-soft); font-size: 0.8rem; }
.lead-layout { display: grid; grid-template-columns: 1.6fr 0.9fr; gap: 1rem; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.timeline li { border-left: 3px solid var(--brand-soft); padding-left: 0.85rem; }
.timeline__meta { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.stack-form { display: grid; gap: 0.6rem; margin-bottom: 0.9rem; }
.note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: 0.85rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}
.kanban__column {
    background: rgba(255,255,255,0.7);
    border: 1px solid var(--line);
    border-radius: 16px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
}
.kanban__column header {
    display: flex;
    justify-content: space-between;
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid var(--line);
}
.kanban__list { padding: 0.7rem; display: grid; gap: 0.55rem; align-content: start; min-height: 200px; }
.kanban__list.is-over { background: rgba(31,107,79,0.06); }
.kanban__card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.75rem;
    cursor: grab;
    box-shadow: 0 8px 20px rgba(20,35,28,0.05);
}
.kanban__card.is-dragging { opacity: 0.55; }
.kanban__card a { display: grid; gap: 0.2rem; }
.tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs__item {
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
}
.tabs__item.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.timeline-list { display: grid; gap: 0.75rem; }
.timeline-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
}
.is-overdue td { background: #fff5f5; }
.card-list { display: grid; gap: 0.7rem; }
.lead-card {
    display: grid;
    gap: 0.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.9rem 1rem;
}
.desktop-only { display: block; }
.mobile-only { display: none; }
@media (max-width: 1100px) {
    .metric-grid, .today-grid, .perf-grid, .lead-layout, .lead-header { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .desktop-only { display: none; }
    .mobile-only { display: grid; }
}

.student-header-main { display: flex; gap: 1rem; align-items: flex-start; }
.avatar-initials {
    width: 3.2rem; height: 3.2rem; border-radius: 18px;
    display: grid; place-items: center;
    background: linear-gradient(145deg, #1f6b4f, #2f8f6a);
    color: #fff; font-weight: 700; letter-spacing: 0.04em;
    flex: 0 0 auto;
}
.meta-list { display: grid; gap: 0.65rem; margin: 0; }
.meta-list > div { display: grid; grid-template-columns: 7rem 1fr; gap: 0.5rem; }
.meta-list dt { color: var(--ink-soft); margin: 0; }
.meta-list dd { margin: 0; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.checkbox-field { display: flex; align-items: center; gap: 0.5rem; }
.checkbox-field input { width: auto; }
.badge--danger { background: #fde8e8; color: #9b1c1c; }
.hours-grid input[type="time"] { min-width: 7rem; }

/* M5 Schedule */
.schedule-nav { display: flex; gap: 0.5rem; margin: 0.75rem 0 1rem; flex-wrap: wrap; }
.schedule-week { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg-elevated); }
.schedule-week__head, .schedule-week__body { display: grid; grid-template-columns: repeat(7, 1fr); }
.schedule-week__day-head { padding: 0.65rem 0.5rem; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-size: 0.9rem; }
.schedule-week__day-head:last-child { border-right: 0; }
.schedule-week__col { position: relative; min-height: 420px; border-right: 1px solid var(--line); background: linear-gradient(#f7faf8, #fff); }
.schedule-week__col:last-child { border-right: 0; }
.session-chip {
  position: absolute; left: 4px; right: 4px;
  padding: 0.25rem 0.35rem; border-radius: 8px;
  background: #e8f1ff; color: #1d4f91; font-size: 0.75rem;
  overflow: hidden; border: 1px solid #c9dbf5;
}
.session-chip--completed { background: #e6f2ec; color: #124434; border-color: #b9d8c8; }
.session-chip--cancelled { background: #eef1ef; color: #4a5c53; border-color: #d5ddd8; }
.session-chip--missed { background: #fff3e0; color: #8a4b12; border-color: #f0d2a8; }
.session-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.session-card a, .session-card__row { display: grid; gap: 0.2rem; }
.session-card__row { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.session-card--scheduled { border-left: 3px solid #3b7ddd; }
.session-card--completed { border-left: 3px solid #1f6b4f; }
.session-card--cancelled { border-left: 3px solid #8a9690; }
.filter-bar { margin-bottom: 1rem; }
.link-quiet { opacity: 0.55; margin-left: 0.35rem; }
.mobile-only { display: none; }
.desktop-only { display: block; }
@media (max-width: 900px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: grid !important; gap: 0.75rem; }
}

/* M7 Finance */
.amount { font-variant-numeric: tabular-nums; }
.amount--in { color: #124434; }
.amount--out { color: #9b2c2c; }
.page-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-end; margin-bottom: 1rem; }
.filters-row { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: flex-end; }
.inline-form { display: inline; }
.trend-bars { display: flex; gap: 0.75rem; align-items: flex-end; min-height: 90px; margin-top: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.trend-bars__col { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.trend-bars__in { width: 12px; background: #2f8f6a; border-radius: 4px 4px 0 0; }
.trend-bars__out { width: 12px; background: #c45c5c; border-radius: 4px 4px 0 0; }
/* M8 Tasks & Notifications */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem;
  margin-left: 0.35rem; border-radius: 999px;
  background: #c45c5c; color: #fff; font-size: 0.7rem; font-weight: 600;
}
.notif-bell { position: relative; }
.notif-bell__btn {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.35rem 0.55rem; border-radius: 8px; border: 1px solid var(--line); background: #fff;
}
.notif-bell__btn::-webkit-details-marker { display: none; }
.notif-bell__panel {
  position: absolute; right: 0; top: calc(100% + 0.4rem); width: min(360px, 90vw);
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 40, 30, 0.12); z-index: 40; overflow: hidden;
}
.notif-bell__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--line);
}
.notif-bell__list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; }
.notif-bell__list li { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--line); }
.notif-bell__list li.is-unread { background: #f4f8f6; }
.notif-bell__list a { display: grid; gap: 0.15rem; color: inherit; text-decoration: none; }
.notif-bell__list small { color: var(--ink-soft); }
tr.is-unread td { font-weight: 500; }


/* M10 � AI Assistant */
.ai-page-intro { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.ai-layout { display:grid; grid-template-columns: 240px 1fr; gap:1rem; min-height: 60vh; }
.ai-sidebar { background: rgba(255,255,255,0.72); border:1px solid var(--line); border-radius: var(--radius); padding:0.9rem; }
.ai-sidebar h3 { margin:0 0 0.6rem; font-size:0.95rem; }
.ai-conv-list { list-style:none; margin:0; padding:0; display:grid; gap:0.35rem; }
.ai-conv-list li { display:flex; align-items:center; gap:0.35rem; }
.ai-conv-list a { flex:1; text-decoration:none; color:var(--ink); padding:0.45rem 0.5rem; border-radius:8px; }
.ai-conv-list li.is-active a, .ai-conv-list a:hover { background: rgba(24,88,62,0.08); }
.ai-chat { display:flex; flex-direction:column; gap:0.75rem; background: rgba(255,255,255,0.72); border:1px solid var(--line); border-radius: var(--radius); padding:1rem; min-height: 55vh; }
.ai-messages { flex:1; overflow:auto; display:grid; gap:0.75rem; max-height: 52vh; padding-right:0.25rem; }
.ai-bubble { max-width: 92%; padding:0.75rem 0.9rem; border-radius: 14px; }
.ai-bubble--user { justify-self:end; background:#184f38; color:#edf5f0; }
.ai-bubble--assistant { justify-self:start; background:#eef5f0; color:var(--ink); border:1px solid #d5e4db; }
.ai-bubble__content { white-space:pre-wrap; }
.ai-composer { display:grid; grid-template-columns: 1fr auto; gap:0.6rem; align-items:end; }
.ai-composer textarea { width:100%; resize:vertical; min-height:3rem; border-radius:12px; border:1px solid var(--line); padding:0.7rem 0.8rem; font:inherit; }
.ai-suggestions { display:flex; flex-wrap:wrap; gap:0.45rem; }
.chip { display:inline-flex; align-items:center; border:1px solid #c9d8cf; background:#f7faf8; color:var(--ink); border-radius:999px; padding:0.35rem 0.75rem; font-size:0.85rem; text-decoration:none; cursor:pointer; }
.chip--soft { background:#e7f1eb; border-color:transparent; }
.ai-widget { margin-bottom:1rem; }
.ai-widget__head { display:flex; justify-content:space-between; align-items:center; gap:0.75rem; }
.ai-disclaimer { font-size:0.8rem; margin:0; }
.banner--muted { background:#f3f6f4; border:1px solid #d5e0d9; border-radius:12px; padding:0.75rem 1rem; margin-bottom:1rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
@media (max-width: 900px) {
  .ai-layout { grid-template-columns: 1fr; }
  .ai-messages { max-height: 40vh; }
}