.tool-page { background:var(--paper); color:var(--text-dark); }
.tool-hero { padding:140px 0 58px; background:linear-gradient(145deg,#08101f,#17284b 58%,#4d2e72); color:#fff; }
.tool-hero-grid { display:grid; grid-template-columns:1fr auto; align-items:end; gap:30px; }
.tool-hero .lead { color:#b8c3d5; margin-top:20px; }
.tool-workspace { padding:54px 0 130px; }
.tool-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:26px; align-items:start; }
.tool-panel { border:1px solid var(--line-light); border-radius:26px; background:#fff; box-shadow:var(--shadow-soft); overflow:hidden; }
.tool-panel-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; border-bottom:1px solid var(--line-light); background:#fbfaf7; }
.tool-panel-head h2 { margin:0; font-size:15px; }
.tool-actions { display:flex; flex-wrap:wrap; gap:8px; }
.small-button { border:1px solid var(--line-light); border-radius:999px; background:#fff; padding:9px 12px; cursor:pointer; font-size:13px; font-weight:750; }
.small-button.primary { color:#fff; border-color:transparent; background:#111827; }
.small-button:hover { transform:translateY(-1px); }
.tool-panel-body { padding:20px; }
.tool-textarea, .tool-input, .tool-select { width:100%; border:1px solid rgba(17,24,39,.14); border-radius:14px; background:#f8f6f1; color:#152033; padding:14px 15px; outline:0; }
.tool-textarea { min-height:260px; resize:vertical; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; line-height:1.6; }
.tool-textarea:focus,.tool-input:focus,.tool-select:focus { border-color:var(--signal-violet);box-shadow:0 0 0 4px rgba(139,103,255,.11); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.result-box { min-height:180px; padding:16px; border:1px solid rgba(17,24,39,.1); border-radius:15px; background:#0a1424; color:#d6e2f0; overflow:auto; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; line-height:1.65; white-space:pre-wrap; word-break:break-word; }
.result-box.light { background:#f8f6f1;color:#152033; }
.tool-sidebar { position:sticky; top:100px; display:grid; gap:16px; }
.side-panel { padding:20px; border:1px solid var(--line-light); border-radius:20px; background:#fff; }
.side-panel h3 { margin:0 0 12px;font-size:15px; }
.side-panel p,.side-panel li { color:#687181;line-height:1.7;font-size:14px; }
.side-panel ul { padding-left:18px;margin:0; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.field label { display:block;margin-bottom:7px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#667085; }
.field.full { grid-column:1 / -1; }
.inline-stats { display:flex;flex-wrap:wrap;gap:10px;margin-top:14px; }
.stat-chip { padding:8px 10px;border-radius:999px;background:#eee9e1;color:#4f5968;font-size:12px;font-weight:760; }
.tool-message { margin-top:12px; min-height:22px; color:#647082;font-size:13px; }
.tool-message.error { color:#b83946; }
.preview { min-height:320px;padding:22px;border:1px solid var(--line-light);border-radius:14px;background:#fff;overflow:auto; }
.preview h1,.preview h2,.preview h3{letter-spacing:-.035em}.preview p,.preview li{line-height:1.75}.preview code{background:#eee9e1;padding:2px 6px;border-radius:6px}.preview pre{background:#0a1424;color:#d6e2f0;padding:16px;border-radius:14px;overflow:auto}.preview blockquote{border-left:4px solid var(--sunset-coral);padding-left:16px;color:#596273}
.color-preview { min-height:210px;border-radius:18px;border:1px solid var(--line-light);display:grid;place-items:center;font-weight:900;font-size:32px;letter-spacing:-.04em; }
.picker-list { display:grid;gap:8px;margin-top:14px; }
.picker-item { display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;background:#f5f1ea; }
.uuid-list { display:grid;gap:8px; }
.uuid-item { display:flex;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--line-light);border-radius:12px;background:#faf8f3; }
.uuid-item code { flex:1;word-break:break-all; }
@media(max-width:980px){.tool-layout{grid-template-columns:1fr}.tool-sidebar{position:static}.tool-hero-grid{grid-template-columns:1fr}.split{grid-template-columns:1fr}}
@media(max-width:620px){.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.tool-panel-head{align-items:flex-start;flex-direction:column}}