:root {--bg-primary:#0f1117;--bg-secondary:#161822;--bg-card:#1c1f2e;--bg-card-hover:#252840;--border-color:#2a2d42;--text-primary:#e4e6f0;--text-secondary:#8b8fa3;--accent:#6c5ce7;--accent-hover:#7d6ff0;--accent-glow:rgba(108, 92, 231, 0.3);--danger:#ff4757;--success:#2ed573;--warning:#ffa502;--sidebar-bg:#13151f;--input-bg:#1c1f2e;--input-border:#2a2d42;--shadow:0 4px 24px rgba(0,0,0,0.3);--radius:12px;--radius-sm:8px;--transition:0.2s ease;--glass-bg:rgba(28, 31, 46, 0.92);--glass-border:rgba(255, 255, 255, 0.08);--glass-blur:none}
[data-theme="light"] {--bg-primary:#f0f2f5;--bg-secondary:#ffffff;--bg-card:#ffffff;--bg-card-hover:#f8f9fa;--border-color:#e0e3e8;--text-primary:#1a1d28;--text-secondary:#6b7280;--accent:#6c5ce7;--accent-hover:#5a4bd6;--accent-glow:rgba(108, 92, 231, 0.15);--danger:#ff4757;--success:#2ed573;--warning:#ffa502;--sidebar-bg:#ffffff;--input-bg:#f5f6f8;--input-border:#d1d5db;--shadow:0 4px 24px rgba(0,0,0,0.08);--glass-bg:rgba(255, 255, 255, 0.95);--glass-border:rgba(0, 0, 0, 0.08)}
*,
*::before,
*::after {margin:0;padding:0;box-sizing:border-box}
html {scroll-behavior:smooth}
body {font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;transition:background var(--transition), color var(--transition);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a {color:var(--accent);text-decoration:none;transition:color var(--transition)}
a:hover {color:var(--accent-hover)}
img {max-width:100%;height:auto}
.header {position:fixed;top:0;left:0;right:0;background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);display:flex;flex-direction:column;z-index:1000;transition:background var(--transition)}
.header-top {display:flex;align-items:center;width:100%;height:56px;padding:0 16px;gap:8px}
.hamburger {width:36px;height:36px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer;background:none;border:1px solid transparent;border-radius:var(--radius-sm);transition:all 0.25s cubic-bezier(0.4,0,0.2,1);flex-shrink:0}
.hamburger:hover {background:var(--bg-card);border-color:var(--glass-border)}
.hamburger span {width:16px;height:2px;background:var(--text-primary);border-radius:2px;transition:all 0.3s cubic-bezier(0.68,-0.6,0.32,1.6);transform-origin:center}
.hamburger.active span:nth-child(1) {transform:translateY(6px) rotate(45deg)}
.hamburger.active span:nth-child(2) {opacity:0;transform:scaleX(0)}
.hamburger.active span:nth-child(3) {transform:translateY(-6px) rotate(-45deg)}
.logo {display:flex;align-items:center;gap:10px;margin-left:12px;font-size:19px;font-weight:800;color:var(--text-primary);letter-spacing:-0.5px;text-decoration:none;transition:opacity var(--transition)}
.logo:hover {opacity:0.85;color:var(--text-primary)}
.logo i {width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent-hover));border-radius:10px;color:#fff;font-size:16px;box-shadow:0 2px 8px var(--accent-glow);transition:transform 0.25s ease,box-shadow 0.25s ease}
.logo:hover i {transform:scale(1.05);box-shadow:0 4px 12px var(--accent-glow)}
.header-title {display:flex;align-items:center;gap:10px;margin-left:12px;font-size:16px;font-weight:700;color:var(--text-primary);min-width:0;white-space:nowrap}
.header-title i {width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--accent);background:var(--accent-glow);border-radius:8px;flex-shrink:0}
.search-bar {flex:1;max-width:480px;margin:0 16px;position:relative}
.search-bar input {width:100%;padding:9px 16px 9px 40px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:10px;color:var(--text-primary);font-size:13px;outline:none;transition:all 0.25s cubic-bezier(0.4,0,0.2,1)}
.search-bar input:focus {border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:var(--bg-card)}
.search-bar input::placeholder {color:var(--text-secondary);font-size:13px}
.search-bar i {position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-secondary);font-size:13px;transition:color 0.2s ease;pointer-events:none}
.search-bar input:focus ~ i {color:var(--accent)}
.sidebar {position:fixed;top:56px;left:0;width:280px;height:calc(100vh - 56px);background:var(--sidebar-bg);border-right:1px solid var(--border-color);z-index:999;transform:translateX(-100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);overflow-y:auto;padding:12px 0;-webkit-overflow-scrolling:touch}
.sidebar.open {transform:translateX(0)}
.sidebar-overlay {display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:998;opacity:0;transition:opacity 0.3s ease}
.sidebar-overlay.open {display:block;opacity:1}
body.sidebar-open {overflow:hidden}
.sidebar-menu {list-style:none;padding:0 10px}
.sidebar-menu li a {display:flex;align-items:center;gap:12px;padding:10px 14px;color:var(--text-secondary);border-radius:10px;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);font-size:13px;font-weight:500;position:relative}
.sidebar-menu li a:hover {background:var(--bg-card);color:var(--text-primary);transform:translateX(2px)}
.sidebar-menu li a.active {background:var(--accent-glow);color:var(--accent);font-weight:600}
.sidebar-menu li a.active::before {content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:55%;background:var(--accent);border-radius:0 3px 3px 0}
.sidebar-menu li a i {width:20px;text-align:center;font-size:15px;opacity:0.8}
.sidebar-menu li a.active i {opacity:1}

/* Submenu - lebih distinct dari menu utama */
.sidebar-has-submenu .sidebar-submenu-toggle {cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 14px;color:var(--text-secondary);border-radius:10px;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);font-size:13px;font-weight:500;position:relative;text-decoration:none}
.sidebar-has-submenu .sidebar-submenu-toggle:hover {background:var(--bg-card);color:var(--text-primary)}
.sidebar-has-submenu .sidebar-submenu-toggle i:first-child {width:20px;text-align:center;font-size:15px;opacity:0.8}
.sidebar-submenu-arrow {margin-left:auto;transition:transform 0.2s;font-size:11px !important;opacity:0.4 !important}
.sidebar-has-submenu.open .sidebar-submenu-arrow {transform:rotate(90deg)}
.sidebar-submenu {max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease;padding:0;list-style:none;margin:0;background:rgba(0,0,0,0.25);border-radius:8px}
.sidebar-submenu li {list-style:none}
.sidebar-submenu li a {display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:12px;color:var(--text-secondary);border-radius:8px;transition:all 0.2s;text-decoration:none}
.sidebar-submenu li a:hover {background:var(--bg-card);color:var(--text-primary)}
.sidebar-submenu li a.active {color:var(--accent);font-weight:600}
.sidebar-submenu li a i {font-size:11px;width:14px;text-align:center;opacity:0.6}
.sidebar-has-submenu.open .sidebar-submenu {max-height:600px;padding:4px 0;overflow-y:auto;-webkit-overflow-scrolling:touch}

