: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
 }

 .row-menu {
     position: absolute;
     right: 0;
     top: 100%;
     margin-top: 4px;
     z-index: 100
 }

 .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
 }

 .progress-bar-fill {
     transition: width 1.5s cubic-bezier(.4, 0, .2, 1)
 }

 .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
 }

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

 .checkbox-custom:checked {
     background: #ec4899;
     border-color: #ec4899;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E")
 }

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

 .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: #ec4899
 }

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

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

 .toggle-switch {
     position: relative;
     width: 40px;
     height: 22px;
     background: #cbd5e1;
     border-radius: 999px;
     cursor: pointer;
     transition: var(--ease);
     flex-shrink: 0
 }

 .toggle-switch.on {
     background: #ec4899
 }

 .toggle-switch::after {
     content: '';
     position: absolute;
     top: 2px;
     left: 2px;
     width: 18px;
     height: 18px;
     background: #fff;
     border-radius: 50%;
     transition: var(--ease);
     box-shadow: 0 2px 4px rgba(0, 0, 0, .2)
 }

 .toggle-switch.on::after {
     left: 20px
 }

 .dark .toggle-switch {
     background: #475569
 }

 .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: #ec4899;
     background: #fff;
     box-shadow: 0 0 0 4px rgba(236, 72, 153, .1)
 }

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

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

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

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

 .view-btn.active {
     background: #ec4899;
     color: #fff
 }

 /* Coupon Ticket Style */
 .coupon-ticket {
     position: relative;
     transition: var(--ease);
     overflow: hidden
 }

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

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

 .coupon-ticket::before,
 .coupon-ticket::after {
     content: '';
     position: absolute;
     width: 24px;
     height: 24px;
     background: #f8fafc;
     border-radius: 50%;
     top: 50%;
     transform: translateY(-50%);
     z-index: 1
 }

 .dark .coupon-ticket::before,
 .dark .coupon-ticket::after {
     background: #020617
 }

 .coupon-ticket::before {
     left: -12px
 }

 .coupon-ticket::after {
     right: -12px
 }

 .coupon-divider {
     border-left: 2px dashed rgba(0, 0, 0, .1);
     position: relative
 }

 .dark .coupon-divider {
     border-left-color: rgba(255, 255, 255, .15)
 }

 .coupon-code {
     font-family: monospace;
     letter-spacing: 2px;
     font-weight: 800
 }

 /* Code copy button */
 .copy-btn {
     transition: var(--ease)
 }

 .copy-btn.copied {
     background: #10b981 !important;
     color: #fff !important
 }

 /* Discount type badges */
 .type-percent {
     background: linear-gradient(135deg, #ec4899, #f43f5e);
     color: #fff
 }

 .type-fixed {
     background: linear-gradient(135deg, #3b82f6, #06b6d4);
     color: #fff
 }

 .type-shipping {
     background: linear-gradient(135deg, #f59e0b, #f97316);
     color: #fff
 }

 .type-bogo {
     background: linear-gradient(135deg, #8b5cf6, #a855f7);
     color: #fff
 }

 /* Status */
 .status-active {
     background: #d1fae5;
     color: #059669
 }

 .status-scheduled {
     background: #dbeafe;
     color: #2563eb
 }

 .status-expired {
     background: #fee2e2;
     color: #dc2626
 }

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

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

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

 .dark .status-expired {
     background: rgba(239, 68, 68, .2);
     color: #f87171
 }

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

 @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
     }
 }