.tool__app {   --accent:#0047AB; --border:#e3e3e3; --radius:10px;  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tool__app .editor-shell { background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.tool__app .toolbar { position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
           padding:9px 12px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border-bottom:1px solid #eee; }
.tool__app .toolbar .sp { flex:1 1 auto; }
.tool__app .tgrp { display:flex; gap:4px; padding-right:8px; margin-right:2px; border-right:1px solid #eee; }
.tool__app .tgrp:last-child { border-right:0; }
.tool__app .tbtn { border:1px solid transparent; background:transparent; color:#222; border-radius:7px; padding:7px 10px; font-size:14px; font-weight:600; cursor:pointer; font-family:var(--f-sans); line-height:1; }
.tool__app .tbtn:hover { background:#f0f3f9; color:var(--accent); }
.tool__app .tbtn.active { background:#e8eefc; color:var(--accent); }
.tool__app .tbtn.b { font-weight:800; }
.tool__app .tbtn.i { font-style:italic; }
.tool__app .tbtn.solid { background:var(--accent); color:#fff; }
.tool__app .tbtn.solid:hover { background:#003a8c; color:#fff; }
.tool__app .tbtn.ghost { color:#666; }
.tool__app .editor { min-height:62vh; padding:30px clamp(16px,5vw,56px); font-size:18px; line-height:1.7; outline:none; }
.tool__app .editor:empty:before { content:attr(data-placeholder); color:#9aa0a6; }
.tool__app .editor h2 { font-size:25px; font-weight:800; margin:26px 0 10px; }
.tool__app .editor h3 { font-size:20px; font-weight:700; margin:20px 0 8px; }
.tool__app .editor p { margin:0 0 14px; }
.tool__app .editor ul, .tool__app .editor ol { margin:0 0 14px 24px; }
.tool__app .editor dl { margin:0 0 14px; }
.tool__app .editor dt { font-weight:700; }
.tool__app .editor dd { margin:0 0 8px 18px; color:#333; }
.tool__app .editor blockquote { border-left:3px solid var(--accent); margin:0 0 14px; padding:4px 16px; color:#444; font-style:italic; }
.tool__app .editor code { background:#f2f2f2; padding:1px 6px; border-radius:4px; font-family:var(--mono); font-size:15px; }
.tool__app .editor a { color:var(--accent); text-decoration:underline; }
.tool__app .editor .abstract { background:#fafafa; border-left:4px solid #000; padding:14px 16px; font-style:italic; color:#333; margin:0 0 14px; }
.tool__app .editor .alert { background:#fff0ef; border:1px solid #f3c4c0; color:#b3261e; padding:12px 16px; border-radius:6px; margin:0 0 14px; }
.tool__app .editor .faq-item { margin:0 0 14px; }
.tool__app .editor .faq-q { font-weight:700; margin-bottom:4px; }
.tool__app .editor .code-block { background:#111; color:#9ad; padding:14px; border-radius:8px; font-family:var(--mono); font-size:14px; white-space:pre-wrap; margin:0 0 14px; }
.tool__app .editor table { border-collapse:collapse; width:100%; margin:0 0 14px; }
.tool__app .editor th, .tool__app .editor td { border:1px solid #ccc; padding:8px 10px; text-align:left; }
.tool__app .menu-wrap { position:relative; }
.tool__app .menu { position:absolute; top:calc(100% + 6px); left:0; z-index:8; background:#fff; border:1px solid var(--border); border-radius:9px; box-shadow:0 12px 30px rgba(0,0,0,.12); padding:6px; min-width:210px; display:none; }
.tool__app .menu.open { display:block; }
.tool__app .menu button { display:block; width:100%; text-align:left; border:0; background:transparent; padding:9px 11px; border-radius:6px; font-size:14px; cursor:pointer; font-family:var(--f-sans); color:#222; }
.tool__app .menu button:hover { background:#f0f3f9; color:var(--accent); }
.tool__app .bubble { position:absolute; z-index:50; display:none; gap:2px; background:#111; border-radius:9px; padding:4px; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.tool__app .bubble button { border:0; background:transparent; color:#fff; padding:7px 9px; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; line-height:1; font-family:var(--f-sans); }
.tool__app .bubble button:hover { background:rgba(255,255,255,.16); }
.tool__app .bubble button.active { background:rgba(255,255,255,.22); }
.tool__app .bubble .b { font-weight:800; }
.tool__app .bubble .i { font-style:italic; }
.tool__app .code-overlay { position:fixed; inset:0; background:rgba(0,0,0,.32); z-index:60; opacity:0; visibility:hidden; transition:.2s; }
.tool__app .code-overlay.open { opacity:1; visibility:visible; }
.tool__app .code-panel { position:fixed; top:0; right:0; height:100vh; width:min(600px,100%); background:#0e0e0e; z-index:61;
              transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column; }
.tool__app .code-panel.open { transform:translateX(0); }
.tool__app .code-panel .ch { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid #222; color:#fff; }
.tool__app .code-panel .ch strong { font-size:14px; font-weight:700; }
.tool__app .seg { display:inline-flex; background:#1a1a1a; border:1px solid #2a2a2a; border-radius:8px; padding:2px; }
.tool__app .segbtn { border:0; background:transparent; color: #707070; padding:5px 12px; border-radius:6px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:var(--f-sans); }
.tool__app .segbtn.active { background:var(--accent); color:#fff; }
.tool__app .code-edit { flex:1; margin:0; border:0; resize:none; outline:none; padding:18px; background:#0e0e0e; color:#9ad; font-family:var(--mono); font-size:13px; line-height:1.55; white-space:pre-wrap; overflow:auto; width:100%; }
.tool__app .code-panel .cf { display:flex; gap:8px; padding:12px 16px; border-top:1px solid #222; flex-wrap:wrap; }
.tool__app .cbtn { border:1px solid #2a2a2a; background:#1a1a1a; color:#fff; padding:9px 14px; border-radius:7px; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--f-sans); }
.tool__app .cbtn.solid { background:var(--accent); border-color:var(--accent); }
.tool__app .cbtn.x { margin-left:auto; background:transparent; border:0; color: #707070; font-size:20px; padding:0 6px; }