/* ========================================
   SMS Platform - Modern Design System
   UI Modernization - Design Token System
   ======================================== */

:root {
    /* ========== 颜色系统 (Color System) ========== */
    /* Requirement 1.1: Enterprise Blue as primary color (#165DFF) */
    /* Requirement 1.2: Complete color system with primary, auxiliary, status, text, and background colors */
    
    /* Primary Colors - Enterprise Blue Theme */
    --color-primary: #165DFF;           /* Arco Design Blue / Enterprise Blue */
    --color-primary-hover: #0E42D2;     /* Primary hover state */
    --color-primary-active: #09319F;    /* Primary active state */
    --color-primary-light: #E8F3FF;     /* Light primary background */
    
    /* Legacy aliases for backward compatibility */
    --primary-color: #165DFF;
    --primary-hover: #0E42D2;
    --primary-active: #09319F;
    
    /* Auxiliary Colors */
    --color-secondary: #4E5969;         /* Secondary color */
    --color-info: #165DFF;              /* Info color (same as primary) */
    
    /* Status Colors */
    --color-success: #00B42A;           /* Success state */
    --color-warning: #FF7D00;           /* Warning state */
    --color-danger: #F53F3F;            /* Error/danger state */
    --color-error: #F53F3F;             /* Error state (alias) */
    
    /* Legacy aliases */
    --success-color: #00B42A;
    --warning-color: #FF7D00;
    --danger-color: #F53F3F;
    
    /* Text Colors - Semantic Hierarchy */
    /* Requirement 2.6: Semantic text color variables */
    --color-text-main: #1D2129;         /* Primary text - highest contrast */
    --color-text-sub: #4E5969;          /* Secondary text - medium contrast */
    --color-text-weak: #86909C;         /* Tertiary text - low contrast */
    --color-text-placeholder: #C9CDD4;  /* Placeholder text */
    --color-text-white: #FFFFFF;        /* White text for dark backgrounds */
    
    /* Legacy aliases */
    --text-main: #1D2129;
    --text-sub: #4E5969;
    --text-weak: #86909C;
    --text-placeholder: #C9CDD4;
    
    /* Background Colors */
    --color-bg-page: #F2F3F5;           /* Page background - light gray */
    --color-bg-white: #FFFFFF;          /* Card/component background - pure white */
    --color-bg-hover: #F7F8FA;          /* Hover state background */
    --color-bg-active: #E8F3FF;         /* Active/selected state background */
    --color-bg-disabled: #F7F8FA;       /* Disabled state background */
    
    /* Status Background Colors (for badges and alerts) */
    --color-bg-success: #E8FFEA;        /* Success background */
    --color-bg-warning: #FFF7ED;        /* Warning background */
    --color-bg-danger: #FFECE8;         /* Danger background */
    --color-bg-info: #E8F3FF;           /* Info background */
    
    /* Legacy aliases */
    --bg-body: #F2F3F5;
    --bg-white: #FFFFFF;
    --bg-hover: #F7F8FA;
    --bg-active: #E8F3FF;
    
    /* Border Colors */
    --color-border-default: #E5E6EB;    /* Default border color */
    --color-border-hover: #165DFF;      /* Border on hover */
    --color-border-focus: #165DFF;      /* Border on focus */
    
    /* Legacy alias */
    --border-color: #E5E6EB;
    
    /* ========== 阴影系统 (Shadow System) ========== */
    /* Requirement 1.3: Three-tier shadow system for visual hierarchy */
    --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.08);      /* Subtle - cards, inputs */
    --shadow-standard: 0 4px 16px rgba(0, 0, 0, 0.12);   /* Standard - dropdowns, popovers */
    --shadow-prominent: 0 8px 32px rgba(0, 0, 0, 0.16);  /* Prominent - modals, dialogs */
    
    /* Legacy aliases */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    
    /* Focus Shadow */
    --shadow-focus: 0 0 0 3px rgba(22, 93, 255, 0.1);    /* Focus ring */
    --shadow-focus-error: 0 0 0 3px rgba(245, 63, 63, 0.1); /* Error focus ring */
    
    /* ========== 圆角系统 (Border Radius System) ========== */
    /* Requirement 1.4: Unified border radius system (6px, 8px, 12px, 16px) */
    --radius-sm: 6px;           /* Small - tags, badges */
    --radius-md: 8px;           /* Medium - buttons, inputs */
    --radius-lg: 12px;          /* Large - cards, modals */
    --radius-xl: 16px;          /* Extra large - hero sections */
    --radius-full: 9999px;      /* Full - circular elements */
    
    /* Legacy support */
    --border-radius: 4px;
    
    /* ========== 间距系统 (Spacing System) ========== */
    /* Requirement 1.5: 8px baseline grid system (4px, 8px, 16px, 24px, 32px) */
    --spacing-xs: 4px;          /* 0.5x - tight spacing */
    --spacing-sm: 8px;          /* 1x - base unit */
    --spacing-md: 16px;         /* 2x - standard spacing */
    --spacing-lg: 24px;         /* 3x - comfortable spacing */
    --spacing-xl: 32px;         /* 4x - generous spacing */
    --spacing-2xl: 48px;        /* 6x - extra generous spacing */
    
    /* ========== 动画系统 (Animation System) ========== */
    /* Requirement 1.6: Animation durations (150ms, 250ms, 400ms) and easing functions */
    
    /* Animation Duration - Progressive timing scale */
    --duration-fast: 150ms;     /* Quick feedback - micro-interactions */
    --duration-base: 250ms;     /* Standard transitions - most UI elements */
    --duration-slow: 400ms;     /* Smooth, noticeable animations - page transitions */
    
    /* Legacy aliases */
    --animation-duration-fast: 150ms;
    --animation-duration-base: 250ms;
    --animation-duration-slow: 400ms;
    
    /* Easing Functions - Natural motion curves */
    /* Requirement 1.6: Smooth deceleration easing function */
    --easing-smooth: cubic-bezier(0.16, 1, 0.3, 1);      /* Smooth deceleration - primary easing */
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);     /* Balanced acceleration - standard easing */
    --easing-in: cubic-bezier(0.4, 0, 1, 1);             /* Ease in - entering elements */
    --easing-out: cubic-bezier(0, 0, 0.2, 1);            /* Ease out - exiting elements */
    
    /* Legacy aliases */
    --ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ========== 排版系统 (Typography System) ========== */
    /* Requirement 2.1: Modern sans-serif font stack (IBM Plex Sans / Inter) */
    /* Requirement 2.4: Tight line height for headings (1.1-1.2) with negative letter spacing */
    
    /* Font Families */
    --font-family-base: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: 'Fira Code', 'Consolas', 'SFMono-Regular', 'Liberation Mono', Menlo, monospace;
    
    /* Font Sizes */
    --font-size-xs: 12px;       /* Extra small - captions, labels */
    --font-size-sm: 13px;       /* Small - secondary text */
    --font-size-base: 14px;     /* Base - body text */
    --font-size-md: 16px;       /* Medium - emphasized text */
    --font-size-lg: 18px;       /* Large - subheadings */
    --font-size-xl: 20px;       /* Extra large - section titles */
    --font-size-2xl: 24px;      /* 2X large - page titles */
    --font-size-3xl: 32px;      /* 3X large - hero text */
    --font-size-4xl: 36px;      /* 4X large - display text */
    --font-size-5xl: 48px;      /* 5X large - hero headings */
    
    /* Font Weights */
    --font-weight-normal: 400;  /* Normal - body text */
    --font-weight-medium: 500;  /* Medium - emphasized text */
    --font-weight-semibold: 600; /* Semibold - headings */
    --font-weight-bold: 700;    /* Bold - strong emphasis */
    
    /* Line Heights */
    --line-height-tight: 1.1;   /* Tight - large headings */
    --line-height-snug: 1.2;    /* Snug - headings */
    --line-height-normal: 1.5;  /* Normal - UI text */
    --line-height-relaxed: 1.6; /* Relaxed - body text (Requirement 2.2) */
    --line-height-loose: 1.8;   /* Loose - long-form content */
    
    /* Letter Spacing */
    --letter-spacing-tight: -0.03em;  /* Tight - headings (Requirement 2.4) */
    --letter-spacing-normal: 0;       /* Normal - body text */
    --letter-spacing-wide: 0.05em;    /* Wide - uppercase text */
    
    /* ========== 控件尺寸 (Control Sizes) ========== */
    /* Requirement 3.1: Unified button heights (28px, 36px, 48px) */
    --control-height-sm: 28px;  /* Small controls */
    --control-height: 36px;     /* Standard controls */
    --control-height-lg: 48px;  /* Large controls */
    
    /* ========== 布局参数 (Layout Parameters) ========== */
    /* Requirement 4.1: Fixed 240px sidebar width */
    /* Requirement 4.2: Fixed 60px header height */
    /* Requirement 4.5: 20px unified content padding */
    --sidebar-width: 240px;
    --header-height: 60px;
    --content-padding: 20px;
    --content-max-width: 720px;  /* Requirement 2.3: Max width for optimal reading */
    
    /* ========== Z-Index Scale ========== */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    --z-index-toast: 9999;
}

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

