:root{
  --blue:#4285F4; --red:#EA4335; --yellow:#FBBC05; --green:#34A853;
  --bg:#FFFFFF; --bg2:#F8F9FA; --card:#FFFFFF; --text:#202124; --text2:#5F6368;
  --border:#DADCE0; --hover:#E8F0FE; --radius:14px; --shadow:0 1px 3px rgba(60,64,67,.15),0 1px 2px rgba(60,64,67,.12);
}
[data-theme="dark"]{
  --bg:#202124; --bg2:#28292c; --card:#2d2e30; --text:#E8EAED; --text2:#9AA0A6; --border:#3c4043; --hover:#31353f;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Google Sans","Inter","Poppins","Segoe UI",Arial,sans-serif;background:var(--bg2);color:var(--text);transition:background .25s ease,color .25s ease;}
button{font-family:inherit;cursor:pointer}
.hidden{display:none !important}

.navbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--bg);border-bottom:1px solid var(--border);}
.nav-left{display:flex;align-items:center;gap:10px}
.logo{font-size:18px;font-weight:500;display:flex;align-items:center;gap:8px}
.logo-dot{width:12px;height:12px;border-radius:50%;background:conic-gradient(var(--blue),var(--red),var(--yellow),var(--green));display:inline-block}
.nav-search{flex:1;max-width:520px;margin:0 auto}
.nav-search input{width:100%;padding:10px 16px;border-radius:24px;border:1px solid var(--border);background:var(--bg2);color:var(--text);outline:none;transition:.25s}
.nav-search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(66,133,244,.15)}
.nav-right{display:flex;gap:6px}
.icon-btn{background:transparent;border:none;font-size:18px;padding:8px;border-radius:50%;color:var(--text2);transition:.2s}
.icon-btn:hover{background:var(--hover);color:var(--blue)}

.app-shell{display:flex;min-height:calc(100vh - 57px)}
.sidebar{width:230px;background:var(--bg);border-right:1px solid var(--border);padding:14px 8px;overflow-y:auto}
.cat-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:20px;color:var(--text2);font-size:14px;margin-bottom:2px;transition:.2s;cursor:pointer}
.cat-item:hover{background:var(--hover);color:var(--blue)}
.cat-item.active{background:var(--hover);color:var(--blue);font-weight:500}
.cat-dot{width:8px;height:8px;border-radius:50%}

.main{flex:1;padding:24px 32px;max-width:1200px}
.hero h1{font-size:32px;margin:8px 0 4px}
.hero p{color:var(--text2);margin-bottom:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.tcard{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease;cursor:pointer}
.tcard:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(60,64,67,.2)}
.tcard .icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;margin-bottom:10px}
.tcard h3{margin:0 0 4px;font-size:15px}
.tcard p{margin:0;font-size:12px;color:var(--text2)}
.tcard .cat-tag{font-size:10px;color:var(--blue);text-transform:uppercase;margin-top:8px;display:inline-block}
.star{float:right;background:none;border:none;font-size:16px;color:var(--text2)}
.star.active{color:var(--yellow)}

.back-btn{background:none;border:none;color:var(--blue);font-size:14px;margin-bottom:14px;padding:8px 0}
.tool-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.tool-panel h2{margin-top:0}
.tool-panel .desc{color:var(--text2);margin-bottom:16px;font-size:14px}
.io-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:800px){.io-row{grid-template-columns:1fr}}
textarea,input[type=text],input[type=number],select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);color:var(--text);font-family:monospace;font-size:13px;resize:vertical}
textarea{min-height:220px}
label{font-size:12px;color:var(--text2);font-weight:600;display:block;margin-bottom:6px;text-transform:uppercase}
.btn-row{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}
.btn{padding:9px 16px;border:none;border-radius:20px;font-size:13px;font-weight:500;transition:.2s;color:#fff}
.btn.blue{background:var(--blue)} .btn.red{background:var(--red)} .btn.green{background:var(--green)} .btn.yellow{background:var(--yellow);color:#202124}
.btn.outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.field{margin-bottom:14px}
.inline-fields{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.inline-fields .field{flex:1;min-width:140px}
.result-box{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:14px;font-family:monospace;font-size:13px;white-space:pre-wrap;word-break:break-word;min-height:50px}
.swatch{display:inline-block;width:100%;height:60px;border-radius:8px;border:1px solid var(--border);margin-bottom:10px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--text);color:var(--bg);padding:12px 20px;border-radius:8px;font-size:13px;opacity:0;pointer-events:none;transition:.3s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
table.simple{border-collapse:collapse;width:100%;font-size:13px}
table.simple td,table.simple th{border:1px solid var(--border);padding:6px 10px;text-align:left}