:root {
    --bg-body: #0b0d17;
    --bg-sidebar: #10132a;
    --bg-card: rgba(255,255,255,0.03);
    --bg-input: #0d0f22;
    --border: rgba(255,255,255,0.07);
    --border-hover: rgba(255,255,255,0.14);
    --accent: #6366f1;
    --accent-glow: rgba(99,102,241,0.25);
    --accent-hover: #4f46e5;
    --green: #22c55e;
    --red: #ef4444;
    --amber: #f59e0b;
    --text: #e2e8f0;
    --text-muted: #64748b;
    --text-dim: #475569;
    --radius: 12px;
    --radius-sm: 8px;
    --mono: 'JetBrains Mono', monospace;
    --sans: 'Inter', system-ui, sans-serif;
    --sidebar-w: 240px;
    --topbar-h: 60px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{font-family:var(--sans);background:var(--bg-body);color:var(--text);min-height:100vh;display:flex;overflow:hidden}
.sidebar{width:var(--sidebar-w);height:100vh;background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:100;transition:transform .3s ease}
.sidebar-header{padding:20px 20px 16px;border-bottom:1px solid var(--border)}
.logo{display:flex;align-items:center;gap:10px}
.logo-icon{font-size:1.6rem;filter:drop-shadow(0 0 8px var(--accent-glow))}
.logo-text{font-size:1.4rem;font-weight:700;background:linear-gradient(135deg,#fff,#a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sidebar-nav{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:4px}
.sidebar-nav::-webkit-scrollbar{width:3px}
.sidebar-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius-sm);background:transparent;border:none;color:var(--text-muted);font-size:.9rem;cursor:pointer;transition:all .2s;text-align:left;width:100%}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-item.active{background:var(--accent);color:#fff;font-weight:500;box-shadow:0 4px 16px var(--accent-glow)}
.nav-icon{font-family:var(--mono);font-size:.85rem;width:28px;text-align:center;flex-shrink:0;font-weight:600}
.sidebar-footer{padding:14px 20px;border-top:1px solid var(--border)}
.version{font-size:.7rem;color:var(--text-dim)}
.main-content{margin-left:var(--sidebar-w);flex:1;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.main-content::-webkit-scrollbar{width:6px}
.main-content::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.topbar{height:var(--topbar-h);min-height:var(--topbar-h);display:flex;align-items:center;gap:16px;padding:0 28px;border-bottom:1px solid var(--border);background:rgba(11,13,23,.8);backdrop-filter:blur(12px);position:sticky;top:0;z-index:50}
.page-title{font-size:1.15rem;font-weight:600}
.menu-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer}
.tool-panel{display:none;padding:24px 28px;flex:1;animation:fadeIn .25s ease}
.tool-panel.active{display:flex;flex-direction:column;gap:16px}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.split-panel{display:flex;gap:16px;flex:1;min-height:0}
.panel-col{flex:1;display:flex;flex-direction:column;min-width:0}
.panel-header{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:.85rem;color:var(--text-muted);font-weight:500}
.panel-actions{display:flex;gap:6px}
.code-area{flex:1;min-height:200px;resize:none;font-family:var(--mono);font-size:.85rem;background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:16px;outline:none;transition:border-color .2s;line-height:1.6}
.code-area:focus{border-color:var(--accent)}
.code-area.output{background:rgba(0,0,0,.3);color:#a5b4fc}
.code-input{font-family:var(--mono);font-size:.9rem;background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;outline:none;transition:border-color .2s;width:100%}
.code-input:focus{border-color:var(--accent)}
.small-input{width:70px;text-align:center}
.flag-input{width:50px;text-align:center}
.input-group{display:flex;flex-direction:column;gap:8px}
.input-group label{font-size:.85rem;color:var(--text-muted);font-weight:500}
.action-btn{padding:7px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}
.action-btn:hover{background:rgba(255,255,255,.08);border-color:var(--border-hover)}
.action-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.action-btn.primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px var(--accent-glow)}
.action-btn.large{padding:12px 24px;font-size:.9rem;border-radius:var(--radius)}
.action-btn.small{padding:4px 10px;font-size:.7rem}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.status-bar{font-family:var(--mono);font-size:.8rem;padding:8px 14px;border-radius:var(--radius-sm);min-height:36px}
.status-bar.success{background:rgba(34,197,94,.1);color:var(--green);border:1px solid rgba(34,197,94,.2)}
.status-bar.error{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.2)}
.regex-input-row{display:flex;align-items:center;gap:4px}
.regex-delim{font-family:var(--mono);font-size:1.2rem;color:var(--accent);font-weight:700}
.results-box{font-family:var(--mono);font-size:.85rem;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);padding:16px;color:var(--text-muted);min-height:60px;line-height:1.8;word-break:break-all}
.match-highlight{background:rgba(99,102,241,.3);color:#fff;padding:2px 4px;border-radius:4px}
.password-display{font-family:var(--mono);font-size:1.5rem;font-weight:500;text-align:center;padding:28px 20px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);word-break:break-all;letter-spacing:2px;user-select:all;transition:border-color .3s}
.password-display:hover{border-color:var(--accent)}
.password-strength{height:6px;border-radius:3px;margin-top:-8px;transition:all .4s;background:var(--border)}
.password-strength.weak{background:linear-gradient(90deg,var(--red),var(--red) 25%,var(--border) 25%)}
.password-strength.fair{background:linear-gradient(90deg,var(--amber),var(--amber) 50%,var(--border) 50%)}
.password-strength.good{background:linear-gradient(90deg,var(--green),var(--green) 75%,var(--border) 75%)}
.password-strength.strong{background:linear-gradient(90deg,var(--green),#06b6d4)}
.option-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.option-grid.compact{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.option-item{padding:12px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm)}
.option-item label{font-size:.85rem;color:var(--text-muted);display:flex;align-items:center;gap:8px}
.option-item input[type="range"]{width:100%;accent-color:var(--accent);margin-top:8px}
.option-item input[type="checkbox"]{accent-color:var(--accent)}
.bulk-section{display:flex;align-items:center;gap:12px;margin-top:4px}
.bulk-section label{font-size:.85rem;color:var(--text-muted);display:flex;align-items:center;gap:8px}
.color-top-row{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.color-picker-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.color-picker-wrap input[type="color"]{width:100px;height:100px;border:none;border-radius:var(--radius);cursor:pointer;background:none;padding:0}
.color-picker-wrap input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.color-picker-wrap input[type="color"]::-webkit-color-swatch{border:2px solid var(--border);border-radius:var(--radius)}
#color-hex-label{font-family:var(--mono);font-size:.9rem;color:var(--text-muted)}
.color-conversions{display:flex;flex-direction:column;gap:8px;flex:1}
.color-conv-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}
.color-conv-item:hover{border-color:var(--accent);background:rgba(99,102,241,.05)}
.conv-label{font-size:.7rem;font-weight:700;color:var(--accent);width:36px}
.conv-val{font-family:var(--mono);font-size:.85rem;flex:1}
.palette-row{display:flex;gap:8px;flex-wrap:wrap}
.palette-swatch{width:70px;height:70px;border-radius:var(--radius-sm);cursor:pointer;transition:transform .2s;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px}
.palette-swatch:hover{transform:scale(1.08)}
.palette-swatch span{font-family:var(--mono);font-size:.6rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.preview-area{flex:1;min-height:200px;overflow-y:auto;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);padding:20px;font-size:.9rem;line-height:1.8}
.preview-area h1,.preview-area h2,.preview-area h3{margin:16px 0 8px;color:#fff}
.preview-area h1{font-size:1.6rem;border-bottom:1px solid var(--border);padding-bottom:8px}
.preview-area h2{font-size:1.3rem}
.preview-area h3{font-size:1.1rem}
.preview-area p{margin-bottom:12px}
.preview-area code{font-family:var(--mono);background:rgba(99,102,241,.15);padding:2px 6px;border-radius:4px;font-size:.85rem}
.preview-area pre{background:#0d0f22;padding:16px;border-radius:var(--radius-sm);overflow-x:auto;margin:12px 0}
.preview-area pre code{background:none;padding:0}
.preview-area ul,.preview-area ol{padding-left:24px;margin-bottom:12px}
.preview-area blockquote{border-left:3px solid var(--accent);padding-left:16px;color:var(--text-muted);margin:12px 0}
.preview-area a{color:var(--accent)}
.preview-area strong{color:#fff}
.preview-area hr{border:none;border-top:1px solid var(--border);margin:16px 0}
.hash-results{display:flex;flex-direction:column;gap:10px}
.hash-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm)}
.hash-label{font-size:.75rem;font-weight:700;color:var(--accent);width:60px;flex-shrink:0}
.hash-value{font-family:var(--mono);font-size:.75rem;flex:1;word-break:break-all;color:var(--text-muted);user-select:all}
.diff-output{font-family:var(--mono);font-size:.8rem;line-height:1.7;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);padding:16px;overflow-x:auto;max-height:400px;overflow-y:auto;white-space:pre}
.diff-add{color:var(--green);background:rgba(34,197,94,.08);display:block}
.diff-remove{color:var(--red);background:rgba(239,68,68,.08);display:block}
.diff-same{color:var(--text-dim);display:block}
.timestamp-live{display:flex;align-items:center;justify-content:center;gap:16px;padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}
.ts-label{font-size:.85rem;color:var(--text-muted)}
.ts-value{font-family:var(--mono);font-size:1.8rem;font-weight:600;color:var(--accent);letter-spacing:1px}
/* JWT */
.jwt-parts{display:flex;flex-direction:column;gap:12px}
.jwt-part-header{font-family:var(--mono);font-size:.75rem;font-weight:700;margin-bottom:6px;letter-spacing:1px}
/* Cron */
.cron-reference{display:flex;flex-direction:column;gap:6px}
.cron-ref-row{display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.85rem}
.cron-field{font-weight:600;color:var(--accent);width:110px;flex-shrink:0}
/* CSS Generator */
.css-preview{height:120px;border-radius:var(--radius);border:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.shadow-box{width:120px;height:70px;background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--border)}
.code-output-row{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);margin-top:8px}
.code-output-block{font-family:var(--mono);font-size:.8rem;flex:1;color:#a5b4fc;word-break:break-all}
/* QR */
#qr-output img,#qr-output table{margin:0 auto;border-radius:var(--radius)}
.option-item input[type="color"]{width:36px;height:28px;border:none;border-radius:4px;cursor:pointer;background:none;padding:0}
/* Blocker & Toggle */
.blocker-header{padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px}
.blocker-status-card{display:flex;justify-content:space-between;align-items:center}
.status-label{font-size:1.1rem;font-weight:600;color:var(--text)}
.switch{position:relative;display:inline-block;width:54px;height:28px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--bg-input);transition:.4s;border:1px solid var(--border)}
.slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background-color:#fff;transition:.4s}
input:checked+.slider{background-color:var(--accent);border-color:var(--accent)}
input:focus+.slider{box-shadow:0 0 1px var(--accent)}
input:checked+.slider:before{transform:translateX(26px)}
.slider.round{border-radius:28px}
.slider.round:before{border-radius:50%}
.blocked-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:8px}
.blocked-item{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm)}
.blocked-url{font-family:var(--mono);font-size:.85rem;color:var(--text-muted)}
.remove-btn{background:none;border:none;color:var(--red);cursor:pointer;font-size:1.2rem;line-height:1;padding:4px}
.remove-btn:hover{color:#ff6b6b}
@media(max-width:768px){
.sidebar{transform:translateX(-100%)}
.sidebar.open{transform:translateX(0)}
.main-content{margin-left:0}
.menu-toggle{display:block}
.split-panel{flex-direction:column}
.topbar{padding:0 16px}
.tool-panel{padding:16px}
}