body {
    /* Modern sans-serif font stack - IBM Plex Sans / Inter with system fallbacks */
    font-family: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #F2F3F5; /* Fallback */
    background-color: var(--bg-body, #F2F3F5);
    color: #1D2129; /* Fallback */
    color: var(--text-main, #1D2129);
    font-size: 14px;
    line-height: 1.6; /* Improved readability for body text (Requirement 6.2) */
    /* Font rendering optimization (Requirement 6.5) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a { text-decoration: none; color: inherit; transition: color 0.2s; }
ul { list-style: none; }

/* ========== Typography System (排版系统) ========== */
/* Requirement 6.1: Modern sans-serif font stack */
/* Requirement 6.2: Body text line height at least 1.6 */
/* Requirement 6.3: Maximum line width 720px for optimal reading */
/* Requirement 6.4: Tight line height for headings (1.1-1.2) with negative letter spacing */
/* Requirement 6.5: Font anti-aliasing enabled */
/* Requirement 6.6: Semantic color variables for text */

/* Monospace font stack for code (Requirement 6.1) */
code,
pre,
kbd,
samp,
.code-font {
    font-family: 'Fira Code', 'Consolas', 'SFMono-Regular', 'Liberation Mono', Menlo, monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings - Tight line height and negative letter spacing (Requirement 6.4) */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin: 0;
}

h1 {
    font-size: 48px;
    line-height: 1.1;
}

h2 {
    font-size: 36px;
    line-height: 1.15;
}

h3 {
    font-size: 24px;
    line-height: 1.2;
}

h4 {
    font-size: 20px;
    line-height: 1.2;
}

h5 {
    font-size: 16px;
    line-height: 1.2;
}

h6 {
    font-size: 14px;
    line-height: 1.2;
}

/* Body text - Optimal line height and max width (Requirements 6.2, 6.3) */
p {
    line-height: 1.6;
    color: var(--text-main);
    margin: 0;
    max-width: 720px; /* Optimal reading width */
}

/* Subheadings and secondary text */
.subtitle,
.subheading {
    font-size: 18px;
    line-height: 1.5;
    color: var(--text-sub);
    letter-spacing: -0.01em;
}

/* Body text variants */
.body-large {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-main);
}

.body-small {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-sub);
}

/* Text color utilities (Requirement 6.6) */
.text-main {
    color: var(--text-main);
}

.text-sub {
    color: var(--text-sub);
}

.text-weak {
    color: var(--text-weak);
}

.text-placeholder {
    color: var(--text-placeholder);
}

/* Text alignment utilities */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* Font weight utilities */
.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

/* Letter spacing utilities */
.tracking-tight {
    letter-spacing: -0.03em;
}

.tracking-normal {
    letter-spacing: 0;
}

.tracking-wide {
    letter-spacing: 0.05em;
}

/* Line height utilities */
.leading-tight {
    line-height: 1.2;
}

.leading-normal {
    line-height: 1.5;
}

.leading-relaxed {
    line-height: 1.6;
}

.leading-loose {
    line-height: 1.8;
}

/* Layout */
.app-layout {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.app-sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, #FAFBFC 0%, #FFFFFF 100%);
    border-right: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03);
}

