:root {
    /* Multicolor Scheme - Enhanced Contrast */
    --royal-primary-blue: #1f50c1;
    --royal-blue-600: #1d4ed8;
    --royal-blue-500: #3b82f6;
    --royal-blue-400: #60a5fa;
    --royal-blue-300: #93c5fd;
    --royal-blue-200: #bfdbfe;
    --royal-blue-100: #dbeafe;
    --royal-blue-50: #eff6ff;

    /* Green Accent Colors */
    --royal-accent-green: #059669;
    --royal-green-500: #10b981;
    --royal-green-400: #34d399;
    --royal-green-300: #6ee7b7;
    --royal-green-200: #a7f3d0;
    --royal-green-100: #d1fae5;

    /* Purple Colors */
    --royal-purple-500: #7c3aed;
    --royal-purple-400: #a78bfa;
    --royal-purple-300: #c4b5fd;

    /* Orange Colors */
    --royal-orange-500: #d97706;
    --royal-orange-400: #fbbf24;
    --royal-orange-300: #fcd34d;

    /* Red Colors */
    --royal-red-500: #dc2626;
    --royal-red-400: #f87171;
    --royal-red-300: #fca5a5;

    /* Cyan Colors */
    --royal-cyan-500: #0891b2;
    --royal-cyan-400: #22d3ee;
    --royal-cyan-300: #67e8f9;

    /* Neutral Colors */
    --royal-text-dark: #111827;
    --royal-text-light: #6b7280;
    --royal-text-lighter: #9ca3af;
    --royal-bg-white: #ffffff;
    --royal-bg-light: #f8fafc;
    --royal-border-light: #e9ebef;
    --royal-border-medium: #d1d5db;

    /* Enhanced Gradient Definitions */
    --royal-gradient-primary: linear-gradient(135deg, var(--royal-primary-blue) 0%, var(--royal-blue-500) 100%);
    --royal-gradient-green: linear-gradient(135deg, var(--royal-accent-green) 0%, var(--royal-green-400) 100%);
    --royal-gradient-purple: linear-gradient(135deg, var(--royal-purple-500) 0%, var(--royal-purple-400) 100%);
    --royal-gradient-orange: linear-gradient(135deg, var(--royal-orange-500) 0%, var(--royal-orange-400) 100%);
    --royal-gradient-red: linear-gradient(135deg, var(--royal-red-500) 0%, var(--royal-red-400) 100%);
    --royal-gradient-cyan: linear-gradient(135deg, var(--royal-cyan-500) 0%, var(--royal-cyan-400) 100%);
    --royal-gradient-bg: linear-gradient(135deg, var(--royal-blue-50) 0%, #f8fafc 100%);
    --royal-gradient-section: linear-gradient(135deg, rgba(194, 207, 225, 0.3) 0%, rgba(248, 250, 252, 0.3) 100%);
    --royal-gradient-hero: linear-gradient(135deg, rgba(30, 64, 175, 0.9) 0%, rgba(29, 78, 216, 0.8) 100%);

    /* Enhanced Shadow Effects */
    --royal-shadow-sm: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05);
    --royal-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.04);
    --royal-shadow-md: 0 0.625rem 0.9375rem rgba(0, 0, 0, 0.08);
    --royal-shadow-lg: 0 1.25rem 1.5625rem rgba(0, 0, 0, 0.12);
    --royal-shadow-xl: 0 1.5625rem 3.125rem rgba(0, 0, 0, 0.2);

    /* Unified Spacing - Based on rem */
    --royal-space-xs: 0.5rem;
    --royal-space-sm: 1rem;
    --royal-space-default: 1.125rem;
    --royal-space-md: 1.5rem;
    --royal-space-lg: 2rem;
    --royal-space-xl: 3rem;
    --royal-space-xxl: 5rem;

    /* Transition Effects */
    --royal-transition: all 0.3s ease;
    --royal-transition-slow: all 0.5s ease;
    --royal-transition-fast: all 0.15s ease;

    /* Border Radius */
    --royal-radius-sm: 0.375rem;
    --royal-radius: 0.5rem;
    --royal-radius-md: 0.75rem;
    --royal-radius-lg: 1rem;
    --royal-radius-xl: 1.5rem;

    /* Font Sizes - Based on rem */
    --royal-font-xs: 0.75rem;
    --royal-font-sm: 0.875rem;
    --royal-font-default: 1rem;
    --royal-font-md: 1.125rem;
    --royal-font-lg: 1.5rem;
    --royal-font-xl: 2rem;
    --royal-font-xxl: 2.5rem;
    --royal-font-xxxl: 3.5rem;
}

/* ===== RESET & BASE STYLES ===== */
*{margin: 0; padding: 0; box-sizing: border-box;}
html{scroll-behavior: smooth; font-size: 16px;}
body{font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--royal-text-dark); overflow-x: hidden; font-size: var(--royal-font-sm); background: var(--royal-bg-white); -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}
a{color: inherit; text-decoration: none; transition: var(--royal-transition); font-size: var(--royal-font-sm);}
a:hover{color: var(--royal-primary-blue);}
ul,ol{list-style: none;}
img{max-width: 100%; height: auto; display: block;}
table{border-collapse: collapse; width: 100%;}
th, td{padding: var(--royal-space-xs) var(--royal-space-sm); text-align: left; border-bottom: 1px solid var(--royal-border-light);}
button{font-family: inherit; cursor: pointer; border: none; outline: none; transition: var(--royal-transition);}
input,textarea,select{font-family: inherit; outline: none; transition: var(--royal-transition);}

