/* ============================================================
   TOOLBENCH GLOBAL CSS
   ============================================================ */

   @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");

   /* ============================================================
      ROOT VARIABLES
      ============================================================ */
   
   :root {
   
       /* ---------- Typography ---------- */
   
       --font-main:
           "DM Sans",
           -apple-system,
           BlinkMacSystemFont,
           "Segoe UI",
           sans-serif;
   
       /* ---------- Light theme ---------- */
   
       --bg:
           #f6f7fb;
   
       --surface:
           #ffffff;
   
       --surface-soft:
           #f0f2f8;
   
       --surface-hover:
           #f4f5fa;
   
       --text:
           #202430;
   
       --text-secondary:
           #687083;
   
       --text-muted:
           #9299a9;
   
       --border:
           #e4e7ef;
   
       --border-strong:
           #d6dae5;
   
       /* ---------- Brand ---------- */
   
       --brand:
           #6875f5;
   
       --brand-hover:
           #5965e8;
   
       --brand-soft:
           #eef0ff;
   
       /* ---------- Accent system ---------- */
   
       --blue:
           #5b8def;
   
       --blue-soft:
           #eaf1ff;
   
       --purple:
           #8b70e8;
   
       --purple-soft:
           #f0ebff;
   
       --green:
           #55b78d;
   
       --green-soft:
           #e8f7f0;
   
       --orange:
           #ee9656;
   
       --orange-soft:
           #fff0e5;
   
       --pink:
           #df6fa2;
   
       --pink-soft:
           #fceaf2;
   
       --yellow:
           #d8ad3c;
   
       --yellow-soft:
           #fff8dd;
   
       --red:
           #df626f;
   
       --red-soft:
           #ffedf0;
   
       /* ---------- Buttons ---------- */
   
       --button-text:
           #ffffff;
   
       /* ---------- Layout ---------- */
   
       --sidebar-width:
           252px;
   
       --content-max-width:
           1440px;
   
       --content-padding:
           36px;
   
       /* ---------- Radius ---------- */
   
       --radius-small:
           10px;
   
       --radius:
           14px;
   
       --radius-large:
           20px;
   
       /* ---------- Shadows ---------- */
   
       --shadow-small:
           0 2px 8px rgba(24, 32, 56, 0.04);
   
       --shadow:
           0 8px 28px rgba(24, 32, 56, 0.06);
   
       --shadow-large:
           0 18px 50px rgba(24, 32, 56, 0.12);
   
       /* ---------- Motion ---------- */
   
       --transition-fast:
           140ms ease;
   
       --transition:
           200ms ease;
   
       --transition-slow:
           280ms ease;
   }
   
   /* ============================================================
      DARK THEME
      ============================================================ */
   
   :root[data-theme="dark"] {
   
       --bg:
           #10131a;
   
       --surface:
           #171b24;
   
       --surface-soft:
           #1d222d;
   
       --surface-hover:
           #222832;
   
       --text:
           #f1f3f7;
   
       --text-secondary:
           #a8afbd;
   
       --text-muted:
           #777f90;
   
       --border:
           #2a303c;
   
       --border-strong:
           #353c4a;
   
       --brand:
           #8590ff;
   
       --brand-hover:
           #96a0ff;
   
       --brand-soft:
           #262b4b;
   
       --blue:
           #82aaff;
   
       --blue-soft:
           #202d49;
   
       --purple:
           #ab92ff;
   
       --purple-soft:
           #2b2547;
   
       --green:
           #73d2ab;
   
       --green-soft:
           #1d352d;
   
       --orange:
           #ffb279;
   
       --orange-soft:
           #3b2c21;
   
       --pink:
           #f391bc;
   
       --pink-soft:
           #39222f;
   
       --yellow:
           #efd579;
   
       --yellow-soft:
           #3b341f;
   
       --red:
           #f0828d;
   
       --red-soft:
           #3b2228;
   
       --button-text:
           #10131a;
   
       --shadow-small:
           0 2px 8px rgba(0, 0, 0, 0.18);
   
       --shadow:
           0 8px 28px rgba(0, 0, 0, 0.24);
   
       --shadow-large:
           0 18px 50px rgba(0, 0, 0, 0.38);
   }
   
   /* ============================================================
      RESET
      ============================================================ */
   
   *,
   *::before,
   *::after {
       box-sizing: border-box;
   }
   
   html {
       min-height: 100%;
       background:
           var(--bg);
       color:
           var(--text);
       font-family:
           var(--font-main);
       color-scheme:
           light;
   }
   
   html[data-theme="dark"] {
       color-scheme:
           dark;
   }
   
   body {
       margin: 0;
       min-height: 100vh;
       background:
           var(--bg);
       color:
           var(--text);
       font-family:
           var(--font-main);
       -webkit-font-smoothing:
           antialiased;
       text-rendering:
           optimizeLegibility;
   }
   
   body.modal-open {
       overflow: hidden;
   }
   
   img {
       display: block;
       max-width: 100%;
   }
   
   button,
   input,
   textarea,
   select {
       font:
           inherit;
   }
   
   button {
       cursor:
           pointer;
   }
   
   button:disabled {
       cursor:
           not-allowed;
       opacity:
           0.6;
   }
   
   a {
       color:
           inherit;
       text-decoration:
           none;
   }
   
   h1,
   h2,
   h3,
   h4,
   p {
       margin-top:
           0;
   }
   
   /* ============================================================
      FOCUS
      ============================================================ */
   
   :focus-visible {
       outline:
           3px solid color-mix(
               in srgb,
               var(--brand) 35%,
               transparent
           );
       outline-offset:
           2px;
   }
   
   /* ============================================================
      PAGE LOADING
      ============================================================ */
   
   html.toolbench-loading body {
       opacity:
           0;
   }
   
   html.toolbench-ready body {
       opacity:
           1;
       transition:
           opacity 180ms ease;
   }
   
   /* ============================================================
      SITE SHELL
      ============================================================ */
   
   .site-shell {
       min-height:
           100vh;
   }
   
   /* ============================================================
      SIDEBAR
      ============================================================ */
   
   .sidebar {
       position:
           fixed;
       inset:
           0 auto 0 0;
       z-index:
           100;
       width:
           var(--sidebar-width);
       display:
           flex;
       flex-direction:
           column;
       padding:
           24px 16px 18px;
       background:
           var(--surface);
       border-right:
           1px solid var(--border);
   }
   
   .sidebar-brand {
       padding:
           0 8px 24px;
   }
   
   .sidebar-brand-link {
       display:
           flex;
       align-items:
           center;
       gap:
           11px;
   }
   
   .brand-mark {
       width:
           38px;
       height:
           38px;
       display:
           grid;
       place-items:
           center;
       flex:
           0 0 auto;
       border-radius:
           12px;
       background:
           linear-gradient(
               135deg,
               var(--brand),
               var(--purple)
           );
       color:
           #ffffff;
       font-size:
           13px;
       font-weight:
           700;
       letter-spacing:
           0.02em;
       box-shadow:
           0 7px 18px color-mix(
               in srgb,
               var(--brand) 22%,
               transparent
           );
   }
   
   .sidebar-brand-text {
       font-size:
           18px;
       font-weight:
           700;
       letter-spacing:
           -0.02em;
   }
   
   .sidebar-navigation {
       display:
           flex;
       flex-direction:
           column;
       gap:
           5px;
   }
   
   .sidebar-nav-item {
       position:
           relative;
       display:
           flex;
       align-items:
           center;
       gap:
           12px;
       min-height:
           46px;
       padding:
           0 13px;
       border-radius:
           12px;
       color:
           var(--text-secondary);
       font-size:
           14px;
       font-weight:
           600;
       transition:
           background var(--transition),
           color var(--transition),
           transform var(--transition-fast);
   }
   
   .sidebar-nav-item:hover {
       background:
           var(--surface-soft);
       color:
           var(--text);
   }
   
   .sidebar-nav-item:active {
       transform:
           scale(0.985);
   }
   
   .sidebar-nav-item.active {
       background:
           var(--brand-soft);
       color:
           var(--brand);
   }
   
   .sidebar-nav-icon {
       width:
           21px;
       height:
           21px;
       display:
           grid;
       place-items:
           center;
       flex:
           0 0 auto;
   }
   
   .sidebar-nav-icon svg {
       width:
           19px;
       height:
           19px;
       fill:
           none;
       stroke:
           currentColor;
       stroke-width:
           1.7;
       stroke-linecap:
           round;
       stroke-linejoin:
           round;
   }
   
   .sidebar-nav-label {
       white-space:
           nowrap;
   }
   
   .sidebar-account {
       margin-top:
           auto;
       padding-top:
           18px;
       border-top:
           1px solid var(--border);
   }
   
   .sidebar-account-link {
       display:
           flex;
       align-items:
           center;
       gap:
           11px;
       padding:
           9px;
       border-radius:
           13px;
       transition:
           background var(--transition);
   }
   
   .sidebar-account-link:hover {
       background:
           var(--surface-hover);
   }
   
   .sidebar-avatar {
       position:
           relative;
       width:
           39px;
       height:
           39px;
       overflow:
           hidden;
       flex:
           0 0 auto;
       border-radius:
           50%;
       background:
           var(--surface-soft);
   }
   
   .sidebar-avatar img {
       width:
           100%;
       height:
           100%;
       object-fit:
           cover;
   }
   
   .sidebar-avatar-placeholder {
       width:
           100%;
       height:
           100%;
       display:
           grid;
       place-items:
           center;
       color:
           var(--brand);
       font-size:
           13px;
       font-weight:
           700;
   }
   
   .sidebar-account-info {
       min-width:
           0;
       display:
           flex;
       flex-direction:
           column;
       gap:
           2px;
   }
   
   .sidebar-account-info strong {
       overflow:
           hidden;
       color:
           var(--text);
       font-size:
           13px;
       font-weight:
           700;
       text-overflow:
           ellipsis;
       white-space:
           nowrap;
   }
   
   .sidebar-account-info span {
       color:
           var(--text-muted);
       font-size:
           11px;
       font-weight:
           600;
   }
   
   /* ============================================================
      MAIN CONTENT
      ============================================================ */
   
   .main-content {
       width:
           calc(100% - var(--sidebar-width));
       min-height:
           100vh;
       margin-left:
           var(--sidebar-width);
       padding:
           var(--content-padding);
   }
   
   .main-content > * {
       width:
           min(100%, var(--content-max-width));
       margin-right:
           auto;
       margin-left:
           auto;
   }
   
   /* ============================================================
      PAGE HEADER
      ============================================================ */
   
   .page-header {
       display:
           flex;
       align-items:
           flex-end;
       justify-content:
           space-between;
       gap:
           24px;
       margin-bottom:
           30px;
   }
   
   .page-heading-content {
       min-width:
           0;
   }
   
   .eyebrow,
   .panel-kicker,
   .settings-kicker,
   .management-kicker,
   .modal-kicker {
       display:
           block;
       margin-bottom:
           6px;
       color:
           var(--brand);
       font-size:
           11px;
       font-weight:
           700;
       letter-spacing:
           0.12em;
       text-transform:
           uppercase;
   }
   
   .page-heading-content h1,
   .page-header h1 {
       margin-bottom:
           7px;
       color:
           var(--text);
       font-size:
           clamp(30px, 4vw, 42px);
       font-weight:
           700;
       letter-spacing:
           -0.045em;
       line-height:
           1.08;
   }
   
   .page-heading-content p,
   .page-header p {
       max-width:
           650px;
       margin-bottom:
           0;
       color:
           var(--text-secondary);
       font-size:
           14px;
       line-height:
           1.65;
   }
   
   /* ============================================================
      MOBILE HEADER
      ============================================================ */
   
   .mobile-header-row {
       display:
           none;
       align-items:
           center;
       gap:
           12px;
       margin-bottom:
           18px;
   }
   
   .mobile-page-title {
       color:
           var(--text);
       font-size:
           15px;
       font-weight:
           700;
   }
   
   .sidebar-toggle {
       width:
           40px;
       height:
           40px;
       display:
           grid;
       place-items:
           center;
       border:
           1px solid var(--border);
       border-radius:
           11px;
       background:
           var(--surface);
       color:
           var(--text);
       font-size:
           18px;
   }
   
   /* ============================================================
      SIDEBAR OVERLAY
      ============================================================ */
   
   .sidebar-overlay {
       position:
           fixed;
       inset:
           0;
       z-index:
           90;
       display:
           none;
       background:
           rgba(10, 12, 18, 0.42);
       backdrop-filter:
           blur(2px);
   }
   
   /* ============================================================
      BUTTONS
      ============================================================ */
   
   .button {
       min-height:
           42px;
       display:
           inline-flex;
       align-items:
           center;
       justify-content:
           center;
       gap:
           8px;
       padding:
           0 16px;
       border:
           1px solid transparent;
       border-radius:
           11px;
       font-size:
           13px;
       font-weight:
           700;
       white-space:
           nowrap;
       transition:
           background var(--transition),
           border-color var(--transition),
           color var(--transition),
           transform var(--transition-fast),
           box-shadow var(--transition);
   }
   
   .button:hover {
       transform:
           translateY(-1px);
   }
   
   .button:active {
       transform:
           translateY(0);
   }
   
   .button-primary {
       background:
           var(--brand);
       color:
           #ffffff;
       box-shadow:
           0 7px 18px color-mix(
               in srgb,
               var(--brand) 18%,
               transparent
           );
   }
   
   .button-primary:hover {
       background:
           var(--brand-hover);
   }
   
   .button-secondary {
       background:
           var(--surface);
       border-color:
           var(--border);
       color:
           var(--text);
   }
   
   .button-secondary:hover {
       background:
           var(--surface-soft);
   }
   
   .button-danger {
       background:
           var(--red-soft);
       color:
           var(--red);
   }
   
   .button-danger:hover {
       filter:
           brightness(0.97);
   }
   
   /* ============================================================
      TEXT LINK
      ============================================================ */
   
   .text-link {
       color:
           var(--brand);
       font-size:
           12px;
       font-weight:
           700;
   }
   
   .text-link:hover {
       text-decoration:
           underline;
       text-underline-offset:
           3px;
   }
   
   /* ============================================================
      FORMS
      ============================================================ */
   
   .form-field {
       display:
           flex;
       flex-direction:
           column;
       gap:
           7px;
   }
   
   .form-field label {
       color:
           var(--text);
       font-size:
           12px;
       font-weight:
           700;
   }
   
   .form-field small {
       color:
           var(--text-muted);
       font-size:
           11px;
       line-height:
           1.5;
   }
   
   .form-field input,
   .form-field textarea,
   .form-field select {
       width:
           100%;
       border:
           1px solid var(--border);
       border-radius:
           11px;
       background:
           var(--surface);
       color:
           var(--text);
       font-size:
           13px;
       outline:
           none;
       transition:
           border-color var(--transition),
           box-shadow var(--transition),
           background var(--transition);
   }
   
   .form-field input,
   .form-field select {
       height:
           44px;
       padding:
           0 13px;
   }
   
   .form-field textarea {
       min-height:
           110px;
       padding:
           12px 13px;
       resize:
           vertical;
   }
   
   .form-field input::placeholder,
   .form-field textarea::placeholder {
       color:
           var(--text-muted);
   }
   
   .form-field input:hover,
   .form-field textarea:hover,
   .form-field select:hover {
       border-color:
           var(--border-strong);
   }
   
   .form-field input:focus,
   .form-field textarea:focus,
   .form-field select:focus {
       border-color:
           var(--brand);
       box-shadow:
           0 0 0 4px color-mix(
               in srgb,
               var(--brand) 12%,
               transparent
           );
   }
   
   .form-field input[readonly] {
       background:
           var(--surface-soft);
       color:
           var(--text-secondary);
   }
   
   /* ============================================================
      MODALS
      ============================================================ */
   
   .modal-backdrop {
       position:
           fixed;
       inset:
           0;
       z-index:
           500;
       display:
           grid;
       place-items:
           center;
       padding:
           20px;
       background:
           rgba(15, 18, 26, 0.48);
       backdrop-filter:
           blur(5px);
       opacity:
           0;
       transition:
           opacity var(--transition);
   }
   
   .modal-backdrop.visible {
       opacity:
           1;
   }
   
   .modal-backdrop[hidden] {
       display:
           none;
   }
   
   .modal {
       width:
           min(100%, 520px);
       max-height:
           calc(100vh - 40px);
       overflow:
           auto;
       border:
           1px solid var(--border);
       border-radius:
           var(--radius-large);
       background:
           var(--surface);
       box-shadow:
           var(--shadow-large);
       transform:
           translateY(8px)
           scale(0.985);
       transition:
           transform var(--transition);
   }
   
   .modal-backdrop.visible .modal {
       transform:
           translateY(0)
           scale(1);
   }
   
   .modal-large {
       width:
           min(100%, 680px);
   }
   
   .modal-header {
       display:
           flex;
       align-items:
           flex-start;
       justify-content:
           space-between;
       gap:
           20px;
       padding:
           23px 24px 18px;
       border-bottom:
           1px solid var(--border);
   }
   
   .modal-header h2 {
       margin:
           0;
       color:
           var(--text);
       font-size:
           22px;
       letter-spacing:
           -0.03em;
   }
   
   .modal-close {
       width:
           34px;
       height:
           34px;
       display:
           grid;
       place-items:
           center;
       border:
           0;
       border-radius:
           9px;
       background:
           var(--surface-soft);
       color:
           var(--text-secondary);
       font-size:
           22px;
       line-height:
           1;
   }
   
   .modal-close:hover {
       background:
           var(--surface-hover);
       color:
           var(--text);
   }
   
   .modal-form {
       display:
           flex;
       flex-direction:
           column;
       gap:
           18px;
       padding:
           24px;
   }
   
   .form-grid {
       display:
           grid;
       grid-template-columns:
           repeat(2, minmax(0, 1fr));
       gap:
           16px;
   }
   
   .modal-actions {
       display:
           flex;
       justify-content:
           flex-end;
       gap:
           10px;
       padding-top:
           4px;
   }
   
   /* ============================================================
      GENERIC EMPTY / LOADING
      ============================================================ */
   
   .dashboard-loading,
   .homework-loading,
   .resources-loading,
   .tools-loading,
   .calendar-loading,
   .management-empty,
   .dashboard-empty,
   .dashboard-error,
   .homework-empty,
   .resources-empty,
   .tools-empty {
       padding:
           32px 18px;
       color:
           var(--text-muted);
       font-size:
           13px;
       text-align:
           center;
   }
   
   .dashboard-error {
       color:
           var(--red);
   }
   
   /* ============================================================
      TOASTS
      ============================================================ */
   
   .toast-container {
       position:
           fixed;
       right:
           20px;
       bottom:
           20px;
       z-index:
           1000;
       display:
           flex;
       flex-direction:
           column;
       gap:
           10px;
       width:
           min(360px, calc(100vw - 40px));
   }
   
   .toast {
       padding:
           13px 15px;
       border:
           1px solid var(--border);
       border-radius:
           12px;
       background:
           var(--surface);
       color:
           var(--text);
       box-shadow:
           var(--shadow-large);
       font-size:
           12px;
       font-weight:
           600;
       opacity:
           0;
       transform:
           translateY(8px);
       transition:
           opacity var(--transition),
           transform var(--transition);
   }
   
   .toast.visible {
       opacity:
           1;
       transform:
           translateY(0);
   }
   
   .toast-success {
       border-color:
           color-mix(
               in srgb,
               var(--green) 30%,
               var(--border)
           );
   }
   
   .toast-error {
       border-color:
           color-mix(
               in srgb,
               var(--red) 30%,
               var(--border)
           );
   }
   
   /* ============================================================
      RESPONSIVE
      ============================================================ */
   
   @media (max-width: 980px) {
   
       :root {
           --sidebar-width:
               220px;
   
           --content-padding:
               25px;
       }
   
   }
   
   @media (max-width: 760px) {
   
       :root {
           --content-padding:
               18px;
       }
   
       .sidebar {
           transform:
               translateX(-100%);
           transition:
               transform var(--transition);
           box-shadow:
               var(--shadow-large);
       }
   
       body.sidebar-open .sidebar {
           transform:
               translateX(0);
       }
   
       body.sidebar-open .sidebar-overlay {
           display:
               block;
       }
   
       .main-content {
           width:
               100%;
           margin-left:
               0;
       }
   
       .mobile-header-row {
           display:
               flex;
       }
   
       .page-header {
           align-items:
               flex-start;
           flex-direction:
               column;
       }
   
       .page-header > .button {
           width:
               100%;
       }
   
       .form-grid {
           grid-template-columns:
               1fr;
       }
   
   }
   
   @media (max-width: 500px) {
   
       .main-content {
           padding:
               18px 14px;
       }
   
       .page-heading-content h1,
       .page-header h1 {
           font-size:
               30px;
       }
   
       .modal-backdrop {
           padding:
               10px;
       }
   
       .modal {
           max-height:
               calc(100vh - 20px);
           border-radius:
               16px;
       }
   
       .modal-header,
       .modal-form {
           padding:
               18px;
       }
   
       .modal-actions {
           flex-direction:
               column-reverse;
       }
   
       .modal-actions .button {
           width:
               100%;
       }
   
   }