@layer components,utilities;@layer components{.tool-workspace,.gen-grid,.grid-2,.grid-2-col,.base64-grid,.json-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start;margin-top:1.5rem;margin-bottom:2rem;}.tool-workspace.full-width,.tool-box{display:block;margin-top:1.5rem;margin-bottom:2rem;}@media (max-width:900px){.tool-workspace,.gen-grid,.grid-2,.grid-2-col,.base64-grid,.json-editor-grid{grid-template-columns:1fr;gap:1.25rem;}}.tool-sticky-col{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto;}@media (max-width:900px){.tool-sticky-col{position:static;max-height:none;overflow-y:visible;}}.tool-card,.sys-card,.gen-card,.cfg-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1.25rem;box-sizing:border-box;}.tool-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:0.75rem;border-bottom:1px solid var(--border-color);}.tool-card-header .tool-card-title,.tool-card-header .sys-section-title,.tool-card-header .cfg-section-title{margin:0;border:none;padding:0;}.tool-card-title,.sys-section-title,.cfg-section-title,.section-title{font-family:var(--font-heading);font-size:0.95rem;font-weight:600;color:var(--text-main);margin:0 0 0.85rem 0;padding-bottom:0.45rem;border-bottom:1px solid var(--border-color);letter-spacing:0.01em;display:flex;align-items:center;justify-content:space-between;}.faq-card{margin-bottom:0.75rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:0.75rem 1rem;}.faq-summary{font-weight:600;cursor:pointer;color:var(--text-main);font-size:0.9rem;}.faq-answer{margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.5;}.faq-section .section-title{font-size:1.1rem;margin-bottom:1rem;}.footer-copy{margin-bottom:0.75rem;}.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0.75rem;align-items:center;}.tool-form-group,.param-group,.form-group{display:flex;flex-direction:column;gap:0.4rem;margin-bottom:1rem;}.tool-form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:0.75rem;}@media (max-width:600px){.tool-form-row{grid-template-columns:1fr;}}.tool-label,.param-label{font-size:0.82rem;font-weight:600;color:var(--text-main);display:flex;align-items:center;justify-content:space-between;}.tool-hint,.tool-helper-text,.param-desc{font-size:0.75rem;color:var(--text-muted);line-height:1.4;margin:0;}.tool-input,.tool-textarea,.tool-select,.param-input,.jwt-input,.json-input,.b64-box{width:100%;box-sizing:border-box;background:var(--bg-dark);border:1px solid var(--border-color);color:var(--text-main);padding:0.6rem 0.8rem;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:0.85rem;line-height:1.5;transition:border-color var(--transition),outline var(--transition);}.tool-textarea,.b64-box,.jwt-input,.json-input{min-height:140px;resize:vertical;}.tool-input:focus,.tool-textarea:focus,.tool-select:focus,.param-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--text-main);}.tool-actions,.tool-action-bar,.tool-btn-group,.btn-group{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem;}.tool-preset-bar,.preset-bar,.preset-tabs,.tool-preset-group,.profile-badge-group{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1rem;}.tool-preset-btn,.btn-preset,.preset-btn,.tab-btn,.profile-btn{font-family:var(--font-sans);font-size:0.8rem;font-weight:600;padding:0.4rem 0.75rem;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;text-align:center;transition:color var(--transition),background-color var(--transition),border-color var(--transition);}.tool-preset-btn:hover,.btn-preset:hover,.preset-btn:hover,.tab-btn:hover{border-color:var(--border-hover);color:var(--text-main);}.tool-preset-btn.active,.btn-preset.active,.preset-btn.active,.tab-btn.active{background:var(--text-main);color:var(--bg-dark);border-color:var(--text-main);}.tool-btn,.btn-tool,.tool-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;font-family:var(--font-sans);font-size:0.82rem;font-weight:600;padding:0.5rem 1rem;background:var(--text-main);color:var(--bg-dark);border:1px solid var(--text-main);border-radius:var(--radius-sm);cursor:pointer;transition:opacity var(--transition),transform var(--transition);}.tool-btn:hover,.btn-tool:hover,.tool-btn-primary:hover{opacity:0.9;}.tool-btn:active,.btn-tool:active,.tool-btn-primary:active{transform:scale(0.98);}.tool-btn-secondary,.btn-action.outline{display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;font-family:var(--font-sans);font-size:0.82rem;font-weight:600;padding:0.5rem 0.9rem;background:var(--bg-secondary);color:var(--text-main);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:border-color var(--transition),background-color var(--transition);}.tool-btn-secondary:hover,.btn-action.outline:hover{border-color:var(--border-hover);background:var(--bg-card);color:var(--text-main);}.tool-btn-danger,.tool-btn-clear{background:transparent;color:var(--text-muted);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:0.5rem 0.8rem;font-size:0.82rem;cursor:pointer;transition:color var(--transition),border-color var(--transition);}.tool-btn-danger:hover,.tool-btn-clear:hover{color:#ef4444;border-color:#ef4444;}.tool-btn-copy,.btn-copy,.copy-code-btn{display:inline-flex;align-items:center;gap:0.35rem;font-size:0.78rem;font-weight:600;padding:0.35rem 0.75rem;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-main);border-radius:var(--radius-sm);cursor:pointer;transition:border-color var(--transition),background-color var(--transition);}.tool-btn-copy:hover,.btn-copy:hover,.copy-code-btn:hover{border-color:var(--text-main);}.tool-btn:focus-visible,.tool-btn-secondary:focus-visible,.tool-preset-btn:focus-visible,.btn-preset:focus-visible,.preset-btn:focus-visible,.btn-copy:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}.tool-code-viewer,.tool-output-box,.output-code{margin:0;padding:1rem;font-family:var(--font-mono);font-size:0.82rem;line-height:1.55;background:var(--code-bg);color:var(--text-main);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow-x:auto;white-space:pre-wrap;word-break:break-all;min-height:120px;box-sizing:border-box;}.code-viewer-wrap{display:flex;flex-direction:column;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--code-bg);overflow:hidden;margin-top:1rem;}.code-tab-nav{display:flex;align-items:center;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:0 0.5rem;overflow-x:auto;}.code-tab-btn{font-family:var(--font-mono);font-size:0.75rem;padding:0.6rem 0.85rem;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:color var(--transition),border-color var(--transition);}.code-tab-btn:hover{color:var(--text-main);}.code-tab-btn.active{color:var(--text-main);border-bottom-color:var(--text-main);font-weight:600;}.meter-box,.score-card{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);margin-bottom:1.25rem;}.meter-label{font-size:0.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;font-family:var(--font-mono);}.meter-score,.score-badge{font-size:0.85rem;font-weight:700;padding:0.25rem 0.6rem;border-radius:var(--radius-sm);background:var(--bg-dark);border:1px solid var(--border-color);color:var(--text-main);font-family:var(--font-mono);}.tool-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--border-color);border-radius:var(--radius-md);margin-top:1rem;margin-bottom:1rem;-webkit-overflow-scrolling:touch;}.tool-table{width:100%;border-collapse:collapse;font-size:0.85rem;text-align:left;}.tool-table th,.tool-table td{padding:0.65rem 0.9rem;border-bottom:1px solid var(--border-color);}.tool-table th{background:var(--bg-secondary);color:var(--text-muted);font-weight:600;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.03em;}.tool-table tr:last-child td{border-bottom:none;}.tool-table td strong{color:var(--text-main);}.tool-toggle-grid,.toggle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0.6rem;}.tool-toggle-item,.toggle-item,.checkbox-item{display:flex;align-items:flex-start;gap:0.65rem;font-size:0.85rem;color:var(--text-muted);cursor:pointer;padding:0.5rem 0.6rem;border-radius:var(--radius-sm);border:1px solid transparent;transition:background 0.15s ease,border-color 0.15s ease;}.tool-toggle-item:hover,.toggle-item:hover,.checkbox-item:hover{background:var(--bg-secondary);border-color:var(--border-color);color:var(--text-main);}.tool-toggle-item input[type="checkbox"],.toggle-item input[type="checkbox"],.checkbox-item input[type="checkbox"]{margin-top:0.2rem;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}.tool-toggle-title{font-size:0.85rem;font-weight:600;color:var(--text-main);line-height:1.3;}.tool-toggle-desc{font-size:0.78rem;color:var(--text-muted);line-height:1.4;margin-top:0.15rem;}.tree-viewer,.tool-tree-viewer{background:var(--code-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1rem;font-family:var(--font-mono);font-size:0.82rem;min-height:200px;max-height:500px;overflow-y:auto;color:var(--text-main);}.tree-key{color:var(--text-main);font-weight:600;}.tree-str{color:#10b981;}.tree-num{color:#3b82f6;}.tree-bool{color:#f59e0b;}.tree-null{color:#ef4444;}.tool-toast{position:fixed;bottom:24px;right:24px;background:var(--text-main);color:var(--bg-dark);font-family:var(--font-sans);font-weight:600;font-size:0.85rem;padding:0.6rem 1.2rem;border-radius:var(--radius-sm);box-shadow:0 4px 16px rgba(0,0,0,0.3);pointer-events:none;opacity:0;transform:translateY(12px);transition:opacity 0.2s cubic-bezier(0.16,1,0.3,1),transform 0.2s cubic-bezier(0.16,1,0.3,1);z-index:9999;}.tool-toast.show{opacity:1;transform:translateY(0);}.tab-bar{display:flex;gap:0.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border-color);padding-bottom:0.5rem;overflow-x:auto;}.tab-panel{display:none;}.tab-panel.active{display:block;}.result-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.5rem;}.result-card{background:var(--bg-main);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.25rem;text-align:center;}.result-card.total{border-color:var(--text-main);background:var(--code-bg);}.result-card .label{font-size:0.8rem;color:var(--text-muted);font-weight:500;margin-bottom:0.35rem;}.result-card .value{font-size:1.4rem;font-weight:700;color:var(--text-main);font-family:var(--font-mono);}.hardware-badge{display:inline-block;padding:0.6rem 1rem;border-radius:var(--radius-md);font-weight:600;font-size:0.9rem;font-family:var(--font-mono);}.hardware-badge.hw-ok{background:rgba(34,197,94,0.1);color:#22c55e;border:1px solid rgba(34,197,94,0.25);}.hardware-badge.hw-warn{background:rgba(234,179,8,0.1);color:#eab308;border:1px solid rgba(234,179,8,0.25);}.hardware-badge.hw-alert{background:rgba(239,68,68,0.1);color:#ef4444;border:1px solid rgba(239,68,68,0.25);}.token-preview-box{background:var(--bg-main);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.25rem;min-height:140px;line-height:2.2;font-family:var(--font-mono);font-size:0.95rem;}.tok-chunk{display:inline-block;padding:0.15rem 0.4rem;margin:0.15rem;border-radius:4px;font-weight:500;}.tok-0{background:rgba(59,130,246,0.15);color:#60a5fa;border:1px solid rgba(59,130,246,0.3);}.tok-1{background:rgba(168,85,247,0.15);color:#c084fc;border:1px solid rgba(168,85,247,0.3);}.tok-2{background:rgba(34,197,94,0.15);color:#4ade80;border:1px solid rgba(34,197,94,0.3);}.tok-3{background:rgba(249,115,22,0.15);color:#fb923c;border:1px solid rgba(249,115,22,0.3);}.tok-4{background:rgba(236,72,153,0.15);color:#f472b6;border:1px solid rgba(236,72,153,0.3);}}@layer utilities{.tool-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;}.tool-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem;}@media (max-width:640px){.tool-grid-2,.tool-grid-3{grid-template-columns:1fr;}}.tool-preset-group{display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:1rem;}.tool-actions-row{display:flex;gap:0.4rem;align-items:center;}.tool-mono-input{font-family:var(--font-mono);font-size:0.85rem;}.tool-mono-area{min-height:140px;font-family:var(--font-mono);font-size:0.85rem;line-height:1.5;}.tool-mono-area-lg{min-height:220px;font-family:var(--font-mono);font-size:0.85rem;line-height:1.5;}.tool-stat-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:0.5rem;text-align:center;}.tool-stat-val{font-size:1.1rem;font-weight:800;font-family:var(--font-mono);color:var(--text-main);line-height:1.2;}.tool-stat-val-cyan{color:#38bdf8;}.tool-stat-val-green{color:#10b981;}.tool-stat-val-red{color:#ef4444;}.tool-stat-val-amber{color:#f59e0b;}.tool-stat-lbl{font-size:0.68rem;color:var(--text-muted);text-transform:uppercase;font-family:var(--font-mono);font-weight:600;margin-top:0.15rem;}.tool-highlight-box{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:1.25rem;margin-bottom:1rem;text-align:center;}.tool-sub-heading{font-size:0.75rem;font-weight:700;font-family:var(--font-mono);color:var(--text-main);margin-bottom:0.4rem;text-transform:uppercase;letter-spacing:0.02em;}.tool-preview-surface{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:0.75rem;min-height:160px;display:flex;align-items:center;justify-content:center;overflow:hidden;}}@layer utilities{.u-m-0{margin:0 !important;}.u-mt-0{margin-top:0 !important;}.u-mb-0{margin-bottom:0 !important;}.u-mt-xs{margin-top:0.25rem !important;}.u-mt-sm{margin-top:0.5rem !important;}.u-mt-md{margin-top:0.75rem !important;}.u-mt-lg{margin-top:1rem !important;}.u-mt-xl{margin-top:1.25rem !important;}.u-mt-2xl{margin-top:1.5rem !important;}.u-mt-3xl{margin-top:2rem !important;}.u-mb-xs{margin-bottom:0.25rem !important;}.u-mb-sm{margin-bottom:0.5rem !important;}.u-mb-md{margin-bottom:0.75rem !important;}.u-mb-lg{margin-bottom:1rem !important;}.u-mb-xl{margin-bottom:1.25rem !important;}.u-mb-2xl{margin-bottom:1.5rem !important;}.u-mb-3xl{margin-bottom:2rem !important;}.u-p-0{padding:0 !important;}.u-p-xs{padding:0.25rem !important;}.u-p-sm{padding:0.5rem !important;}.u-p-md{padding:0.75rem !important;}.u-p-lg{padding:1rem !important;}.u-p-xl{padding:1.25rem !important;}.u-text-main{color:var(--text-main) !important;}.u-text-muted{color:var(--text-muted) !important;}.u-text-mono{font-family:var(--font-mono) !important;}.u-text-sans{font-family:var(--font-sans) !important;}.u-text-xs{font-size:0.75rem !important;}.u-text-sm{font-size:0.82rem !important;}.u-text-base{font-size:0.95rem !important;}.u-text-lg{font-size:1.1rem !important;}.u-text-xl{font-size:1.25rem !important;}.u-text-2xl{font-size:1.5rem !important;}.u-text-3xl{font-size:1.75rem !important;}.u-font-normal{font-weight:400 !important;}.u-font-medium{font-weight:500 !important;}.u-font-semibold{font-weight:600 !important;}.u-font-bold{font-weight:700 !important;}.u-font-extrabold{font-weight:800 !important;}.u-text-center{text-align:center !important;}.u-text-right{text-align:right !important;}.u-text-left{text-align:left !important;}.u-text-uppercase{text-transform:uppercase !important;}.u-break-all{word-break:break-word !important;}.u-line-height-1{line-height:1.2 !important;}.u-line-height-normal{line-height:1.5 !important;}.u-color-green{color:#10b981 !important;}.u-color-cyan{color:#38bdf8 !important;}.u-color-red{color:#ef4444 !important;}.u-color-amber{color:#f59e0b !important;}.u-color-purple{color:#a855f7 !important;}.u-flex{display:flex !important;}.u-inline-flex{display:inline-flex !important;}.u-flex-col{flex-direction:column !important;}.u-flex-wrap{flex-wrap:wrap !important;}.u-items-center{align-items:center !important;}.u-items-start{align-items:flex-start !important;}.u-items-end{align-items:flex-end !important;}.u-justify-center{justify-content:center !important;}.u-justify-between{justify-content:space-between !important;}.u-justify-end{justify-content:flex-end !important;}.u-flex-1{flex:1 !important;}.u-flex-2{flex:2 !important;}.u-flex-none{flex:none !important;}.u-gap-xs{gap:0.25rem !important;}.u-gap-sm{gap:0.5rem !important;}.u-gap-md{gap:0.75rem !important;}.u-gap-lg{gap:1rem !important;}.u-gap-xl{gap:1.5rem !important;}.u-grid{display:grid !important;}.u-grid-2{display:grid !important;grid-template-columns:1fr 1fr !important;gap:0.75rem !important;}.u-grid-3{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:0.75rem !important;}.u-grid-4{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:0.75rem !important;}.u-hidden{display:none !important;}.u-block{display:block !important;}.u-w-full{width:100% !important;}.u-h-auto{height:auto !important;}.u-max-w-full{max-width:100% !important;}.u-max-w-600{max-width:600px !important;margin-left:auto !important;margin-right:auto !important;}.u-cursor-pointer{cursor:pointer !important;}.u-overflow-y-auto{overflow-y:auto !important;}.u-overflow-x-auto{overflow-x:auto !important;}.u-code-box{min-height:220px !important;font-family:var(--font-mono) !important;font-size:0.85rem !important;}.u-code-box-tall{min-height:380px !important;font-family:var(--font-mono) !important;font-size:0.78rem !important;line-height:1.45 !important;}.u-bg-card{background:var(--bg-card) !important;border:1px solid var(--border-color) !important;border-radius:var(--radius-sm) !important;}.u-bg-surface{background:var(--code-bg) !important;border:1px solid var(--border-color) !important;border-radius:var(--radius-md) !important;}.u-bg-transparent{background:transparent !important;}.u-border-none{border:none !important;}.u-radius-sm{border-radius:var(--radius-sm) !important;}.u-radius-md{border-radius:var(--radius-md) !important;}.u-radius-full{border-radius:9999px !important;}.u-list-none{list-style:none !important;}.u-obj-contain{object-fit:contain !important;}.u-opacity-85{opacity:0.85 !important;}.u-transition{transition:all 0.2s ease !important;}}