.sidebar-brand {
    height: var(--header-height);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}

.sidebar-brand svg {
    width: 24px;
    height: 24px;
}

.brand-text {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.brand-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-badge {
    font-size: 11px;
    font-weight: 500;
    color: var(--primary-color);
    background: var(--bg-active);
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 18px;
}

.sidebar-menu {
    flex: 1;
    padding: 16px 8px;
    overflow-y: auto;
}

.menu-item {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    margin-bottom: 4px;
    border-radius: var(--radius-md);
    color: var(--text-sub);
    font-weight: 400;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--animation-duration-fast) var(--ease-out-smooth);
    position: relative;
    overflow: hidden;
}

.menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-color);
    transform: scaleY(0);
    transition: transform var(--animation-duration-base) var(--ease-out-smooth);
}

.menu-item:hover {
    background: linear-gradient(90deg, rgba(22, 93, 255, 0.08) 0%, rgba(22, 93, 255, 0.02) 100%);
    color: var(--primary-color);
    transform: translateX(2px);
}

.menu-item.active {
    background: linear-gradient(90deg, rgba(22, 93, 255, 0.12) 0%, rgba(22, 93, 255, 0.04) 100%);
    color: var(--primary-color);
    font-weight: 500;
}

.menu-item.active::before {
    transform: scaleY(1);
}

.menu-item svg {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    fill: currentColor;
}

.menu-group-title {
    padding: 12px 12px 8px;
    font-size: 12px;
    color: var(--text-weak);
}

/* Main Content */
.app-main {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevent flex overflow */
}

/* Header */
.app-header {
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--content-padding);
    position: sticky;
    top: 0;
    z-index: 99;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.header-left h1 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-hover);
    color: var(--text-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.username {
    font-size: 14px;
    color: var(--text-main);
}

/* Content Body */
.app-content {
    padding: var(--content-padding);
    flex: 1;
    animation: fadeInContent var(--animation-duration-base) var(--ease-out-smooth);
}

/* ========== Content Fade-In Animation ========== */
@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== Tab Slide Animation ========== */
@keyframes tabSlide {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.tab-content {
    animation: tabSlide var(--animation-duration-base) var(--ease-out-smooth);
}

/* Components */
.card {
    background: #FFFFFF;
    background: var(--bg-white, #FFFFFF);
    border-radius: 16px;
    border-radius: var(--radius-xl, 16px);
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: box-shadow var(--animation-duration-base, 250ms) var(--ease-out-smooth, cubic-bezier(0.16, 1, 0.3, 1)),
                transform var(--animation-duration-base, 250ms) var(--ease-out-smooth, cubic-bezier(0.16, 1, 0.3, 1)),
                border-color var(--animation-duration-base, 250ms) var(--ease-out-smooth, cubic-bezier(0.16, 1, 0.3, 1));
    will-change: box-shadow, transform;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 16px 48px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
    border-color: rgba(22, 93, 255, 0.1);
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

/* ========== Button Component Styles (按钮组件样式) ========== */
/* Task 3.1: Base button styles with primary color background and white text */
/* Requirements 3.1, 3.3, 3.4: 36px height, 8px border-radius, 0-16px padding, 250ms transition */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-height);
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-md);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all var(--animation-duration-base) var(--ease-out-smooth);
    white-space: nowrap;
    box-sizing: border-box;
    background: var(--color-primary);
    color: var(--color-text-white);
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(22, 93, 255, 0.15);
    will-change: transform, box-shadow;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity var(--animation-duration-base) var(--ease-out-smooth);
}

.btn:hover::before {
    opacity: 1;
}

/* Task 3.2: Button hover and active effects */
/* Requirement 3.2: Hover - translate up 2px and enhance shadow */
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(22, 93, 255, 0.25);
}