.royal-container{max-width: 80rem; /* 1280px */ margin: 0 auto; padding: 0 var(--royal-space-md);}

/* ===== HEADER & NAVIGATION ===== */
.royal-header{background: rgba(255, 255, 255); backdrop-filter: blur(1.25rem); box-shadow: var(--royal-shadow-sm); position: fixed; width: 100%; top: 0; z-index: 1000; transition: var(--royal-transition); border-bottom: 1px solid var(--royal-border-light);}
.royal-navbar{display: flex; justify-content: space-between; align-items: center; padding: 1rem 0;}
.royal-logo{display: flex; align-items: center; gap: 0.625rem;}
.royal-logo a{width: 4.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; font-size: var(--royal-font-md);}
.royal-logo-icon{width: 4.25rem; height: 2.25rem; background: var(--royal-primary-blue); border-radius: var(--royal-radius); display: flex; align-items: center;
    justify-content: center; color: white; font-size: var(--royal-font-md);}
.royal-logo-text{font-size: var(--royal-font-md); font-weight: 700; color: var(--royal-primary-blue);}
.footer-logo-icon{width: 4.25rem; height: 2.25rem; display: flex; align-items: center;justify-content: center;}
.royal-framework-tag{background: var(--royal-gradient-primary); color: white; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: var(--royal-font-xs); font-weight: 600; margin-left: 0.3125rem;}
.royal-demo-tag{background: var(--royal-accent-green); color: white; padding: 0.25rem 0.625rem; border-radius: 0.75rem; font-size: var(--royal-font-xs); font-weight: 600;}
.royal-nav-menu{display: flex; list-style: none; gap: var(--royal-space-lg); align-items: center;}
.royal-nav-menu>li{position: relative; padding: 0.6rem 0;}
.royal-nav-menu a{text-decoration: none; color: var(--royal-text-dark); font-weight: 500; border-radius: var(--royal-radius); transition: var(--royal-transition); display: flex; align-items: center; gap: 0.5rem;}
.royal-nav-menu a.royal-active{color: var(--royal-primary-blue); font-weight: 600;}
/* Dropdown Menu */
.royal-dropdown-menu{position: absolute; top: 100%; left: 0; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(1.25rem); border-radius: var(--royal-radius-md); box-shadow: var(--royal-shadow-md); min-width: 12.5rem; padding: 0.5rem 0; opacity: 0; visibility: hidden; transform: translateY(0.625rem); transition: var(--royal-transition); border: 1px solid rgba(255, 255, 255, 0.2); z-index: 1001; list-style: none;}
.royal-has-dropdown:hover .royal-dropdown-menu{opacity: 1; visibility: visible; transform: translateY(0);}
.royal-dropdown-menu li{margin: 0;}
.royal-dropdown-menu a{padding: 0.75rem 1.5rem; border-radius: 0; border: none; background: transparent; color: var(--royal-text-light); transition: var(--royal-transition);}
.royal-dropdown-menu a:hover{color: var(--royal-primary-blue); background: rgba(59, 130, 246, 0.05); transform: translateX(0.3125rem);}
/* Dropdown Arrow Animation */
.royal-has-dropdown>a .fa-chevron-down{transition: transform 0.3s ease; font-size: var(--royal-font-xs);}
.royal-has-dropdown:hover>a .fa-chevron-down{transform: rotate(180deg);}
.royal-header-actions{display: flex; gap: var(--royal-space-sm); align-items: center;}
.royal-has-dropdown .royal-dropdown-menu{min-width: 120px;}
.lang-btn{display: block; padding: 0.5rem 1rem; transition: all 0.3s ease; text-align: center;}
.lang-btn:hover{background-color: var(--royal-primary-color); color: white;}
.royal-loading{pointer-events: none; opacity: 0.7;}
/* language css */
.royal-language-current{color: var(--royal-blue-500) !important;}
/* Mobile Menu Button */
.royal-mobile-menu-btn{display: none; flex-direction: column; justify-content: space-between; width: 1.875rem; height: 1.3125rem; background: transparent; border: none; cursor: pointer; padding: 0;}
.royal-mobile-menu-btn span{display: block; height: 0.1875rem; width: 100%; background-color: var(--royal-text-dark); border-radius: 0.1875rem; transition: var(--royal-transition);}
/* ===== BUTTONS ===== */
.royal-btn{padding: 0.6rem 1.5rem; border: none; border-radius: var(--royal-radius-xl); cursor: pointer; font-weight: 600; transition: var(--royal-transition); position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: var(--royal-font-sm);}
.royal-btn::before{content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: var(--royal-transition-slow);}
.royal-btn:hover::before{left: 100%;}
.royal-btn-primary{background: var(--royal-gradient-primary); color: white; box-shadow: var(--royal-shadow), 0 0.25rem 0.875rem rgba(30, 64, 175, 0.2);}
.royal-btn-primary:hover{transform: translateY(-0.125rem); box-shadow: var(--royal-shadow-md), 0 0.5rem 1.5625rem rgba(30, 64, 175, 0.5); color: white;}
.royal-btn-free{background: var(--royal-gradient-green); color: white; box-shadow: var(--royal-shadow), 0 0.25rem 0.875rem rgba(5, 150, 105, 0.2); border-radius: var(--royal-radius-xl);}
.royal-btn-free:hover{transform: translateY(-0.125rem); box-shadow: var(--royal-shadow-md), 0 0.5rem 1.5625rem rgba(5, 150, 105, 0.5); color: white;}
.royal-btn-outline{background: transparent; border: 1.5px solid var(--royal-primary-blue); color: var(--royal-primary-blue);}
.royal-btn-outline:hover{background: var(--royal-primary-blue); color: white;}
.royal-btn-sm{padding: 0.4rem 1.2rem; border: none; border-radius: var(--royal-radius-sm); cursor: pointer; transition: var(--royal-transition); font-size: var(--royal-font-sm); position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;}
/* ===== CARDS & COMPONENTS ===== */
.royal-card{background: var(--royal-bg-white); border-radius: var(--royal-radius-md); padding: var(--royal-space-lg); box-shadow: var(--royal-shadow); transition: var(--royal-transition); border: 1px solid var(--royal-border-light); position: relative; overflow: hidden;}
.royal-card:hover{transform: translateY(-0.3125rem); box-shadow: var(--royal-shadow-md);}
.royal-tag{position: absolute; top: 0.9375rem; right: 0.9375rem; padding: 0.4rem 0.8rem; border-radius: 0.9375rem; color: white; font-weight: 600; font-size: var(--royal-font-xs); text-transform: uppercase; z-index: 2;}
.royal-tag-type1{background: linear-gradient(135deg, #ff6b6b, #ee5a52);}
.royal-tag-type2{background: linear-gradient(135deg, #4ecdc4, #44a08d);}
.royal-tag-type3{background: linear-gradient(135deg, #ffd93d, #ff9a3d);}
/* Section Titles */
.royal-section-title{text-align: center; margin-bottom: var(--royal-space-xl);}
.royal-section-title h2{font-size: var(--royal-font-xl); color: var(--royal-text-dark); margin-bottom: var(--royal-space-sm); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: var(--royal-space-sm);}
.royal-section-title h2:before,
.royal-section-title h2:after{content: '◆'; color: var(--royal-primary-blue); font-size: var(--royal-font-sm); animation: royal-diamond-bounce 2s ease-in-out infinite;}
.royal-section-title h2:before{animation-delay: 0s;}
.royal-section-title h2:after{animation-delay: 0.5s;}
@keyframes royal-diamond-bounce{0%, 100%{transform: translateY(0);} 50%{transform: translateY(-0.1875rem);}}
.royal-section-title p{color: var(--royal-text-light); max-width: 37.5rem; margin: 0 auto; font-size: var(--royal-font-md); line-height: 1.6; position: relative;}
/* ===== FOOTER ===== */
.royal-footer{background: var(--royal-text-dark); color: white; padding: var(--royal-space-xl) 0 var(--royal-space-md); position: relative;}
.royal-footer:before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0.1875rem; background: var(--royal-primary-blue);}
.royal-footer-content{display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: var(--royal-space-xl); margin-bottom: var(--royal-space-xl);}
.royal-footer-about .royal-footer-logo{display: flex; align-items: center; gap: 0.625rem; margin-bottom: var(--royal-space-sm);}
.royal-footer-about .royal-logo-icon{width: 2.25rem; height: 2.25rem; background: var(--royal-primary-blue); border-radius: var(--royal-radius); display: flex;
    align-items: center; justify-content: center; color: white; font-size: var(--royal-font-md);}
.royal-footer-about .royal-logo-text{font-size: var(--royal-font-md); font-weight: 700; color: white;}
.royal-footer-about p{color: #d1d5db; line-height: 1.6; margin-bottom: var(--royal-space-md); font-size: var(--royal-font-sm);}
.royal-powered-by{color: #9ca3af; font-size: var(--royal-font-sm); margin-top: var(--royal-space-sm);}
.royal-powered-by strong{color: var(--royal-blue-300);}
.royal-footer-links h3{margin-bottom: var(--royal-space-sm); color: white; font-weight: 600; font-size: var(--royal-font-default);}
.royal-footer-links ul{list-style: none;}
.royal-footer-links li{margin-bottom: 0.6rem;}
.royal-footer-links a{color: #d1d5db; text-decoration: none; transition: var(--royal-transition); font-size: var(--royal-font-sm);}
.royal-footer-links a:hover{color: white;}
.royal-footer-bottom{text-align: center; padding-top: var(--royal-space-md); border-top: 1px solid #374151; color: #9ca3af; font-size: var(--royal-font-sm);}
.royal-footer-bottom a{color: #d1d5db;}
.royal-footer-bottom a:hover{color: white;}
/* ===== FIXED SIDEBAR ===== */
.royal-fixed-sidebar{position: fixed; right: 1.25rem; bottom: 5%; transform: translateY(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 0.9375rem;}
.royal-fixed-btn{width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: var(--royal-font-md); box-shadow: var(--royal-shadow); cursor: pointer; transition: var(--royal-transition); position: relative;}
.royal-fixed-btn:hover{transform: translateY(-0.3125rem); box-shadow: var(--royal-shadow-md);}
.royal-fixed-btn.royal-search{background: linear-gradient(135deg, #059669 0%, #166547 100%);}
.royal-fixed-btn.royal-search a{display: block;}
.royal-fixed-btn.royal-search a:hover{color: #fff;}
.royal-fixed-btn.royal-consult{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);}
.royal-fixed-btn.royal-download{background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);}
.royal-fixed-btn.royal-top{background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);}
.royal-fixed-btn .royal-tooltip{position: absolute; right: 4.375rem; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.8); color: white; padding: 0.3125rem 0.625rem; border-radius: 0.25rem; font-size: var(--royal-font-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s;}
.royal-fixed-btn:hover .royal-tooltip{opacity: 1;}
/* ===== MODALS ===== */
.royal-modal{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(0.5rem); z-index: 2000; align-items: center; justify-content: center; padding: 1.25rem; opacity: 0; transition: opacity 0.3s ease;}
.royal-modal.show{display: flex; opacity: 1;}
.royal-modal-content{background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border-radius: var(--royal-radius-xl); padding: var(--royal-space-xl); max-width: 30rem; width: 100%; box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1); position: relative; animation: royal-modalSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid rgba(255, 255, 255, 0.2); overflow: hidden;}
@keyframes royal-modalSlideIn{from{opacity: 0; transform: translateY(3.125rem) scale(0.9);} to{opacity: 1; transform: translateY(0) scale(1);}}
.royal-close-modal{position: absolute; top: 1.25rem; right: 1.25rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--royal-gradient-red); border: none; font-size: var(--royal-font-md); cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; transition: var(--royal-transition); z-index: 10;}
.royal-close-modal:hover{background: var(--royal-red-500); color: white; transform: rotate(90deg);}
.royal-modal-header{text-align: center; margin-bottom: var(--royal-space-lg); padding-right: 2.5rem;}
.royal-modal-title{font-size: var(--royal-font-lg); font-weight: 700; color: var(--royal-text-dark); margin-bottom: var(--royal-space-sm); background: linear-gradient(135deg, var(--royal-text-dark) 0%, var(--royal-primary-blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.royal-modal-subtitle{color: var(--royal-text-light); font-size: var(--royal-font-md); line-height: 1.6;}
.royal-modal-body{margin-bottom: var(--royal-space-xl);}
.royal-download-actions{display: flex; justify-content: center; margin-top: 1rem;}
/* Contact Methods */
.royal-contact-methods{display: flex; flex-direction: column; gap: var(--royal-space-md); margin-bottom: var(--royal-space-lg);}
.royal-contact-method{display: flex; align-items: center; gap: var(--royal-space-md); padding: var(--royal-space-md); background: var(--royal-bg-white); border-radius: var(--royal-radius-lg); border: 1px solid var(--royal-border-light); transition: var(--royal-transition); text-decoration: none; color: inherit;}
.royal-contact-method:hover{transform: translateY(-0.125rem); box-shadow: var(--royal-shadow); border-color: var(--royal-primary-blue);}
.royal-contact-icon{width: 3.125rem; height: 3.125rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: var(--royal-font-md); flex-shrink: 0;}
.royal-contact-wechat .royal-contact-icon{background: linear-gradient(135deg, #07c160 0%, #05a050 100%);}
.royal-contact-phone .royal-contact-icon{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);}
.royal-contact-info{flex: 1;}
.royal-contact-name{font-weight: 600; color: var(--royal-text-dark); margin-bottom: 0.25rem; font-size: var(--royal-font-default);}
.royal-contact-detail{color: var(--royal-text-light); font-size: var(--royal-font-sm);}
.royal-contact-tip{font-size: var(--royal-font-xs); color: var(--royal-accent-green); font-weight: 500;}
/* QR Code Styles */
.royal-qrcode-section{text-align: center; background: var(--royal-bg-light); border-radius: var(--royal-radius-lg); padding: var(--royal-space-lg); margin: var(--royal-space-lg) 0; border: 1px solid var(--royal-border-light);}
.royal-qrcode-title{font-weight: 600; color: var(--royal-text-dark); margin-bottom: var(--royal-space-sm); font-size: var(--royal-font-default);}
.royal-qrcode-container{position: relative; display: inline-block; margin: var(--royal-space-sm) 0;}
.royal-qrcode{background: white; border-radius: var(--royal-radius); padding: 0.75rem; box-shadow: var(--royal-shadow); border: 1px solid var(--royal-border-light); display: flex; align-items: center; justify-content: center;}
.royal-qrcode img{width: 100%; height: 100%; border-radius: calc(var(--royal-radius) - 0.25rem); object-fit: cover;}
.royal-qrcode-tip{font-size: var(--royal-font-xs); color: var(--royal-text-light); margin-top: var(--royal-space-sm);}
/* Permission & Restriction Sections */
.royal-permission-section{background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-radius: var(--royal-radius-md); padding: var(--royal-space-md); margin: var(--royal-space-md) 0; border-left: 0.25rem solid var(--royal-primary-blue); position: relative;}
.royal-permission-section::before{content: '💡'; position: absolute; top: -0.75rem; left: -0.75rem; background: var(--royal-primary-blue); width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--royal-font-xs); color: white;}
.royal-permission-title{font-weight: 700; color: var(--royal-primary-blue); margin-bottom: var(--royal-space-sm); display: flex; align-items: center; gap: var(--royal-space-sm); font-size: var(--royal-font-default);}
.royal-permission-list{list-style: none; margin: var(--royal-space-sm) 0;}
.royal-permission-list li{padding: var(--royal-space-xs) 0; color: var(--royal-text-dark); display: flex; align-items: flex-start; gap: var(--royal-space-sm); font-size: var(--royal-font-sm);}
.royal-permission-list li::before{content: '✓'; color: var(--royal-accent-green); font-weight: bold; flex-shrink: 0; margin-top: 0.125rem;}
.royal-restriction-section{background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-radius: var(--royal-radius-lg); padding: var(--royal-space-md); margin: var(--royal-space-md) 0; border-left: 0.25rem solid var(--royal-red-500); position: relative;}
.royal-restriction-section::before{content: '⚠️'; position: absolute; top: -0.75rem; left: -0.75rem; background: var(--royal-red-500); width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--royal-font-xs); color: white;}
.royal-restriction-title{font-weight: 700; color: var(--royal-red-600); margin-bottom: var(--royal-space-sm); display: flex; align-items: center; gap: var(--royal-space-sm); font-size: var(--royal-font-default);}
.royal-restriction-list{list-style: none; margin: var(--royal-space-sm) 0;}
.royal-restriction-list li{padding: var(--royal-space-xs) 0; color: var(--royal-text-dark); display: flex; align-items: flex-start; gap: var(--royal-space-sm); font-size: var(--royal-font-sm);}
.royal-restriction-list li::before{content: '✗'; color: var(--royal-red-500); font-weight: bold; flex-shrink: 0; margin-top: 0.125rem;}
/* Warning Sections */
.royal-warning-section{background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-radius: var(--royal-radius-lg); padding: var(--royal-space-lg); margin: var(--royal-space-lg) 0; border: 0.125rem solid var(--royal-orange-300); text-align: center; position: relative;}
.royal-warning-section::before{content: '🚨'; position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); background: var(--royal-orange-500); width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--royal-font-md); color: white;}
.royal-warning-title{font-weight: 700; color: var(--royal-orange-700); margin-bottom: var(--royal-space-sm); font-size: var(--royal-font-default);}
.royal-warning-text{color: var(--royal-orange-700); line-height: 1.5; font-size: var(--royal-font-sm);}
/* Modal Actions */
.royal-modal-actions{display: flex; gap: var(--royal-space-md); margin-top: var(--royal-space-xl);}
.royal-modal-btn{flex: 1; padding: var(--royal-space-md) var(--royal-space-lg); border: none; border-radius: var(--royal-radius-lg); font-weight: 600; cursor: pointer; transition: var(--royal-transition); display: flex; align-items: center; justify-content: center; gap: var(--royal-space-sm); position: relative; overflow: hidden; font-size: var(--royal-font-default);}
.royal-modal-btn::before{content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: var(--royal-transition-slow);}
.royal-modal-btn:hover::before{left: 100%;}
.royal-modal-btn-primary{background: var(--royal-gradient-primary); color: white; box-shadow: var(--royal-shadow), 0 0.25rem 0.875rem rgba(30, 64, 175, 0.3);}
.royal-modal-btn-primary:hover{transform: translateY(-0.125rem); box-shadow: var(--royal-shadow-md), 0 0.375rem 1.25rem rgba(30, 64, 175, 0.4);}
.royal-modal-btn-secondary{background: var(--royal-bg-white); color: var(--royal-text-dark); border: 0.125rem solid var(--royal-border-light);}
.royal-modal-btn-secondary:hover{background: var(--royal-bg-light); border-color: var(--royal-border-medium); transform: translateY(-0.125rem);}
/* ===== FLOATING WARNING ===== */
.royal-floating-warning{position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); border: 0.125rem solid #ffd43b; border-radius: var(--royal-radius-lg); padding: var(--royal-space-lg); max-width: 37.5rem; width: 90%; box-shadow: var(--royal-shadow-lg); z-index: 1500; display: flex; align-items: center; justify-content: space-between; animation: royal-slideInUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); backdrop-filter: blur(0.625rem);}
@keyframes royal-slideInUp{from{bottom: -6.25rem; opacity: 0; transform: translateX(-50%) scale(0.9);} to{bottom: 1.25rem; opacity: 1; transform: translateX(-50%) scale(1);}}
.royal-warning-content{flex: 1; margin-right: var(--royal-space-md);}
.royal-warning-title{font-weight: 700; color: #856404; margin-bottom: var(--royal-space-xs); display: flex; align-items: center; gap: var(--royal-space-sm); font-size: var(--royal-font-default);}
.royal-warning-title::before{content: '❤️'; font-size: var(--royal-font-md);}
.royal-warning-text{color: #856404; line-height: 1.5; font-size: var(--royal-font-sm);}
.royal-close-warning{background: rgba(255, 255, 255, 0.5); border: none; width: 2rem; height: 2rem; border-radius: 50%; font-size: var(--royal-font-md); color: #856404; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--royal-transition); flex-shrink: 0;}
.royal-close-warning:hover{background: rgba(255, 255, 255, 0.8); transform: rotate(90deg);}
/* ===== NOTIFICATIONS ===== */
.royal-notification{position: fixed; top: 6.25rem; right: 1.25rem; background: white; border-radius: var(--royal-radius-lg); padding: var(--royal-space-md); box-shadow: var(--royal-shadow-lg); border-left: 0.25rem solid var(--royal-primary-blue); z-index: 9999; transform: translateX(25rem); transition: transform 0.3s ease; max-width: 18.75rem;}
.royal-notification.royal-show{transform: translateX(0);}
.royal-notification.royal-success{border-left-color: var(--royal-accent-green);}
.royal-notification.royal-error{border-left-color: var(--royal-red-500);}
.royal-notification.royal-info{border-left-color: var(--royal-primary-blue);}
.royal-notification-content{display: flex; align-items: center; gap: var(--royal-space-sm);}
.royal-notification-content i{font-size: var(--royal-font-md);}
.royal-notification.royal-success .royal-notification-content i{color: var(--royal-accent-green);}
.royal-notification.royal-info .royal-notification-content i{color: var(--royal-primary-blue);}
/* ===== PAGE HEADERS ===== */
.royal-page-header{color: white; padding: 13.5rem 0 10rem; position: relative; overflow: hidden; background: var(--royal-gradient-hero);}
.royal-page-header::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.2) 100%); z-index: 1;}
.royal-page-header-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 0; animation: backgroundBreath 8s ease-in-out infinite;}
@keyframes backgroundBreath{0%, 100%{transform: scale(1); filter: brightness(1);} 50%{transform: scale(1.08); filter: brightness(1.1);}}
.royal-page-header-content{position: relative; z-index: 2; text-align: center; max-width: 50rem; margin: 0 auto;}
.royal-page-header h1{font-size: var(--royal-font-xxl); margin-bottom: var(--royal-space-md); font-weight: 800; line-height: 1.1; text-shadow: 0 0.125rem 1.25rem rgba(0, 0, 0, 0.3); background: linear-gradient(45deg, #ffffff, #e5e5e5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.royal-page-header p{font-size: var(--royal-font-md); margin-bottom: var(--royal-space-lg); opacity: 0.95; line-height: 1.7; text-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.3);}
/* ===== PAGINATION ===== */
.royal-pagination{display: flex; justify-content: center; align-items: center; margin-top: var(--royal-space-xl); padding-top: var(--royal-space-lg); border-top: 1px solid var(--royal-border-light);}
.royal-pagination .pagination{display: flex; align-items: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0;}
.royal-pagination .pagination li{margin: 0;}
.royal-pagination .pagination li a,
.royal-pagination .pagination li span{display: flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; padding: 0.5rem 1rem; border-radius: var(--royal-radius); font-weight: 500; text-decoration: none; transition: var(--royal-transition); border: 1.5px solid transparent; font-size: var(--royal-font-sm);}
.royal-pagination .pagination li a{background: var(--royal-bg-white); color: var(--royal-text-light); border-color: var(--royal-border-light);}
.royal-pagination .pagination li a:hover{background: var(--royal-blue-50); color: var(--royal-primary-blue); border-color: var(--royal-blue-200); transform: translateY(-0.125rem); box-shadow: var(--royal-shadow-sm);}
.royal-pagination .pagination li.active span{background: var(--royal-gradient-primary); color: white; border-color: var(--royal-primary-blue); box-shadow: var(--royal-shadow), 0 0.25rem 0.75rem rgba(37, 99, 235, 0.2); font-weight: 600;}
.royal-pagination .pagination li.disabled span{background: var(--royal-bg-light); color: var(--royal-text-lighter); border-color: var(--royal-border-light); cursor: not-allowed; opacity: 0.6;}
.royal-pagination .pagination li:first-child a,
.royal-pagination .pagination li:first-child span,
.royal-pagination .pagination li:last-child a,
.royal-pagination .pagination li:last-child span{font-weight: 600; font-size: var(--royal-font-md);}
/* Breadcrumb */
.royal-page-breadcrumb{display: flex; justify-content: center; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.8); margin-bottom: var(--royal-space-lg); font-size: var(--royal-font-sm);}
.royal-page-breadcrumb a{color: rgba(255, 255, 255, 0.9); transition: var(--royal-transition);}
.royal-page-breadcrumb a:hover{color: white;}
.royal-page-breadcrumb span{color: var(--royal-blue-300);}
/* ===== CATEGORY & ARTICLE PAGES ===== */
.royal-category-content{padding: 0 0 4rem; background: var(--royal-bg-light);}
.royal-article-content{padding: 4rem 0 4rem;}
/* ===== PRODUCTS SECTION ===== */
.royal-products-section{background: var(--royal-bg-white); padding: var(--royal-space-xxl) 0;}
.royal-products-tabs{display: flex; justify-content: center; margin-bottom: var(--royal-space-xl); background: var(--royal-bg-white); border-radius: var(--royal-radius-xl); padding: 0.375rem; width: fit-content; margin-left: auto; margin-right: auto; box-shadow: var(--royal-shadow-sm); border: 1px solid var(--royal-border-light);}
.royal-product-tab{padding: 0.6rem 1.5rem; cursor: pointer; border-radius: 1.25rem; transition: var(--royal-transition); font-weight: 500; color: var(--royal-text-light); font-size: var(--royal-font-default);}
.royal-product-tab.royal-active{background: var(--royal-gradient-primary); color: white; box-shadow: var(--royal-shadow);}
.royal-products-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--royal-space-lg);}
.royal-product-card{background: var(--royal-bg-white); border-radius: var(--royal-radius-md); padding: var(--royal-space-md); box-shadow: var(--royal-shadow); transition: var(--royal-transition); text-align: center; border: 1px solid var(--royal-border-light); position: relative; overflow: hidden;}
.royal-product-card:hover{transform: translateY(-0.3125rem); box-shadow: var(--royal-shadow-md); transition: var(--royal-transition-slow);}
.royal-product-image{width: 100%; position: relative; overflow: hidden; margin-bottom: var(--royal-space-md); background: var(--royal-blue-50); display: flex; align-items: center; justify-content: center; border-radius: var(--royal-radius); aspect-ratio: 4 / 3;}
/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 4 / 3){.royal-product-image::before{content: ''; display: block; padding-top: 75%;} .royal-product-image img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}}
.royal-product-image img{width: 100%; height: 100%; object-fit: cover; transition: var(--royal-transition-slow);}
.royal-product-card:hover .royal-product-image img{transform: scale(1.1);}
.royal-product-card h3{margin-bottom: var(--royal-space-sm); color: var(--royal-text-dark); font-weight: 600;}
.royal-product-card h3 a{font-size: var(--royal-font-default);}
.royal-product-card p{color: var(--royal-text-lighter); margin-bottom: var(--royal-space-sm); font-size: var(--royal-font-sm); line-height: 1.5;}
.royal-product-stats{display: flex; justify-content: space-between; border-top: 1px solid #eee; padding-top: 0.9375rem;}
.royal-product-stats .royal-stat-icon{width: 1.875rem; height: 1.875rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: var(--royal-font-xs);}
.royal-product-stats .royal-stat-sales{background: var(--royal-gradient-red);}
.royal-product-stats .royal-stat-favorites{background: var(--royal-gradient-orange);}
.royal-product-stats .royal-stat-count{font-weight: 600; color: var(--royal-text-dark); font-size: var(--royal-font-sm);}
/* ===== CATEGORY NAVIGATION ===== */
.royal-category-nav{display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; padding: 4rem 0;}
.royal-category-nav a{font-weight: 700; padding: 0.8rem 1.5rem; cursor: pointer; border-radius: 1.5625rem; transition: var(--royal-transition); color: var(--royal-text-light); background: transparent; border: 1.5px solid transparent; text-decoration: none; display: inline-block; border-color: var(--royal-blue-100); font-size: var(--royal-font-default);}
.royal-category-nav a.royal-active{background: var(--royal-gradient-primary); color: white; box-shadow: var(--royal-shadow), 0 0.25rem 0.75rem rgba(37, 99, 235, 0.2); border-color: var(--royal-primary-blue);}
.royal-category-nav a:hover:not(.royal-active){background: var(--royal-blue-50); color: var(--royal-primary-blue); border-color: var(--royal-blue-200);}
/* ===== ARTICLE DETAIL PAGE ===== */
.royal-article-container{display: grid; gap: var(--royal-space-lg); align-items: start;}
.royal-article-main{background: var(--royal-bg-white); border-radius: var(--royal-radius-lg); box-shadow: var(--royal-shadow); border: 1px solid var(--royal-border-light); overflow: hidden; padding: var(--royal-space-xl);}
.royal-article-header{padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--royal-border-light);}
.royal-article-title{font-size: var(--royal-font-xl); color: var(--royal-text-dark); font-weight: 700; line-height: 1.3; margin-bottom: var(--royal-space-md);}
.royal-article-meta{display: flex; align-items: center; gap: var(--royal-space-lg); color: var(--royal-text-light);}
.royal-article-meta-item{display: flex; align-items: center; gap: 0.5rem; font-size: var(--royal-font-sm);}
.royal-article-meta-item i{color: var(--royal-primary-blue); width: 1rem;}
.royal-article-image{width: 100%; overflow: hidden; position: relative;}
.royal-article-image img{width: 100%; height: 100%; object-fit: cover;}
.royal-article-text{font-size: var(--royal-font-default); line-height: 1.8; color: var(--royal-text-dark);}
.royal-article-text p{margin-bottom: var(--royal-space-md);}
.royal-article-text h2{font-size: var(--royal-font-xl); color: var(--royal-text-dark); font-weight: 600; margin: var(--royal-space-xl) 0 var(--royal-space-md); padding-bottom: 0.5rem; border-bottom: 0.125rem solid var(--royal-primary-blue);}
.royal-article-text h3{font-size: var(--royal-font-lg); color: var(--royal-text-dark); font-weight: 600; margin: var(--royal-space-lg) 0 var(--royal-space-sm);}
.royal-article-text h4{font-size: var(--royal-font-md); color: var(--royal-text-dark); font-weight: 600; margin: var(--royal-space-md) 0 var(--royal-space-sm);}
.royal-article-text blockquote{background: var(--royal-blue-50); border-left: 0.25rem solid var(--royal-primary-blue); padding: var(--royal-space-md); margin: var(--royal-space-lg) 0; font-style: italic; border-radius: 0 var(--royal-radius) var(--royal-radius) 0; color: var(--royal-text-dark);}
.royal-article-text ul,
.royal-article-text ol{margin: var(--royal-space-md) 0; padding-left: var(--royal-space-lg);}
.royal-article-text li{margin-bottom: 0.5rem; line-height: 1.6;}
.royal-article-text table{width: 100%; border-collapse: collapse; margin: var(--royal-space-lg) 0; background: var(--royal-bg-white);}
.royal-article-text table th{background: var(--royal-blue-50); padding: var(--royal-space-sm); text-align: left; font-weight: 600; border: 1px solid var(--royal-border-light);}
.royal-article-text table td{padding: var(--royal-space-sm); border: 1px solid var(--royal-border-light);}
.royal-article-text img{max-width: 100%; height: auto; border-radius: var(--royal-radius); margin: var(--royal-space-md) 0;}
.royal-article-text a{color: var(--royal-primary-blue); text-decoration: none; transition: var(--royal-transition);}
.royal-article-text a:hover{text-decoration: underline;}
/* Article Features */
.royal-article-features{background: var(--royal-gradient-section); padding: var(--royal-space-lg); border-radius: var(--royal-radius-md); margin: var(--royal-space-xl) 0;}
.royal-article-features h3{color: var(--royal-primary-blue); margin-bottom: var(--royal-space-md); font-size: var(--royal-font-lg);}
.royal-article-features-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--royal-space-md);}
.royal-article-feature{display: flex; align-items: flex-start; gap: var(--royal-space-sm);}
.royal-article-feature i{color: var(--royal-primary-blue); font-size: var(--royal-font-md); margin-top: 0.2rem;}
.royal-article-feature span{font-size: var(--royal-font-sm);}
/* Article Navigation */
.royal-article-navigation{display: flex; justify-content: space-between; margin-top: 2.5rem; border-top: 1px solid #eee; padding-top: 1.25rem;}
.royal-article-nav-btn{display: flex; align-items: center; padding: 0.9375rem; border: 1px solid #e0e0e0; border-radius: 0.5rem; text-decoration: none; color: #333; transition: all 0.3s ease; flex: 0 0 48%; background: #fff;}
.royal-article-nav-btn:hover{border-color: #007bff; box-shadow: 0 0.125rem 0.5rem rgba(0, 123, 255, 0.1); transform: translateY(-0.125rem);}
.royal-article-nav-btn.royal-article-next{flex-direction: row-reverse; text-align: right;}
.royal-article-nav-btn.royal-article-nav-disabled{color: #999; cursor: not-allowed; background: #f8f9fa;}
.royal-article-nav-btn.royal-article-nav-disabled:hover{border-color: #e0e0e0; box-shadow: none; transform: none;}
.royal-article-nav-btn i{font-size: var(--royal-font-md); margin: 0 0.9375rem;}
.royal-article-nav-content{flex: 1;}
.royal-article-nav-label{font-size: var(--royal-font-sm); color: #666; margin-bottom: 0.3125rem;}
.royal-article-nav-title{font-size: var(--royal-font-sm); font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.royal-article-nav-disabled .royal-article-nav-label,
.royal-article-nav-disabled .royal-article-nav-title{color: #999;}
/* Article Footer */
.royal-article-footer{padding: 2rem 0; border-top: 1px solid var(--royal-border-light); display: flex; justify-content: space-between; align-items: center;}
.royal-article-tags{display: flex; align-items: center; gap: var(--royal-space-sm); flex-wrap: wrap;}
.royal-article-tag{padding: 0.4rem 0.8rem; background: var(--royal-blue-50); color: var(--royal-primary-blue); border-radius: 0.9375rem; font-size: var(--royal-font-sm); font-weight: 500; transition: var(--royal-transition); border: 1px solid var(--royal-blue-100);}
/* ===== SPONSOR MODAL ===== */
.royal-sponsor-content{text-align: center;}
.royal-sponsor-text{margin-bottom: var(--royal-space-lg);}
.royal-sponsor-text p{margin-bottom: var(--royal-space-sm); line-height: 1.6; color: var(--royal-text-dark); font-size: var(--royal-font-sm);}
.royal-sponsor-methods{margin: var(--royal-space-xl) 0;}
.royal-sponsor-method{display: flex; justify-content: center; gap: var(--royal-space-xl); flex-wrap: wrap;}
.royal-sponsor-qrcode{text-align: center;}
.royal-sponsor-qrcode .royal-qrcode{width: 12.5rem; height: 12.5rem; margin: 0 auto var(--royal-space-sm);}
.royal-sponsor-label{font-weight: 600; color: var(--royal-text-dark); font-size: var(--royal-font-default);}
.royal-sponsor-note{margin-top: var(--royal-space-xl);}
.royal-sponsor-note .royal-permission-section{background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-left: 0.25rem solid var(--royal-primary-blue);}
/* ===== BROWSER ALERT ===== */
.royal-browser-alert{display: none; position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: white; z-index: 9999; padding: 0.9375rem 0; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);}
.royal-browser-alert-content{max-width: 75rem; margin: 0 auto; display: flex; align-items: center; gap: 1.25rem; padding: 0 1.25rem;}
.royal-browser-icon{font-size: var(--royal-font-xl); opacity: 0.9;}
.royal-browser-text h3{margin: 0 0 0.5rem 0; font-size: var(--royal-font-md); font-weight: 600;}
.royal-browser-text p{margin: 0 0 0.75rem 0; opacity: 0.9; font-size: var(--royal-font-sm);}
.royal-browser-links{display: flex; gap: 0.9375rem;}
.royal-browser-links a{color: white; text-decoration: none; padding: 0.375rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 0.25rem; transition: all 0.3s ease; font-size: var(--royal-font-sm);}
.royal-browser-links a:hover{background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5);}
.royal-browser-close{background: none; border: none; color: white; font-size: var(--royal-font-md); cursor: pointer; padding: 0.3125rem; margin-left: auto; opacity: 0.8; transition: opacity 0.3s ease;}
.royal-browser-close:hover{opacity: 1;}
.layui-layer{border-radius: 0.4rem !important;}
.layui-layer-content{border-radius: 0.4rem !important;}
/* ===== SCROLLBAR STYLING ===== */
::-webkit-scrollbar{width: 0.375rem;}
::-webkit-scrollbar-track{background: #f1f1f1;}
::-webkit-scrollbar-thumb{background: var(--royal-primary-blue); border-radius: 0.1875rem;}
::-webkit-scrollbar-thumb:hover{background: var(--royal-blue-600);}
/* Text Selection */
::selection{background: var(--royal-blue-200); color: var(--royal-text-dark);}
/* ===== UTILITY CLASSES ===== */
.royal-modal-content.royal-animate-in{animation: royal-modalSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.royal-fixed-btn.royal-top.royal-visible{opacity: 1 !important; visibility: visible !important;}
body.royal-modal-open{overflow: hidden;}
.royal-contact-method.royal-clicked{transform: scale(0.98);}