:root {
      --sidebar-w: 272px;
      --sidebar-mini: 80px;
      --header-h: 72px;
      --ease: all .3s cubic-bezier(.4, 0, .2, 1)
  }

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

  body {
      font-family: 'Plus Jakarta Sans', 'Inter', sans-serif
  }

  .app-container {
      display: flex;
      min-height: 100vh
  }

  .sidebar {
      width: var(--sidebar-w);
      min-width: var(--sidebar-w);
      height: 100vh;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 50;
      transition: var(--ease);
      display: flex;
      flex-direction: column;
      overflow: hidden
  }

  .sidebar.collapsed {
      width: var(--sidebar-mini);
      min-width: var(--sidebar-mini)
  }

  .sidebar-nav {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden
  }

  .sidebar-nav::-webkit-scrollbar {
      width: 4px
  }

  .sidebar-nav::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, .3);
      border-radius: 10px
  }

  .main-wrapper {
      flex: 1;
      margin-left: var(--sidebar-w);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      transition: var(--ease)
  }

  body.sidebar-collapsed .main-wrapper {
      margin-left: var(--sidebar-mini)
  }

  .header {
      height: var(--header-h);
      min-height: var(--header-h);
      position: sticky;
      top: 0;
      z-index: 40
  }

  .main-content {
      flex: 1;
      overflow-x: hidden
  }

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

  ::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 10px
  }

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

  .menu-item {
      position: relative
  }

  .menu-item.active>a,
  .menu-item.active>button {
      background: linear-gradient(135deg, rgba(59, 130, 246, .15), rgba(139, 92, 246, .1))
  }

  .menu-item.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 60%;
      background: linear-gradient(180deg, #3b82f6, #8b5cf6);
      border-radius: 0 4px 4px 0
  }

  .submenu {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s cubic-bezier(.4, 0, .2, 1)
  }

  .submenu.open {
      max-height: 500px
  }

  .menu-arrow {
      transition: transform .3s
  }

  .menu-arrow.rotated {
      transform: rotate(90deg)
  }

  .sidebar-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .6);
      backdrop-filter: blur(4px);
      z-index: 45;
      opacity: 0;
      visibility: hidden;
      transition: var(--ease)
  }

  .sidebar-overlay.active {
      opacity: 1;
      visibility: visible
  }

  .dropdown-panel {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 8px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px) scale(.95);
      transition: var(--ease);
      z-index: 9999;
      pointer-events: none
  }

  .dropdown-panel.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
      pointer-events: auto
  }

  .gradient-animated {
      background-size: 200% 200%;
      animation: gs 6s ease infinite
  }

  @keyframes gs {
      0% {
          background-position: 0% 50%
      }

      50% {
          background-position: 100% 50%
      }

      100% {
          background-position: 0% 50%
      }
  }

  .ripple {
      position: relative;
      overflow: hidden
  }

  .ripple::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle, rgba(255, 255, 255, .3) 10%, transparent 10.01%);
      transform: scale(10);
      opacity: 0;
      transition: transform .5s, opacity .8s
  }

  .ripple:active::after {
      transform: scale(0);
      opacity: 1;
      transition: 0s
  }

  .badge-pulse {
      position: relative
  }

  .badge-pulse::after {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 50%;
      background: inherit;
      animation: bp 1.5s infinite;
      z-index: -1
  }

  @keyframes bp {
      0% {
          transform: scale(1);
          opacity: .5
      }

      100% {
          transform: scale(2);
          opacity: 0
      }
  }

  @keyframes pd {
      0% {
          box-shadow: 0 0 0 0 rgba(16, 185, 129, .5)
      }

      70% {
          box-shadow: 0 0 0 8px rgba(16, 185, 129, 0)
      }

      100% {
          box-shadow: 0 0 0 0 rgba(16, 185, 129, 0)
      }
  }

  .pulse-dot {
      animation: pd 2s infinite
  }

  .toast-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 99999;
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: calc(100vw - 40px)
  }

  .toast {
      padding: 14px 20px;
      border-radius: 12px;
      color: #fff;
      font-weight: 500;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
      animation: ti .4s cubic-bezier(.4, 0, .2, 1);
      min-width: 280px;
      max-width: 420px
  }

  .toast.toast-out {
      animation: to .3s forwards
  }

  @keyframes ti {
      from {
          transform: translateX(100%);
          opacity: 0
      }

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

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

      to {
          transform: translateX(100%);
          opacity: 0
      }
  }

  .toast-success {
      background: linear-gradient(135deg, #10b981, #059669)
  }

  .toast-danger {
      background: linear-gradient(135deg, #ef4444, #dc2626)
  }

  .toast-warning {
      background: linear-gradient(135deg, #f59e0b, #d97706)
  }

  .toast-info {
      background: linear-gradient(135deg, #3b82f6, #2563eb)
  }

  .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .6);
      backdrop-filter: blur(6px);
      z-index: 99990;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: var(--ease);
      padding: 16px
  }

  .modal-overlay.active {
      opacity: 1;
      visibility: visible
  }

  .modal-box {
      transform: scale(.9) translateY(20px);
      transition: var(--ease);
      max-height: 90vh;
      overflow-y: auto
  }

  .modal-overlay.active .modal-box {
      transform: scale(1) translateY(0)
  }

  [data-tooltip] {
      position: relative
  }

  [data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(5px);
      padding: 6px 12px;
      background: #1e293b;
      color: #fff;
      font-size: 12px;
      font-weight: 500;
      border-radius: 8px;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: var(--ease);
      pointer-events: none;
      z-index: 99999
  }

  .dark [data-tooltip]::after {
      background: #f1f5f9;
      color: #0f172a
  }

  [data-tooltip]:hover::after {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0)
  }

  .theme-transition,
  .theme-transition *,
  .theme-transition *::before,
  .theme-transition *::after {
      transition: background-color .3s, color .3s, border-color .3s !important
  }

  .form-input {
      width: 100%;
      padding: 10px 16px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      font-size: 14px;
      color: #0f172a;
      transition: var(--ease);
      outline: none
  }

  .form-input:focus {
      border-color: #0ea5e9;
      background: #fff;
      box-shadow: 0 0 0 4px rgba(14, 165, 233, .1)
  }

  .dark .form-input {
      background: #1e293b;
      border-color: #334155;
      color: #f1f5f9
  }

  .dark .form-input:focus {
      background: #0f172a;
      border-color: #0ea5e9
  }

  .form-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      margin-bottom: 8px
  }

  .dark .form-label {
      color: #cbd5e1
  }

  /* Hero Search */
  .hero-search {
      background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #8b5cf6 100%);
      position: relative;
      overflow: hidden
  }

  .hero-search::before,
  .hero-search::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      opacity: .5
  }

  .hero-search::before {
      top: -100px;
      right: -100px;
      width: 400px;
      height: 400px;
      background: rgba(6, 182, 212, .6)
  }

  .hero-search::after {
      bottom: -150px;
      left: -100px;
      width: 400px;
      height: 400px;
      background: rgba(139, 92, 246, .5)
  }

  /* Category card */
  .category-card {
      transition: var(--ease);
      cursor: pointer;
      position: relative;
      overflow: hidden
  }

  .category-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, .1)
  }

  .dark .category-card:hover {
      box-shadow: 0 20px 40px rgba(0, 0, 0, .4)
  }

  .category-card::before {
      content: '';
      position: absolute;
      top: -30px;
      right: -30px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: var(--cc);
      opacity: .1;
      transition: var(--ease)
  }

  .category-card:hover::before {
      transform: scale(1.5);
      opacity: .2
  }

  .cat-icon {
      background: var(--cc-light);
      color: var(--cc)
  }

  /* FAQ */
  .faq-item {
      transition: var(--ease)
  }

  .faq-question {
      cursor: pointer;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      transition: var(--ease)
  }

  .faq-question:hover {
      background: #f8fafc
  }

  .dark .faq-question:hover {
      background: #1e293b
  }

  .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease
  }

  .faq-item.open .faq-answer {
      max-height: 500px
  }

  .faq-item.open .faq-arrow {
      transform: rotate(180deg)
  }

  .faq-arrow {
      transition: transform .3s
  }

  .faq-item.open {
      background: linear-gradient(135deg, rgba(14, 165, 233, .05), rgba(139, 92, 246, .03))
  }

  .dark .faq-item.open {
      background: linear-gradient(135deg, rgba(14, 165, 233, .1), rgba(139, 92, 246, .05))
  }

  /* Article card */
  .article-card {
      transition: var(--ease);
      cursor: pointer
  }

  .article-card:hover {
      transform: translateY(-2px);
      border-color: #0ea5e9
  }

  .dark .article-card:hover {
      border-color: #0ea5e9
  }

  /* Contact card */
  .contact-card {
      transition: var(--ease);
      cursor: pointer;
      position: relative;
      overflow: hidden
  }

  .contact-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, .1)
  }

  .dark .contact-card:hover {
      box-shadow: 0 20px 40px rgba(0, 0, 0, .4)
  }

  /* Filter chip */
  .filter-chip {
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      transition: var(--ease);
      cursor: pointer;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 4px
  }

  .filter-chip.active {
      background: #0ea5e9;
      color: #fff;
      box-shadow: 0 4px 12px rgba(14, 165, 233, .3)
  }

  .filter-chip:not(.active) {
      background: #f1f5f9;
      color: #64748b
  }

  .filter-chip:not(.active):hover {
      background: #e2e8f0
  }

  .dark .filter-chip:not(.active) {
      background: #1e293b;
      color: #94a3b8
  }

  /* Status badges */
  .status-open {
      background: #dbeafe;
      color: #2563eb
  }

  .status-progress {
      background: #fef3c7;
      color: #d97706
  }

  .status-resolved {
      background: #d1fae5;
      color: #059669
  }

  .status-closed {
      background: #f1f5f9;
      color: #64748b
  }

  .dark .status-open {
      background: rgba(59, 130, 246, .2);
      color: #60a5fa
  }

  .dark .status-progress {
      background: rgba(245, 158, 11, .2);
      color: #fbbf24
  }

  .dark .status-resolved {
      background: rgba(16, 185, 129, .2);
      color: #34d399
  }

  .dark .status-closed {
      background: rgba(100, 116, 139, .2);
      color: #94a3b8
  }

  /* Video card */
  .video-card {
      position: relative;
      overflow: hidden;
      transition: var(--ease);
      cursor: pointer
  }

  .video-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, .15)
  }

  .video-play {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, .4);
      transition: var(--ease);
      opacity: 1
  }

  .video-play-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .9);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--ease);
      box-shadow: 0 8px 20px rgba(0, 0, 0, .3)
  }

  .video-card:hover .video-play-icon {
      transform: scale(1.1);
      background: #fff
  }

  .radio-custom {
      appearance: none;
      width: 18px;
      height: 18px;
      border: 2px solid #cbd5e1;
      border-radius: 50%;
      cursor: pointer;
      transition: var(--ease);
      flex-shrink: 0;
      position: relative
  }

  .radio-custom:checked {
      border-color: #0ea5e9
  }

  .radio-custom:checked::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #0ea5e9
  }

  .dark .radio-custom {
      border-color: #475569
  }

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

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

      .main-wrapper {
          margin-left: 0 !important
      }
  }

  @media(max-width:640px) {
      :root {
          --header-h: 60px
      }

      .toast {
          min-width: auto;
          max-width: calc(100vw - 40px);
          font-size: 13px
      }

      .dropdown-panel.mobile-full {
          position: fixed !important;
          top: var(--header-h) !important;
          left: 8px !important;
          right: 8px !important;
          width: auto !important;
          max-height: 70vh;
          overflow-y: auto;
          margin-top: 4px !important
      }
  }

  @media(max-width:375px) {
      .header-icons {
          gap: 2px
      }

      .header-icons .icon-btn {
          width: 32px;
          height: 32px
      }
  }