* {margin: 0;padding: 0;box-sizing: border-box;}
.menu-item {position: relative;padding-right: 40px;}
.menu-link-icon {position: absolute;right: 8px;top: 50%;transform: translateY(-50%);display: inline-flex;align-items: center;justify-content: center;width: 24px;height: 24px;text-decoration: none;opacity: 0.7;transition: opacity 0.3s;}
.menu-link-icon:hover {opacity: 1;}
.menu-link-icon i {font-size: 14px;color: #ffffff;}
body {background-color: #f0f2f5;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;height: 100vh;overflow: hidden;}
.container {display: flex;height: 100vh;}
.sidebar {width: 180px;background-color: #2c3e50;color: white;display: flex;flex-direction: column;overflow-y: auto;transition: width 0.3s ease;}
.sidebar.collapse {width: 56px;}
.sidebar-header {height: 60px;background-color: #34495e;border-bottom: 1px solid #4a6073;display: flex;align-items: center;justify-content: center;position: relative;flex-shrink: 0;}
.sidebar-logo-link {display: flex;align-items: center;justify-content: center;text-decoration: none;color: inherit;width: 100%;height: 100%;}
.sidebar-logo-icon {display: none;font-size: 24px;color: white;}
.sidebar.collapse .sidebar-logo-icon {display: block;opacity: 1;}
.sidebar-header h1 {font-size: 20px;margin: 0;transition: opacity 0.3s ease;color: white;}
.sidebar.collapse .sidebar-header h1 {opacity: 0;position: absolute;}
.sidebar.collapse .sidebar-header {justify-content: center;}
.header-actions .mobile-menu-toggle {width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;cursor: pointer;color: #2c3e50;font-size: 18px;transition: all 0.3s ease;margin-left: 10px;}
.header-actions .mobile-menu-toggle:hover {color: #34495e;background-color: rgba(0, 0, 0, 0.05);border-radius: 4px;}
.sidebar-menu {flex: 1;padding: 10px 0;}
.menu-group {margin-bottom: 5px;}
.menu-group-title {display: flex;align-items: center;padding: 12px 15px;font-size: 14px;color: #bdc3c7;cursor: pointer;transition: all 0.3s ease;}
.menu-group-title:hover {background-color: #34495e;color: white;}
.sidebar.collapse .menu-group-title {justify-content: center;padding: 12px 0;}
.menu-group-title .layui-icon {margin-right: 10px;font-size: 16px;}
.sidebar.collapse .menu-group-title .title-text {display: none;}
.menu-sub {background-color: #233140;max-height: 0;overflow: hidden;transition: max-height 0.3s ease;}
.menu-sub.show {max-height: 500px;}
.menu-item {display: flex;align-items: center;padding: 10px 15px 10px 40px;font-size: 14px;color: #ecf0f1;cursor: pointer;transition: all 0.3s ease;position: relative;}
.menu-item:hover {background-color: #34495e;}
.sidebar.collapse .menu-item {padding: 10px 0;justify-content: center;position: relative;}
.menu-item i {margin-right: 8px;font-size: 14px;}
.sidebar.collapse .menu-item .menu-item-text {display: none;}
.menu-item.active {background-color: #3498db;color: white;}
.website-icon-img {width: 24px;height: 24px;object-fit: contain;margin-right: 8px;}
.menu-item img {width: 16px;height: 16px;object-fit: contain;margin-right: 8px;}
.content {flex: 1;display: flex;flex-direction: column;overflow: hidden;}
.content-header {height: 60px;min-height: 60px;max-height: 60px;background-color: white;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);display: flex;align-items: center;justify-content: space-between;padding: 0 20px;z-index: 100;flex-shrink: 0;}
.header-title {font-size: 18px;font-weight: 600;color: #2c3e50;}
.header-actions {display: flex;align-items: center;}
.btn {padding: 8px;width: 36px;height: 36px;background-color: #3498db;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 16px;display: flex;align-items: center;justify-content: center;transition: background-color 0.3s ease;margin-right: 8px;}
.btn:last-child {margin-right: 0;}
.btn:hover {background-color: #2980b9;}
.content-main {flex: 1;display: flex;flex-direction: column;background-color: #f0f2f5;position: relative;overflow: hidden;}
.website-frame-container {flex: 1;position: relative;overflow: hidden;}
.website-frame {width: 100%;height: 100%;border: none;}
.back-to-categories {position: absolute;top: 10px;right: 10px;background-color: #3498db;color: white;border: none;border-radius: 4px;padding: 8px 16px;cursor: pointer;font-size: 14px;z-index: 100;transition: background-color 0.3s;}
.back-to-categories:hover {background-color: #2980b9;}
.category-content {flex: 1;padding: 20px;overflow-y: auto;height: calc(100vh - 120px);}
@media screen and (max-height: 600px) {.sidebar-header, .content-header {height: 50px;min-height: 50px;max-height: 50px;padding: 0 15px;}.category-content {height: calc(100vh - 100px);padding: 15px;}.sidebar-header h1 {font-size: 16px;}.header-title {font-size: 16px;}}
@media screen and (max-height: 400px) {.sidebar-header, .content-header {height: 44px;min-height: 44px;max-height: 44px;padding: 0 10px;}.category-content {height: calc(100vh - 88px);padding: 10px;}.sidebar-header h1 {font-size: 14px;}.header-title {font-size: 14px;}}
.website-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 20px;margin-top: 20px;}
.website-card {background-color: white;border-radius: 8px;padding: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);transition: all 0.3s ease;cursor: pointer;}
.website-card:hover {transform: translateY(-3px);box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);}
.website-card-header {display: flex;align-items: center;margin-bottom: 15px;}
.website-icon {width: 48px;height: 48px;background-color: #3498db;border-radius: 8px;display: flex;align-items: center;justify-content: center;font-size: 24px;color: white;margin-right: 15px;}
.website-info h3 {font-size: 18px;color: #2c3e50;margin: 0 0 5px 0;}
.website-info p {font-size: 14px;color: #7f8c8d;margin: 0;}
.website-desc {font-size: 14px;color: #34495e;line-height: 1.6;}
.website-footer {margin-top: 15px;display: flex;justify-content: space-between;align-items: center;}
.visit-time {font-size: 12px;color: #95a5a6;}
.visit-btn {padding: 4px 12px;background-color: #2ecc71;color: white;border: none;border-radius: 4px;font-size: 12px;cursor: pointer;transition: background-color 0.3s ease;}
.visit-btn:hover {background-color: #27ae60;}
.category-section {margin-bottom: 40px;}
.empty-state {text-align: center;padding: 60px 20px;color: #7f8c8d;}
.empty-state i {font-size: 64px;margin-bottom: 20px;color: #bdc3c7;}
.empty-state h3 {font-size: 18px;margin-bottom: 10px;}
::-webkit-scrollbar {width: 6px;height: 6px;}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background: #c1c1c1;border-radius: 3px;}
::-webkit-scrollbar-thumb:hover {background: #a8a8a8;}
.seo-content {padding: 20px;background-color: #fff;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);margin-bottom: 20px;}
.seo-content h2 {color: #333;font-size: 24px;margin-bottom: 15px;border-bottom: 2px solid #1E9FFF;padding-bottom: 10px;}
.seo-content p {color: #666;font-size: 16px;margin-bottom: 15px;line-height: 1.6;}
.seo-content ul {color: #666;font-size: 16px;margin-bottom: 15px;padding-left: 25px;}
.seo-content li {margin-bottom: 10px;line-height: 1.6;}
.seo-content strong {color: #1E9FFF;font-weight: bold;}
@media (max-width: 768px) {.sidebar {position: absolute;left: -180px;height: 100vh;z-index: 1000;}.sidebar.active {left: 0;}.mobile-menu-toggle {display: block;}}