:root {
        --blue: #0b6bcb;
        --blue2: #0757a6;
        --blue-soft: #eaf4ff;
        --green: #16845b;
        --green-soft: #e9f8f1;
        --yellow: #f4b41a;
        --red: #c93c3c;
        --red-soft: #fff0f0;
        --ink: #172235;
        --muted: #667085;
        --line: #dce4ec;
        --bg: #f4f7fa;
        --card: #fff;
        --sidebar: 248px;
        --top: 62px;
        --radius: 10px;
        --shadow: 0 2px 10px rgba(23, 34, 53, 0.07);
        --space: 10px;
        --footer-height: 23px;
      }
      * {
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        font:
          14px/1.45 system-ui,
          -apple-system,
          "Segoe UI",
          Roboto,
          Arial,
          sans-serif;
        color: var(--ink);
        background: var(--bg);
        overflow: hidden;
      }
      button,
      input,
      select,
      textarea {
        font: inherit;
        color: inherit;
      }
      button {
        cursor: pointer;
      }
      .hidden {
        display: none !important;
      }
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      .app {
        display: grid;
        grid-template-columns: var(--sidebar) 1fr;
        grid-template-rows: var(--top) 1fr;
        height: 100%;
      }
      .sidebar {
        grid-row: 1/3;
        background: #0a3764;
        color: #fff;
        display: flex;
        flex-direction: column;
        min-width: 0;
        z-index: 20;
      }
      .brand {
        height: var(--top);
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      }
      .brand-mark {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 9px;
        background: #fff;
        color: var(--blue);
        font-weight: 900;
        overflow: hidden;
        flex: 0 0 34px;
      }
      .brand-mark img,
      .brand-logo-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .brand-logo-editor {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .brand-logo-preview {
        display: grid;
        place-items: center;
        width: 72px;
        height: 72px;
        flex: 0 0 72px;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        color: var(--blue);
        font-size: 28px;
        font-weight: 900;
      }
      .brand-text {
        min-width: 0;
      }
      .brand-text strong {
        display: block;
        font-size: 13px;
        line-height: 1.2;
      }
      .brand-text span {
        font-size: 10.5px;
        color: #cfe4f7;
      }
      .nav {
        overflow: auto;
        padding: 8px 7px 16px;
        scrollbar-width: thin;
      }
      .nav button {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        border: 0;
        background: transparent;
        color: #dceaf7;
        padding: 8px 10px;
        border-radius: 7px;
        text-align: left;
        margin: 1px 0;
        min-height: 37px;
      }
      .nav button:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
      }
      .nav button.active {
        background: #fff;
        color: #0a4f91;
        font-weight: 700;
      }
      .nav .ico {
        width: 20px;
        text-align: center;
        font-size: 15px;
      }
      .nav .nav-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .sidebar-foot {
        margin-top: auto;
        padding: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        font-size: 11px;
        color: #cfe4f7;
      }
      .sidebar.collapsed {
        width: 64px;
      }
      body.sidebar-collapsed .app {
        grid-template-columns: 64px 1fr;
      }
      .sidebar.collapsed .brand-text,
      .sidebar.collapsed .nav-label,
      .sidebar.collapsed .sidebar-foot {
        display: none;
      }
      .sidebar.collapsed .nav button {
        justify-content: center;
      }
      .sidebar.collapsed .brand {
        justify-content: center;
      }
      .topbar {
        grid-column: 2;
        height: var(--top);
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        background: #fff;
        border-bottom: 1px solid var(--line);
        z-index: 10;
        min-width: 0;
      }
      .icon-btn,
      .btn {
        border: 1px solid var(--line);
        background: #fff;
        border-radius: 8px;
        min-height: 36px;
        padding: 7px 11px;
        font-weight: 650;
      }
      .icon-btn {
        width: 38px;
        padding: 0;
        display: grid;
        place-items: center;
      }
      .btn:hover,
      .icon-btn:hover {
        border-color: #a8bacb;
        background: #f8fafc;
      }
      .btn.primary {
        background: var(--blue);
        color: #fff;
        border-color: var(--blue);
      }
      .btn.primary:hover {
        background: var(--blue2);
      }
      .btn.success {
        background: var(--green);
        color: #fff;
        border-color: var(--green);
      }
      .btn.danger {
        color: var(--red);
        border-color: #efb1b1;
      }
      .btn:disabled,
      button:disabled {
        cursor: not-allowed;
        opacity: 0.58;
      }
      .btn.small {
        min-height: 30px;
        padding: 4px 8px;
        font-size: 12px;
      }
      .context-select {
        height: 36px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        padding: 0 26px 0 8px;
        max-width: 145px;
      }
      #schoolSelect {
        flex-basis: 420px;
        width: 420px;
        min-width: 320px;
        max-width: min(420px, 40vw);
      }
      .mobile-context-btn {
        display: none;
      }
      .searchbox {
        position: relative;
        min-width: 150px;
        flex: 1;
        max-width: 320px;
      }
      .searchbox input {
        width: 100%;
        height: 36px;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 0 34px 0 10px;
      }
      .status-line {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 7px;
        white-space: nowrap;
        font-size: 12px;
        color: var(--muted);
      }
      .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--green);
      }
      .dot.off {
        background: var(--red);
      }
      .save-state {
        padding: 5px 8px;
        border-radius: 14px;
        background: var(--green-soft);
        color: #126c4b;
      }
      .content {
        grid-column: 2;
        overflow: auto;
        padding: 12px;
        display: flex;
        flex-direction: column;
      }
      .page {
        display: none;
        width: 100%;
        max-width: none;
        margin: 0;
      }
      .page.active {
        display: block;
      }
      .page-head {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
      }
      .page-head h1 {
        font-size: 21px;
        line-height: 1.25;
        margin: 0 0 3px;
      }
      .page-head p {
        margin: 0;
        color: var(--muted);
        font-size: 12.5px;
      }
      .page-actions {
        margin-left: auto;
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
      }
      .toolbar {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
        background: #fff;
        border: 1px solid var(--line);
        padding: 8px;
        border-radius: var(--radius);
        margin-bottom: 10px;
      }
      .toolbar input,
      .toolbar select {
        height: 34px;
        border: 1px solid var(--line);
        border-radius: 7px;
        padding: 0 9px;
        background: #fff;
      }
      .toolbar .grow {
        flex: 1;
        min-width: 170px;
      }
      .kpi-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(130px, 1fr));
        gap: 9px;
        margin-bottom: 10px;
      }
      .kpi {
        background: #fff;
        border: 1px solid var(--line);
        border-left: 4px solid var(--blue);
        border-radius: 9px;
        padding: 10px;
        text-align: left;
        min-height: 76px;
        box-shadow: var(--shadow);
      }
      .kpi:hover {
        transform: translateY(-1px);
      }
      .kpi.warning {
        border-left-color: var(--yellow);
      }
      .kpi.danger {
        border-left-color: var(--red);
      }
      .kpi.success {
        border-left-color: var(--green);
      }
      .kpi .num {
        display: block;
        font-size: 24px;
        font-weight: 800;
        line-height: 1.15;
      }
      .kpi .label {
        font-size: 12px;
        color: var(--muted);
      }
      .grid-2 {
        display: grid;
        grid-template-columns: 1.35fr 1fr;
        gap: 10px;
      }
      .grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }
      .card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        min-width: 0;
      }
      .card-head {
        min-height: 42px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        border-bottom: 1px solid var(--line);
      }
      .card-head h2 {
        font-size: 14px;
        margin: 0;
      }
      .card-head .meta {
        margin-left: auto;
        color: var(--muted);
        font-size: 11px;
      }
      .card-body {
        padding: 11px;
      }
      .compact-list {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .compact-list li {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 0;
        border-bottom: 1px solid #edf1f5;
      }
      .compact-list li:last-child {
        border-bottom: 0;
      }
      .compact-list .main {
        min-width: 0;
        flex: 1;
      }
      .compact-list strong {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .compact-list small {
        color: var(--muted);
      }
      .progress {
        height: 7px;
        background: #e9eef3;
        border-radius: 9px;
        overflow: hidden;
      }
      .progress span {
        display: block;
        height: 100%;
        background: var(--green);
        border-radius: 9px;
      }
      .table-wrap {
        overflow: auto;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        max-height: calc(100vh - 185px);
      }
      table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
      }
      th,
      td {
        padding: 8px 9px;
        border-bottom: 1px solid #e9eef3;
        text-align: left;
        vertical-align: middle;
        white-space: nowrap;
      }
      th {
        position: sticky;
        top: 0;
        background: #edf4fb;
        color: #29425b;
        font-size: 12px;
        z-index: 3;
        border-bottom-color: #cddbe8;
      }
      tbody tr:hover td {
        background: #f9fbfd;
      }
      td.wrap {
        white-space: normal;
        min-width: 220px;
      }
      .empty {
        padding: 34px;
        text-align: center;
        color: var(--muted);
      }
      .badge {
        display: inline-flex;
        align-items: center;
        min-height: 23px;
        padding: 2px 7px;
        border-radius: 12px;
        background: #eef2f6;
        color: #44566a;
        font-size: 11px;
        font-weight: 700;
      }
      .badge.green {
        background: var(--green-soft);
        color: #126c4b;
      }
      .badge.red {
        background: var(--red-soft);
        color: #a52f2f;
      }
      .badge.yellow {
        background: #fff7df;
        color: #8a6200;
      }
      .badge.blue {
        background: var(--blue-soft);
        color: #0757a6;
      }
      .row-actions {
        display: flex;
        gap: 5px;
      }
      .link-btn {
        border: 0;
        background: none;
        color: var(--blue);
        padding: 3px;
        font-weight: 650;
      }
      .link-btn.red {
        color: var(--red);
      }
      .tabs {
        display: flex;
        gap: 3px;
        border-bottom: 1px solid var(--line);
        margin-bottom: 10px;
      }
      .tabs button {
        border: 0;
        background: transparent;
        padding: 9px 12px;
        color: var(--muted);
        border-bottom: 2px solid transparent;
      }
      .tabs button.active {
        color: var(--blue);
        font-weight: 750;
        border-bottom-color: var(--blue);
      }
      .score-day-picker {
        display: grid;
        grid-template-columns: repeat(5, minmax(110px, 1fr));
        gap: 6px;
        margin-bottom: 10px;
        overflow-x: auto;
      }
      .score-day-picker button {
        min-width: 110px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        color: var(--text);
        padding: 8px 10px;
        text-align: left;
      }
      .score-day-picker button span {
        display: block;
        margin-top: 2px;
        color: var(--muted);
        font-size: 11px;
      }
      .score-day-picker button.active {
        border-color: var(--blue);
        background: var(--blue-soft);
        color: var(--blue);
      }
      .score-wrap {
        overflow: auto;
        max-height: calc(100vh - 250px);
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
      }
      .score-table th:first-child,
      .score-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 4;
        background: #f5f9fd;
      }
      .score-table th:first-child {
        z-index: 6;
      }
      .score-table input {
        width: 72px;
        height: 31px;
        border: 1px solid #cbd8e5;
        border-radius: 5px;
        text-align: center;
      }
      .score-table input:focus {
        outline: 2px solid #72b5f3;
        border-color: var(--blue);
      }
      .score-table input.missing {
        background: #fff5d8;
      }
      .score-table input:disabled {
        background: #eef1f4;
        color: #6f7b87;
      }
      .score-total {
        font-weight: 800;
        color: var(--blue);
      }
      .kanban {
        display: grid;
        grid-template-columns: repeat(4, minmax(220px, 1fr));
        gap: 10px;
        overflow: auto;
      }
      .kanban-col {
        background: #edf2f7;
        border-radius: 9px;
        padding: 8px;
        min-height: 240px;
      }
      .kanban-col h3 {
        font-size: 12px;
        text-transform: uppercase;
        color: #526477;
        margin: 2px 2px 8px;
      }
      .task-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 9px;
        margin-bottom: 7px;
      }
      .task-card strong {
        display: block;
        margin-bottom: 5px;
      }
      .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        border-left: 1px solid var(--line);
        border-top: 1px solid var(--line);
        background: #fff;
      }
      .calendar-grid > div {
        min-height: 94px;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        padding: 5px;
      }
      .calendar-grid .dow {
        min-height: auto;
        background: #edf4fb;
        text-align: center;
        font-weight: 700;
      }
      .calendar-grid .other {
        background: #f7f8fa;
        color: #9aa4af;
      }
      .calendar-event {
        font-size: 11px;
        background: var(--blue-soft);
        color: #0757a6;
        border-left: 3px solid var(--blue);
        padding: 3px 4px;
        margin-top: 3px;
        border-radius: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .assistant-layout {
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: 10px;
      }
      .quick-prompts button {
        display: block;
        width: 100%;
        text-align: left;
        border: 1px solid var(--line);
        background: #fff;
        padding: 8px;
        border-radius: 7px;
        margin-bottom: 6px;
      }
      .assistant-answer {
        min-height: 330px;
      }
      .answer-block {
        background: #f7fafc;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 8px;
      }
      .answer-block h3 {
        font-size: 14px;
        margin: 0 0 6px;
      }
      .answer-block p {
        margin: 5px 0;
      }
      .source-link {
        font-size: 11px;
        color: var(--blue);
      }
      .modal-layer {
        position: fixed;
        inset: 0;
        background: rgba(9, 22, 36, 0.55);
        display: none;
        place-items: center;
        padding: 20px;
        z-index: 100;
      }
      .modal-layer.open {
        display: grid;
      }
      .modal {
        width: min(720px, 100%);
        max-height: calc(100vh - 32px);
        overflow: auto;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
      }
      .modal.wide {
        width: min(1050px, 100%);
      }
      .modal-head,
      .modal-foot {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 15px;
        border-bottom: 1px solid var(--line);
      }
      .modal-head h2 {
        font-size: 17px;
        margin: 0;
      }
      .modal-head button {
        margin-left: auto;
      }
      .modal-body {
        padding: 14px;
      }
      .modal-foot {
        border-top: 1px solid var(--line);
        border-bottom: 0;
        justify-content: flex-end;
        position: sticky;
        bottom: 0;
        background: #fff;
      }
      .form-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 11px;
      }
      .field {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .field.full {
        grid-column: 1/-1;
      }
      .field label {
        font-size: 12px;
        font-weight: 700;
        color: #3d5268;
      }
      .field input,
      .field select,
      .field textarea {
        width: 100%;
        border: 1px solid #cbd7e3;
        border-radius: 7px;
        padding: 8px;
        background: #fff;
      }
      .field textarea {
        min-height: 78px;
        resize: vertical;
      }
      .field .hint {
        font-size: 11px;
        color: var(--muted);
      }
      .required::after {
        content: " *";
        color: var(--red);
      }
      .check-row {
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .check-row input {
        width: auto;
      }
      .error {
        color: var(--red);
        font-size: 12px;
        margin-top: 4px;
      }
      .wizard-steps {
        display: flex;
        gap: 4px;
        margin-bottom: 14px;
      }
      .wizard-steps span {
        height: 5px;
        flex: 1;
        background: #dce5ed;
        border-radius: 4px;
      }
      .wizard-steps span.done,
      .wizard-steps span.active {
        background: var(--blue);
      }
      .toast-zone {
        position: fixed;
        right: 16px;
        bottom: 16px;
        display: flex;
        flex-direction: column;
        gap: 7px;
        z-index: 200;
      }
      .toast {
        min-width: 260px;
        max-width: 390px;
        background: #172235;
        color: #fff;
        border-radius: 8px;
        padding: 10px 12px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
      }
      .toast.ok {
        background: #146b4c;
      }
      .toast.bad {
        background: #a93232;
      }
      .notice {
        padding: 9px 11px;
        border-radius: 8px;
        background: #eef6ff;
        border: 1px solid #cfe2f5;
        color: #244f76;
        margin-bottom: 10px;
      }
      .notice.warn {
        background: #fff8e6;
        border-color: #f4dfa1;
        color: #715500;
      }
      .notice.danger {
        background: #fff0f0;
        border-color: #f1c2c2;
        color: #8f2f2f;
      }
      .split {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }
      .mt {
        margin-top: 10px;
      }
      .muted {
        color: var(--muted);
      }
      .right {
        text-align: right;
      }
      .center {
        text-align: center;
      }
      .nowrap {
        white-space: nowrap;
      }
      .activation-screen {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: grid;
        place-items: center;
        padding: 18px;
        background: linear-gradient(
          145deg,
          #eaf4ff 0%,
          #f8fbff 48%,
          #eaf8f2 100%
        );
      }
      .activation-card {
        width: min(460px, 100%);
        background: #fff;
        border: 1px solid #cfe0ef;
        border-radius: 18px;
        padding: 26px;
        box-shadow: 0 24px 70px rgba(10, 55, 100, 0.18);
      }
      .activation-logo {
        width: 58px;
        height: 58px;
        margin: 0 auto 14px;
        display: block;
        object-fit: contain;
        border: 0;
        border-radius: 0;
        background: #fff;
        box-shadow: none;
      }
      .activation-card h1 {
        font-size: 21px;
        text-align: center;
        margin: 0 0 7px;
        color: #0a3764;
      }
      .activation-card > p {
        text-align: center;
        color: var(--muted);
        margin: 0 0 18px;
      }
      .activation-card form {
        display: grid;
        gap: 11px;
      }
      .password-wrap {
        display: grid;
        grid-template-columns: 1fr 42px;
      }
      .password-wrap input {
        border-radius: 8px 0 0 8px;
      }
      .password-wrap button {
        border: 1px solid #cbd7e3;
        border-left: 0;
        background: #f7fafc;
        border-radius: 0 8px 8px 0;
      }
      .activation-status {
        min-height: 22px;
        margin: 10px 0;
        font-size: 12px;
        color: var(--muted);
      }
      .activation-support {
        text-align: center;
        font-size: 11px;
        color: #60788f;
        margin-top: 15px;
      }
      .activation-support a {
        color: inherit;
      }
      .session-chip {
        padding: 5px 8px;
        border-radius: 14px;
        background: #eaf4ff;
        color: #0757a6;
        font-weight: 700;
        font-size: 11px;
      }
      .app-footer {
        margin-top: auto;
        min-height: var(--footer-height);
        padding: 6px 8px 2px;
        text-align: center;
        color: #60788f;
        font-size: 11px;
        line-height: 1.3;
      }
      .conflict-diff .head {
        background: #edf4fb;
        font-weight: 750;
      }
      .readonly-banner,
      .update-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 10px;
        margin-bottom: 10px;
        border: 1px solid #f0d27b;
        border-radius: 8px;
        background: #fff8e6;
        color: #715500;
      }
      .update-banner {
        border-color: #b9d7f2;
        background: #eef6ff;
        color: #244f76;
      }
      .task-progress {
        display: grid;
        gap: 5px;
        margin-top: 10px;
      }
      .settings-shell {
        display: grid;
        grid-template-columns: 235px minmax(0, 1fr);
        gap: 10px;
      }
      .settings-menu {
        align-self: start;
        position: sticky;
        top: 0;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 6px;
        max-height: calc(100vh - 155px);
        overflow: auto;
      }
      .settings-menu button {
        display: block;
        width: 100%;
        border: 0;
        background: transparent;
        text-align: left;
        padding: 8px 9px;
        border-radius: 7px;
        font-size: 12px;
      }
      .settings-menu button.active {
        background: var(--blue-soft);
        color: var(--blue2);
        font-weight: 750;
      }
      .settings-panel {
        min-width: 0;
      }
      .document-layout {
        display: grid;
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 10px;
      }
      .folder-pane {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 9px;
        min-height: 420px;
      }
      .folder-row {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 7px;
        border-radius: 6px;
      }
      .folder-row.active {
        background: var(--blue-soft);
        color: var(--blue2);
        font-weight: 700;
      }
      .drop-zone {
        border: 2px dashed #a9c7e2;
        border-radius: 10px;
        padding: 18px;
        text-align: center;
        background: #f8fbfe;
        color: #526b82;
      }
      .drop-zone.drag {
        border-color: var(--blue);
        background: var(--blue-soft);
      }
      .file-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 9px;
      }
      .file-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 9px;
        padding: 10px;
        min-width: 0;
      }
      .file-card .file-name {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 5px 0;
      }
      .file-icon {
        font-size: 25px;
      }
      .storage-meter {
        height: 9px;
        background: #e9eef3;
        border-radius: 10px;
        overflow: hidden;
      }
      .storage-meter span {
        display: block;
        height: 100%;
        background: var(--blue);
      }
      .search-suggest {
        position: absolute;
        inset: 39px 0 auto;
        z-index: 40;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 8px;
        box-shadow: 0 12px 30px rgba(23, 34, 53, 0.15);
        max-height: 360px;
        overflow: auto;
      }
      .search-suggest button {
        display: block;
        width: 100%;
        border: 0;
        border-bottom: 1px solid #edf1f5;
        background: #fff;
        text-align: left;
        padding: 8px 10px;
      }
      .search-suggest button.active,
      .search-suggest button:hover {
        background: var(--blue-soft);
      }
      body[data-paper="portrait"] {
        --paper-size: A4 portrait;
      }
      body[data-paper="landscape"] {
        --paper-size: A4 landscape;
      }
      :focus-visible {
        outline: 3px solid rgba(11, 107, 203, 0.35);
        outline-offset: 2px;
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          scroll-behavior: auto !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
      }

      /* Gia cố hiển thị: chỉ điều chỉnh bố cục, không thay đổi nội dung/logic. */
      html,
      body,
      .app,
      .topbar,
      .content,
      .page,
      .card,
      .card-head,
      .card-body,
      .toolbar,
      .page-head,
      .page-actions,
      .modal,
      .modal-body {
        min-width: 0;
      }
      .app {
        min-height: 0;
        height: 100dvh;
      }
      .content {
        min-height: 0;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
      }
      .topbar > * {
        flex-shrink: 0;
      }
      .topbar .searchbox {
        flex-shrink: 1;
      }
      #quickAdd {
        white-space: nowrap;
      }
      .status-line {
        min-width: 0;
        flex-shrink: 1;
      }
      .status-line .dot,
      .status-line #networkText {
        flex-shrink: 0;
      }
      .page-head > div:first-child {
        flex: 1 1 240px;
        min-width: 0;
      }
      .page-head h1,
      .card-head h2,
      .notice,
      .readonly-banner,
      .update-banner,
      .modal-head h2,
      .modal-body,
      .kpi .label {
        overflow-wrap: anywhere;
      }
      .card-head {
        flex-wrap: wrap;
      }
      .card-head h2 {
        min-width: 0;
      }
      .card-head .meta {
        min-width: 0;
        text-align: right;
        white-space: normal;
      }
      .card-body,
      .task-card,
      .kpi,
      .answer-block,
      .file-card,
      .folder-pane,
      .settings-panel,
      .assistant-answer {
        min-width: 0;
        overflow-wrap: anywhere;
      }
      .toolbar > * {
        max-width: 100%;
      }
      .toolbar input,
      .toolbar select,
      .toolbar textarea {
        min-width: 0;
      }
      .tabs {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
      }
      .tabs button {
        flex: 0 0 auto;
        white-space: nowrap;
      }
      .split,
      .split > * {
        min-width: 0;
      }
      .readonly-banner,
      .update-banner {
        flex-wrap: wrap;
      }
      .readonly-banner > :first-child,
      .update-banner > :first-child {
        flex: 1 1 240px;
        min-width: 0;
      }
      .table-wrap,
      .score-wrap,
      .kanban,
      .settings-menu,
      .nav,
      .page-actions,
      .calendar-grid,
      .modal-body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }
      .modal {
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - 32px);
        overflow: hidden;
      }
      .modal-head,
      .modal-foot {
        flex: 0 0 auto;
      }
      .modal-head h2 {
        min-width: 0;
      }
      .modal-body {
        min-height: 0;
        overflow: auto;
      }
      .modal-foot {
        flex-wrap: wrap;
      }
      .modal-body img,
      .card-body img {
        max-width: 100%;
        height: auto;
      }
      pre {
        max-width: 100%;
        overflow: auto;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }
      .activation-screen {
        min-height: 100dvh;
        overflow: auto;
      }
      .activation-card {
        margin: auto;
      }

      @media (max-width: 1700px) {
        .status-line .session-chip {
          display: none;
        }
      }
      @media (max-width: 1550px) {
        .status-line .save-state {
          display: none;
        }
        .context-select {
          max-width: 132px;
        }
        .searchbox {
          min-width: 120px;
        }
      }
      @media (max-width: 1420px) {
        .mobile-context-btn {
          display: grid;
        }
        .context-select:nth-of-type(2) {
          display: none;
        }
      }
      @media (max-width: 1180px) {
        .kpi-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (max-width: 1100px) {
        #weekSelect,
        #campusSelect {
          display: none;
        }
      }
      @media (max-width: 850px) {
        :root {
          --sidebar: 64px;
        }
        .brand-text,
        .nav-label,
        .sidebar-foot {
          display: none;
        }
        .nav button {
          justify-content: center;
        }
        .grid-2,
        .grid-3,
        .assistant-layout {
          grid-template-columns: 1fr;
        }
        .topbar {
          padding: 8px;
        }
        .context-select {
          display: none;
        }
        #yearSelect {
          display: block;
          max-width: 130px;
        }
        .mobile-context-btn {
          display: grid;
        }
        .searchbox {
          max-width: none;
        }
        .status-line {
          display: none;
        }
        .kpi-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .form-grid {
          grid-template-columns: 1fr;
        }
        .field.full {
          grid-column: auto;
        }
        .content {
          padding: 10px;
        }
        .page-head {
          flex-wrap: wrap;
        }
        .page-actions {
          margin-left: 0;
        }
        .table-wrap,
        .score-wrap {
          max-width: 100%;
        }
        .kanban {
          grid-template-columns: repeat(4, 260px);
        }
        .settings-shell,
        .document-layout {
          grid-template-columns: 1fr;
        }
        .settings-menu {
          position: static;
          display: flex;
          overflow: auto;
          max-height: none;
        }
        .settings-menu button {
          min-width: 180px;
        }
        .folder-pane {
          min-height: auto;
        }
        .settings-menu,
        .page-actions,
        .kanban {
          scrollbar-width: thin;
        }
      }
      @media (max-width: 520px) {
        :root {
          --top: 58px;
        }
        .app {
          grid-template-columns: 1fr;
          grid-template-rows: var(--top) minmax(0, 1fr)
            calc(70px + env(safe-area-inset-bottom));
        }
        .sidebar {
          grid-row: 3;
          grid-column: 1;
          width: 100%;
          height: calc(70px + env(safe-area-inset-bottom));
          padding-bottom: env(safe-area-inset-bottom);
        }
        .brand,
        .sidebar-foot {
          display: none;
        }
        .nav {
          display: flex;
          padding: 4px 3px;
          overflow-x: auto;
          scroll-snap-type: x proximity;
        }
        .nav button {
          min-width: 112px;
          width: 112px;
          height: 62px;
          flex-direction: column;
          justify-content: center;
          gap: 3px;
          padding: 3px 4px;
          scroll-snap-align: start;
        }
        .nav .ico {
          line-height: 1;
        }
        .nav .nav-label {
          display: block;
          width: 100%;
          font-size: 9.5px;
          line-height: 1.1;
          text-align: center;
          white-space: normal;
          overflow: visible;
          text-overflow: clip;
          overflow-wrap: anywhere;
        }
        .topbar,
        .content {
          grid-column: 1;
        }
        .topbar {
          grid-row: 1;
        }
        .content {
          grid-row: 2;
        }
        .topbar > .icon-btn {
          display: none;
        }
        .topbar > #mobileContext {
          display: grid;
          min-width: 42px;
          width: 42px;
        }
        .topbar {
          gap: 6px;
          padding:
            7px max(7px, env(safe-area-inset-right)) 7px
            max(7px, env(safe-area-inset-left));
        }
        .searchbox {
          min-width: 0;
        }
        #yearSelect {
          width: 105px;
          min-width: 92px;
          max-width: 105px;
          padding-left: 5px;
          padding-right: 18px;
          font-size: 12px;
        }
        .searchbox input,
        .form-grid input,
        .form-grid select,
        .form-grid textarea,
        .modal input,
        .modal select,
        .modal textarea {
          font-size: 16px;
        }
        #quickAdd {
          width: 46px;
          min-width: 46px;
          padding: 0;
          font-size: 0;
        }
        #quickAdd::first-letter {
          font-size: 22px;
        }
        .kpi-grid {
          grid-template-columns: 1fr 1fr;
        }
        .kpi {
          padding: 9px;
        }
        .kpi .num {
          font-size: 20px;
        }
        .page-head {
          align-items: center;
        }
        .page-head p {
          display: none;
        }
        .page-head {
          flex-wrap: wrap;
        }
        .page-actions {
          width: 100%;
          margin-left: 0;
          overflow-x: auto;
          flex-wrap: nowrap;
          padding-bottom: 2px;
        }
        .page-actions .btn {
          flex: 0 0 auto;
        }
        .calendar-grid > div {
          min-height: 70px;
        }
        .calendar-grid {
          grid-template-columns: repeat(7, minmax(88px, 1fr));
          max-width: 100%;
          overflow-x: auto;
          scrollbar-width: thin;
        }
        .calendar-grid .dow {
          position: sticky;
          top: 0;
          z-index: 2;
        }
        .calendar-event,
        .file-card .file-name {
          white-space: normal;
          overflow: visible;
          text-overflow: clip;
          overflow-wrap: anywhere;
        }
        .toolbar .grow {
          flex-basis: 100%;
          width: 100%;
          min-width: 0;
        }
        .toolbar .check-row {
          align-items: flex-start;
          white-space: normal;
        }
        .compact-list li {
          align-items: flex-start;
        }
        .compact-list strong {
          white-space: normal;
          overflow: visible;
          text-overflow: clip;
          overflow-wrap: anywhere;
        }
        .split {
          flex-wrap: wrap;
        }
        .assistant-answer .split > input {
          flex: 1 1 190px !important;
        }
        .table-wrap,
        .score-wrap {
          max-height: none;
          overflow-y: visible;
        }
        .modal-layer {
          padding:
            max(5px, env(safe-area-inset-top))
            max(5px, env(safe-area-inset-right))
            max(5px, env(safe-area-inset-bottom))
            max(5px, env(safe-area-inset-left));
        }
        .modal-head {
          position: relative;
          background: #fff;
          z-index: 2;
        }
        .modal {
          width: 100%;
          max-height: calc(
            100dvh - max(10px, env(safe-area-inset-top)) -
              max(10px, env(safe-area-inset-bottom))
          );
          border-radius: 10px;
        }
        .modal-head,
        .modal-body,
        .modal-foot {
          padding-left: 11px;
          padding-right: 11px;
        }
        .modal-foot {
          padding-bottom: max(12px, env(safe-area-inset-bottom));
        }
        .modal-foot .btn {
          flex: 1 1 130px;
          min-width: 0;
        }
        .toast-zone {
          left: max(8px, env(safe-area-inset-left));
          right: max(8px, env(safe-area-inset-right));
          bottom: calc(78px + env(safe-area-inset-bottom));
        }
        .toast {
          width: 100%;
          min-width: 0;
          max-width: none;
          overflow-wrap: anywhere;
        }
        .btn,
        .icon-btn,
        .link-btn,
        .settings-menu button {
          min-height: 44px;
        }
      }
      @media (max-width: 370px) {
        #yearSelect {
          display: none;
        }
        .content {
          padding: 8px;
        }
        .card-head,
        .card-body {
          padding-left: 9px;
          padding-right: 9px;
        }
        .page-head h1 {
          font-size: 19px;
        }
      }
      @media print {
        body {
          overflow: visible;
          background: #fff;
        }
        .sidebar,
        .topbar,
        .page-head,
        .toolbar,
        .tabs,
        .no-print,
        .toast-zone {
          display: none !important;
        }
        .app {
          display: block;
        }
        .content {
          overflow: visible;
          padding: 0;
        }
        .page {
          display: none !important;
        }
        .page.active {
          display: block !important;
        }
        .card,
        .table-wrap {
          box-shadow: none;
          border: 0;
          max-height: none;
          overflow: visible;
        }
        table {
          font-size: 10pt;
        }
        th {
          position: static;
          background: #eee !important;
          color: #000;
        }
        .app-footer {
          display: none !important;
        }
        @page {
          size: var(--paper-size, A4 landscape);
          margin: 12mm;
        }
      }