:root {
      --sidebar-width: 260px;
      --header-height: 64px
  }

  *,
  *::before,
  *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
  }

  html {
      overflow-x: hidden;
      scroll-behavior: smooth
  }

  body {
      font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
      background: #F1F5F9;
      color: #1e293b;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh
  }

  html.dark body {
      background: #0F172A;
      color: #E2E8F0
  }

  ::-webkit-scrollbar {
      width: 6px;
      height: 6px
  }

  ::-webkit-scrollbar-track {
      background: transparent
  }

  ::-webkit-scrollbar-thumb {
      background: #CBD5E1;
      border-radius: 99px
  }

  html.dark ::-webkit-scrollbar-thumb {
      background: #334155
  }

  .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: var(--sidebar-width);
      height: 100vh;
      background: #fff;
      border-right: 1px solid #E2E8F0;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      transition: transform .3s cubic-bezier(.4, 0, .2, 1)
  }

  html.dark .sidebar {
      background: #0F172A;
      border-right-color: #1E293B
  }

  @media(max-width:1023px) {
      .sidebar {
          transform: translateX(-100%)
      }

      .sidebar.open {
          transform: translateX(0)
      }
  }

  .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .4);
      z-index: 999
  }

  .sidebar-overlay.active {
      display: block
  }

  .nav-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      border-radius: 10px;
      color: #64748B;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;
      margin: 0 12px 2px;
      transition: all .15s
  }

  .nav-item:hover {
      background: #F1F5F9;
      color: #334155
  }

  html.dark .nav-item:hover {
      background: #1E293B;
      color: #E2E8F0
  }

  .nav-item.active {
      background: #EFF6FF;
      color: #2563EB;
      font-weight: 600
  }

  html.dark .nav-item.active {
      background: rgba(37, 99, 235, .15);
      color: #60A5FA
  }

  .nav-item .nav-icon {
      width: 20px;
      height: 20px;
      flex-shrink: 0
  }

  .nav-group-title {
      font-size: 11px;
      font-weight: 700;
      color: #94A3B8;
      text-transform: uppercase;
      letter-spacing: .08em;
      padding: 16px 28px 6px
  }

  .header {
      position: fixed;
      top: 0;
      left: var(--sidebar-width);
      right: 0;
      height: var(--header-height);
      background: rgba(255, 255, 255, .88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid #E2E8F0;
      z-index: 900;
      display: flex;
      align-items: center;
      padding: 0 24px;
      transition: left .3s
  }

  html.dark .header {
      background: rgba(15, 23, 42, .88);
      border-bottom-color: #1E293B
  }

  @media(max-width:1023px) {
      .header {
          left: 0
      }
  }

  .main-content {
      margin-left: var(--sidebar-width);
      padding-top: var(--header-height);
      min-height: 100vh;
      transition: margin-left .3s
  }

  @media(max-width:1023px) {
      .main-content {
          margin-left: 0
      }
  }

  .card {
      background: #fff;
      border: 1px solid #E2E8F0;
      border-radius: 16px
  }

  html.dark .card {
      background: #1E293B;
      border-color: #334155
  }

  .icon-box {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
  }

  .badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 3px 10px;
      border-radius: 99px;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap
  }

  .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 18px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      font-family: inherit;
      transition: background .15s
  }

  .btn-primary {
      background: #2563EB;
      color: #fff
  }

  .btn-primary:hover {
      background: #1D4ED8
  }

  .btn-outline {
      background: #fff;
      color: #334155;
      border: 1px solid #E2E8F0
  }

  html.dark .btn-outline {
      background: #1E293B;
      color: #E2E8F0;
      border-color: #334155
  }

  .btn-outline:hover {
      background: #F8FAFC
  }

  html.dark .btn-outline:hover {
      background: #334155
  }

  .btn-sm {
      padding: 7px 14px;
      font-size: 13px;
      border-radius: 8px
  }

  .btn-danger {
      background: #EF4444;
      color: #fff
  }

  .btn-danger:hover {
      background: #DC2626
  }

  .avatar {
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0
  }

  .form-input {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid #E2E8F0;
      border-radius: 10px;
      font-size: 14px;
      font-family: inherit;
      background: #fff;
      color: #1E293B;
      outline: none;
      transition: border-color .15s
  }

  html.dark .form-input {
      background: #0F172A;
      border-color: #334155;
      color: #E2E8F0
  }

  .form-input:focus {
      border-color: #2563EB;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .08)
  }

  .form-input-icon {
      padding-left: 38px
  }

  .form-input::placeholder {
      color: #94A3B8
  }

  select.form-input {
      appearance: none;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 32px
  }

  textarea.form-input {
      resize: none
  }

  .dropdown-menu {
      position: absolute;
      right: 0;
      top: calc(100% + 6px);
      min-width: 180px;
      background: #fff;
      border: 1px solid #E2E8F0;
      border-radius: 12px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, .1);
      z-index: 500;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: all .2s ease;
      overflow: hidden
  }

  html.dark .dropdown-menu {
      background: #1E293B;
      border-color: #334155
  }

  .dropdown-menu.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0)
  }

  .dropdown-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      font-size: 14px;
      color: #475569;
      cursor: pointer
  }

  html.dark .dropdown-item {
      color: #CBD5E1
  }

  .dropdown-item:hover {
      background: #F8FAFC
  }

  html.dark .dropdown-item:hover {
      background: #334155
  }

  .notif-panel {
      position: absolute;
      right: 0;
      top: calc(100% + 6px);
      width: 340px;
      max-height: 400px;
      background: #fff;
      border: 1px solid #E2E8F0;
      border-radius: 14px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, .1);
      z-index: 500;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: all .2s ease;
      overflow: hidden
  }

  html.dark .notif-panel {
      background: #1E293B;
      border-color: #334155
  }

  .notif-panel.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0)
  }

  @media(max-width:480px) {
      .notif-panel {
          width: calc(100vw - 32px);
          right: -60px
      }
  }

  .notif-dot {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 8px;
      height: 8px;
      background: #EF4444;
      border-radius: 50%;
      border: 2px solid #fff
  }

  html.dark .notif-dot {
      border-color: #0F172A
  }

  .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .45);
      backdrop-filter: blur(4px);
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      opacity: 0;
      visibility: hidden;
      transition: opacity .2s, visibility .2s
  }

  .modal-backdrop.open {
      opacity: 1;
      visibility: visible
  }

  .modal-box {
      width: 100%;
      max-width: 500px;
      max-height: 92vh;
      overflow-y: auto;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 24px 64px rgba(0, 0, 0, .15);
      transform: scale(.95) translateY(10px);
      transition: transform .25s cubic-bezier(.34, 1.56, .64, 1)
  }

  html.dark .modal-box {
      background: #1E293B;
      border: 1px solid #334155
  }

  .modal-backdrop.open .modal-box {
      transform: scale(1) translateY(0)
  }

  .toast-container {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 10px
  }

  @media(max-width:480px) {
      .toast-container {
          right: 12px;
          left: 12px
      }
  }

  .toast {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      background: #fff;
      border: 1px solid #E2E8F0;
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
      font-size: 14px;
      font-weight: 500;
      max-width: 360px;
      animation: toastIn .3s ease
  }

  html.dark .toast {
      background: #1E293B;
      border-color: #334155
  }

  @keyframes toastIn {
      from {
          opacity: 0;
          transform: translateX(40px)
      }

      to {
          opacity: 1;
          transform: translateX(0)
      }
  }

  /* ═══ CALENDAR STYLES ═══ */
  .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 1px;
      background: #E2E8F0;
      border-radius: 12px;
      overflow: hidden
  }

  html.dark .cal-grid {
      background: #334155
  }

  .cal-header-cell {
      padding: 10px 4px;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      color: #94A3B8;
      background: #F8FAFC;
      text-transform: uppercase;
      letter-spacing: .06em
  }

  html.dark .cal-header-cell {
      background: #1E293B
  }

  .cal-cell {
      min-height: 100px;
      padding: 6px;
      background: #fff;
      cursor: pointer;
      transition: background .1s;
      position: relative;
      overflow: hidden
  }

  html.dark .cal-cell {
      background: #1E293B
  }

  .cal-cell:hover {
      background: #F8FAFC
  }

  html.dark .cal-cell:hover {
      background: #334155
  }

  .cal-cell.today {
      background: #EFF6FF
  }

  html.dark .cal-cell.today {
      background: rgba(37, 99, 235, .1)
  }

  .cal-cell.other-month {
      opacity: .4
  }

  .cal-cell.selected {
      outline: 2px solid #2563EB;
      outline-offset: -2px;
      border-radius: 0
  }

  .cal-day {
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%
  }

  html.dark .cal-day {
      color: #E2E8F0
  }

  .cal-cell.today .cal-day {
      background: #2563EB;
      color: #fff
  }

  .cal-event {
      display: block;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 600;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      transition: opacity .15s
  }

  .cal-event:hover {
      opacity: .8
  }

  .cal-event-blue {
      background: #DBEAFE;
      color: #1D4ED8
  }

  html.dark .cal-event-blue {
      background: rgba(37, 99, 235, .2);
      color: #60A5FA
  }

  .cal-event-green {
      background: #D1FAE5;
      color: #065F46
  }

  html.dark .cal-event-green {
      background: rgba(16, 185, 129, .2);
      color: #34D399
  }

  .cal-event-violet {
      background: #EDE9FE;
      color: #5B21B6
  }

  html.dark .cal-event-violet {
      background: rgba(139, 92, 246, .2);
      color: #A78BFA
  }

  .cal-event-amber {
      background: #FEF3C7;
      color: #92400E
  }

  html.dark .cal-event-amber {
      background: rgba(245, 158, 11, .2);
      color: #FCD34D
  }

  .cal-event-red {
      background: #FEE2E2;
      color: #991B1B
  }

  html.dark .cal-event-red {
      background: rgba(239, 68, 68, .2);
      color: #F87171
  }

  .cal-event-cyan {
      background: #CFFAFE;
      color: #155E75
  }

  html.dark .cal-event-cyan {
      background: rgba(6, 182, 212, .2);
      color: #22D3EE
  }

  .cal-more {
      font-size: 10px;
      font-weight: 600;
      color: #2563EB;
      margin-top: 2px;
      padding: 1px 6px;
      cursor: pointer
  }

  .cal-more:hover {
      text-decoration: underline
  }

  /* Week view */
  .week-grid {
      display: grid;
      grid-template-columns: 60px repeat(7, 1fr);
      gap: 0
  }

  .week-time {
      font-size: 11px;
      color: #94A3B8;
      padding: 4px 8px;
      text-align: right;
      border-right: 1px solid #E2E8F0;
      height: 60px;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end
  }

  html.dark .week-time {
      border-right-color: #334155
  }

  .week-slot {
      height: 60px;
      border-bottom: 1px solid #F1F5F9;
      border-right: 1px solid #F1F5F9;
      position: relative;
      cursor: pointer
  }

  html.dark .week-slot {
      border-bottom-color: #1E293B;
      border-right-color: #1E293B
  }

  .week-slot:hover {
      background: #F8FAFC
  }

  html.dark .week-slot:hover {
      background: #334155
  }

  .week-event {
      position: absolute;
      left: 2px;
      right: 2px;
      border-radius: 6px;
      padding: 3px 6px;
      font-size: 10px;
      font-weight: 600;
      overflow: hidden;
      z-index: 2;
      cursor: pointer
  }

  /* View tabs */
  .view-tab {
      padding: 7px 16px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border: none;
      background: transparent;
      color: #64748B;
      font-family: inherit;
      transition: all .15s
  }

  .view-tab:hover {
      color: #334155
  }

  .view-tab.active {
      background: #2563EB;
      color: #fff;
      font-weight: 600
  }

  /* Mini calendar */
  .mini-cal {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
      text-align: center
  }

  .mini-day {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      border-radius: 50%;
      cursor: pointer;
      font-weight: 500;
      color: #475569;
      transition: all .1s
  }

  html.dark .mini-day {
      color: #94A3B8
  }

  .mini-day:hover {
      background: #EFF6FF;
      color: #2563EB
  }

  .mini-day.today {
      background: #2563EB;
      color: #fff;
      font-weight: 700
  }

  .mini-day.has-event {
      font-weight: 700;
      color: #2563EB
  }

  html.dark .mini-day.has-event {
      color: #60A5FA
  }

  .mini-day.other {
      color: #CBD5E1
  }

  html.dark .mini-day.other {
      color: #475569
  }

  .mini-head {
      font-size: 10px;
      font-weight: 700;
      color: #94A3B8;
      text-transform: uppercase;
      padding: 4px 0
  }

  /* Event type tag */
  .event-type {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 600
  }

  @media(max-width:639px) {
      .hide-mobile {
          display: none !important
      }
  }

  @media(max-width:767px) {
      .hide-tablet {
          display: none !important
      }
  }

  @media(max-width:767px) {
      .cal-cell {
          min-height: 60px
      }

      .cal-event {
          display: none
      }

      .cal-more {
          display: none
      }
  }