/* Requirement 3.2: Active - slightly scale down (0.98) */
.btn:active {
    transform: scale(0.98) translateY(0);
    box-shadow: 0 2px 8px rgba(22, 93, 255, 0.15);
}

/* Homepage buttons: remove fixed height so padding controls size */
.home-nav-links .btn,
.mobile-nav-menu .btn,
.hero-btns .btn,
.pricing-card .btn,
.cta-section .btn {
    height: auto;
}

.btn-primary {
    background: linear-gradient(135deg, #165DFF 0%, #0E42D2 100%);
    color: #fff;
    border-color: #165DFF;
    box-shadow: 0 2px 8px rgba(22, 93, 255, 0.15), 0 8px 24px rgba(22, 93, 255, 0.1);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0E42D2 0%, #09319F 100%);
    border-color: #0E42D2;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(22, 93, 255, 0.25), 0 12px 36px rgba(22, 93, 255, 0.15);
}

.btn-primary:active {
    background: linear-gradient(135deg, #09319F 0%, #0E42D2 100%);
    border-color: #09319F;
    transform: scale(0.98) translateY(0);
    box-shadow: 0 2px 8px rgba(22, 93, 255, 0.15);
}

.btn-outline {
    background-color: #fff;
    border-color: var(--border-color);
    color: var(--text-main);
}

.btn-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-outline-white {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    box-shadow: var(--shadow-sm);
    will-change: transform, box-shadow;
}

.btn-outline-white:hover {
    background: #fff;
    color: var(--text-main);
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline-white:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-outline-white:disabled,
.btn-outline-white.disabled {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

.btn-text {
    background: none;
    color: var(--primary-color);
    padding: 0 8px;
    height: auto;
    box-shadow: none;
}

.btn-text:hover {
    background: var(--bg-hover);
    box-shadow: none;
}

.btn-text:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-icon {
    width: var(--control-height);
    height: var(--control-height);
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sub);
    transition: color var(--animation-duration-base) var(--ease-out-smooth),
                background-color var(--animation-duration-base) var(--ease-out-smooth),
                transform var(--animation-duration-base) var(--ease-out-smooth);
    border-radius: var(--radius-md);
    box-shadow: none;
}
.btn-icon:hover {
    color: var(--text-main);
    background-color: var(--bg-hover);
    transform: translateY(-2px);
}
.btn-icon:active {
    transform: translateY(0);
}

/* Button Disabled State */
.btn:disabled,
.btn.disabled,
button:disabled,
input[type="submit"]:disabled {
    background-color: var(--bg-hover);
    color: var(--text-weak);
    border-color: var(--border-color);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--bg-hover);
    border-color: var(--border-color);
}

.btn-outline:disabled,
.btn-outline.disabled {
    background-color: var(--bg-white);
    border-color: var(--border-color);
    color: var(--text-weak);
}

/* Form Elements */
.input {
    height: var(--control-height);
    padding: 0 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-main);
    width: 100%;
    outline: none;
    transition: all var(--animation-duration-fast) var(--ease-in-out);
    background-color: var(--bg-white);
    font-size: 14px;
}

.input:hover {
    border-color: rgba(22, 93, 255, 0.4);
    background-color: rgba(22, 93, 255, 0.01);
}

.input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(22, 93, 255, 0.08);
    background-color: var(--bg-white);
}

.input:disabled,
.input.disabled {
    background-color: var(--bg-hover);
    color: var(--text-sub); /* Readable for read-only data */
    cursor: not-allowed;
    border-color: var(--border-color);
    opacity: 0.8;
}

.info-value {
    font-size: 14px;
    color: var(--text-sub);
    padding: 6px 0;
    font-family: 'Fira Code', 'Consolas', 'SFMono-Regular', 'Liberation Mono', Menlo, monospace;
}

/* Tables */
.table-container {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-lg);
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
}

th {
    background: linear-gradient(180deg, #FAFBFC 0%, #F7F8FA 100%);
    color: var(--text-sub);
    font-weight: 600;
    font-size: 13px;
    padding: 14px 16px;
    border-bottom: 2px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

th:first-child {
    border-top-left-radius: var(--radius-md);
}

th:last-child {
    border-top-right-radius: var(--radius-md);
}

td {
    padding: 14px 16px;
    color: var(--text-main);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background-color var(--animation-duration-fast) var(--ease-in-out);
    font-size: 14px;
}

tbody tr {
    transition: all var(--animation-duration-fast) var(--ease-in-out);
}

tbody tr:hover {
    background: linear-gradient(90deg, rgba(22, 93, 255, 0.02) 0%, rgba(22, 93, 255, 0.01) 100%);
}

tbody tr:hover td {
    background-color: transparent;
}

tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-md);
}

tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-md);
}

/* Tags/Badges */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    height: 24px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-hover);
    color: var(--text-sub);
    letter-spacing: 0.02em;
}

.tag-green { 
    background: linear-gradient(135deg, #E8FFEA 0%, #D1FAE5 100%); 
    color: #059669;
    border: 1px solid rgba(5, 150, 105, 0.1);
}

.tag-red { 
    background: linear-gradient(135deg, #FFECE8 0%, #FEE2E2 100%); 
    color: #DC2626;
    border: 1px solid rgba(220, 38, 38, 0.1);
}

.tag-blue { 
    background: linear-gradient(135deg, #E8F3FF 0%, #DBEAFE 100%); 
    color: #2563EB;
    border: 1px solid rgba(37, 99, 235, 0.1);
}

/* Dashboard Specifics */
.user-info-card {
    display: flex;
    align-items: center;
    gap: 24px;
}

.user-info-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #E8F3FF;
    color: var(--primary-color);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.user-info-details h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.user-info-meta {
    display: flex;
    gap: 16px;
    color: var(--text-sub);
    font-size: 13px;
}

.finance-section {
    margin-top: 24px;
}

.finance-balance {
    font-size: 32px;
    font-weight: 600;
    color: var(--text-main);
    margin: 12px 0;
}

.finance-label {
    color: var(--text-sub);
    font-size: 14px;
}

.trend-stats {
    display: flex;
    gap: 48px;
    margin-bottom: 24px;
}

.trend-stat-item .label {
    color: var(--text-sub);
    font-size: 12px;
    margin-bottom: 4px;
}

.trend-stat-item .value {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-main);
}

/* Unified Modal Styles */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); /* Slightly darker for better contrast */
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn var(--animation-duration-base) var(--ease-out-smooth);
}

/* Modal backdrop alias - for consistency with design system */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: fadeIn var(--animation-duration-base) var(--ease-out-smooth);
}

.modal-content {
    background: var(--bg-white);
    width: 480px; /* Standard width */
    max-width: 90vw;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 24px;
    animation: modalSlideIn var(--animation-duration-base) var(--ease-out-smooth);
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-weak);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.modal-close:hover {
    background-color: var(--bg-hover);
    color: var(--text-main);
}

.modal-body {
    margin-bottom: 24px;
    font-size: 14px;
    color: var(--text-main);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 0;
    /* border-top: 1px solid var(--border-color); */
    /* padding-top: 16px; */
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ========== Form Validation Error Animation ========== */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

.input-error,
.form-error {
    animation: shake var(--animation-duration-slow) var(--ease-out-smooth);
    border-color: var(--danger-color) !important;
}

.input-error:focus,
.form-error:focus {
    box-shadow: 0 0 0 3px rgba(245, 63, 63, 0.1);
}

/* Mobile Responsive */
.mobile-header { display: none; }
.mobile-menu-btn { display: none; }
.sidebar-overlay { display: none; }

@media (max-width: 768px) {
    :root {
        --sidebar-width: 0px;
    }
    
    .app-sidebar {
        width: 240px;
        transform: translateX(-100%);
        transition: transform 0.3s;
        box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    }
    
    .app-sidebar.open {
        transform: translateX(0);
    }
    
    .sidebar-overlay.open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 99;
    }
    
    .app-header {
        padding: 0 16px;
    }
    
    .mobile-menu-btn {
        display: block;
        margin-right: 12px;
    }
    
    .user-info-card {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .trend-stats {
        flex-wrap: wrap;
        gap: 24px;
    }
    
    .btn-text {
        display: none; /* Hide text buttons on mobile if crowded */
    }
}

/* ========== Notification Slide-In Animation ========== */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========== Success Pulse Animation ========== */
@keyframes successPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ========== Alert Messages ========== */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.5;
    box-shadow: var(--shadow-md);
    animation: slideInRight var(--animation-duration-base) var(--ease-out-smooth);
}

.alert-success {
    background: #E8FFEA;
    color: var(--success-color);
    border: 1px solid #d1fae5;
}

.alert-error {
    background: #FFECE8;
    color: var(--danger-color);
    border: 1px solid #fee2e2;
}

.alert-warning {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #ffedd5;
}

.alert-info {
    background: var(--bg-active);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/* Notification class (alias for alert with animation) */
.notification {
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.5;
    box-shadow: var(--shadow-md);
    animation: slideInRight var(--animation-duration-base) var(--ease-out-smooth);
}

.notification-success {
    background: #E8FFEA;
    color: var(--success-color);
    border: 1px solid #d1fae5;
    animation: slideInRight var(--animation-duration-base) var(--ease-out-smooth),
               successPulse 600ms var(--ease-out-smooth) var(--animation-duration-base);
}

.notification-error {
    background: #FFECE8;
    color: var(--danger-color);
    border: 1px solid #fee2e2;
}

.notification-warning {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #ffedd5;
}

.notification-info {
    background: var(--bg-active);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/* ========== Settings Tabs ========== */
.settings-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0;
}

.settings-tab {
    padding: 10px 20px;
    font-size: 14px;
    color: var(--text-sub);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
    cursor: pointer;
}

.settings-tab:hover {
    color: var(--primary-color);
}

.settings-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 500;
}

