.tool-page{max-width:720px;margin:0 auto}.tool-tabs{display:inline-flex;background:var(--surface);border:1px solid var(--gray-light);border-radius:var(--radius-pill);padding:4px;box-shadow:var(--shadow-sm);margin-bottom:2rem}.tool-tabs a{display:inline-flex;align-items:center;min-height:36px;padding:.45em 1em;border-radius:var(--radius-pill);font-size:.95rem;-webkit-text-decoration:none;text-decoration:none;color:var(--body-text);white-space:nowrap;transition:color .15s ease,background .15s ease}.tool-tabs a:hover:not([aria-current=page]){color:var(--accent)}.tool-tabs a[aria-current=page]{background:var(--accent);color:var(--background);font-weight:600}html.dark .tool-tabs a[aria-current=page]{color:var(--gray-dark)}.tool-header h1{margin-bottom:.5rem}.tool-intro{color:var(--gray);font-size:1.05rem;max-width:60ch;margin-bottom:2rem}html.dark .tool-intro{color:var(--body-text)}.tool-card{background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--default-shadow);padding:1.5rem;margin-bottom:1.5rem}.tool-fields{display:flex;gap:1.25rem;flex-wrap:wrap;align-items:flex-end}.tool-field{display:flex;flex-direction:column;gap:.35rem}.tool-field>label{font-weight:600;font-size:.9rem}.tool-field input,.tool-field select{min-height:44px;padding:.4rem .65rem;border:1px solid var(--gray);border-radius:var(--radius-sm);background:var(--background);color:var(--body-text);font-size:1.05rem;font-family:inherit;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.tool-field input:focus-visible,.tool-field select:focus-visible,.tool-segment input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}.tool-field input[type=text],.tool-field input[type=number]{width:8.5rem}.tool-segment{display:flex;flex-wrap:wrap;gap:.5rem}.tool-segment label{cursor:pointer}.tool-segment input{position:absolute;opacity:0;pointer-events:none}.tool-segment span{display:inline-block;padding:.35em .85em;border:1px solid var(--gray-light);border-radius:var(--radius-pill);font-size:.9rem;transition:all .15s ease}.tool-segment input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--background);font-weight:600}html.dark .tool-segment input:checked+span{color:var(--gray-dark)}.tool-hint{font-size:.85rem;color:var(--gray);margin:.75rem 0 0}html.dark .tool-hint{color:var(--body-text);opacity:.7}.tool-results{display:none}.tool-results.show{display:block}.tool-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));grid-gap:.75rem;gap:.75rem}.tool-stat{background:var(--code-bg);border-radius:var(--radius-sm);padding:.75rem 1rem}.tool-stat span{display:block;font-size:.8rem;color:var(--gray)}html.dark .tool-stat span{color:var(--body-text);opacity:.7}.tool-stat b{font-size:1.35rem;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.tool-table{width:100%;border-collapse:collapse;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.tool-table th,.tool-table td{text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--gray-light)}html.dark .tool-table th,html.dark .tool-table td{border-bottom-color:var(--gray-dark)}.tool-table th{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gray)}html.dark .tool-table th{color:var(--body-text);opacity:.7}.tool-table td.num,.tool-table th.num{text-align:right}.tool-error{color:var(--decline-bg);font-size:.95rem;margin:.75rem 0 0}.tool-share{margin:2rem 0}.tool-share .copy-link{display:inline-flex;align-items:center;gap:.5rem;padding:0;border:none;background:none;color:var(--gray);font-size:.9rem;font-family:inherit;cursor:pointer}.tool-share .copy-link:hover{color:var(--link-color)}.tool-note{font-size:.9rem;color:var(--gray);max-width:60ch}html.dark .tool-note{color:var(--body-text);opacity:.7}@media (max-width: 600px){.tool-tabs{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.tool-tabs::-webkit-scrollbar{display:none}.tool-tabs a{min-height:44px;padding:.55em 1em}.tool-fields{flex-direction:column;align-items:stretch}.tool-field input[type=text],.tool-field input[type=number]{width:100%}}