.sidebar-divider {height:1px;background:var(--border-color);margin:10px 16px}
.sidebar-section-title {padding:8px 24px 6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-secondary);opacity:0.7}
.main-content {margin-top:56px;padding:20px;min-height:calc(100vh - 56px)}
body.has-category-bar .main-content {margin-top:102px;min-height:calc(100vh - 102px)}
body.no-sidebar .main-content {margin-left:0 !important}
body.no-sidebar .hamburger {display:none !important}
.tool-count-badge {font-size:10px;font-weight:700;color:var(--text-secondary);background:var(--bg-card);padding:4px 10px;border-radius:10px;border:1px solid var(--border-color);white-space:nowrap}
.category-bar {margin:0 -20px;padding:8px 20px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-top:1px solid var(--glass-border);background:var(--bg-secondary)}
.category-bar::-webkit-scrollbar {display:none}
.hero {text-align:center;padding:40px 20px 28px}
.hero h1 {font-size:30px;font-weight:800;margin-bottom:8px;background:linear-gradient(135deg,var(--accent),#a29bfe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.5px}
.hero p {color:var(--text-secondary);font-size:14px;max-width:500px;margin:0 auto;line-height:1.5}
.hero .stats {display:flex;justify-content:center;gap:32px;margin-top:16px}
.hero .stat {text-align:center}
.hero .stat-num {font-size:26px;font-weight:800;color:var(--accent);letter-spacing:-0.5px}
.hero .stat-label {font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
.categories-grid {display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:28px}
.cat-chip {padding:6px 14px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:20px;cursor:pointer;font-size:12px;font-weight:500;color:var(--text-secondary);transition:all 0.25s cubic-bezier(0.4,0,0.2,1);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;user-select:none}
.cat-chip:hover {background:var(--bg-card-hover);border-color:var(--accent);color:var(--text-primary);transform:translateY(-1px)}
.cat-chip.active {background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;border-color:transparent;box-shadow:0 2px 8px var(--accent-glow);font-weight:600}
.cat-chip:active {transform:scale(0.96)}
.cat-chip .count {background:rgba(255,255,255,0.15);padding:1px 7px;border-radius:10px;font-size:10px;font-weight:600;min-width:20px;text-align:center}
.cat-chip.active .count {background:rgba(255,255,255,0.2)}
.tools-grid {display:grid;grid-template-columns:1fr;gap:16px;max-width:1400px;margin:0 auto}
.tool-card {background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);padding:20px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);cursor:pointer;position:relative;overflow:hidden}
.tool-card::before {content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity 0.3s ease}
.tool-card:hover {background:var(--bg-card-hover);border-color:var(--accent);transform:translateY(-4px);box-shadow:0 8px 32px rgba(108,92,231,0.15)}
.tool-card:hover::before {opacity:1}
.tool-card .tool-icon {width:42px;height:42px;border-radius:10px;background:var(--accent-glow);display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--accent);font-size:17px;transition:all 0.25s ease}
.tool-card:hover .tool-icon {background:var(--accent);color:#fff;transform:scale(1.05)}
.tool-card h3 {font-size:14px;font-weight:600;margin-bottom:5px;letter-spacing:-0.2px}
.tool-card p {font-size:12px;color:var(--text-secondary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tool-card .tool-category {display:inline-block;margin-top:10px;font-size:10px;padding:3px 9px;border-radius:8px;background:var(--accent-glow);color:var(--accent);font-weight:600;letter-spacing:0.2px}
.empty-state {text-align:center;padding:60px 20px;color:var(--text-secondary)}
.empty-state i {font-size:48px;margin-bottom:16px;opacity:0.2}
.empty-state h3 {font-size:17px;margin-bottom:8px;color:var(--text-primary);font-weight:600}
.empty-state p {font-size:13px;max-width:320px;margin:0 auto;line-height:1.5}
.tool-page {max-width:900px;margin:0 auto}
.tool-back-btn {width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:var(--text-primary);text-decoration:none;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);flex-shrink:0;background:var(--bg-card);border:1px solid var(--border-color);font-size:14px}
.tool-back-btn:hover {background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 8px var(--accent-glow);transform:translateX(-2px)}
.tool-back-btn:active {transform:scale(0.92)}
.tool-header-name {font-size:16px;font-weight:700;color:var(--text-primary);margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.4px}
.tool-header-badge {padding:4px 12px;border-radius:20px;background:linear-gradient(135deg,var(--accent-glow),transparent);color:var(--accent);font-size:11px;font-weight:600;flex-shrink:0;margin-left:8px;letter-spacing:0.3px;border:1px solid var(--accent-glow);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tool-content {background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);padding:24px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tool-content textarea,
.tool-content input[type="text"],
.tool-content input[type="number"],
.tool-content select {width:100%;padding:11px 16px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:10px;color:var(--text-primary);font-size:13px;font-family:inherit;outline:none;margin-bottom:10px;transition:all 0.2s ease}
.tool-content textarea:focus,
.tool-content input:focus,
.tool-content select:focus {border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.tool-content textarea {min-height:140px;resize:vertical}
.tool-content label {display:block;font-size:12px;font-weight:500;margin-bottom:5px;color:var(--text-secondary)}
.tool-result {margin-top:14px;padding:14px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:10px;font-family:'JetBrains Mono',monospace;font-size:12px;white-space:pre-wrap;word-break:break-all;max-height:400px;overflow:auto;line-height:1.6}
.btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);font-family:inherit;position:relative;overflow:hidden;letter-spacing:-0.1px}
.btn:active {transform:scale(0.96)}
.btn-primary {background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;box-shadow:0 2px 8px var(--accent-glow)}
.btn-primary:hover {box-shadow:0 6px 20px var(--accent-glow);transform:translateY(-1px)}
.btn-primary:active {transform:translateY(0) scale(0.96);box-shadow:0 2px 8px var(--accent-glow)}
.btn-danger {background:linear-gradient(135deg,#ff4757,#ff3344);color:#fff;box-shadow:0 2px 8px rgba(255,71,87,0.3)}
.btn-danger:hover {box-shadow:0 6px 20px rgba(255,71,87,0.4);transform:translateY(-1px)}
.btn-danger:active {transform:translateY(0) scale(0.96);box-shadow:0 2px 8px rgba(255,71,87,0.3)}
.btn-outline {background:transparent;color:var(--accent);border:1px solid var(--accent);font-weight:500}
.btn-outline:hover {background:var(--accent);color:#fff;box-shadow:0 4px 12px var(--accent-glow);transform:translateY(-1px)}
.btn-outline:active {transform:scale(0.96)}
.btn-ghost {background:transparent;color:var(--text-secondary);border:1px solid var(--border-color);font-weight:500}
.btn-ghost:hover {background:var(--bg-card);color:var(--text-primary);border-color:var(--text-secondary)}
.btn-ghost:active {transform:scale(0.96)}
.btn-sm {padding:6px 12px;font-size:12px;border-radius:8px}
.admin-login {max-width:400px;margin:80px auto;padding:36px 32px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:0 8px 40px rgba(0,0,0,0.2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.admin-login h2 {text-align:center;margin-bottom:24px;font-size:20px;font-weight:700}
.admin-login input {width:100%;padding:11px 16px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:10px;color:var(--text-primary);font-size:13px;font-family:inherit;outline:none;margin-bottom:14px;transition:all 0.2s ease}
.admin-login input:focus {border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.admin-login .btn {width:100%}
.admin-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.admin-header h1 {font-size:22px;font-weight:800;letter-spacing:-0.5px}
.admin-nav {display:flex;gap:6px;margin-bottom:24px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:4px}
.admin-nav::-webkit-scrollbar {height:3px}
.admin-nav::-webkit-scrollbar-thumb {background:var(--border-color);border-radius:3px}
.admin-nav a {padding:8px 16px;border-radius:10px;font-size:13px;font-weight:500;color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--border-color);white-space:nowrap;transition:all 0.2s ease}
.admin-nav a:hover {color:var(--text-primary);border-color:var(--accent);transform:translateY(-1px)}
.admin-nav a.active {background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;border-color:transparent;box-shadow:0 2px 8px var(--accent-glow);font-weight:600}
.admin-table-wrapper {overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border-color);border-radius:var(--radius);margin-bottom:24px}
.admin-table {width:100%;min-width:600px;border-collapse:collapse;background:var(--bg-card)}
.admin-table th {text-align:left;padding:10px 16px;background:var(--bg-secondary);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-secondary);border-bottom:1px solid var(--border-color);white-space:nowrap}
.admin-table td {padding:10px 16px;font-size:13px;border-bottom:1px solid var(--border-color);white-space:nowrap}
.admin-table tr:last-child td {border-bottom:none}
.admin-table tr:hover td {background:var(--bg-card-hover)}
.dashboard-stats {display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:20px}
.stat-card {background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);padding:20px 24px;display:flex;align-items:center;gap:16px;transition:all 0.25s ease}
.stat-card:hover {transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}
.stat-card .stat-icon {width:46px;height:46px;border-radius:10px;background:var(--accent-glow);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:18px;flex-shrink:0;transition:all 0.25s ease}
.stat-card:hover .stat-icon {background:var(--accent);color:#fff}
.stat-card .stat-number {font-size:26px;font-weight:800;line-height:1;margin-bottom:2px;letter-spacing:-0.5px}
.stat-card .stat-label {font-size:12px;color:var(--text-secondary);font-weight:500}
.tab-content {padding:20px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius)}
.status-active {display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:8px;font-size:11px;font-weight:600}
.status-active.active {background:rgba(46,213,115,0.12);color:var(--success)}
.status-active.inactive {background:rgba(255,71,87,0.12);color:var(--danger)}
.modal-overlay {display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:2000;justify-content:center;align-items:center;padding:20px}
.modal-overlay.open {display:flex}
.modal {background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);padding:24px;width:100%;max-width:500px;max-height:80vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,0.3);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.modal h2 {margin-bottom:20px;font-size:17px;font-weight:700}
.modal .form-group {margin-bottom:16px}
.modal label {display:block;font-size:12px;font-weight:500;margin-bottom:6px;color:var(--text-secondary)}
.modal input, .modal select {width:100%;padding:10px 14px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:10px;color:var(--text-primary);font-size:13px;outline:none;transition:all 0.2s ease}
.modal input:focus, .modal select:focus {border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.modal-actions {display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
.flash {padding:10px 14px;border-radius:10px;margin-bottom:16px;font-size:12px;display:flex;align-items:center;gap:8px;line-height:1.4;font-weight:500}
@media (max-width:480px) {.flash {padding:8px 12px;font-size:11px;border-radius:8px}
.flash i {font-size:13px;flex-shrink:0}}
.flash-success {background:rgba(46,213,115,0.12);color:var(--success);border:1px solid rgba(46,213,115,0.25)}
.flash-error {background:rgba(255,71,87,0.12);color:var(--danger);border:1px solid rgba(255,71,87,0.25)}
.card-section {background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);padding:20px;margin-bottom:20px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.card-section h2 {font-size:16px;margin-bottom:14px;display:flex;align-items:center;gap:8px;font-weight:700}
.card-section h2 i {font-size:15px;color:var(--accent)}
.setting-row {display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border-color);gap:16px}
.setting-row:last-child {border-bottom:none}
.setting-info {flex:1}
.setting-info h3 {font-size:14px;margin-bottom:3px;font-weight:600}
.setting-info p {font-size:12px;color:var(--text-secondary);line-height:1.4}
.toggle-switch {position:relative;width:52px;height:28px;cursor:pointer;flex-shrink:0;display:inline-block}
.toggle-switch input {opacity:0;width:0;height:0;position:absolute}
.toggle-slider {position:absolute;inset:0;background:var(--border-color);border-radius:28px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:inset 0 1px 3px rgba(0,0,0,0.15)}
.toggle-slider::before {content:'';position:absolute;width:22px;height:22px;background:#ffffff;border-radius:50%;top:3px;left:3px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:0 2px 6px rgba(0,0,0,0.2)}
.toggle-switch input:checked + .toggle-slider {background:var(--accent);box-shadow:inset 0 1px 3px rgba(0,0,0,0.1),0 0 12px var(--accent-glow)}
.toggle-switch input:checked + .toggle-slider::before {transform:translateX(24px);box-shadow:0 2px 8px rgba(0,0,0,0.25)}
.docs-content {max-width:800px;margin:0 auto}
.docs-content h1 {font-size:26px;margin-bottom:8px;font-weight:800;letter-spacing:-0.5px}
.docs-content .subtitle {color:var(--text-secondary);margin-bottom:28px;font-size:14px}
.docs-content h2 {font-size:18px;margin:24px 0 12px;padding-top:16px;border-top:1px solid var(--border-color);font-weight:700}
.docs-content h3 {font-size:15px;margin:16px 0 8px;font-weight:600}
.docs-content p {color:var(--text-secondary);line-height:1.7;margin-bottom:12px;font-size:14px}
.docs-content code {background:var(--bg-card);padding:2px 7px;border-radius:5px;font-family:'JetBrains Mono',monospace;font-size:12px;border:1px solid var(--border-color)}
.docs-content pre {background:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;padding:16px;overflow-x:auto;margin-bottom:16px}
.docs-content pre code {padding:0;background:none;border:none}
.docs-content ul {color:var(--text-secondary);padding-left:20px;margin-bottom:12px}
.docs-content li {margin-bottom:6px;line-height:1.6;font-size:14px}
.about-content {max-width:600px;margin:0 auto;text-align:center;padding:40px 20px}
.about-content .logo-big {font-size:60px;color:var(--accent);margin-bottom:16px}
.about-content h1 {font-size:26px;margin-bottom:8px;font-weight:800;letter-spacing:-0.5px}
.about-content .version {color:var(--text-secondary);font-size:13px;margin-bottom:24px}
.about-content p {color:var(--text-secondary);line-height:1.7;margin-bottom:16px;font-size:14px}
.coming-soon {text-align:center;padding:60px 20px}
.coming-soon i {font-size:48px;color:var(--accent);margin-bottom:16px;opacity:0.4}
.coming-soon h2 {font-size:20px;margin-bottom:8px;font-weight:700}
.coming-soon p {color:var(--text-secondary);font-size:14px}
.traffic-chart {position:relative;width:100%;max-width:100%}
.chart-container {position:relative;width:100%;overflow:hidden}
.chart-container svg {width:100%;height:auto;display:block}
.chart-line {fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--transition)}
.chart-area {fill:url(#chartAreaGrad);opacity:0.3}
.chart-dot {fill:var(--accent);stroke:var(--bg-card);stroke-width:2;transition:r var(--transition)}
.chart-dot:hover {r:6}
.chart-grid {stroke:var(--border-color);stroke-width:1;stroke-dasharray:4 4}
.chart-label {fill:var(--text-secondary);font-size:11px;font-family:'Inter', sans-serif}
.chart-tooltip {position:absolute;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:8px 12px;font-size:12px;color:var(--text-primary);pointer-events:none;opacity:0;transition:opacity 0.15s ease;box-shadow:var(--shadow);z-index:10}
.chart-tooltip.visible {opacity:1}
.fade-in {animation:fadeIn 0.3s ease both}
.slide-up {animation:slideUp 0.3s ease both}
@keyframes fadeIn {from {opacity:0}
to {opacity:1}}
@keyframes slideUp {from {opacity:0;transform:translateY(12px)}
to {opacity:1;transform:translateY(0)}}
@keyframes pulse {0%, 100% {opacity:1}
50% {opacity:0.5}}
@keyframes shimmer {0% {background-position:-200% 0}
100% {background-position:200% 0}}
.animate-pulse {animation:pulse 2s infinite}
.animate-shimmer {background:linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);background-size:200% 100%;animation:shimmer 2s infinite}
.notif-badge {display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger, #ff453a);color:#fff;font-size:10px;font-weight:700;line-height:1;margin-left:6px;box-shadow:0 1px 4px rgba(255,69,58,0.3)}
.sidebar-logout-btn {display:flex;align-items:center;gap:12px;padding:10px 14px;color:var(--danger);border-radius:10px;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);font-size:13px;font-weight:500;text-decoration:none;width:100%;background:none;border:none;cursor:pointer;font-family:inherit;text-align:left}
.sidebar-logout-btn:hover {background:rgba(255,71,87,0.1);color:var(--danger);transform:translateX(2px)}
.sidebar-logout-btn i {width:20px;text-align:center;font-size:15px;opacity:0.8}
.sidebar-user-info {display:flex;align-items:center;gap:10px;padding:12px 16px;margin:4px 10px 8px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm)}
.sidebar-avatar {width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}
.sidebar-avatar-placeholder {width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-hover));display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;flex-shrink:0}
.sidebar-user-details {display:flex;flex-direction:column;min-width:0}
.sidebar-username {font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-role {font-size:10px;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.notif-item {display:flex;gap:10px;padding:10px 4px;border-bottom:1px solid var(--border-color);transition:background 0.15s ease}
.notif-item:hover {background:var(--bg-card)}
.notif-item:last-child {border-bottom:none}
.notif-icon {width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px}
.notif-icon.notif-update {background:rgba(46,213,115,0.12);color:var(--success)}
.notif-icon.notif-info {background:rgba(59,130,246,0.12);color:#3b82f6}
.notif-icon.notif-warning {background:rgba(255,165,2,0.12);color:var(--warning)}
.notif-body {flex:1;min-width:0}
.notif-title {font-size:12px;font-weight:600;margin-bottom:2px}
.notif-desc {font-size:11px;color:var(--text-secondary);line-height:1.4}
.notif-time {font-size:10px;color:var(--text-secondary);margin-top:2px;opacity:0.6}
@media (min-width:480px) {.hero h1 {font-size:26px}
.hero .stats {gap:24px}
.admin-login {margin:60px auto;padding:36px}
.modal {max-width:440px}}
@media (min-width:768px) {.tools-grid {grid-template-columns:repeat(2, 1fr)}
.dashboard-stats {grid-template-columns:repeat(2, 1fr)}
.search-bar {margin:0 16px;max-width:480px}
.hero h1 {font-size:30px}
.hero .stats {gap:32px}
.hero .stat-num {font-size:26px}
.main-content {padding:24px}
.setting-row {padding:16px 0}
.admin-table-wrapper {overflow-x:visible}
.admin-table {min-width:auto}
.modal {max-width:500px}}
@media (min-width:1024px) {.tools-grid {grid-template-columns:repeat(3, 1fr)}
.dashboard-stats {grid-template-columns:repeat(4, 1fr)}
.sidebar {transform:translateX(0);width:260px;top:56px}
.main-content {margin-left:260px}
body.has-category-bar .main-content {margin-left:260px;margin-top:102px}
body.has-category-bar .sidebar {top:97px}
.hamburger {display:none}
.hero h1 {font-size:32px}
.hero .stats {gap:40px}
.hero .stat-num {font-size:28px}
.search-bar {max-width:400px}
.admin-table-wrapper {overflow-x:visible}
.admin-table {min-width:auto}}
@media (min-width:1280px) {.main-content {padding:28px}
.hero {padding:50px 20px 36px}}
[data-style="ios"] {font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;--radius:14px;--radius-sm:10px;--bg-primary:#000000;--bg-secondary:#1c1c1e;--bg-card:#2c2c2e;--bg-card-hover:#3a3a3c;--border-color:#38383a;--text-primary:#ffffff;--text-secondary:#8e8e93;--accent:#007aff;--accent-hover:#0a84ff;--accent-glow:rgba(0, 122, 255, 0.25);--danger:#ff453a;--success:#30d158;--warning:#ffd60a;--sidebar-bg:#1c1c1e;--input-bg:#2c2c2e;--input-border:#48484a;--glass-bg:rgba(28, 28, 30, 0.85);--glass-border:rgba(255, 255, 255, 0.08)}
[data-style="ios"] .header {background:rgba(28, 28, 30, 0.95);border-bottom:1px solid rgba(255, 255, 255, 0.06)}
[data-style="ios"] .tool-card,
[data-style="ios"] .card-section,
[data-style="ios"] .tool-content,
[data-style="ios"] .modal,
[data-style="ios"] .admin-login,
[data-style="ios"] .stat-card {background:rgba(44, 44, 46, 0.95);border:1px solid rgba(255, 255, 255, 0.08);box-shadow:0 2px 16px rgba(0, 0, 0, 0.25), inset 0 0.5px 0 rgba(255, 255, 255, 0.06)}
[data-style="ios"] .sidebar {background:rgba(28, 28, 30, 0.98);border-right:1px solid rgba(255, 255, 255, 0.06)}
[data-style="ios"] .btn-primary {background:#007aff;border-radius:12px;font-weight:600;letter-spacing:-0.01em}
[data-style="ios"] .btn-primary:hover {background:#0a84ff;box-shadow:0 4px 16px rgba(0, 122, 255, 0.35)}
[data-style="ios"] .btn-danger {background:#ff453a;border-radius:12px}
[data-style="ios"] .btn-ghost {border-radius:12px}
[data-style="ios"] .cat-chip {border-radius:20px;font-weight:500}
[data-style="ios"] .sidebar-menu li a {border-radius:12px;font-weight:500}
[data-style="ios"] .sidebar-menu li a.active {background:rgba(0, 122, 255, 0.15);color:#0a84ff}
[data-style="ios"] .admin-table th {background:rgba(44, 44, 46, 0.6);border-bottom:1px solid rgba(255, 255, 255, 0.06);font-weight:600;letter-spacing:0.02em}
[data-style="ios"] .toggle-slider {border-radius:16px}
[data-style="ios"] .search-bar input {border-radius:10px;background:rgba(44, 44, 46, 0.6);border:1px solid rgba(255, 255, 255, 0.08)}
[data-style="ios"] .tool-back-btn {background:rgba(44, 44, 46, 0.8);border:1px solid rgba(255, 255, 255, 0.08);border-radius:10px}
[data-style="ios"] .tool-back-btn:hover {background:rgba(58, 58, 60, 0.9);border-color:rgba(0, 122, 255, 0.4)}
[data-style="ios"] .tool-header-badge {background:rgba(0, 122, 255, 0.15);color:#0a84ff;border:1px solid rgba(0, 122, 255, 0.2)}
[data-style="ios"][data-theme="light"] {--bg-primary:#f2f2f7;--bg-secondary:#ffffff;--bg-card:rgba(255, 255, 255, 0.8);--bg-card-hover:rgba(255, 255, 255, 0.95);--border-color:rgba(0, 0, 0, 0.08);--text-primary:#000000;--text-secondary:#8e8e93;--accent:#007aff;--accent-hover:#0056b3;--accent-glow:rgba(0, 122, 255, 0.1);--danger:#ff3b30;--success:#34c759;--warning:#ff9500;--sidebar-bg:rgba(242, 242, 247, 0.92);--input-bg:rgba(142, 142, 147, 0.08);--input-border:rgba(0, 0, 0, 0.08);--glass-bg:rgba(255, 255, 255, 0.95);--glass-border:rgba(0, 0, 0, 0.06)}
[data-style="ios"][data-theme="light"] .header {background:rgba(242, 242, 247, 0.95);border-bottom:1px solid rgba(0, 0, 0, 0.06)}
[data-style="ios"][data-theme="light"] .tool-card,
[data-style="ios"][data-theme="light"] .card-section,
[data-style="ios"][data-theme="light"] .tool-content,
[data-style="ios"][data-theme="light"] .modal,
[data-style="ios"][data-theme="light"] .admin-login,
[data-style="ios"][data-theme="light"] .stat-card {background:rgba(255, 255, 255, 0.95);border:1px solid rgba(0, 0, 0, 0.06);box-shadow:0 1px 4px rgba(0, 0, 0, 0.04), inset 0 0.5px 0 rgba(255, 255, 255, 0.8)}
[data-style="ios"][data-theme="light"] .sidebar {background:rgba(242, 242, 247, 0.92);border-right:1px solid rgba(0, 0, 0, 0.06)}
[data-style="ios"][data-theme="light"] .tool-back-btn {background:rgba(255, 255, 255, 0.8);border:1px solid rgba(0, 0, 0, 0.06);color:#000}
[data-style="ios"][data-theme="light"] .tool-back-btn:hover {background:rgba(255, 255, 255, 0.95);border-color:rgba(0, 122, 255, 0.3)}
[data-style="ios"][data-theme="light"] .tool-header-badge {background:rgba(0, 122, 255, 0.1);color:#007aff;border:1px solid rgba(0, 122, 255, 0.15)}
[data-style="ios"][data-theme="light"] .sidebar-menu li a.active {background:rgba(0, 122, 255, 0.1);color:#007aff}
[data-style="ios"][data-theme="light"] .admin-table th {background:rgba(142, 142, 147, 0.06);border-bottom:1px solid rgba(0, 0, 0, 0.06)}
[data-style="ios"][data-theme="light"] .search-bar input {background:rgba(142, 142, 147, 0.08);border:1px solid rgba(0, 0, 0, 0.08)}
[data-style="hacker"] {font-family:'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;--radius:0;--radius-sm:0;--accent:#00ff41;--accent-hover:#00cc33;--accent-glow:rgba(0, 255, 65, 0.15);--success:#00ff41;--danger:#ff0040;--bg-primary:#0a0a0a;--bg-secondary:#0d0d0d;--bg-card:#111111;--bg-card-hover:#1a1a1a;--border-color:#00ff41;--text-primary:#00ff41;--text-secondary:#00aa2a;--sidebar-bg:#0a0a0a;--input-bg:#0d0d0d;--input-border:#00ff41}
[data-style="hacker"] .header {background:#0a0a0a;border-bottom:1px solid #00ff41}
[data-style="hacker"] .tool-card,
[data-style="hacker"] .card-section,
[data-style="hacker"] .tool-content,
[data-style="hacker"] .modal,
[data-style="hacker"] .admin-login,
[data-style="hacker"] .stat-card {border:1px solid #00ff41;border-radius:0;box-shadow:none}
[data-style="hacker"] .sidebar {border-right:1px solid #00ff41}
[data-style="hacker"] .sidebar-menu li a {border-radius:0}
[data-style="hacker"] .sidebar-menu li a:hover {background:#111;border-left:2px solid #00ff41}
[data-style="hacker"] .sidebar-menu li a.active {background:rgba(0, 255, 65, 0.1);border-left:2px solid #00ff41;color:#00ff41}
[data-style="hacker"] .sidebar-menu li a.active::before {display:none}
[data-style="hacker"] .btn-primary {background:#00ff41;color:#0a0a0a;border-radius:0;font-family:'Fira Code', monospace}
[data-style="hacker"] .btn-danger {background:#ff0040;border-radius:0}
[data-style="hacker"] .btn-outline {border-radius:0}
[data-style="hacker"] .cat-chip {border-radius:0}
[data-style="hacker"] .hamburger span {background:#00ff41}
[data-style="hacker"] .search-bar input {border-radius:0;border:1px solid #00ff41}
[data-style="hacker"] .toggle-slider {border-radius:0}
[data-style="hacker"] .hero h1 {background:#00ff41;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
[data-style="hacker"] .chart-line {stroke:#00ff41}
[data-style="hacker"] .chart-dot {fill:#00ff41}
[data-style="hacker"] .admin-table th {background:#0d0d0d;border-bottom:1px solid #00ff41}
[data-style="hacker"][data-theme="light"] {--accent:#00801f;--accent-hover:#006619;--accent-glow:rgba(0, 128, 31, 0.15);--success:#00801f;--danger:#cc0033;--bg-primary:#f0f4f0;--bg-secondary:#e8ede8;--bg-card:#ffffff;--bg-card-hover:#f0f4f0;--border-color:#00801f;--text-primary:#1a2e1a;--text-secondary:#4a6a4a;--sidebar-bg:#e8ede8;--input-bg:#f0f4f0;--input-border:#00801f}
[data-style="hacker"][data-theme="light"] .header {background:#e8ede8;border-bottom:1px solid #00801f}
[data-style="hacker"][data-theme="light"] .tool-card,
[data-style="hacker"][data-theme="light"] .card-section,
[data-style="hacker"][data-theme="light"] .tool-content,
[data-style="hacker"][data-theme="light"] .modal,
[data-style="hacker"][data-theme="light"] .admin-login,
[data-style="hacker"][data-theme="light"] .stat-card {border:1px solid #00801f;background:#ffffff}
[data-style="hacker"][data-theme="light"] .sidebar {background:#e8ede8;border-right:1px solid #00801f}
[data-style="hacker"][data-theme="light"] .sidebar-menu li a:hover {background:#d8e8d8;border-left:2px solid #00801f}
[data-style="hacker"][data-theme="light"] .sidebar-menu li a.active {background:rgba(0, 128, 31, 0.1);border-left:2px solid #00801f;color:#00801f}
[data-style="hacker"][data-theme="light"] .btn-primary {background:#00801f;color:#ffffff}
[data-style="hacker"][data-theme="light"] .search-bar input {border:1px solid #00801f}
[data-style="hacker"][data-theme="light"] .hero h1 {background:#00801f;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
[data-style="hacker"][data-theme="light"] .chart-line {stroke:#00801f}
[data-style="hacker"][data-theme="light"] .chart-dot {fill:#00801f}
[data-style="hacker"][data-theme="light"] .admin-table th {background:#e8ede8;border-bottom:1px solid #00801f}
[data-style="hacker"][data-theme="light"] .hamburger span {background:#00801f}
[data-style="vscode"] {font-family:'Segoe UI', 'Helvetica Neue', sans-serif;--radius:0;--radius-sm:0;--bg-primary:#1e1e1e;--bg-secondary:#252526;--bg-card:#2d2d2d;--bg-card-hover:#383838;--border-color:#3c3c3c;--text-primary:#cccccc;--text-secondary:#858585;--sidebar-bg:#252526;--input-bg:#3c3c3c;--input-border:#3c3c3c;--accent:#007acc;--accent-hover:#1c8cd4;--accent-glow:rgba(0, 122, 204, 0.25)}
[data-style="vscode"] .header {background:#323233;border-bottom:1px solid #3c3c3c}
[data-style="vscode"] .tool-card,
[data-style="vscode"] .card-section,
[data-style="vscode"] .tool-content,
[data-style="vscode"] .stat-card {border:1px solid #3c3c3c;border-radius:0}
[data-style="vscode"] .modal,
[data-style="vscode"] .admin-login {border:1px solid #3c3c3c;border-radius:0}
[data-style="vscode"] .sidebar {background:#252526;border-right:1px solid #3c3c3c}
[data-style="vscode"] .sidebar-menu li a {border-radius:0}
[data-style="vscode"] .sidebar-menu li a.active {background:rgba(0, 122, 204, 0.15);color:#ffffff;border-left:2px solid #007acc}
[data-style="vscode"] .sidebar-menu li a.active::before {display:none}
[data-style="vscode"] .btn-primary {background:#007acc;border-radius:0}
[data-style="vscode"] .btn-danger {background:#d32f2f;border-radius:0}
[data-style="vscode"] .btn-outline {border-radius:0}
[data-style="vscode"] .cat-chip {border-radius:0}
[data-style="vscode"] .search-bar input {border-radius:0}
[data-style="vscode"] .admin-table th {background:#252526}
[data-style="vscode"] .toggle-slider {border-radius:2px}
[data-style="vscode"][data-theme="light"] {--bg-primary:#f3f3f3;--bg-secondary:#ffffff;--bg-card:#ffffff;--bg-card-hover:#f0f0f0;--border-color:#d1d1d1;--text-primary:#1e1e1e;--text-secondary:#616161;--sidebar-bg:#ffffff;--input-bg:#f5f5f5;--input-border:#d1d1d1;--accent:#007acc;--accent-hover:#0063b1;--accent-glow:rgba(0, 122, 204, 0.12)}
[data-style="vscode"][data-theme="light"] .header {background:#ffffff;border-bottom:1px solid #d1d1d1}
[data-style="vscode"][data-theme="light"] .tool-card,
[data-style="vscode"][data-theme="light"] .card-section,
[data-style="vscode"][data-theme="light"] .tool-content,
[data-style="vscode"][data-theme="light"] .stat-card,
[data-style="vscode"][data-theme="light"] .modal,
[data-style="vscode"][data-theme="light"] .admin-login {border:1px solid #d1d1d1;background:#ffffff}
[data-style="vscode"][data-theme="light"] .sidebar {background:#ffffff;border-right:1px solid #d1d1d1}
[data-style="vscode"][data-theme="light"] .sidebar-menu li a.active {background:rgba(0, 122, 204, 0.12);color:#007acc}
[data-style="vscode"][data-theme="light"] .admin-table th {background:#f5f5f5;border-bottom:1px solid #d1d1d1}
[data-style="vscode"][data-theme="light"] .hamburger span {background:#1e1e1e}
[data-style="github"] {font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', sans-serif;--radius:6px;--radius-sm:6px;--bg-primary:#0d1117;--bg-secondary:#161b22;--bg-card:#161b22;--bg-card-hover:#1c2129;--border-color:#30363d;--text-primary:#e6edf3;--text-secondary:#8b949e;--sidebar-bg:#0d1117;--input-bg:#0d1117;--input-border:#30363d;--accent:#58a6ff;--accent-hover:#79c0ff;--accent-glow:rgba(88, 166, 255, 0.2);--success:#3fb950;--danger:#f85149}
[data-style="github"] .header {background:#161b22;border-bottom:1px solid #30363d}
[data-style="github"] .tool-card,
[data-style="github"] .card-section,
[data-style="github"] .tool-content,
[data-style="github"] .stat-card {border:1px solid #30363d;border-radius:6px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.12)}
[data-style="github"] .modal,
[data-style="github"] .admin-login {border:1px solid #30363d;border-radius:6px}
[data-style="github"] .sidebar {background:#0d1117;border-right:1px solid #30363d}
[data-style="github"] .sidebar-menu li a {border-radius:6px}
[data-style="github"] .sidebar-menu li a.active {background:rgba(88, 166, 255, 0.1);color:#58a6ff;font-weight:600}
[data-style="github"] .sidebar-menu li a.active::before {display:none}
[data-style="github"] .btn-primary {background:#238636;border-radius:6px}
[data-style="github"] .btn-primary:hover {background:#2ea043;box-shadow:0 4px 12px rgba(46, 160, 67, 0.3)}
[data-style="github"] .btn-danger {background:#da3633;border-radius:6px}
[data-style="github"] .btn-outline {border-radius:6px}
[data-style="github"] .cat-chip {border-radius:16px}
[data-style="github"] .search-bar input {border-radius:6px;background:#0d1117;border:1px solid #30363d}
[data-style="github"] .hero h1 {background:none;-webkit-text-fill-color:var(--text-primary);color:var(--text-primary)}
[data-style="github"] .admin-table th {background:#161b22}
[data-style="github"] .toggle-slider {border-radius:12px}
[data-style="github"][data-theme="light"] {--bg-primary:#ffffff;--bg-secondary:#f6f8fa;--bg-card:#ffffff;--bg-card-hover:#f6f8fa;--border-color:#d0d7de;--text-primary:#24292f;--text-secondary:#57606a;--sidebar-bg:#ffffff;--input-bg:#f6f8fa;--input-border:#d0d7de;--accent:#0969da;--accent-hover:#0550ae;--accent-glow:rgba(9, 105, 218, 0.12);--success:#1a7f37;--danger:#cf222e}
[data-style="github"][data-theme="light"] .header {background:#ffffff;border-bottom:1px solid #d0d7de}
[data-style="github"][data-theme="light"] .tool-card,
[data-style="github"][data-theme="light"] .card-section,
[data-style="github"][data-theme="light"] .tool-content,
[data-style="github"][data-theme="light"] .stat-card,
[data-style="github"][data-theme="light"] .modal,
[data-style="github"][data-theme="light"] .admin-login {border:1px solid #d0d7de;background:#ffffff;box-shadow:0 1px 3px rgba(0, 0, 0, 0.04)}
[data-style="github"][data-theme="light"] .sidebar {background:#ffffff;border-right:1px solid #d0d7de}
[data-style="github"][data-theme="light"] .sidebar-menu li a.active {background:rgba(9, 105, 218, 0.08);color:#0969da}
[data-style="github"][data-theme="light"] .btn-primary {background:#2da44e}
[data-style="github"][data-theme="light"] .btn-primary:hover {background:#1a7f37}
[data-style="github"][data-theme="light"] .admin-table th {background:#f6f8fa;border-bottom:1px solid #d0d7de}
[data-style="github"][data-theme="light"] .hamburger span {background:#24292f}
[data-style="github"][data-theme="light"] .hero h1 {color:#24292f}
[data-style="dracula"] {font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;--radius:16px;--radius-sm:10px;--bg-primary:#282a36;--bg-secondary:#2d2f3d;--bg-card:#343746;--bg-card-hover:#3e4155;--border-color:#44475a;--text-primary:#f8f8f2;--text-secondary:#6272a4;--accent:#bd93f9;--accent-hover:#d4bfff;--accent-glow:rgba(189, 147, 249, 0.3);--danger:#ff5555;--success:#50fa7b;--warning:#f1fa8c;--sidebar-bg:#21222c;--input-bg:#282a36;--input-border:#44475a}
[data-style="dracula"] .header {background:rgba(45, 47, 61, 0.7)}
[data-style="dracula"] .tool-card,
[data-style="dracula"] .card-section,
[data-style="dracula"] .tool-content,
[data-style="dracula"] .stat-card {border:1px solid rgba(68, 71, 90, 0.6);box-shadow:0 4px 24px rgba(189, 147, 249, 0.08), 0 1px 4px rgba(0, 0, 0, 0.2)}
[data-style="dracula"] .modal,
[data-style="dracula"] .admin-login {border:1px solid rgba(68, 71, 90, 0.6);box-shadow:0 16px 48px rgba(189, 147, 249, 0.12), 0 4px 16px rgba(0, 0, 0, 0.3)}
[data-style="dracula"] .sidebar {background:rgba(33, 34, 44, 0.9)}
[data-style="dracula"] .sidebar-menu li a {border-radius:10px}
[data-style="dracula"] .sidebar-menu li a.active {background:rgba(189, 147, 249, 0.15);color:#bd93f9}
[data-style="dracula"] .sidebar-menu li a.active::before {display:none}
[data-style="dracula"] .btn-primary {background:linear-gradient(135deg, #bd93f9, #a77bfa);border-radius:10px;box-shadow:0 4px 16px rgba(189, 147, 249, 0.3)}
[data-style="dracula"] .btn-danger {background:linear-gradient(135deg, #ff5555, #ff6e6e);border-radius:10px}
[data-style="dracula"] .btn-outline {border-radius:10px}
[data-style="dracula"] .cat-chip {border-radius:16px}
[data-style="dracula"] .search-bar input {border-radius:12px}
[data-style="dracula"] .hero h1 {background:linear-gradient(135deg, #bd93f9, #ff79c6, #f1fa8c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
[data-style="dracula"] .chart-line {stroke:#bd93f9}
[data-style="dracula"] .chart-dot {fill:#bd93f9}
[data-style="dracula"] .toggle-slider {border-radius:13px}
[data-style="dracula"][data-theme="light"] {--bg-primary:#f8f8f2;--bg-secondary:#ffffff;--bg-card:#ffffff;--bg-card-hover:#f2f2f0;--border-color:#d8d8d2;--text-primary:#282a36;--text-secondary:#6272a4;--accent:#bd93f9;--accent-hover:#a77bfa;--accent-glow:rgba(189, 147, 249, 0.12);--danger:#ff5555;--success:#50fa7b;--warning:#f1fa8c;--sidebar-bg:#ffffff;--input-bg:#f2f2f0;--input-border:#d8d8d2}
[data-style="dracula"][data-theme="light"] .header {background:rgba(255, 255, 255, 0.8);border-bottom:1px solid #d8d8d2}
[data-style="dracula"][data-theme="light"] .tool-card,
[data-style="dracula"][data-theme="light"] .card-section,
[data-style="dracula"][data-theme="light"] .tool-content,
[data-style="dracula"][data-theme="light"] .stat-card,
[data-style="dracula"][data-theme="light"] .modal,
[data-style="dracula"][data-theme="light"] .admin-login {border:1px solid #d8d8d2;background:#ffffff;box-shadow:0 2px 8px rgba(0, 0, 0, 0.06)}
[data-style="dracula"][data-theme="light"] .sidebar {background:rgba(255, 255, 255, 0.95);border-right:1px solid #d8d8d2}
[data-style="dracula"][data-theme="light"] .sidebar-menu li a.active {background:rgba(189, 147, 249, 0.12);color:#bd93f9}
[data-style="dracula"][data-theme="light"] .admin-table th {background:#f8f8f2;border-bottom:1px solid #d8d8d2}
[data-style="dracula"][data-theme="light"] .hamburger span {background:#282a36}
[data-style="dracula"][data-theme="light"] .hero h1 {background:linear-gradient(135deg, #bd93f9, #ff79c6, #f1fa8c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
[data-style="midnight"] {font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;--radius:8px;--radius-sm:6px;--bg-primary:#121212;--bg-secondary:#1e1e1e;--bg-card:#1e1e1e;--bg-card-hover:#2a2a2a;--border-color:#2c2c2c;--text-primary:#e0e0e0;--text-secondary:#9e9e9e;--accent:#7c4dff;--accent-hover:#9c7cff;--accent-glow:rgba(124, 77, 255, 0.25);--danger:#ff5252;--success:#69f0ae;--warning:#ffd740;--sidebar-bg:#1a1a1a;--input-bg:#2c2c2c;--input-border:#3a3a3a}
[data-style="wattvision"] {font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;--radius:16px;--radius-sm:10px;--bg-primary:#121212;--bg-secondary:#1E1E1E;--bg-card:#1E1E1E;--bg-card-hover:#252525;--border-color:#2C2C2E;--text-primary:#FFFFFF;--text-secondary:#98989D;--accent:#00E5FF;--accent-hover:#00CCE5;--accent-glow:rgba(0, 229, 255, 0.2);--danger:#FF453A;--success:#32D74B;--warning:#FFD60A;--sidebar-bg:#1A1A1A;--input-bg:#2C2C2E;--input-border:#3A3A3C}
[data-style="wattvision"] .header {background:rgba(18, 18, 18, 0.85);border-bottom:1px solid #2C2C2E}
[data-style="wattvision"] .tool-card,
[data-style="wattvision"] .card-section,
[data-style="wattvision"] .tool-content,
[data-style="wattvision"] .stat-card {border:1px solid #2C2C2E;box-shadow:0 2px 8px rgba(0, 0, 0, 0.3), inset 0 0.5px 0 rgba(255, 255, 255, 0.05)}
[data-style="wattvision"] .modal,
[data-style="wattvision"] .admin-login {border:1px solid #2C2C2E;box-shadow:0 16px 48px rgba(0, 0, 0, 0.4)}
[data-style="wattvision"] .sidebar {background:rgba(26, 26, 26, 0.95);border-right:1px solid #2C2C2E}
[data-style="wattvision"] .sidebar-menu li a {border-radius:10px}
[data-style="wattvision"] .sidebar-menu li a.active {background:rgba(0, 229, 255, 0.1);color:#00E5FF}
[data-style="wattvision"] .sidebar-menu li a.active::before {display:none}
[data-style="wattvision"] .btn-primary {background:linear-gradient(135deg, #00E5FF, #00CCE5);color:#000000;border-radius:10px;font-weight:600;box-shadow:0 4px 16px rgba(0, 229, 255, 0.3)}
[data-style="wattvision"] .btn-primary:hover {background:linear-gradient(135deg, #00CCE5, #00B3CC);box-shadow:0 6px 24px rgba(0, 229, 255, 0.4);transform:translateY(-1px)}
[data-style="wattvision"] .btn-danger {background:linear-gradient(135deg, #FF453A, #FF3344);border-radius:10px}
[data-style="wattvision"] .btn-outline {border-radius:10px;border-color:#00E5FF;color:#00E5FF}
[data-style="wattvision"] .btn-outline:hover {background:#00E5FF;color:#000000}
[data-style="wattvision"] .cat-chip {border-radius:20px}
[data-style="wattvision"] .search-bar input {border-radius:12px;border:1px solid #2C2C2E}
[data-style="wattvision"] .toggle-slider {border-radius:13px}
[data-style="wattvision"][data-theme="light"] .hero h1 {background:linear-gradient(135deg, #00E5FF, #32D74B);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
[data-style="wattvision"][data-theme="light"] .chart-line {stroke:#00E5FF}
[data-style="wattvision"][data-theme="light"] .chart-dot {fill:#00E5FF}
[data-style="wattvision"][data-theme="light"] .admin-table th {background:#f5f8fa;border-bottom:1px solid #d0e0e4}
[data-style="wattvision"][data-theme="light"] {--bg-primary:#f0f4f8;--bg-secondary:#ffffff;--bg-card:#ffffff;--bg-card-hover:#f5f8fa;--border-color:#d0e0e4;--text-primary:#1a202c;--text-secondary:#607080;--accent:#0097a7;--accent-hover:#00838f;--accent-glow:rgba(0, 151, 167, 0.12);--danger:#e53935;--success:#43a047;--warning:#f9a825;--sidebar-bg:#ffffff;--input-bg:#f5f8fa;--input-border:#d0e0e4}
[data-style="wattvision"][data-theme="light"] .header {background:rgba(255, 255, 255, 0.85);border-bottom:1px solid #d0e0e4}
[data-style="wattvision"][data-theme="light"] .tool-card,
[data-style="wattvision"][data-theme="light"] .card-section,
[data-style="wattvision"][data-theme="light"] .tool-content,
[data-style="wattvision"][data-theme="light"] .stat-card,
[data-style="wattvision"][data-theme="light"] .modal,
[data-style="wattvision"][data-theme="light"] .admin-login {border:1px solid #d0e0e4;background:#ffffff;box-shadow:0 1px 4px rgba(0, 0, 0, 0.06)}
[data-style="wattvision"][data-theme="light"] .sidebar {background:rgba(255, 255, 255, 0.95);border-right:1px solid #d0e0e4}
[data-style="wattvision"][data-theme="light"] .sidebar-menu li a.active {background:rgba(0, 151, 167, 0.08);color:#0097a7}
[data-style="wattvision"][data-theme="light"] .btn-primary {background:linear-gradient(135deg, #0097a7, #00838f);color:#ffffff;box-shadow:0 2px 8px rgba(0, 151, 167, 0.25)}
[data-style="wattvision"][data-theme="light"] .btn-primary:hover {background:linear-gradient(135deg, #00838f, #006064)}
[data-style="wattvision"][data-theme="light"] .tool-card:hover {border-color:#0097a7;box-shadow:0 4px 16px rgba(0, 151, 167, 0.1)}
[data-style="wattvision"][data-theme="light"] .hamburger span {background:#1a202c}
[data-style="wattvision"][data-theme="light"] .hero h1 {background:linear-gradient(135deg, #0097a7, #43a047);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
[data-style="wattvision"] .chart-line {stroke:#00E5FF}
[data-style="wattvision"] .chart-dot {fill:#00E5FF}
[data-style="wattvision"] .admin-table th {background:#1A1A1A;border-bottom:1px solid #2C2C2E}
[data-style="wattvision"] .tool-card:hover {border-color:#00E5FF;box-shadow:0 8px 32px rgba(0, 229, 255, 0.15)}
[data-style="midnight"] .header {background:rgba(30, 30, 30, 0.8)}
[data-style="midnight"] .tool-card,
[data-style="midnight"] .card-section,
[data-style="midnight"] .tool-content,
[data-style="midnight"] .stat-card {border:1px solid #2c2c2c;box-shadow:0 2px 8px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2)}
[data-style="midnight"] .modal,
[data-style="midnight"] .admin-login {box-shadow:0 8px 32px rgba(0, 0, 0, 0.4), 0 16px 48px rgba(0, 0, 0, 0.3)}
[data-style="midnight"] .sidebar {background:rgba(26, 26, 26, 0.9)}
[data-style="midnight"] .sidebar-menu li a {border-radius:8px}
[data-style="midnight"] .sidebar-menu li a.active {background:rgba(124, 77, 255, 0.12);color:#7c4dff}
[data-style="midnight"] .sidebar-menu li a.active::before {display:none}
[data-style="midnight"] .btn-primary {background:linear-gradient(135deg, #7c4dff, #651fff);border-radius:8px}
[data-style="midnight"] .btn-danger {background:linear-gradient(135deg, #ff5252, #d50000);border-radius:8px}
[data-style="midnight"] .btn-outline {border-radius:8px}
[data-style="midnight"] .cat-chip {border-radius:16px}
[data-style="midnight"] .search-bar input {border-radius:8px}
[data-style="midnight"] .toggle-slider {border-radius:12px}
[data-style="midnight"] .admin-table th {background:#1a1a1a}
[data-style="midnight"][data-theme="light"] {--bg-primary:#f5f5f5;--bg-secondary:#ffffff;--bg-card:#ffffff;--bg-card-hover:#f0f0f0;--border-color:#e0e0e0;--text-primary:#1a1a1a;--text-secondary:#757575;--accent:#651fff;--accent-hover:#5c0fef;--accent-glow:rgba(101, 31, 255, 0.12);--danger:#ff5252;--success:#69f0ae;--warning:#ffd740;--sidebar-bg:#ffffff;--input-bg:#f0f0f0;--input-border:#d0d0d0}
[data-style="midnight"][data-theme="light"] .header {background:rgba(255, 255, 255, 0.85);border-bottom:1px solid #e0e0e0}
[data-style="midnight"][data-theme="light"] .tool-card,
[data-style="midnight"][data-theme="light"] .card-section,
[data-style="midnight"][data-theme="light"] .tool-content,
[data-style="midnight"][data-theme="light"] .stat-card,
[data-style="midnight"][data-theme="light"] .modal,
[data-style="midnight"][data-theme="light"] .admin-login {border:1px solid #e0e0e0;background:#ffffff;box-shadow:0 1px 4px rgba(0, 0, 0, 0.06)}
[data-style="midnight"][data-theme="light"] .sidebar {background:rgba(255, 255, 255, 0.95);border-right:1px solid #e0e0e0}
[data-style="midnight"][data-theme="light"] .sidebar-menu li a.active {background:rgba(101, 31, 255, 0.08);color:#651fff}
[data-style="midnight"][data-theme="light"] .admin-table th {background:#f5f5f5;border-bottom:1px solid #e0e0e0}
[data-style="midnight"][data-theme="light"] .hamburger span {background:#1a1a1a}
[data-style="midnight"][data-theme="light"] .btn-primary {background:linear-gradient(135deg, #651fff, #5c0fef)}
[data-style="midnight"][data-theme="light"] .hero h1 {background:linear-gradient(135deg, #651fff, #7c4dff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-accent {color:var(--accent)}
.form-row {display:flex;gap:10px;align-items:stretch}
.form-row > * {flex:1;min-width:0}
.text-danger {color:var(--danger)}
.text-success {color:var(--success)}
.text-warning {color:var(--warning)}
.text-secondary {color:var(--text-secondary)}
.text-center {text-align:center}
.text-right {text-align:right}
.mt-1 {margin-top:8px}
.mt-2 {margin-top:16px}
.mt-3 {margin-top:24px}
.mt-4 {margin-top:32px}
.mb-1 {margin-bottom:8px}
.mb-2 {margin-bottom:16px}
.mb-3 {margin-bottom:24px}
.mb-4 {margin-bottom:32px}
.flex {display:flex}
.flex-col {flex-direction:column}
.items-center {align-items:center}
.justify-between {justify-content:space-between}
.gap-1 {gap:8px}
.gap-2 {gap:16px}
.gap-3 {gap:24px}
.hidden {display:none !important}
.visible {display:block !important}
.truncate {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-full {width:100%}
.relative {position:relative}
::-webkit-scrollbar {width:6px;height:6px}
::-webkit-scrollbar-track {background:transparent}
::-webkit-scrollbar-thumb {background:var(--border-color);border-radius:3px}
::-webkit-scrollbar-thumb:hover {background:var(--text-secondary)}
::selection {background:var(--accent);color:#ffffff}
:focus-visible {outline:2px solid var(--accent);outline-offset:2px}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {outline:2px solid var(--accent);outline-offset:2px}
@media (hover:none) and (pointer:coarse) {
    :focus-visible {outline:none}
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {outline:none}
}
.upload-zone {position:relative;border:2px dashed var(--border-color);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;background:var(--bg-card);overflow:hidden;border-radius:var(--radius)}
.upload-zone:hover {border-color:var(--accent);background:var(--accent-glow)}
.upload-zone:hover .upload-zone-icon {transform:scale(1.1);color:var(--accent)}
.upload-zone:hover .upload-zone-text {color:var(--accent)}
.upload-zone.dragover {border-color:var(--accent);background:var(--accent-glow);transform:scale(1.02)}
.upload-zone-icon {font-size:26px;color:var(--text-secondary);margin-bottom:6px;transition:all 0.3s ease}
.upload-zone-text {font-size:11px;color:var(--text-secondary);font-weight:500;transition:color 0.3s ease}
.upload-zone input[type="file"] {position:absolute;inset:0;opacity:0;cursor:pointer}
.upload-zone .upload-progress {position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.7)}
.upload-zone .upload-progress.active {display:flex}
.upload-zone .upload-progress .spinner {width:32px;height:32px;border:3px solid var(--border-color);border-top-color:var(--accent);border-radius:50%;animation:uploadSpin 0.8s linear infinite}
@keyframes uploadSpin {to {transform:rotate(360deg)}}
.skeleton {background:linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm)}
.hide-mobile {display:none}
.show-mobile {display:block}
@media (min-width:768px) {.hide-mobile {display:block}
.show-mobile {display:none}
.hide-tablet {display:none}
.show-tablet {display:block}}
@media (min-width:1024px) {.hide-desktop {display:none}
.show-desktop {display:block}}
@media (prefers-reduced-motion:reduce) {*, *::before, *::after {animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
html {scroll-behavior:auto}}
@media print {.header,
.sidebar,
.sidebar-overlay,
.hamburger,
.admin-nav {display:none !important}
.main-content {margin-left:0 !important;margin-top:0 !important}
body {background:#fff;color:#000}}
@media (max-width:768px) {
.header {background:var(--bg-secondary)}
.main-content {padding:14px 14px 24px}
.sidebar {background:var(--bg-secondary);width:260px;top:52px;height:calc(100vh - 52px);z-index:1001}
.sidebar.open {transform:translateX(0)}
.tool-card,
.card-section,
.tool-content,
.stat-card,
.modal,
.admin-login {background:var(--bg-card)}
.glass-bg {background:var(--bg-card) !important}
.header-top {height:52px;padding:0 12px}
.search-bar {margin:0 8px;max-width:100%}
.search-bar input {font-size:13px;padding:8px 12px 8px 34px}
.logo {font-size:17px;margin-left:8px}
.logo i {width:30px;height:30px;font-size:14px;border-radius:8px}
.header-title {font-size:14px;margin-left:8px}
.header-title i {width:26px;height:26px;font-size:12px;border-radius:6px}
.hero {padding:24px 14px 20px}
.hero h1 {font-size:22px}
.hero p {font-size:13px}
.hero .stats {gap:20px;flex-wrap:wrap}
.hero .stat-num {font-size:22px}
.hero .stat-label {font-size:10px}
.categories-grid {gap:6px;margin-bottom:20px}
.cat-chip {padding:5px 12px;font-size:11px;border-radius:14px}
.tools-grid {grid-template-columns:1fr;gap:12px}
.tool-card {padding:16px}
.tool-card .tool-icon {width:36px;height:36px;font-size:15px;border-radius:8px;margin-bottom:10px}
.tool-card h3 {font-size:13px}
.tool-card p {font-size:11px}
.tool-card .tool-category {font-size:9px;padding:3px 8px}
.category-bar {padding:6px 12px;gap:4px}
.admin-nav {gap:4px;margin-bottom:16px;padding-bottom:2px}
.admin-nav a {padding:6px 12px;font-size:12px}
.admin-header h1 {font-size:18px}
.admin-header {flex-direction:column;align-items:flex-start}
.admin-table-wrapper {margin-bottom:16px}
.admin-table {min-width:500px}
.admin-table th {padding:8px 10px;font-size:10px}
.admin-table td {padding:8px 10px;font-size:12px}
.dashboard-stats {grid-template-columns:1fr;gap:10px}
.stat-card {padding:14px 16px;gap:12px}
.stat-card .stat-icon {width:40px;height:40px;font-size:16px;border-radius:8px}
.stat-card .stat-number {font-size:22px}
.stat-card .stat-label {font-size:11px}
.modal {max-width:100%;padding:20px;margin:16px}
.modal-overlay {padding:16px;align-items:flex-end}
.admin-login {margin:40px auto;padding:24px 20px;max-width:100%}
.tab-content {padding:14px}
.sidebar-user-info {padding:10px 12px;margin:4px 8px 6px}
.sidebar-avatar,
.sidebar-avatar-placeholder {width:32px;height:32px;font-size:12px}
.sidebar-username {font-size:12px}
.sidebar-role {font-size:9px}
.sidebar-menu li a {padding:9px 12px;font-size:12px}
.sidebar-menu li a i {font-size:14px}
.sidebar-section-title {padding:6px 20px 4px;font-size:9px}
.sidebar-divider {margin:8px 14px}
.tool-content textarea,
.tool-content input[type="text"],
.tool-content input[type="number"],
.tool-content select {font-size:14px;padding:12px 14px}
.form-row {flex-direction:column !important;gap:8px !important}
.form-row > * {flex:none !important;width:100% !important}
.tool-btn-group {flex-wrap:wrap}
.tool-btn-group .btn {flex:1;min-width:0;padding:10px 8px;font-size:12px}
.doc-content h1 {font-size:20px}
.doc-content h2 {font-size:16px}
.doc-content h3 {font-size:14px}
.docs-subnav {gap:4px}
.docs-subnav a {padding:6px 10px;font-size:11px}
.about-hero h1 {font-size:22px}
.about-hero .logo-icon {width:60px;height:60px;border-radius:16px}
.about-hero .logo-icon i {font-size:26px}
.feature-grid {grid-template-columns:1fr}
.category-list {grid-template-columns:1fr}
.api-docs h1 {font-size:1.4rem}
.api-docs {padding:14px}
.code-block {font-size:0.78rem;padding:10px 12px;overflow-x:auto}
.param-table {font-size:0.8rem}
.param-table th,
.param-table td {padding:6px 8px}
.tool-grid {grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
.tool-tag {font-size:0.78rem;padding:4px 8px}
.login-form {padding:20px 16px}
.apikey-section {padding:14px}
.apikey-card {padding:12px;flex-direction:column;gap:8px}
.apikey-value {font-size:11px;word-break:break-all}
.flash {padding:8px 12px;font-size:11px;border-radius:8px}
}
@media (max-width:480px) {
.header-top {height:48px;padding:0 10px}
.logo {font-size:15px;margin-left:6px;gap:8px}
.logo i {width:28px;height:28px;font-size:13px}
.search-bar {margin:0 6px}
.search-bar input {font-size:12px;padding:7px 10px 7px 32px}
.hero {padding:18px 10px 16px}
.hero h1 {font-size:18px}
.hero .stats {gap:14px}
.hero .stat-num {font-size:20px}
.cat-chip {padding:4px 10px;font-size:10px}
.tool-card {padding:12px}
.tool-card .tool-icon {width:32px;height:32px;font-size:13px}
.tool-card h3 {font-size:12px}
.tool-card p {font-size:10px}
.main-content {padding:10px 10px 20px}
.sidebar {width:240px;top:48px;height:calc(100vh - 48px);z-index:1001}
.sidebar-menu li a {padding:8px 10px;font-size:11px}
.admin-nav {flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.admin-nav a {white-space:nowrap;flex-shrink:0;padding:5px 10px;font-size:11px}
.admin-table {min-width:450px}
.modal {padding:16px;margin:10px}
.modal h2 {font-size:15px}
.btn {padding:8px 14px;font-size:12px}
.tool-content {padding:8px !important}
.tool-content textarea {min-height:100px;font-size:11px}
.tool-content input[type="text"],
.tool-content input[type="number"] {font-size:14px}
.tool-btn-group {flex-direction:column}
.tool-btn-group .btn {width:100%}
.code-block {font-size:0.72rem;padding:8px 10px}
.param-table {font-size:0.75rem}
.param-table th,
.param-table td {padding:5px 6px;white-space:normal}
.tool-grid {grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.about-hero h1 {font-size:18px}
.about-hero .logo-icon {width:52px;height:52px}
.feature-card {padding:10px}
.category-item {padding:10px}
.login-form input {font-size:16px}
}
@keyframes spin { to { transform: rotate(360deg); } }
.tool-progress{margin:16px 0;display:none}
.tool-progress.active{display:block}
.tool-progress-track{width:100%;height:6px;border-radius:3px;background:var(--border-color);overflow:hidden}
.tool-progress-bar{height:100%;width:0;border-radius:3px;background:var(--accent);transition:width .3s ease-out}
.tool-progress-info{text-align:center;margin-top:10px;font-size:13px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;gap:8px}
.tool-progress-pct{font-weight:700;color:var(--accent);font-size:15px;min-width:36px}
.tool-progress-label{flex:1}
.tool-progress-spinner{width:14px;height:14px;border:2px solid var(--border-color);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}