/* ========== Settings Grid ========== */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== Filter Grid ========== */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.filter-actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

/* ========== Section Tabs ========== */
.section-tabs {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 24px;
}

.section-tab-item {
    padding: 12px 0;
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: 500;
    display: inline-block;
    margin-bottom: -1px;
}

/* ========== Form Groups ========== */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-main);
    font-weight: 500;
}

.form-hint {
    font-size: 12px;
    color: var(--text-weak);
    margin-top: 6px;
}

/* Textarea support for .input */
textarea.input {
    height: auto;
    padding: 8px 12px;
    resize: vertical;
    min-height: 80px;
    line-height: 1.6;
    width: 100%;
}

select.input {
    appearance: auto;
    cursor: pointer;
    background: var(--bg-white);
}

/* ========== Micro-Interactions: Select, Radio, Checkbox ========== */
/* Select element transitions */
select.input,
select {
    transition: border-color var(--animation-duration-fast) var(--ease-in-out),
                box-shadow var(--animation-duration-fast) var(--ease-in-out),
                background-color var(--animation-duration-fast) var(--ease-in-out);
}

select.input:hover,
select:hover {
    border-color: var(--primary-color);
    background-color: var(--bg-hover);
}

/* Radio button transitions */
input[type="radio"] {
    cursor: pointer;
    transition: transform var(--animation-duration-fast) var(--ease-out-smooth),
                box-shadow var(--animation-duration-fast) var(--ease-out-smooth);
}

input[type="radio"]:hover {
    transform: scale(1.1);
}

input[type="radio"]:checked {
    box-shadow: 0 0 0 2px var(--primary-color);
}

/* Checkbox transitions */
input[type="checkbox"] {
    cursor: pointer;
    transition: transform var(--animation-duration-fast) var(--ease-out-smooth),
                box-shadow var(--animation-duration-fast) var(--ease-out-smooth),
                background-color var(--animation-duration-fast) var(--ease-in-out);
}

input[type="checkbox"]:hover {
    transform: scale(1.1);
}

