:root { color-scheme: light; font-family: Inter, "Segoe UI", system-ui, sans-serif; color: #172033; background: #eef3f8; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.shell { width: min(760px, 100%); background: #fff; border: 1px solid #d9e2ec; border-radius: 18px; box-shadow: 0 18px 60px rgba(34,65,105,.13); overflow: hidden; }
header { display: flex; align-items: center; gap: 16px; padding: 28px 32px 22px; }
header img { filter: drop-shadow(0 5px 8px rgba(32,94,166,.18)); }
h1 { margin: 0; font-size: clamp(1.45rem, 4vw, 2rem); letter-spacing: -.025em; }
header p { margin: 5px 0 0; color: #66758a; }
.tabs { display: flex; gap: 4px; padding: 0 32px; border-bottom: 1px solid #dfe7ef; }
.tab { appearance: none; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #65748a; padding: 13px 16px 11px; font: inherit; font-weight: 650; cursor: pointer; }
.tab.active { color: #205ea6; border-color: #205ea6; }
.panel { display: none; padding: 28px 32px 24px; }
.panel.active { display: block; }
.grid, .results { display: grid; gap: 18px; }
.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
label, .results span { display: grid; gap: 8px; font-weight: 650; color: #334156; }
.optional { display: inline; color: #7a8798; font-size: .8rem; font-weight: 500; }
input { width: 100%; border: 1px solid #bcc9d8; border-radius: 9px; padding: 12px 13px; font: 1.03rem ui-monospace, SFMono-Regular, Consolas, monospace; color: #172033; outline: none; }
input:focus { border-color: #3178c6; box-shadow: 0 0 0 3px rgba(49,120,198,.14); }
.hint { color: #68778c; font-size: .86rem; line-height: 1.65; margin: 14px 0 20px; }
code { background: #eef3f8; border-radius: 4px; padding: 2px 4px; color: #334156; }
.results { margin-top: 20px; }
.results > div { position: relative; background: #f4f7fa; border: 1px solid #dfe7ef; border-radius: 11px; padding: 14px; }
.results output { display: block; min-height: 34px; padding-top: 7px; font: 700 1.3rem ui-monospace, SFMono-Regular, Consolas, monospace; color: #183f70; overflow-wrap: anywhere; }
.copy { position: absolute; right: 10px; top: 10px; border: 1px solid #c6d2df; border-radius: 7px; background: #fff; color: #3b4a5e; padding: 6px 9px; cursor: pointer; }
.copy:hover { border-color: #3178c6; color: #205ea6; }
.error { color: #b42318; min-height: 21px; margin: 13px 0 0; font-size: .9rem; }
footer { border-top: 1px solid #e2e9f0; background: #f8fafc; padding: 15px 32px; color: #728095; font-size: .78rem; }
@media (max-width: 600px) { body { padding: 0; place-items: stretch; } .shell { min-height: 100vh; border: 0; border-radius: 0; } header, .panel { padding-left: 20px; padding-right: 20px; } .tabs { padding: 0 12px; } .two { grid-template-columns: 1fr; } footer { padding: 15px 20px; } }