.tool-page { max-width: 960px; padding-bottom: 60px; }
.tool-intro { margin: 28px 0 20px; }
.tool-intro h1 { margin: 0 0 8px; font-size: clamp(28px, 5vw, 40px); }
.tool-intro p, .tool-hint { color: var(--muted); line-height: 1.7; }
.tool-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin: 16px 0; }
.tool-panel h2 { margin: 0 0 16px; font-size: 20px; }
.tool-label { display: block; color: var(--muted); font-size: 13px; margin-bottom: 7px; }
.tool-row, .binary-settings, .current-time { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.tool-input, .tool-output, .custom-base input, .binary-settings select { box-sizing:border-box; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 10px 12px; font: inherit; }
.tool-input { width:100%; }
.tool-output { display:block; min-height: 44px; overflow-wrap:anywhere; }
.grow { flex: 1 1 260px; }
.custom-base { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; }
.custom-base input { width:72px; padding:8px; }
.tool-button { border:1px solid var(--accent); border-radius:8px; background:var(--accent); color:#fff; padding:10px 14px; cursor:pointer; font:inherit; white-space:nowrap; }
.tool-button.secondary { background:transparent; color:var(--text); border-color:var(--border); }
.tool-button:hover { filter:brightness(1.1); }
.base-pills { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 14px; }
.base-pill { border:1px solid var(--border); background:var(--surface-2); color:var(--muted); border-radius:15px; padding:5px 10px; cursor:pointer; font:inherit; font-size:13px; }
.base-pill.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.binary-settings label { font-size:14px; }
.result-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.base-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.base-result { border:1px solid var(--border); border-radius:9px; padding:11px; background:var(--surface-2); }
.base-result-head { display:flex; justify-content:space-between; gap:8px; align-items:center; color:var(--muted); font-size:13px; }
.base-result code { display:block; color:var(--text); font-size:15px; overflow-wrap:anywhere; margin-top:8px; }
.copy-mini { border:0; background:transparent; color:var(--accent); cursor:pointer; font:inherit; font-size:12px; }
.tool-grid { display:grid; gap:16px; align-items:end; }
.tool-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.tool-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tool-grid .tool-button { margin-top:9px; }
.tool-action { align-self:end; }
.gap-top { margin-top:20px; }
.current-time { justify-content:space-between; }
.current-time strong { font-size:25px; margin:0 8px; font-variant-numeric:tabular-nums; }
.diff-results { margin-top:18px; padding:14px; border-radius:8px; background:var(--surface-2); color:var(--text); line-height:1.8; }
.tool-toast { position:fixed; z-index:50; left:50%; bottom:26px; transform:translate(-50%, 16px); opacity:0; pointer-events:none; transition:all .2s; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:20px; padding:9px 15px; box-shadow:0 8px 30px rgba(0,0,0,.22); }
.tool-toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:680px) { .base-results, .tool-grid.two, .tool-grid.three { grid-template-columns:1fr; } .tool-action { align-self:auto; } .current-time { align-items:flex-start; } }