:root{--primary:#6366f1;--primary-dark:#4f46e5;--accent:#6366f1;--bg:#f5f7fb;--bg-light:#ffffff;--card-bg:#ffffff;--text:#1e293b;--text-secondary:#64748b;--border:#e2e8f0;--shadow:0 2px 8px rgb(0 0 0 / 0.06);--shadow-hover:0 12px 28px rgb(0 0 0 / 0.12);--radius:16px;--gradient:linear-gradient(135deg,#667eea 0%,#764ba2 100%);--gradient-text:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#e056a0 100%);--input-bg:#ffffff;--code-bg:#f1f5f9;--glass-bg:rgba(255,255,255,0.7);--glass-border:rgba(255,255,255,0.3)}
[data-theme="dark"]{--bg:#0f172a;--bg-light:#1e293b;--card-bg:#1e293b;--text:#e2e8f0;--text-secondary:#94a3b8;--border:#334155;--shadow:0 2px 8px rgb(0 0 0 / 0.3);--shadow-hover:0 12px 28px rgb(0 0 0 / 0.5);--primary:#818cf8;--primary-dark:#6366f1;--accent:#818cf8;--input-bg:#1e293b;--code-bg:#0f172a;--glass-bg:rgba(30,41,59,0.8);--glass-border:rgba(51,65,85,0.5)}
[data-theme="dark"] body{background-image:radial-gradient(at 15% 80%,rgba(102,126,234,0.06) 0px,transparent 50%),radial-gradient(at 85% 20%,rgba(118,75,162,0.06) 0px,transparent 50%),radial-gradient(at 50% 50%,rgba(224,86,160,0.03) 0px,transparent 50%)}
[data-theme="dark"] .search-box,[data-theme="dark"] textarea,[data-theme="dark"] input[type=text],[data-theme="dark"] input[type=number],[data-theme="dark"] input[type=email],[data-theme="dark"] input[type=url],[data-theme="dark"] input[type=password],[data-theme="dark"] select{background:var(--input-bg);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .btn-library,[data-theme="dark"] .btn-secondary{background:rgba(99,102,241,0.15);color:var(--text);border-color:rgba(99,102,241,0.3)}
[data-theme="dark"] pre,[data-theme="dark"] code{background:var(--code-bg);color:#e2e8f0}
[data-theme="dark"] table th{background:#334155;color:var(--text)}
[data-theme="dark"] table td{border-color:var(--border);color:var(--text)}
[data-theme="dark"]::placeholder{color:#64748b}
[data-theme="dark"] .preview-area{background:var(--bg-secondary)}
[data-theme="dark"] .output-box{background:var(--bg-secondary);color:var(--text)}
[data-theme="dark"] .btn-secondary:hover{background:rgba(99,102,241,0.25);border-color:rgba(99,102,241,0.5)}
[data-theme="dark"]::-webkit-scrollbar-track{background:#1e293b}
[data-theme="dark"]::-webkit-scrollbar-thumb{background:#475569}
[data-theme="dark"]::-webkit-scrollbar-thumb:hover{background:#64748b}
[data-theme="dark"] tr:hover{background:rgba(102,126,234,0.08)}
[data-theme="cosmic"]{--primary:#7c3aed;--primary-dark:#6d28d9;--accent:#a78bfa;--bg:#0f0b1e;--bg-light:#1a1333;--card-bg:#1a1333;--text:#ddd6fe;--text-secondary:#9f8ec4;--border:#2d2252;--shadow:0 2px 8px rgb(124 58 237 / 0.1);--shadow-hover:0 12px 28px rgb(124 58 237 / 0.2);--input-bg:#1a1333;--code-bg:#0f0b1e;--gradient:linear-gradient(135deg,#7c3aed,#4f46e5);--gradient-text:linear-gradient(135deg,#7c3aed,#4f46e5 50%,#a78bfa 100%);--glass-bg:rgba(26,19,51,0.85);--glass-border:rgba(45,34,82,0.5)}
[data-theme="cosmic"] body{background-image:radial-gradient(at 20% 80%,rgba(124,58,237,0.08) 0px,transparent 50%),radial-gradient(at 80% 20%,rgba(79,70,229,0.06) 0px,transparent 50%)}
[data-theme="cosmic"] .search-box,[data-theme="cosmic"] textarea,[data-theme="cosmic"] input[type=text],[data-theme="cosmic"] input[type=number],[data-theme="cosmic"] input[type=email],[data-theme="cosmic"] input[type=url],[data-theme="cosmic"] input[type=password],[data-theme="cosmic"] select{background:var(--input-bg);color:var(--text);border-color:var(--border)}
[data-theme="cosmic"] .btn-library,[data-theme="cosmic"] .btn-secondary{background:rgba(124,58,237,0.15);color:var(--text);border-color:rgba(124,58,237,0.3)}
[data-theme="cosmic"] pre,[data-theme="cosmic"] code{background:var(--code-bg);color:#ddd6fe}
[data-theme="cosmic"] table th{background:#2d2252;color:var(--text)}
[data-theme="cosmic"] table td{border-color:var(--border);color:var(--text)}
[data-theme="cosmic"]::placeholder{color:#7c6fa0}
[data-theme="cosmic"]::-webkit-scrollbar-track{background:#1a1333}
[data-theme="cosmic"]::-webkit-scrollbar-thumb{background:#3d2e6e}
[data-theme="cosmic"] tr:hover{background:rgba(124,58,237,0.06)}
[data-theme="deepsea"]{--primary:#06b6d4;--primary-dark:#0891b2;--accent:#22d3ee;--bg:#0c1222;--bg-light:#131d33;--card-bg:#131d33;--text:#cbd5e1;--text-secondary:#6b8299;--border:#1e3048;--shadow:0 2px 8px rgb(6 182 212 / 0.08);--shadow-hover:0 12px 28px rgb(6 182 212 / 0.15);--input-bg:#131d33;--code-bg:#0c1222;--gradient:linear-gradient(135deg,#06b6d4,#3b82f6);--gradient-text:linear-gradient(135deg,#06b6d4,#3b82f6 50%,#67e8f9 100%);--glass-bg:rgba(19,29,51,0.85);--glass-border:rgba(30,48,72,0.5)}
[data-theme="deepsea"] body{background-image:radial-gradient(at 20% 80%,rgba(6,182,212,0.06) 0px,transparent 50%),radial-gradient(at 80% 20%,rgba(59,130,246,0.05) 0px,transparent 50%)}
[data-theme="deepsea"] .search-box,[data-theme="deepsea"] textarea,[data-theme="deepsea"] input[type=text],[data-theme="deepsea"] input[type=number],[data-theme="deepsea"] input[type=email],[data-theme="deepsea"] input[type=url],[data-theme="deepsea"] input[type=password],[data-theme="deepsea"] select{background:var(--input-bg);color:var(--text);border-color:var(--border)}
[data-theme="deepsea"] .btn-library,[data-theme="deepsea"] .btn-secondary{background:rgba(6,182,212,0.12);color:var(--text);border-color:rgba(6,182,212,0.25)}
[data-theme="deepsea"] pre,[data-theme="deepsea"] code{background:var(--code-bg);color:#cbd5e1}
[data-theme="deepsea"] table th{background:#1e3048;color:var(--text)}
[data-theme="deepsea"] table td{border-color:var(--border);color:var(--text)}
[data-theme="deepsea"]::placeholder{color:#4a6a82}
[data-theme="deepsea"]::-webkit-scrollbar-track{background:#131d33}
[data-theme="deepsea"]::-webkit-scrollbar-thumb{background:#1e3a5f}
[data-theme="deepsea"] tr:hover{background:rgba(6,182,212,0.05)}
[data-theme="sakura"]{--primary:#ec4899;--primary-dark:#db2777;--accent:#f472b6;--bg:#fdf2f8;--bg-light:#fff5f9;--card-bg:#fff5f9;--text:#4a0e2b;--text-secondary:#8b6b7a;--border:#fbcfe8;--shadow:0 2px 8px rgb(236 72 153 / 0.07);--shadow-hover:0 12px 28px rgb(236 72 153 / 0.13);--input-bg:#fff5f9;--code-bg:#fce7f3;--gradient:linear-gradient(135deg,#ec4899,#f472b6);--gradient-text:linear-gradient(135deg,#ec4899,#f472b6 50%,#fda4af 100%);--glass-bg:rgba(255,245,249,0.7);--glass-border:rgba(251,207,232,0.3)}
[data-theme="amber"]{--primary:#d97706;--primary-dark:#b45309;--accent:#f59e0b;--bg:#1a1612;--bg-light:#261f18;--card-bg:#261f18;--text:#e7ddd3;--text-secondary:#a09080;--border:#3d3024;--shadow:0 2px 8px rgb(217 119 6 / 0.08);--shadow-hover:0 12px 28px rgb(217 119 6 / 0.15);--input-bg:#261f18;--code-bg:#1a1612;--gradient:linear-gradient(135deg,#d97706,#f59e0b);--gradient-text:linear-gradient(135deg,#d97706,#f59e0b 50%,#fbbf24 100%);--glass-bg:rgba(38,31,24,0.85);--glass-border:rgba(61,48,36,0.5)}
[data-theme="amber"] body{background-image:radial-gradient(at 20% 80%,rgba(217,119,6,0.06) 0px,transparent 50%),radial-gradient(at 80% 20%,rgba(245,158,11,0.04) 0px,transparent 50%)}
[data-theme="amber"] .search-box,[data-theme="amber"] textarea,[data-theme="amber"] input[type=text],[data-theme="amber"] input[type=number],[data-theme="amber"] input[type=email],[data-theme="amber"] input[type=url],[data-theme="amber"] input[type=password],[data-theme="amber"] select{background:var(--input-bg);color:var(--text);border-color:var(--border)}
[data-theme="amber"] .btn-library,[data-theme="amber"] .btn-secondary{background:rgba(217,119,6,0.12);color:var(--text);border-color:rgba(217,119,6,0.25)}
[data-theme="amber"] pre,[data-theme="amber"] code{background:var(--code-bg);color:#e7ddd3}
[data-theme="amber"] table th{background:#3d3024;color:var(--text)}
[data-theme="amber"] table td{border-color:var(--border);color:var(--text)}
[data-theme="amber"]::placeholder{color:#7a6a5a}
[data-theme="amber"]::-webkit-scrollbar-track{background:#261f18}
[data-theme="amber"]::-webkit-scrollbar-thumb{background:#4a3d2e}
[data-theme="amber"] tr:hover{background:rgba(217,119,6,0.05)}
[data-theme="mint"]{--primary:#16a34a;--primary-dark:#15803d;--accent:#22c55e;--bg:#f0fdf4;--bg-light:#f7fef9;--card-bg:#f7fef9;--text:#14532d;--text-secondary:#4d7c5e;--border:#bbf7d0;--shadow:0 2px 8px rgb(22 163 74 / 0.06);--shadow-hover:0 12px 28px rgb(22 163 74 / 0.12);--input-bg:#f7fef9;--code-bg:#dcfce7;--gradient:linear-gradient(135deg,#16a34a,#22c55e);--gradient-text:linear-gradient(135deg,#16a34a,#22c55e 50%,#4ade80 100%);--glass-bg:rgba(247,254,249,0.7);--glass-border:rgba(187,247,208,0.3)}
[data-theme="cream"]{--primary:#f97316;--primary-dark:#ea580c;--accent:#fb923c;--bg:#fffbeb;--bg-light:#fef7ee;--card-bg:#fef7ee;--text:#451a03;--text-secondary:#8b7060;--border:#fed7aa;--shadow:0 2px 8px rgb(249 115 22 / 0.06);--shadow-hover:0 12px 28px rgb(249 115 22 / 0.12);--input-bg:#fef7ee;--code-bg:#fff7ed;--gradient:linear-gradient(135deg,#f97316,#fb923c);--gradient-text:linear-gradient(135deg,#f97316,#fb923c 50%,#fdba74 100%);--glass-bg:rgba(254,247,238,0.7);--glass-border:rgba(254,215,170,0.3)}
[data-theme="amoled"]{--primary:#7c3aed;--primary-dark:#6d28d9;--accent:#8b5cf6;--bg:#000000;--bg-light:#0a0a0a;--card-bg:#0a0a0a;--text:#d1d5db;--text-secondary:#6b7280;--border:#1f1f1f;--shadow:0 2px 8px rgb(0 0 0 / 0.5);--shadow-hover:0 12px 28px rgb(124 58 237 / 0.15);--input-bg:#0a0a0a;--code-bg:#000000;--gradient:linear-gradient(135deg,#7c3aed,#8b5cf6);--gradient-text:linear-gradient(135deg,#7c3aed,#8b5cf6 50%,#a78bfa 100%);--glass-bg:rgba(10,10,10,0.9);--glass-border:rgba(31,31,31,0.5)}
[data-theme="amoled"] body{background-image:none}
[data-theme="amoled"] .search-box,[data-theme="amoled"] textarea,[data-theme="amoled"] input[type=text],[data-theme="amoled"] input[type=number],[data-theme="amoled"] input[type=email],[data-theme="amoled"] input[type=url],[data-theme="amoled"] input[type=password],[data-theme="amoled"] select{background:var(--input-bg);color:var(--text);border-color:var(--border)}
[data-theme="amoled"] .btn-library,[data-theme="amoled"] .btn-secondary{background:rgba(167,139,250,0.1);color:var(--text);border-color:rgba(167,139,250,0.2)}
[data-theme="amoled"] pre,[data-theme="amoled"] code{background:var(--code-bg);color:#e5e5e5}
[data-theme="amoled"] table th{background:#1a1a1a;color:var(--text)}
[data-theme="amoled"] table td{border-color:var(--border);color:var(--text)}
[data-theme="amoled"]::placeholder{color:#4b5563}
[data-theme="amoled"]::-webkit-scrollbar-track{background:#0a0a0a}
[data-theme="amoled"]::-webkit-scrollbar-thumb{background:#27272a}
[data-theme="amoled"] tr:hover{background:rgba(167,139,250,0.05)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body,html,.tool-card,.panel,.btn,.search-box,.btn-library,.fav-btn,.library-card,header,nav,.breadcrumb,.tool-page,h1,h2,h3,.subtitle,.stats,.tag,table,th,td,tr,pre,code,textarea,input,select,.empty-state,.output-box{transition:background-color 0.3s ease,color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease}
html{font-size:16px}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background-color:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;will-change:background-color;background-image:radial-gradient(at 15% 80%,rgba(102,126,234,0.08) 0px,transparent 50%),radial-gradient(at 85% 20%,rgba(118,75,162,0.08) 0px,transparent 50%),radial-gradient(at 50% 50%,rgba(224,86,160,0.04) 0px,transparent 50%)}
.container{max-width:1400px;margin:0 auto;padding:40px 20px}
.header{text-align:center;margin-bottom:40px;position:relative;padding:40px 20px}
.header::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:600px;height:100%;background:radial-gradient(ellipse at center,rgba(102,126,234,0.1) 0%,transparent 70%);pointer-events:none}
.header h1{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:3.5rem;font-weight:900;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-2px;margin-bottom:8px;position:relative}
.btn-library{position:absolute;top:20px;right:20px;display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:rgba(102,126,234,0.1);border:1px solid rgba(102,126,234,0.25);color:#6366f1;text-decoration:none;border-radius:12px;font-size:0.9rem;font-weight:500;transition:all 0.3s ease;backdrop-filter:blur(10px)}
.btn-library:hover{background:rgba(102,126,234,0.18);border-color:rgba(102,126,234,0.4);transform:translateY(-2px);box-shadow:0 8px 20px rgba(102,126,234,0.15)}
.back-link{display:inline-block;color:#6366f1;text-decoration:none;margin-bottom:12px;font-size:0.9rem;text-align:left;transition:color 0.2s}
.back-link:hover{color:#4f46e5;text-decoration:underline}
h1{text-align:center;font-size:2rem;margin-bottom:4px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.subtitle{text-align:center;color:var(--text-secondary);margin-bottom:32px;font-size:1rem;font-weight:300;letter-spacing:2px;text-transform:uppercase}
.search-wrap{position:relative;margin-bottom:32px}
.search-wrap .search-icon{display:none}
.search-box{width:100%;padding:16px 20px 16px 44px;border:1px solid var(--border);border-radius:var(--radius);font-size:1rem;outline:none;transition:all 0.3s ease;background:var(--card-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:16px center;background-size:18px;color:var(--text);box-shadow:var(--shadow)}
.search-box::placeholder{color:var(--text-secondary)}
.search-box:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(99,102,241,0.1),0 8px 25px rgba(0,0,0,0.06)}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.tool-card{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:28px 16px;text-decoration:none;color:var(--text);box-shadow:var(--shadow);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:3px;background:var(--gradient);opacity:0;transition:opacity 0.3s ease}
.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:rgba(102,126,234,0.3)}
.tool-card:hover::before{opacity:1}
.tool-icon{font-size:2.8rem;margin-bottom:12px;transition:transform 0.3s ease}
.tool-card:hover .tool-icon{transform:scale(1.1)}
.tool-name{font-size:0.9rem;font-weight:500;text-align:center;color:var(--text)}
.tool-page{max-width:1400px;margin:0 auto;padding:24px}
.tool-page .back-link{display:inline-block;color:#6366f1;text-decoration:none;margin-bottom:16px;font-size:0.9rem;transition:color 0.2s}
.tool-page .back-link:hover{color:#4f46e5;text-decoration:underline}
.tool-page h2{font-size:1.6rem;margin-bottom:24px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.panel{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:16px;box-shadow:var(--shadow)}
.panel-title{font-size:0.8rem;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.copy-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.copy-item:last-child{border-bottom:none}
.copy-item .value{flex:1;font-family:'SF Mono',Monaco,Consolas,monospace;background:var(--code-bg);padding:4px 10px;border-radius:6px;font-size:0.9rem;word-break:break-all}
.copy-btn{display:inline-block;padding:4px 10px;background:var(--primary);color:#fff;border-radius:6px;font-size:0.8rem;cursor:pointer;user-select:none;transition:all 0.2s ease;white-space:nowrap}
.copy-btn:hover{background:var(--primary-dark);transform:scale(1.05)}
textarea,input[type="text"],input[type="number"],select{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:10px;font-size:0.95rem;font-family:'SF Mono',Monaco,Consolas,monospace;outline:none;resize:vertical;transition:all 0.2s ease;background:var(--card-bg);color:var(--text)}
textarea:focus,input:focus,select:focus{border-color:rgba(102,126,234,0.5);box-shadow:0 0 0 3px rgba(102,126,234,0.08)}
textarea::placeholder,input::placeholder{color:var(--text-secondary)}
select{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;cursor:pointer}
.btn{display:inline-block;padding:10px 20px;border:none;border-radius:10px;font-size:0.9rem;font-weight:500;cursor:pointer;transition:all 0.2s ease;margin-right:8px;margin-bottom:8px}
.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--gradient);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(102,126,234,0.25)}
.btn-success{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}
.btn-success:hover{background:linear-gradient(135deg,#16a34a,#15803d);transform:translateY(-2px);box-shadow:0 6px 16px rgba(34,197,94,0.25)}
.btn-warning{background:linear-gradient(135deg,#eab308,#ca8a04);color:#fff}
.btn-warning:hover{background:linear-gradient(135deg,#ca8a04,#a16207);transform:translateY(-2px);box-shadow:0 6px 16px rgba(234,179,8,0.25)}
.btn-purple{background:linear-gradient(135deg,#a855f7,#9333ea);color:#fff}
.btn-purple:hover{background:linear-gradient(135deg,#9333ea,#7e22ce);transform:translateY(-2px);box-shadow:0 6px 16px rgba(168,85,247,0.25)}
.btn-secondary{background:#f8fafc;color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:#f1f5f9;border-color:#cbd5e1}
.toolbar{margin-top:12px;display:flex;flex-wrap:wrap}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.two-col-vertical{display:grid;grid-template-columns:1fr;gap:20px}
@media (max-width:768px){.container{padding:20px 16px}
.tool-page{padding:16px}
.panel{padding:16px}
h1{font-size:1.5rem}
.tool-page h2{font-size:1.25rem;margin-bottom:16px}
.btn{padding:8px 14px;font-size:0.85rem}
.header{padding:30px 15px}
.header h1{font-size:2.5rem}
.subtitle{font-size:0.85rem;letter-spacing:1px}
.two-col{grid-template-columns:1fr}
.tools-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.btn-library{position:static;display:inline-flex;margin-top:16px}
.tool-card{padding:20px 12px}
.tool-icon{font-size:2.2rem}
th,td{padding:8px;font-size:0.8rem}
.preview-area{min-height:140px;padding:12px}
.output-box{padding:12px;font-size:0.8rem}
.empty-state{padding:40px 16px}
.empty-state .empty-icon{font-size:3.5rem}
.empty-state h3{font-size:1.1rem}
canvas{max-width:100%;height:auto;display:block}
textarea,input,select{font-size:16px}
.tool-page img,.tool-page svg,.tool-page video{max-width:100%;height:auto}
.tool-page div[style*="display:flex"],.tool-page div[style*="display:flex"]{flex-wrap:wrap !important}
}
.preview-area{background:#fafbfc;border:1px dashed var(--border);border-radius:10px;min-height:240px;overflow:auto;padding:16px;text-align:center;position:relative;scrollbar-width:none;-ms-overflow-style:none}
.preview-area::-webkit-scrollbar{display:none}
.zoom-bar{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:8px;padding:4px 8px;background:var(--bg-secondary,#f1f5f9);border-radius:8px;font-size:0.85rem}
.zoom-bar button{background:var(--bg);border:1px solid var(--border);border-radius:6px;width:28px;height:28px;cursor:pointer;font-size:1rem;line-height:1;color:var(--text);transition:all 0.2s}
.zoom-bar button:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.zoom-bar .zoom-val{min-width:44px;text-align:center;font-weight:600;color:var(--text);font-size:0.8rem}
.preview-area svg{max-width:100%;height:auto;display:block;margin:0 auto;transition:width 0.2s ease;cursor:grab}
.preview-area svg:active{cursor:grabbing}
.output-box{background:#fafbfc;border:1px solid var(--border);border-radius:10px;padding:16px;font-family:'SF Mono',Monaco,Consolas,monospace;font-size:0.85rem;white-space:pre-wrap;word-break:break-all;min-height:60px;color:var(--text)}
table{width:100%;border-collapse:collapse;font-size:0.9rem}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)}
th{background:#fafbfc;font-weight:600;font-size:0.8rem;text-transform:uppercase;color:#6366f1}
tr:hover{background:rgba(102,126,234,0.03)}
.tag{display:inline-block;padding:4px 10px;border-radius:6px;font-size:0.75rem;font-weight:500;margin-right:6px}
.tag-blue{background:rgba(102,126,234,0.12);color:#6366f1}
.tag-green{background:rgba(34,197,94,0.12);color:#16a34a}
.tag-red{background:rgba(239,68,68,0.12);color:#dc2626}
.error-text{color:#dc2626;font-size:0.85rem}
.success-text{color:#16a34a;font-size:0.85rem}
.empty-state{text-align:center;padding:80px 20px}
@keyframes float{0%,100%{transform:translateY(0)}
50%{transform:translateY(-10px)}
}
.empty-state .empty-icon{font-size:5rem;margin-bottom:20px;animation:float 3s ease-in-out infinite}
.empty-state h3{font-size:1.3rem;margin-bottom:10px;color:var(--text);font-weight:600}
.empty-state p{color:var(--text-secondary);margin-bottom:24px}
.stats{text-align:center;margin-bottom:24px;color:var(--text-secondary);font-size:0.9rem}
.cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;justify-content:center}
.cat-tabs .btn{padding:5px 14px;font-size:0.82rem;border-radius:18px;letter-spacing:0.3px}
.cat-tabs .btn-primary{box-shadow:0 2px 8px rgba(99,102,241,0.2)}
.cat-tabs .btn-secondary{background:var(--bg,#f1f5f9);color:var(--text-secondary,#64748b);border:none}
.cat-tabs .btn-secondary:hover{background:#e2e8f0;color:var(--text)}
.category-page{max-width:1400px;margin:0 auto;padding:20px}
.cat-tag{position:absolute;top:8px;left:8px;font-size:0.6rem;background:var(--bg,#f1f5f9);color:var(--text-secondary,#64748b);padding:2px 7px;border-radius:8px;line-height:1.4;max-width:calc(100% - 52px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.security-tag{display:inline-block;font-size:0.65rem;padding:1px 6px;border-radius:8px;line-height:1.4;margin-top:6px;font-weight:500;pointer-events:none}
.security-tag.local{background:rgba(16,185,129,0.1);color:#059669}
.security-tag.proxy{background:rgba(59,130,246,0.1);color:#2563eb}
.library-card{position:relative;padding:28px 16px 24px}
.library-card .tool-icon{margin-top:4px}
.library-card.is-favorite{border-color:rgba(102,126,234,0.4);background:linear-gradient(135deg,rgba(102,126,234,0.06) 0%,var(--card-bg) 100%)}
.fav-btn{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:2px solid var(--border);background:var(--card-bg);color:var(--text-secondary);font-size:1rem;font-weight:bold;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;z-index:10}
.fav-btn:hover{border-color:#667eea;color:#667eea;transform:scale(1.1)}
.fav-btn.active{background:var(--gradient);border-color:transparent;color:#fff}
.tool-link{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--text);width:100%}
.tool-desc{font-size:0.75rem;color:var(--text-secondary);text-align:center;margin-top:8px;line-height:1.4}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}
.breadcrumb{font-size:.8rem;color:var(--text-secondary);margin-bottom:10px;max-width:1400px;margin-left:auto;margin-right:auto;padding:0 12px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px}
.breadcrumb a{color:var(--primary);text-decoration:none;opacity:0.8;transition:opacity 0.2s}
.breadcrumb a:hover{opacity:1;text-decoration:underline}
.breadcrumb .sep{margin:0 6px;opacity:0.4;font-size:0.7rem}
.bc-docs{font-size:.75rem;color:var(--text-secondary);text-decoration:none;opacity:0.7;transition:opacity 0.2s,color 0.2s;white-space:nowrap}
.bc-docs:hover{opacity:1;color:var(--primary)}
.tc-footer{text-align:center;padding:20px 16px;font-size:0.75rem;color:var(--text-secondary);line-height:1.8;border-top:1px solid var(--border);margin-top:32px}
.tc-footer a{color:var(--text-secondary);margin:0 8px;text-decoration:none;transition:color 0.2s}
.tc-footer a:hover{color:var(--primary)}
.related-tools{max-width:1400px;margin:0 auto;padding:16px 12px;font-size:.75rem;color:var(--text-secondary);text-align:center;line-height:1.8}
.related-tools .rel-label{margin-right:4px;opacity:.7}
.related-tools a{color:var(--text-secondary);text-decoration:none;transition:color .2s;white-space:nowrap}
.related-tools a:hover{color:var(--primary);text-decoration:underline}
.related-tools .rel-sep{margin:0 6px;opacity:.4}
.recent-tools-bar{margin-bottom:20px;overflow:hidden;transition:all .35s cubic-bezier(.4,0,.2,1)}
.recent-tools-bar.collapsed{max-height:44px}
.recent-tools-bar.expanded{max-height:200px}
.recent-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);transition:all .25s cubic-bezier(.4,0,.2,1);user-select:none;position:relative}
.recent-header:hover{border-color:var(--primary);box-shadow:0 2px 12px rgba(99,102,241,.12)}
.recent-tools-bar.expanded .recent-header{border-radius:var(--radius) var(--radius) 0 0;border-bottom:1px solid var(--border)}
.recent-tools-bar.expanded .recent-header::after{content:'';position:absolute;bottom:-1px;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:.3}
.recent-label-wrap{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text-secondary)}
.recent-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:linear-gradient(135deg,var(--primary),#8b5cf6);color:#fff;font-size:.65rem;font-weight:600;border-radius:9px;transition:transform .3s}
.recent-header:hover .recent-count{transform:scale(1.1)}
.recent-toggle{font-size:.7rem;color:var(--text-secondary);transition:transform .35s cubic-bezier(.4,0,.2,1);width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.recent-tools-bar.expanded .recent-toggle{transform:rotate(180deg);background:rgba(99,102,241,.1);color:var(--primary)}
.recent-content{display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--card-bg);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);overflow-x:auto;-webkit-overflow-scrolling:touch;max-height:0;opacity:0;transform:translateY(-10px);transition:all .35s cubic-bezier(.4,0,.2,1)}
.recent-tools-bar.expanded .recent-content{max-height:80px;opacity:1;transform:translateY(0);padding:12px 16px}
.recent-content::-webkit-scrollbar{display:none}
.recent-list{display:flex;gap:8px;flex:1;min-width:0}
.recent-item{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;background:var(--bg);border:1px solid var(--border);border-radius:20px;text-decoration:none;color:var(--text);font-size:.8rem;white-space:nowrap;transition:all .2s;flex-shrink:0}
.recent-item:hover{border-color:var(--primary);color:var(--primary);background:rgba(99,102,241,0.06);transform:translateY(-1px);box-shadow:0 2px 8px rgba(99,102,241,.12)}
.recent-icon{font-size:1rem}
.recent-name{max-width:80px;overflow:hidden;text-overflow:ellipsis}
#tc-back-top{position:fixed;bottom:128px;right:20px;z-index:9999;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--card-bg);color:var(--text);font-size:18px;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,0.15);display:none;align-items:center;justify-content:center;transition:all .3s ease;line-height:1;padding:0}
#tc-back-top:hover{transform:scale(1.1);box-shadow:0 4px 20px rgba(0,0,0,0.2)}
@media (max-width:768px){.breadcrumb{font-size:.75rem}
.tc-footer{padding:16px 12px;font-size:0.7rem}
.recent-tools-bar{padding:10px 12px;gap:8px;margin-bottom:16px}
.recent-item{padding:3px 8px;font-size:.75rem}
#tc-back-top{bottom:116px;right:16px;width:40px;height:40px;font-size:16px}
}
@media (max-width:480px){.container{padding:16px 12px}
.category-page{padding:16px 12px}
.tool-page{padding:12px}
.panel{padding:12px}
.tools-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.tool-card{padding:16px 8px}
.tool-icon{font-size:1.8rem;margin-bottom:8px}
.tool-name{font-size:0.75rem}
h1{font-size:1.3rem}
.header h1{font-size:2rem}
.tool-page h2{font-size:1.1rem;margin-bottom:12px}
.btn{padding:6px 12px;font-size:0.8rem;margin-right:4px;margin-bottom:4px}
.back-link{font-size:0.8rem}
.search-box{padding:12px 14px 12px 40px}
.search-wrap{margin-bottom:20px}
.toolbar{gap:4px}
.cat-tabs{gap:6px}
.cat-tabs .btn{padding:4px 10px;font-size:0.78rem}
.cat-tag{font-size:0.55rem;padding:1px 5px}
}
body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
textarea,input,[contenteditable],pre,code,.tool-result,.output-area,.result-box,.code-block{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}