input[type="checkbox"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* ========== Dropdown Menu Expansion Animation ========== */
.dropdown-menu,
.dropdown,
[class*="dropdown"],
[class*="menu-dropdown"] {
    animation: dropdownExpand var(--animation-duration-base) var(--ease-out-smooth);
    transform-origin: top;
}

@keyframes dropdownExpand {
    from {
        opacity: 0;
        transform: scaleY(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scaleY(1) translateY(0);
    }
}

/* ========== Scroll Indicator Animation ========== */
.scroll-indicator,
.scroll-hint,
[class*="scroll-indicator"] {
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(10px);
        opacity: 0.5;
    }
}

/* ========== Form Control Toggle Animation ========== */
/* Toggle switches */
.toggle,
.switch,
input[type="checkbox"].toggle,
input[type="checkbox"].switch,
[class*="toggle"],
[class*="switch"] {
    transition: background-color var(--animation-duration-base) var(--ease-out-smooth),
                transform var(--animation-duration-fast) var(--ease-out-smooth);
}

.toggle:checked,
.switch:checked,
input[type="checkbox"].toggle:checked,
input[type="checkbox"].switch:checked {
    background-color: var(--primary-color);
}

/* Toggle handle animation */
.toggle::after,
.switch::after,
.toggle-handle,
.switch-handle {
    transition: transform var(--animation-duration-base) var(--ease-out-smooth);
}

/* ========== Tooltip Fade Animation ========== */
.tooltip,
[class*="tooltip"],
[data-tooltip],
.hint,
[class*="hint"] {
    animation: tooltipFadeIn var(--animation-duration-base) var(--ease-out-smooth);
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== Card Header ========== */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.card-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.card-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ========== Button Variants ========== */
/* Task 3.3: Button size variants */
/* Small button - 28px height, 0-12px padding (Requirement 3.1) */
.btn-small,
.btn-sm {
    height: var(--control-height-sm);    /* 28px */
    padding: 0 12px;                     /* 0-12px horizontal padding */
    font-size: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-white);
    color: var(--text-main);
    cursor: pointer;
    transition: transform var(--animation-duration-base) var(--ease-out-smooth),
                box-shadow var(--animation-duration-base) var(--ease-out-smooth),
                background-color var(--animation-duration-base) var(--ease-out-smooth),
                border-color var(--animation-duration-base) var(--ease-out-smooth);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    will-change: transform, box-shadow;
}

.btn-small:hover,
.btn-sm:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-small:active,
.btn-sm:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Large button - 48px height, 0-24px padding (Requirement 3.1) */
.btn-lg {
    height: var(--control-height-lg);    /* 48px */
    padding: 0 24px;                     /* 0-24px horizontal padding */
    font-size: 16px;
}

.btn-lg:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-lg:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-danger,
.btn-small.btn-danger,
.btn-sm.btn-danger {
    background: var(--danger-color);
    color: #fff;
    border-color: var(--danger-color);
}

.btn-danger:hover,
.btn-small.btn-danger:hover,
.btn-sm.btn-danger:hover {
    background: #d63031;
    border-color: #d63031;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-danger:active,
.btn-small.btn-danger:active,
.btn-sm.btn-danger:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Secondary button - white background, primary color border and text (Requirement 3.6) */
.btn-secondary,
.btn-small.btn-secondary,
.btn-sm.btn-secondary {
    background: var(--bg-white);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-secondary:hover,
.btn-small.btn-secondary:hover,
.btn-sm.btn-secondary:hover {
    background: var(--bg-active);
    color: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary:active,
.btn-small.btn-secondary:active,
.btn-sm.btn-secondary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-gray,
.btn-small.btn-gray,
.btn-sm.btn-gray {
    background: var(--bg-hover);
    color: var(--text-sub);
    border-color: var(--border-color);
}

.btn-gray:hover,
.btn-small.btn-gray:hover,
.btn-sm.btn-gray:hover {
    background: var(--border-color);
    color: var(--text-main);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-gray:active,
.btn-small.btn-gray:active,
.btn-sm.btn-gray:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-success,
.btn-small.btn-success,
.btn-sm.btn-success {
    background: var(--success-color);
    color: #fff;
    border-color: var(--success-color);
}

.btn-success:hover,
.btn-small.btn-success:hover,
.btn-sm.btn-success:hover {
    background: #009922;
    border-color: #009922;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-success:active,
.btn-small.btn-success:active,
.btn-sm.btn-success:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Button Small Disabled State */
.btn-small:disabled,
.btn-small.disabled,
.btn-sm:disabled,
.btn-sm.disabled {
    background-color: var(--bg-hover);
    color: var(--text-weak);
    border-color: var(--border-color);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* ========== Badges ========== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    height: 22px;
    border-radius: var(--border-radius);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.badge-success {
    background: #E8FFEA;
    color: var(--success-color);
}

.badge-warning {
    background: #fff7ed;
    color: var(--warning-color);
}

.badge-danger {
    background: #FFECE8;
    color: var(--danger-color);
}

.badge-gray {
    background: var(--bg-hover);
    color: var(--text-weak);
}

/* ========== Selection Cards (Packages/Payment Methods) ========== */
.selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.selection-card {
    display: block;
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: box-shadow var(--animation-duration-base) var(--ease-out-smooth),
                transform var(--animation-duration-base) var(--ease-out-smooth),
                border-color var(--animation-duration-base) var(--ease-out-smooth);
    background: #fff;
    box-shadow: var(--shadow-sm);
    will-change: box-shadow, transform;
}

.selection-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.selection-card.selected {
    border-color: var(--primary-color);
    background: var(--bg-active);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.selection-card-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--danger-color);
    color: #fff;
    padding: 2px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}

.pay-method-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: box-shadow var(--animation-duration-base) var(--ease-out-smooth),
                transform var(--animation-duration-base) var(--ease-out-smooth),
                border-color var(--animation-duration-base) var(--ease-out-smooth);
    background: #fff;
    box-shadow: var(--shadow-sm);
    will-change: box-shadow, transform;
}

.pay-method-option:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.pay-method-option.selected {
    border-color: var(--primary-color);
    background: var(--bg-active);
    box-shadow: 0 0 0 1px var(--primary-color);
}

/* ========== Admin Actions ========== */
.admin-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* ========== Pagination ========== */
.pagination {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    margin-top: 20px;
    flex-wrap: wrap;
}

.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--border-radius);
    font-size: 13px;
    color: var(--text-sub);
    border: 1px solid var(--border-color);
    background: var(--bg-white);
    transition: all 0.2s;
}

.pagination a:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.pagination a.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.page-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--border-radius);
    font-size: 13px;
    background: var(--primary-color);
    color: #fff;
    border: 1px solid var(--primary-color);
    font-weight: 500;
}

.page-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    font-size: 13px;
    color: var(--text-weak);
}

.tag-gray { background: var(--bg-hover); color: var(--text-weak); }
.tag-yellow { background: #fff7ed; color: var(--warning-color); }

/* ========== Table Wrap & Desktop/Mobile Toggle ========== */
.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.mobile-cards {
    display: none;
}

.mobile-card-item {
    background: var(--bg-white);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--animation-duration-base) var(--ease-out-smooth),
                transform var(--animation-duration-base) var(--ease-out-smooth);
    will-change: box-shadow, transform;
}

.mobile-card-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.mc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--text-main);
}

.mc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--bg-hover);
}

.mc-row:last-of-type {
    border-bottom: none;
}

.mc-label {
    color: var(--text-weak);
    flex-shrink: 0;
}

.mc-value {
    color: var(--text-main);
    text-align: right;
}

.mc-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

@media (max-width: 768px) {
    .desktop-table {
        display: none;
    }
    .mobile-cards {
        display: block;
    }
}

/* ========== Toast Notification System ========== */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

