:root {
      --bg: #f5f7fa;
      --panel: #ffffff;
      --panel-soft: #f9fafc;
      --ink: #172033;
      --muted: #667085;
      --line: #d8dee8;
      --line-strong: #b9c2d0;
      --blue: #2563eb;
      --blue-soft: #eaf1ff;
      --green: #12805c;
      --green-soft: #e8f7f0;
      --amber: #b7791f;
      --amber-soft: #fff4da;
      --red: #c2413b;
      --red-soft: #fdecec;
      --violet: #6d43c1;
      --violet-soft: #f0eafd;
      --teal: #047481;
      --shadow: 0 14px 40px rgba(23, 32, 51, .10);
      --radius: 8px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      background: var(--bg);
      color: var(--ink);
      font-family: Inter, Segoe UI, Arial, sans-serif;
      letter-spacing: 0;
    }

    button, input, select, textarea {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    .hidden {
      display: none !important;
    }

    .login-page {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      background: #eef3f7;
    }

    .login-panel {
      width: min(460px, 100%);
      background: var(--panel);
      padding: 44px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }

    .brand-mark {
      width: 46px;
      height: 46px;
      border-radius: 8px;
      background: linear-gradient(135deg, #2563eb 0%, #0f766e 100%);
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 800;
      margin-bottom: 22px;
    }

    h1, h2, h3, p {
      margin: 0;
    }

    .login-panel h1 {
      font-size: 30px;
      line-height: 1.1;
      margin-bottom: 10px;
    }

    .muted {
      color: var(--muted);
    }

    .login-form {
      margin-top: 28px;
      display: grid;
      gap: 14px;
    }

    label {
      font-size: 13px;
      color: #465165;
      font-weight: 650;
    }

    .field {
      display: grid;
      gap: 7px;
    }

    input, select, textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 10px 11px;
      background: #fff;
      color: var(--ink);
      outline: none;
    }

    textarea {
      min-height: 76px;
      resize: vertical;
    }

    input:focus, select:focus, textarea:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    }

    .primary-btn, .secondary-btn, .icon-btn, .ghost-btn {
      border: 1px solid transparent;
      border-radius: 7px;
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .primary-btn {
      background: var(--blue);
      color: #fff;
    }

    .secondary-btn {
      background: #fff;
      border-color: var(--line);
      color: var(--ink);
    }

    .ghost-btn {
      background: transparent;
      color: var(--muted);
    }

    .icon-btn {
      width: 38px;
      padding: 0;
      background: #fff;
      border-color: var(--line);
      color: var(--ink);
    }

    .icon {
      width: 17px;
      height: 17px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: 0 0 auto;
    }

    .login-help {
      margin-top: 22px;
      border-top: 1px solid var(--line);
      padding-top: 18px;
      display: grid;
      gap: 8px;
      font-size: 13px;
    }

    .demo-user {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 10px;
      background: var(--panel-soft);
      border: 1px solid var(--line);
      border-radius: 7px;
    }

    .login-preview {
      padding: 40px;
      display: flex;
      align-items: stretch;
    }

    .preview-board {
      width: 100%;
      display: grid;
      grid-template-rows: auto 1fr;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: var(--shadow);
      border-radius: 8px;
      overflow: hidden;
    }

    .preview-top {
      min-height: 68px;
      padding: 18px 22px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      background: #fbfcfe;
    }

    .preview-grid {
      padding: 18px;
      display: grid;
      grid-template-columns: 2fr 1.1fr;
      gap: 16px;
      min-height: 420px;
    }

    .mini-calendar {
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      display: grid;
      grid-template-rows: repeat(5, 1fr);
    }

    .mini-week {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      border-bottom: 1px solid var(--line);
    }

    .mini-week:last-child {
      border-bottom: 0;
    }

    .mini-day {
      padding: 8px;
      border-right: 1px solid var(--line);
      min-height: 70px;
      background: #fff;
    }

    .mini-day:nth-child(7n) {
      border-right: 0;
    }

    .mini-bar {
      height: 7px;
      border-radius: 7px;
      margin-top: 6px;
      background: var(--blue);
    }

    .mini-bar.green { background: var(--green); width: 78%; }
    .mini-bar.amber { background: var(--amber); width: 58%; }
    .mini-bar.violet { background: var(--violet); width: 46%; }

    .preview-side {
      display: grid;
      gap: 14px;
      align-content: start;
    }

    .metric {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      background: var(--panel-soft);
    }

    .metric strong {
      display: block;
      font-size: 24px;
      margin-top: 6px;
    }

    .app {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 250px 1fr;
    }

    .sidebar {
      background: #121a2a;
      color: #fff;
      padding: 20px 14px;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 18px;
      min-height: 100vh;
    }

    .side-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 8px;
      font-weight: 800;
    }

    .side-logo {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: #ffffff;
      color: #121a2a;
      display: grid;
      place-items: center;
      font-weight: 900;
    }

    .role-chip {
      margin: 0 8px;
      padding: 9px 10px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 8px;
      background: rgba(255,255,255,.06);
      color: #d7deea;
      font-size: 13px;
      line-height: 1.35;
    }

    .nav {
      display: grid;
      gap: 5px;
      align-content: start;
    }

    .nav button {
      width: 100%;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: #c7d0df;
      text-align: left;
      padding: 10px 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      min-height: 40px;
    }

    .nav button.active {
      background: #fff;
      color: #121a2a;
    }

    .sidebar-bottom {
      display: grid;
      gap: 10px;
      padding: 0 8px;
    }

    .main {
      min-width: 0;
      display: grid;
      grid-template-rows: 66px 1fr;
    }

    .topbar {
      background: #fff;
      border-bottom: 1px solid var(--line);
      padding: 0 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      position: sticky;
      top: 0;
      z-index: 5;
    }

    .topbar h2 {
      font-size: 20px;
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .content {
      padding: 18px 22px 28px;
      overflow: auto;
    }

    .toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .segmented {
      display: inline-grid;
      grid-auto-flow: column;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
    }

    .segmented button {
      border: 0;
      background: #fff;
      color: var(--muted);
      min-height: 36px;
      padding: 8px 13px;
      font-weight: 750;
      border-right: 1px solid var(--line);
    }

    .segmented button:last-child {
      border-right: 0;
    }

    .segmented button.active {
      background: var(--blue-soft);
      color: var(--blue);
    }

    .stats-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(150px, 1fr));
      gap: 12px;
      margin-bottom: 14px;
    }

    .stat {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 13px;
      min-height: 82px;
    }

    .stat span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .stat strong {
      display: block;
      margin-top: 8px;
      font-size: 24px;
      line-height: 1;
    }

    .calendar-shell, .table-shell, .chat-shell, .notice-shell, .split-shell {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
    }

    .calendar-head {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      border-bottom: 1px solid var(--line);
      background: #f8fafc;
    }

    .weekday {
      padding: 9px 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      border-right: 1px solid var(--line);
    }

    .weekday:last-child {
      border-right: 0;
    }

    .month-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(132px, 1fr));
      grid-auto-rows: minmax(154px, auto);
    }

    .day-cell {
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 7px;
      min-width: 0;
      background: #fff;
    }

    .day-cell:nth-child(7n) {
      border-right: 0;
    }

    .day-cell.muted-day {
      background: #f8fafc;
      color: #98a2b3;
    }

    .day-number {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 800;
      font-size: 13px;
      margin-bottom: 6px;
    }

    .today-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--blue);
    }

    .hour-line {
      display: grid;
      grid-template-columns: 38px 1fr;
      gap: 5px;
      align-items: start;
      min-height: 28px;
      padding: 4px 0;
      border-top: 1px dashed #e5e9f0;
    }

    .calendar-create-slot {
      cursor: pointer;
      transition: background-color .15s ease, box-shadow .15s ease;
    }

    .calendar-create-slot:hover {
      background: var(--blue-soft);
      box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18);
    }

    .hour-label {
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
    }

    .parallel-lessons {
      display: flex;
      gap: 4px;
      align-items: stretch;
      min-width: 0;
    }

    .lesson-chip {
      flex: 1 1 0;
      min-width: 0;
      border-radius: 6px;
      padding: 4px 5px;
      font-size: 11px;
      line-height: 1.2;
      font-weight: 750;
      border: 1px solid transparent;
      color: #1f2937;
      overflow: hidden;
    }

    .lesson-chip small {
      display: block;
      font-weight: 650;
      color: rgba(31, 41, 55, .72);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lesson-planned { background: #fff; border-color: var(--line-strong); }
    .lesson-green { background: var(--green-soft); border-color: #9ed9bf; }
    .lesson-blue { background: var(--blue-soft); border-color: #9dbcf8; }
    .lesson-red { background: var(--red-soft); border-color: #ef9b97; }
    .lesson-chip[data-lesson-source] { cursor: pointer; }
    .lesson-chip[data-lesson-source]:hover { box-shadow: 0 0 0 2px rgba(37,99,235,.14); }

    .days-view {
      display: grid;
      grid-template-columns: 70px repeat(var(--days-count), minmax(210px, 1fr));
      overflow: auto;
    }

    .time-col, .timeline-day {
      border-right: 1px solid var(--line);
    }

    .timeline-day:last-child {
      border-right: 0;
    }

    .timeline-title {
      min-height: 48px;
      padding: 10px;
      border-bottom: 1px solid var(--line);
      background: #f8fafc;
      font-weight: 800;
    }

    .time-slot {
      height: 64px;
      border-bottom: 1px solid var(--line);
      padding: 8px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 750;
    }

    .timeline-slot {
      height: 64px;
      border-bottom: 1px solid var(--line);
      padding: 6px;
      display: flex;
      gap: 6px;
    }

    .table-shell {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 840px;
      background: #fff;
    }

    th, td {
      text-align: left;
      padding: 11px 12px;
      border-bottom: 1px solid var(--line);
      vertical-align: top;
      font-size: 14px;
    }

    th {
      background: #f8fafc;
      color: #475467;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    tbody tr:hover {
      background: #fbfcfe;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .pill.blue { color: var(--blue); background: var(--blue-soft); }
    .pill.green { color: var(--green); background: var(--green-soft); }
    .pill.amber { color: var(--amber); background: var(--amber-soft); }
    .pill.red { color: var(--red); background: var(--red-soft); }
    .pill.violet { color: var(--violet); background: var(--violet-soft); }
    .pill.gray { color: #475467; background: #eef2f6; }
    .pill.teal { color: var(--teal); background: #e6f7f8; }

    .chat-shell {
      height: calc(100vh - 162px);
      min-height: 560px;
      display: grid;
      grid-template-columns: 340px 1fr 300px;
    }

    .chat-list {
      border-right: 1px solid var(--line);
      overflow: auto;
    }

    .chat-search {
      padding: 12px;
      border-bottom: 1px solid var(--line);
      display: grid;
      gap: 9px;
    }

    .chat-item {
      width: 100%;
      border: 0;
      background: #fff;
      border-bottom: 1px solid var(--line);
      padding: 12px;
      text-align: left;
      display: grid;
      gap: 7px;
    }

    .chat-item.active {
      background: var(--blue-soft);
    }

    .chat-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .channel {
      font-size: 12px;
      color: var(--muted);
      font-weight: 750;
    }

    .chat-main {
      display: grid;
      grid-template-rows: auto 1fr auto;
      min-width: 0;
    }

    .chat-header, .profile-header {
      padding: 13px 16px;
      border-bottom: 1px solid var(--line);
      background: #fbfcfe;
    }

    .messages {
      padding: 16px;
      overflow: auto;
      background: #f6f8fb;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .message {
      max-width: 74%;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      line-height: 1.35;
    }

    .message.out {
      align-self: flex-end;
      background: #eaf1ff;
      border-color: #bdd0fb;
    }

    .message-meta {
      display: block;
      margin-top: 5px;
      font-size: 11px;
      color: var(--muted);
      font-weight: 700;
    }

    .composer {
      padding: 12px;
      border-top: 1px solid var(--line);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 9px;
      background: #fff;
    }

    .profile-panel {
      border-left: 1px solid var(--line);
      overflow: auto;
      background: #fff;
    }

    .profile-body {
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .info-line {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 9px;
      font-size: 13px;
    }

    .info-line strong {
      text-align: right;
    }

    .notice-shell {
      display: grid;
      grid-template-columns: 220px 1fr;
      min-height: 520px;
    }

    .subtabs {
      border-right: 1px solid var(--line);
      background: #fbfcfe;
      padding: 10px;
      display: grid;
      align-content: start;
      gap: 6px;
    }

    .subtabs button {
      border: 0;
      background: transparent;
      border-radius: 7px;
      padding: 10px;
      text-align: left;
      font-weight: 800;
      color: var(--muted);
    }

    .subtabs button.active {
      color: var(--ink);
      background: #fff;
      box-shadow: inset 0 0 0 1px var(--line);
    }

    .notice-list {
      display: grid;
      align-content: start;
    }

    .notice-item {
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
    }

    .split-shell {
      display: grid;
      grid-template-columns: 1fr 360px;
      min-height: 540px;
    }

    .form-panel {
      border-left: 1px solid var(--line);
      padding: 16px;
      background: #fbfcfe;
      display: grid;
      align-content: start;
      gap: 12px;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .form-grid .wide {
      grid-column: 1 / -1;
    }

    .salary-summary {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 14px;
      margin-bottom: 14px;
    }

    .salary-box {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 16px;
    }

    .salary-total {
      font-size: 36px;
      line-height: 1;
      font-weight: 850;
      margin-top: 8px;
    }

    .bars {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }

    .bar-row {
      display: grid;
      grid-template-columns: 130px 1fr 74px;
      gap: 10px;
      align-items: center;
      font-size: 13px;
    }

    .bar-track {
      height: 10px;
      border-radius: 999px;
      background: #edf1f6;
      overflow: hidden;
    }

    .bar-fill {
      height: 100%;
      border-radius: 999px;
      background: var(--teal);
    }

    .empty-state {
      padding: 34px;
      text-align: center;
      color: var(--muted);
    }

    .drawer {
      position: fixed;
      right: 18px;
      bottom: 18px;
      width: min(460px, calc(100vw - 36px));
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      border-radius: 8px;
      z-index: 30;
      overflow: hidden;
    }

    .drawer-head {
      padding: 13px 15px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      border-bottom: 1px solid var(--line);
      background: #fbfcfe;
    }

    .drawer-body {
      padding: 15px;
      display: grid;
      gap: 12px;
    }



    .nav {
      overflow-y: auto;
      padding-right: 3px;
    }

    .nav::-webkit-scrollbar { width: 5px; }
    .nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 999px; }

    .nav-label {
      min-width: 0;
      flex: 1;
    }

    .nav-count, .top-badge {
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 999px;
      display: inline-grid;
      place-items: center;
      font-size: 11px;
      font-weight: 850;
      line-height: 1;
      color: #fff;
      background: var(--red);
    }

    .top-actions .icon-btn { position: relative; }

    .top-badge {
      position: absolute;
      top: -7px;
      right: -7px;
      border: 2px solid #fff;
    }

    .section-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .task-card, .compact-card, .mailing-preview, .event-card, .chart-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
    }

    .task-card {
      display: grid;
      gap: 11px;
      border-left: 5px solid var(--line-strong);
    }

    .task-card.unread {
      border-left-color: var(--blue);
      box-shadow: 0 8px 24px rgba(37, 99, 235, .09);
    }

    .task-card.priority-high { border-left-color: var(--red); }
    .task-card.priority-medium { border-left-color: var(--amber); }
    .task-card.priority-low { border-left-color: var(--green); }

    .task-card.completed {
      background: var(--green-soft);
      border-color: #b9e9d4;
      border-left-color: var(--green) !important;
      box-shadow: 0 8px 24px rgba(18, 128, 92, .10);
    }

    .card-head, .card-foot, .legend-row, .finance-legend {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .task-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      font-size: 12px;
      color: var(--muted);
    }

    .journal-cell-control {
      min-width: 105px;
      padding: 7px 8px;
    }

    .lead-row td:first-child {
      box-shadow: inset 5px 0 0 var(--lead-color, transparent);
    }

    .lead-row.lead-blue { --lead-color: #3b82f6; background: #f5f9ff; }
    .lead-row.lead-green { --lead-color: #22a06b; background: #f4fbf7; }
    .lead-row.lead-amber { --lead-color: #d99a2b; background: #fffaf0; }
    .lead-row.lead-red { --lead-color: #dc5b55; background: #fff7f7; }
    .lead-row.lead-violet { --lead-color: #8259d7; background: #faf7ff; }
    .lead-row.lead-none { --lead-color: transparent; }

    .color-select {
      min-width: 122px;
      padding: 7px 8px;
    }

    .subscription-progress {
      min-width: 120px;
    }

    .progress-track {
      height: 7px;
      margin-top: 6px;
      overflow: hidden;
      border-radius: 999px;
      background: #edf1f6;
    }

    .progress-fill {
      height: 100%;
      border-radius: inherit;
      background: var(--blue);
    }

    .mailing-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
      gap: 14px;
      align-items: start;
    }

    .mailing-preview {
      display: grid;
      gap: 12px;
      background: #f8fafc;
      position: sticky;
      top: 82px;
    }

    .message-preview {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      background: #fff;
      white-space: pre-wrap;
      line-height: 1.45;
      min-height: 130px;
    }

    .finance-chart {
      display: grid;
      grid-template-columns: repeat(12, minmax(42px, 1fr));
      gap: 8px;
      align-items: end;
      min-height: 290px;
      padding: 18px 10px 8px;
      border-top: 1px solid var(--line);
      margin-top: 14px;
    }

    .finance-month {
      min-width: 0;
      display: grid;
      gap: 7px;
      justify-items: center;
    }

    .finance-bars {
      height: 220px;
      width: 100%;
      display: flex;
      align-items: end;
      justify-content: center;
      gap: 4px;
    }

    .finance-bar {
      width: min(16px, 42%);
      min-height: 3px;
      border-radius: 4px 4px 0 0;
    }

    .finance-bar.income { background: var(--green); }
    .finance-bar.expense { background: var(--amber); }
    .finance-month small { color: var(--muted); font-weight: 750; }

    .legend-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 5px;
    }

    .legend-dot.income { background: var(--green); }
    .legend-dot.expense { background: var(--amber); }

    .event-calendar {
      display: grid;
      grid-template-columns: repeat(7, minmax(140px, 1fr));
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
      overflow-x: auto;
    }

    .event-day {
      min-height: 145px;
      padding: 9px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .event-day.outside { background: #f8fafc; color: #98a2b3; }

    .event-card {
      padding: 8px;
      margin-top: 7px;
      font-size: 12px;
      display: grid;
      gap: 4px;
      background: var(--blue-soft);
      border-color: #c8d8fb;
    }

    .event-card.masterclass { background: var(--violet-soft); border-color: #d9c9f8; }
    .event-card.excursion { background: var(--green-soft); border-color: #bee6d3; }

    .excel-note {
      font-size: 12px;
      color: var(--muted);
    }

    .inline-banner {
      border: 1px solid #bfd1fa;
      background: var(--blue-soft);
      color: #204d9c;
      border-radius: 8px;
      padding: 11px 13px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .role-fields {
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
    }

    .access-note {
      display: grid;
      gap: 4px;
      padding: 11px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      font-size: 13px;
    }

    .access-note span {
      color: var(--muted);
      line-height: 1.4;
    }


    .journal-toolbar { margin-bottom: 12px; }
    .journal-filters { align-items: end; }
    .journal-filter-field { min-width: 220px; gap: 5px; }
    .journal-filter-select { min-width: 220px; }
    .journal-meta { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 15px; background:#fff; border:1px solid var(--line); border-bottom:0; border-radius:8px 8px 0 0; }
    .journal-meta span { color:var(--muted); font-size:13px; font-weight:700; }
    .journal-shell { border-radius:0 0 8px 8px; }
    .journal-grid-table { min-width:max-content; }
    .journal-grid-table th, .journal-grid-table td { border-right:1px solid var(--line); padding:0; text-align:center; height:42px; }
    .journal-grid-table th:last-child, .journal-grid-table td:last-child { border-right:0; }
    .journal-number-col { width:48px; min-width:48px; position:sticky; left:0; z-index:2; background:#fff; }
    thead .journal-number-col { z-index:4; background:#f8fafc; }
    .journal-student-col { width:260px; min-width:260px; position:sticky; left:48px; z-index:2; background:#fff; text-align:left !important; padding:0 12px !important; }
    thead .journal-student-col { z-index:4; background:#f8fafc; }
    .journal-date-col { width:118px; min-width:118px; padding:7px 5px !important; transition:background .16s ease; }
    .journal-date-col strong, .journal-date-col span { display:block; }
    .journal-date-col span { margin-top:3px; color:var(--muted); font-size:11px; }
    .journal-lesson-status { width:100%; margin-top:6px; min-height:28px; padding:3px 5px; border-radius:6px; font-size:11px; font-weight:800; background:rgba(255,255,255,.82); }
    .journal-status-green { background:var(--green-soft) !important; }
    .journal-status-blue { background:var(--blue-soft) !important; }
    .journal-status-red { background:var(--red-soft) !important; }
    .journal-mark-cell { width:118px; min-width:118px; transition:background .16s ease; }
    .journal-mark-input { width:100%; height:41px; border:0; border-radius:0; text-align:center; padding:4px; font-weight:800; background:transparent; box-shadow:none !important; }
    .journal-mark-input:focus { background:var(--blue-soft); }

    .journal-homework-col { width:88px; min-width:88px; padding:0 !important; background:#fbf9ff; }
    .journal-homework-merged-cell { vertical-align:middle !important; }
    .journal-homework-button { width:100%; min-height:41px; border:0; border-radius:0; padding:6px; background:transparent; color:var(--violet); display:grid; place-items:center; gap:3px; font-weight:850; }
    .journal-homework-button:hover { background:var(--violet-soft); }
    .journal-homework-button span { display:block; margin:0 !important; color:var(--muted) !important; font-size:10px !important; font-weight:700; }
    .journal-homework-button.has-homework { background:var(--violet-soft); }
    .journal-homework-drawer-meta { display:grid; gap:5px; padding:11px 12px; border:1px solid var(--line); border-radius:8px; background:#fbfcfe; }
    .journal-homework-drawer-meta span { color:var(--muted); font-size:13px; }
    .journal-homework-text { min-height:150px; }
    .journal-homework-view { min-height:110px; padding:13px; border:1px solid var(--line); border-radius:8px; background:#fbfcfe; white-space:pre-wrap; line-height:1.5; }
    .journal-empty { background:#fff; border:1px solid var(--line); border-radius:8px; }
    .class-editor-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:14px; padding:15px; background:#fff; border:1px solid var(--line); border-radius:8px; }
    .class-editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .class-editor-card { min-width:0; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
    .class-cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
    .class-summary-card { border:1px solid var(--line); border-radius:8px; background:#fff; padding:16px; text-align:left; display:grid; gap:12px; min-height:150px; transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
    .class-summary-card:hover { border-color:var(--blue); box-shadow:0 10px 26px rgba(37,99,235,.12); transform:translateY(-2px); }
    .class-summary-card:focus-visible { outline:3px solid rgba(37,99,235,.18); border-color:var(--blue); }
    .class-summary-card h3 { font-size:16px; }
    .class-summary-meta { display:grid; gap:6px; color:var(--muted); font-size:13px; }
    .class-summary-foot { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-top:auto; }
    .class-edit-sections { display:grid; gap:16px; }
    .class-edit-block { border:1px solid var(--line); border-radius:8px; padding:13px; background:#fbfcfe; display:grid; gap:10px; }
    .draft-list { display:grid; gap:7px; }
    .draft-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
    .draft-lesson-row { display:grid; grid-template-columns:1.15fr .8fr 1.5fr auto; gap:7px; align-items:center; }
    .weekday-picker { display:flex; flex-wrap:wrap; gap:6px; }
    .weekday-picker label { display:flex; align-items:center; gap:5px; padding:7px 9px; border:1px solid var(--line); border-radius:7px; background:#fff; cursor:pointer; }
    .weekday-picker input { width:auto; }
    .drawer.class-editor-drawer { width:min(760px,calc(100vw - 36px)); max-height:calc(100vh - 36px); overflow:auto; }
    .section-head { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid var(--line); }


    .schedule-filters { align-items: end; }
    .schedule-filter-field { min-width: 190px; gap: 5px; }
    .schedule-filter-field input, .schedule-filter-field select { min-height: 40px; }
    .schedule-context { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; color: var(--muted); font-size: 13px; }
    .schedule-context strong { color: var(--ink); font-size: 15px; }
    .schedule-context span { padding-left: 12px; border-left: 1px solid var(--line); }

    .schedule-week-control {
      display: grid;
      grid-template-columns: 38px minmax(180px, 1fr) 38px;
      gap: 6px;
      align-items: center;
    }

    .schedule-week-arrow {
      font-size: 18px;
      line-height: 1;
    }

    .timeline-title small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    @media (max-width: 1180px) {
      .section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .mailing-layout { grid-template-columns: 1fr; }
      .mailing-preview { position: static; }
      .finance-chart { overflow-x: auto; grid-template-columns: repeat(12, 72px); }
    }

    @media (max-width: 860px) {
      .section-grid, .task-meta { grid-template-columns: 1fr; }
      .event-calendar { grid-template-columns: 1fr; }
      .event-day { min-height: auto; }
    }


    .schedule-filters { align-items: end; }
    .schedule-filter-field { min-width: 190px; gap: 5px; }
    .schedule-filter-field input, .schedule-filter-field select { min-height: 40px; }
    .schedule-context { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; color: var(--muted); font-size: 13px; }
    .schedule-context strong { color: var(--ink); font-size: 15px; }
    .schedule-context span { padding-left: 12px; border-left: 1px solid var(--line); }

    @media (max-width: 1180px) {
      .stats-row, .salary-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .chat-shell {
        grid-template-columns: 300px 1fr;
      }

      .class-editor-grid { grid-template-columns: 1fr; }

      .profile-panel {
        display: none;
      }
    }

    @media (max-width: 860px) {
      .login-page, .app {
        grid-template-columns: 1fr;
      }

      .login-preview {
        display: none;
      }

      .sidebar {
        min-height: auto;
        grid-template-rows: auto auto auto;
      }

      .nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .sidebar-bottom {
        display: none;
      }

      .main {
        grid-template-rows: auto 1fr;
      }

      .topbar {
        position: static;
        align-items: flex-start;
        padding: 14px;
        flex-direction: column;
      }

      .content {
        padding: 14px;
      }

      .month-grid {
        grid-template-columns: 1fr;
      }

      .calendar-head {
        display: none;
      }

      .day-cell {
        border-right: 0;
      }

      .chat-shell, .notice-shell, .split-shell, .salary-summary {
        grid-template-columns: 1fr;
        height: auto;
      }

      .form-panel {
        border-left: 0;
        border-top: 1px solid var(--line);
      }

      .stats-row {
        grid-template-columns: 1fr;
      }
    }


    .student-selector-list { display:grid; gap:9px; }
    .student-selector-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end; }
    .student-register-panel { margin-top:12px; padding:14px; border:1px solid var(--line); border-radius:8px; background:#fbfcfe; }
    .manual-schedule-overlay { position:fixed; inset:18px; z-index:60; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); display:grid; grid-template-rows:auto 1fr auto; overflow:hidden; }
    .manual-schedule-head { padding:13px 15px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fbfcfe; }
    .manual-schedule-body { padding:14px; overflow:auto; background:#f6f8fb; }
    .manual-week-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
    .manual-week-grid { display:grid; grid-template-columns:72px repeat(7,minmax(145px,1fr)); min-width:1090px; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
    .manual-time-head,.manual-day-head { min-height:58px; padding:9px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#f8fafc; font-weight:800; }
    .manual-time-cell { min-height:48px; padding:8px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:750; }
    .manual-slot { min-height:48px; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; padding:5px; text-align:left; font-size:11px; }
    .manual-slot:hover:not(:disabled) { background:var(--blue-soft); }
    .manual-slot.selected { background:var(--green-soft); box-shadow:inset 0 0 0 2px var(--green); }
    .manual-slot.occupied { background:#eef2f6; color:#667085; cursor:not-allowed; }
    .manual-schedule-foot { padding:12px 15px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; background:#fff; }
    .draft-lesson-row.simple { grid-template-columns:1fr 1fr auto; }

    .subject-picker {
      display: grid;
      gap: 8px;
    }

    .subject-picker select {
      min-height: 42px;
    }

    .subject-custom-wrap {
      display: grid;
      gap: 5px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--panel-soft);
    }

    .subject-custom-wrap small {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }


    .students-classes-tabs { margin-bottom: 14px; }
    .student-management-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:14px; align-items:start; }
    .management-panel { background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
    .management-panel-body { padding:14px; display:grid; gap:12px; }
    .student-group-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
    .student-group-card { border:1px solid var(--line); border-radius:8px; background:#fff; padding:14px; display:grid; gap:12px; min-height:170px; }
    .student-group-card:hover { border-color:var(--blue); box-shadow:0 8px 22px rgba(37,99,235,.09); }
    .student-chip-list { display:flex; flex-wrap:wrap; gap:7px; align-items:flex-start; }
    .student-chip { display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:5px 8px 5px 10px; border:1px solid var(--line); border-radius:999px; background:#f8fafc; font-size:12px; font-weight:750; }
    .student-chip button { width:22px; height:22px; min-height:22px; padding:0; border:0; border-radius:50%; background:#fff; color:var(--muted); display:grid; place-items:center; line-height:1; }
    .student-chip button:hover { color:var(--red); background:var(--red-soft); }
    .student-chip .icon { width:13px; height:13px; }
    .class-roster-list { display:grid; gap:8px; }
    .class-roster-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:#fff; }
    .class-roster-source { color:var(--muted); font-size:12px; font-weight:700; white-space:nowrap; }
    .class-roster-remove { width:32px; min-height:32px; padding:0; }
    .group-editor-member-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px 9px; border:1px solid var(--line); border-radius:7px; background:#fff; }
    .student-checklist { display:grid; gap:7px; max-height:320px; overflow:auto; padding:2px; }
    .student-checkbox-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:#fff; cursor:pointer; font-weight:650; }
    .student-checkbox-row:hover { border-color:var(--blue); background:var(--blue-soft); }
    .student-checkbox-row input[type="checkbox"] { width:18px; height:18px; margin:0; padding:0; accent-color:var(--blue); box-shadow:none; }
    .student-checkbox-row input[type="checkbox"]:focus { box-shadow:0 0 0 3px rgba(37,99,235,.12); }
    .student-checkbox-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .student-checkbox-meta { color:var(--muted); font-size:12px; font-weight:700; white-space:nowrap; }
    .student-table-groups { display:flex; flex-wrap:wrap; gap:5px; }
    .student-empty-note { padding:14px; border:1px dashed var(--line-strong); border-radius:8px; background:#fff; color:var(--muted); text-align:center; }

    @media (max-width: 980px) {
      .student-management-grid { grid-template-columns:1fr; }
    }