:root{--font-display:"Syne","Noto Sans SC",sans-serif;--font-body:"Noto Sans SC",system-ui,sans-serif;--font-mono:"JetBrains Mono","SF Mono","Menlo","Consolas",monospace;--ink:#14201e;--ink-soft:#2a3b37;--muted:#5c6f6a;--muted-light:#8a9b96;--surface:#f7faf9;--surface-raised:#fff;--surface-muted:#eef4f2;--border:#d2ddd9;--border-strong:#b4c4bf;--accent:#0f766e;--accent-hover:#0b5f59;--accent-soft:rgba(15,118,110,.12);--accent-glow:rgba(15,118,110,.22);--warm:#c26d2d;--danger:#c43c3c;--success:#2f7a4a;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--shadow-sm:0 1px 2px rgba(20,32,30,.04);--shadow-md:0 8px 24px rgba(20,32,30,.06);--shadow-lift:0 14px 36px rgba(20,32,30,.1);--header-h:72px;--content-max:1240px;--tool-max:1040px}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}body{background-attachment:fixed;background-color:#e6eeec;background-image:radial-gradient(ellipse 90% 60% at 10% -10%,rgba(15,118,110,.14),transparent 55%),radial-gradient(ellipse 70% 50% at 100% 0,rgba(194,109,45,.1),transparent 50%),linear-gradient(180deg,#eaf1ef,#e3ebe9 48%,#dfe8e5),repeating-linear-gradient(0deg,transparent,transparent 47px,rgba(20,32,30,.025) 0,rgba(20,32,30,.025) 48px),repeating-linear-gradient(90deg,transparent,transparent 47px,rgba(20,32,30,.025) 0,rgba(20,32,30,.025) 48px);color:var(--ink);min-height:100vh}a{color:inherit}button,input,select,textarea{font-family:inherit}::-moz-selection{background:var(--accent-soft);color:var(--ink)}::selection{background:var(--accent-soft);color:var(--ink)}.tool-detail-page{animation:page-enter .45s ease both;margin:0 auto;max-width:var(--tool-max);padding:28px 0 56px}.tool-detail-page.is-wide{max-width:min(1200px,100%)}.tool-detail-page .back-link{align-items:center;color:var(--accent);display:inline-flex;font-size:14px;font-weight:500;gap:6px;margin-bottom:18px;text-decoration:none;transition:color .2s,transform .2s}.tool-detail-page .back-link:hover{color:var(--accent-hover);transform:translate(-2px)}.tool-detail-page .tool-body{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;padding:28px;position:relative}.tool-detail-page .tool-body:before{background:linear-gradient(90deg,var(--accent),#2a9d8f 55%,var(--warm));content:"";height:3px;left:0;position:absolute;right:0;top:0}.tool-detail-page .btn-primary{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}.tool-detail-page .btn-primary:hover{background:var(--accent-hover)!important;border-color:var(--accent-hover)!important}.io-split{gap:14px}.io-split,.io-split .top-bar{display:flex;flex-direction:column}.io-split .top-bar{background:var(--surface-muted);border:1px solid var(--border);border-radius:10px;gap:10px;padding:12px 14px}.io-split .options-bar,.io-split .toolbar{align-items:center;display:flex;flex-wrap:wrap;gap:14px}.io-split .toolbar-group{align-items:center;display:flex;gap:8px}.io-split .checkbox-label,.io-split .option-check,.io-split .option-label{align-items:center;color:var(--muted);cursor:pointer;display:inline-flex;font-size:13px;gap:6px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.io-split .mode-select,.io-split .select{background:#fff;border:1px solid var(--border);border-radius:6px;color:var(--ink-soft);font-size:13px;padding:6px 10px}.io-split .actions{align-items:center;border-top:1px dashed var(--border);display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}.io-split .actions:first-child,.io-split .top-bar>.actions:only-child{border-top:none;padding-top:0}.io-split .editor-split{align-items:stretch;display:grid;gap:16px;grid-template-columns:1fr 1fr;min-height:min(62vh,560px)}.io-split .pane{display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0}.io-split .area-header,.io-split .section-header{align-items:center;display:flex;flex-shrink:0;gap:12px;justify-content:space-between}.io-split .area-label,.io-split .section-label{color:var(--ink-soft);font-size:14px;font-weight:600}.io-split .stat,.io-split .stats{color:var(--muted-light);font-size:12px}.io-split .code-input,.io-split .io-textarea,.io-split .json-input{background:#fafafa;border:1px solid var(--border);border-radius:10px;box-sizing:border-box;color:var(--ink);flex:1;font-family:var(--font-mono);font-size:13px;height:100%;line-height:1.55;min-height:420px;padding:14px;resize:vertical;width:100%}.io-split .code-input:focus,.io-split .io-textarea:focus,.io-split .json-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}.io-split .code-input:disabled,.io-split .io-textarea:disabled{cursor:not-allowed;opacity:.7}.io-split .btn{background:#fff;border:1px solid var(--border);border-radius:8px;color:var(--ink-soft);cursor:pointer;font-size:13px;padding:8px 14px;transition:all .2s}.io-split .btn:hover:not(:disabled){background:var(--surface-muted)}.io-split .btn:disabled{cursor:not-allowed;opacity:.5}.io-split .btn-danger{border-color:var(--danger);color:var(--danger)}.io-split .btn-danger:hover:not(:disabled){background:#fef2f2}.io-split .divider{background:var(--border);height:22px;margin:0 2px;width:1px}.io-split .error-message,.io-split .file-info,.io-split .success-message{border-radius:8px;font-size:14px;padding:10px 12px}.io-split .error-message{background:#fef2f2;border:1px solid #fecaca;color:#dc2626}.io-split .success-message{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d}.io-split .file-info{background:var(--surface-muted);border:1px solid var(--border);color:var(--muted)}.io-split .file-btn{align-items:center;background:#fff;border:1px solid var(--border);border-radius:8px;color:var(--ink-soft);cursor:pointer;display:inline-flex;font-size:13px;padding:6px 12px}.io-split .file-input{display:none}@media(max-width:900px){.io-split .editor-split{grid-template-columns:1fr;min-height:0}.io-split .code-input,.io-split .io-textarea,.io-split .json-input{min-height:260px}}.tools-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.no-result{background:#ffffff73;border:1px dashed var(--border);border-radius:var(--radius-lg);color:var(--muted);font-size:15px;padding:72px 20px;text-align:center}@keyframes page-enter{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes hero-rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media(max-width:720px){.tool-detail-page{padding:16px 0 40px}.tool-detail-page .tool-body{border-radius:var(--radius-md);padding:18px}}