/* Toast entrance animation with spring effect */
@keyframes toastSlideIn {
    0% {
        opacity: 0;
        transform: translateX(100%) scale(0.9);
    }
    60% {
        opacity: 1;
        transform: translateX(-8px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Toast exit animation */
@keyframes toastSlideOut {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(100%) scale(0.9);
    }
}

/* Icon bounce animation for emphasis */
@keyframes iconBounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    background: var(--bg-white);
    box-shadow: var(--shadow-lg);
    font-size: 14px;
    color: var(--text-main);
    pointer-events: auto;
    max-width: 380px;
    opacity: 0;
    transform: translateX(100%) scale(0.9);
    will-change: transform, opacity;
}

.toast.toast-show {
    animation: toastSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.toast.toast-hide {
    animation: toastSlideOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.toast-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-show .toast-icon {
    animation: iconBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}

.toast-icon svg {
    width: 20px;
    height: 20px;
}

.toast-success .toast-icon { color: var(--success-color); }
.toast-error .toast-icon { color: var(--danger-color); }
.toast-warning .toast-icon { color: var(--warning-color); }
.toast-info .toast-icon { color: var(--primary-color); }

.toast-message {
    flex: 1;
    line-height: 1.4;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-weak);
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.toast-close:hover {
    color: var(--text-main);
    transform: scale(1.2);
}

/* ========== Code Inline ========== */
code {
    background: var(--bg-hover);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 13px;
    font-family: 'Fira Code', 'Consolas', 'SFMono-Regular', 'Liberation Mono', Menlo, monospace;
    line-height: 1.7; /* Improved code readability (Requirement 6.2) */
}

/* ========== Form Submit Loading State ========== */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.btn.loading,
.btn-loading,
button.loading,
input[type="submit"].loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
    cursor: not-allowed;
}

.btn.loading::after,
.btn-loading::after,
button.loading::after,
input[type="submit"].loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.btn-outline.loading::after,
.btn-gray.loading::after {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: var(--primary-color);
}

.btn-small.loading::after,
.btn-sm.loading::after {
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
}

/* ========== Table Loading Skeleton Screen Animation ========== */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.table-loading,
.skeleton {
    animation: pulse 1.5s ease-in-out infinite;
    background-color: var(--bg-hover);
    border-radius: var(--radius-sm);
}

/* Skeleton variants for different content types */
.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    animation: pulse 1.5s ease-in-out infinite;
    background-color: var(--bg-hover);
    border-radius: var(--radius-sm);
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
    background-color: var(--bg-hover);
}

.skeleton-button {
    height: var(--control-height);
    width: 100px;
    animation: pulse 1.5s ease-in-out infinite;
    background-color: var(--bg-hover);
    border-radius: var(--radius-md);
}

/* Table row skeleton */
tbody tr.table-loading td {
    background-color: var(--bg-hover);
    animation: pulse 1.5s ease-in-out infinite;
}
/* ========== Responsive Animation Adaptation ========== */
/* Mobile device animation optimization */
@media (max-width: 768px) {
    /* Simplify or disable complex animations on mobile */
    :root {
        --animation-duration-fast: 100ms;
        --animation-duration-base: 150ms;
        --animation-duration-slow: 200ms;
    }
    
    /* Disable transform animations on mobile for better performance */
    .card:hover,
    .feature-card:hover,
    .pricing-card:hover,
    .selection-card:hover,
    .pay-method-option:hover,
    .mobile-card-item:hover {
        transform: none;
    }
    
    /* Simplify button hover effects */
    .btn:hover,
    .btn-primary:hover,
    .btn-outline:hover,
    .btn-small:hover,
    .btn-sm:hover {
        transform: none;
    }
    
    /* Keep only shadow changes for hover feedback */
    .card:hover,
    .btn:hover {
        box-shadow: var(--shadow-md);
    }
}

/* Reduced motion preference support */
@media (prefers-reduced-motion: reduce) {
    /* Disable or drastically shorten all animations */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Override animation variables */
    :root {
        --animation-duration-fast: 0.01ms;
        --animation-duration-base: 0.01ms;
        --animation-duration-slow: 0.01ms;
    }
}

/* ========== Browser Feature Detection and Fallbacks ========== */
/* Gradient support detection */
@supports not (background: linear-gradient(135deg, #000, #fff)) {
    .btn-primary {
        background: var(--primary-color);
    }
}

/* Transform support detection */
@supports not (transform: translateY(-2px)) {
    .btn:hover,
    .card:hover,
    .menu-item:hover {
        /* Fallback: use only box-shadow for hover effect */
        box-shadow: var(--shadow-md);
    }
}

/* CSS Variables support detection */
@supports not (color: var(--primary-color)) {
    /* Fallback colors for browsers that don't support CSS variables */
    body {
        background-color: #F2F3F5;
        color: #1D2129;
    }
    
    .btn-primary {
        background: #165DFF;
        color: #fff;
    }
    
    .card {
        background: #FFFFFF;
        border-radius: 12px;
    }
}

/* Backdrop filter support detection */
@supports not (backdrop-filter: blur(4px)) {
    .modal-overlay,
    .modal-backdrop {
        background: rgba(0, 0, 0, 0.6);
    }
    
    .home-nav {
        background: rgba(255, 255, 255, 0.98);
    }
}

/* Animation support detection */
@supports not (animation: fadeIn 0.3s ease) {
    /* Provide basic styles without animations */
    .modal-content,
    .notification,
    .alert,
    .toast {
        opacity: 1;
        transform: none;
    }
}