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

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

   [data-lucide] {
       width: 1em;
       height: 1em;
       display: inline-block;
       vertical-align: middle
   }

   svg {
       display: inline-block;
       vertical-align: middle
   }

   html,
   body {
       overflow-x: hidden !important;
       max-width: 100vw !important
   }

   .dark body {
       background: linear-gradient(180deg, #0b1223, #141d33);
       background-attachment: fixed
   }

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

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

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

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

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

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

   .sidebar {
       transition: all .3s cubic-bezier(.4, 0, .2, 1)
   }

   .sidebar-collapsed {
       width: 80px !important
   }

   .sidebar-collapsed .sidebar-text,
   .sidebar-collapsed .sidebar-logo-text,
   .sidebar-collapsed .sidebar-badge,
   .sidebar-collapsed .sidebar-header,
   .sidebar-collapsed .sidebar-close-btn {
       display: none
   }

   .sidebar-collapsed .sidebar-item {
       justify-content: center;
       padding-left: 0;
       padding-right: 0
   }

   .sidebar-overlay {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, .65);
       backdrop-filter: blur(6px);
       z-index: 40;
       opacity: 0;
       visibility: hidden;
       transition: all .3s ease
   }

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

   .ripple {
       position: relative;
       overflow: hidden
   }

   .ripple::after {
       content: '';
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       pointer-events: none;
       background-image: radial-gradient(circle, rgba(255, 255, 255, .3) 10%, transparent 10.01%);
       background-repeat: no-repeat;
       background-position: 50%;
       transform: scale(10, 10);
       opacity: 0;
       transition: transform .5s, opacity 1s
   }

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

   .card-hover {
       transition: all .3s cubic-bezier(.4, 0, .2, 1)
   }

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

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

   .gradient-text {
       background: linear-gradient(135deg, #6366F1, #22D3EE);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text
   }

   .notification-badge {
       position: absolute;
       top: -2px;
       right: -2px;
       min-width: 18px;
       height: 18px;
       padding: 0 4px;
       background: #EF4444;
       color: white;
       font-size: 10px;
       font-weight: 700;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       border: 2px solid white
   }

   .dark .notification-badge {
       border-color: #141d33
   }

   .menu-active {
       background: linear-gradient(135deg, rgba(79, 70, 229, .1), rgba(6, 182, 212, .1));
       color: #4F46E5;
       border-right: 3px solid #4F46E5
   }

   .dark .menu-active {
       background: linear-gradient(135deg, rgba(99, 102, 241, .18), rgba(34, 211, 238, .08));
       color: #A5B4FC;
       border-right: 3px solid #818CF8
   }

   .dropdown-menu {
       transform-origin: top right;
       transform: scale(.95) translateY(-10px);
       opacity: 0;
       visibility: hidden;
       transition: all .25s cubic-bezier(.4, 0, .2, 1);
       pointer-events: none
   }

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

   .dark .premium-dropdown {
       background: linear-gradient(180deg, #1e2942, #182238);
       border: 1px solid rgba(129, 140, 248, .12);
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .7)
   }

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

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

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

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

   .toast-enter {
       animation: slideInRight .3s ease forwards
   }

   .toast-exit {
       animation: slideOutRight .3s ease forwards
   }

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

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

   .modal-content {
       transform: scale(.9) translateY(20px);
       transition: all .3s cubic-bezier(.4, 0, .2, 1)
   }

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

   .status-badge {
       padding: 4px 12px;
       border-radius: 50px;
       font-size: 12px;
       font-weight: 600;
       display: inline-flex;
       align-items: center;
       gap: 4px
   }

   .scrollbar-hide::-webkit-scrollbar {
       display: none
   }

   .scrollbar-hide {
       -ms-overflow-style: none;
       scrollbar-width: none
   }

   /* ============ PROFILE SPECIFIC ============ */
   .profile-hero {
       background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #06B6D4 100%);
       border-radius: 24px;
       position: relative;
       overflow: hidden;
   }

   .profile-hero::before {
       content: '';
       position: absolute;
       top: -30%;
       right: -15%;
       width: 400px;
       height: 400px;
       background: radial-gradient(circle, rgba(255, 255, 255, .15), transparent 60%);
       border-radius: 50%;
       pointer-events: none
   }

   .profile-hero::after {
       content: '';
       position: absolute;
       bottom: -30%;
       left: -15%;
       width: 300px;
       height: 300px;
       background: radial-gradient(circle, rgba(255, 255, 255, .1), transparent 60%);
       border-radius: 50%;
       pointer-events: none
   }

   .profile-avatar-wrapper {
       position: relative;
       display: inline-block
   }

   .profile-avatar {
       width: 120px;
       height: 120px;
       border-radius: 24px;
       object-fit: cover;
       border: 4px solid white;
       box-shadow: 0 8px 24px rgba(0, 0, 0, .2)
   }

   .dark .profile-avatar {
       border-color: #1e2942
   }

   .avatar-upload {
       position: absolute;
       bottom: -4px;
       right: -4px;
       width: 36px;
       height: 36px;
       background: linear-gradient(135deg, #4F46E5, #06B6D4);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       cursor: pointer;
       box-shadow: 0 4px 12px rgba(79, 70, 229, .4);
       border: 3px solid white;
       transition: all .2s
   }

   .dark .avatar-upload {
       border-color: #1e2942
   }

   .avatar-upload:hover {
       transform: scale(1.1)
   }

   .verified-badge {
       position: absolute;
       top: -4px;
       right: -4px;
       width: 28px;
       height: 28px;
       background: linear-gradient(135deg, #10B981, #059669);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       border: 3px solid white;
       box-shadow: 0 4px 12px rgba(16, 185, 129, .4)
   }

   .dark .verified-badge {
       border-color: #1e2942
   }

   /* Tab styles */
   .tab-btn {
       transition: all .25s;
       position: relative;
       cursor: pointer
   }

   .tab-btn.active {
       color: #4F46E5 !important
   }

   .dark .tab-btn.active {
       color: #A5B4FC !important
   }

   .tab-btn.active::after {
       content: '';
       position: absolute;
       bottom: -1px;
       left: 0;
       right: 0;
       height: 3px;
       background: linear-gradient(90deg, #4F46E5, #06B6D4);
       border-radius: 3px 3px 0 0
   }

   .tab-content {
       display: none;
       animation: fadeIn .3s ease
   }

   .tab-content.active {
       display: block
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(10px)
       }

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

   /* Info row */
   .info-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 14px 0;
       border-bottom: 1px solid rgba(226, 232, 240, .6)
   }

   .dark .info-row {
       border-color: rgba(55, 69, 96, .4)
   }

   .info-row:last-child {
       border-bottom: none
   }

   /* Document card */
   .doc-card {
       transition: all .3s;
       cursor: pointer;
       position: relative;
       overflow: hidden
   }

   .doc-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 15px 30px -10px rgba(0, 0, 0, .1)
   }

   .dark .doc-card:hover {
       box-shadow: 0 15px 30px -10px rgba(0, 0, 0, .5)
   }

   .doc-card.verified {
       border-left: 4px solid #10B981
   }

   .doc-card.pending {
       border-left: 4px solid #F59E0B
   }

   /* Timeline */
   .activity-item {
       position: relative;
       padding-left: 36px;
       padding-bottom: 20px
   }

   .activity-item::before {
       content: '';
       position: absolute;
       left: 13px;
       top: 28px;
       bottom: 0;
       width: 2px;
       background: linear-gradient(180deg, #E2E8F0, transparent)
   }

   .dark .activity-item::before {
       background: linear-gradient(180deg, #374560, transparent)
   }

   .activity-item:last-child::before {
       display: none
   }

   .activity-dot {
       position: absolute;
       left: 0;
       top: 4px;
       width: 28px;
       height: 28px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
   }

   /* Skill bar */
   .skill-bar {
       height: 6px;
       background: #E2E8F0;
       border-radius: 50px;
       overflow: hidden
   }

   .dark .skill-bar {
       background: #374560
   }

   .skill-fill {
       height: 100%;
       border-radius: 50px;
       transition: width 1.5s cubic-bezier(.4, 0, .2, 1)
   }

   /* Upload area */
   .upload-area {
       border: 2px dashed #CBD5E1;
       border-radius: 16px;
       padding: 24px;
       text-align: center;
       transition: all .2s;
       cursor: pointer
   }

   .dark .upload-area {
       border-color: #374560
   }

   .upload-area:hover {
       border-color: #4F46E5;
       background: rgba(79, 70, 229, .03)
   }

   /* Toggle switch */
   .toggle-switch {
       position: relative;
       display: inline-block;
       width: 44px;
       height: 24px;
       flex-shrink: 0
   }

   .toggle-switch input {
       opacity: 0;
       width: 0;
       height: 0
   }

   .toggle-slider {
       position: absolute;
       cursor: pointer;
       inset: 0;
       background: #CBD5E1;
       transition: .3s;
       border-radius: 24px
   }

   .dark .toggle-slider {
       background: #374560
   }

   .toggle-slider:before {
       position: absolute;
       content: "";
       height: 18px;
       width: 18px;
       left: 3px;
       bottom: 3px;
       background: white;
       transition: .3s;
       border-radius: 50%;
       box-shadow: 0 2px 4px rgba(0, 0, 0, .2)
   }

   input:checked+.toggle-slider {
       background: linear-gradient(135deg, #4F46E5, #06B6D4)
   }

   input:checked+.toggle-slider:before {
       transform: translateX(20px)
   }

   /* Strength meter */
   .strength-bar span {
       flex: 1;
       height: 4px;
       background: #E2E8F0;
       border-radius: 50px;
       transition: all .3s
   }

   .dark .strength-bar span {
       background: #374560
   }

   .strength-bar.strong span {
       background: #10B981
   }

   @media print {
       .no-print {
           display: none !important
       }
   }

   @media(max-width:1023px) {
       #mainContent {
           margin-left: 0 !important;
           width: 100% !important;
           max-width: 100vw !important;
           overflow-x: hidden !important
       }

       main {
           padding-left: 12px !important;
           padding-right: 12px !important;
           max-width: 100% !important
       }
   }

   @media(max-width:640px) {
       .notification-popup-fix {
           position: fixed !important;
           left: 8px !important;
           right: 8px !important;
           top: 60px !important;
           width: auto !important;
           max-width: none !important
       }

       .grid {
           gap: .75rem !important
       }

       .profile-avatar {
           width: 80px;
           height: 80px;
           border-radius: 16px
       }
   }

   @media(max-width:380px) {
       main {
           padding-left: 10px !important;
           padding-right: 10px !important
       }

       h2.text-2xl {
           font-size: 1.375rem !important
       }

       .modal-content {
           max-width: calc(100vw - 16px) !important
       }

       header .flex.items-center.gap-1 {
           gap: 0 !important
       }

       header button.p-2 {
           padding: .375rem !important
       }
   }