/* Shared styles for all tools */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #fdfeff;
    color: #333;
}

body[data-theme="dark"] {
    background-color: #0f1115;
    color: #e2e6ea;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

header {
    background-color: #464646;
    color: white;
    padding: 1rem;
    margin-bottom: 1rem;
}

body[data-theme="dark"] header {
    background-color: #321a58;
}

header h1 {
    margin: 0;
    font-size: 1.5rem;
}

.card {
    background: rgb(206, 206, 206);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

body[data-theme="dark"] .card {
    background: #1f273a;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

.btn {
    display: inline-block;
    background: #20803d;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    margin: 0.5rem 0;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background: #b13a36;
}

.btn:focus-visible,
.nav-back:focus-visible,
.theme-toggle:focus-visible,
a:focus-visible {
    outline: 2px solid #20803d;
    outline-offset: 2px;
}

.btn-secondary {
    background: #6c757d;
}

.btn-secondary:hover {
    background: #5a6268;
}

.input-group {
    margin-bottom: 1rem;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.input-group input,
.input-group textarea,
.input-group select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
}

body[data-theme="dark"] .input-group input,
body[data-theme="dark"] .input-group textarea,
body[data-theme="dark"] .input-group select {
    background: #1f273a;
    color: #e2e6ea;
    border-color: #2c3340;
}

.results {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 1rem;
    margin-top: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

body[data-theme="dark"] .results {
    background: #0f131b;
}

.success {
    color: #28a745;
    background-color: #d4edda;
    padding: 0.5rem;
    border-radius: 4px;
    margin: 0.5rem 0;
}

.warning {
    color: #ffc107;
    background-color: #fff3cd;
    padding: 0.5rem;
    border-radius: 4px;
    margin: 0.5rem 0;
}

.danger {
    color: #dc3545;
    background-color: #f8d7da;
    padding: 0.5rem;
    border-radius: 4px;
    margin: 0.5rem 0;
}

body[data-theme="dark"] .success {
    background-color: #1f3a28;
    color: #7bd88f;
}

body[data-theme="dark"] .warning {
    background-color: #3f3320;
    color: #f3d28c;
}

body[data-theme="dark"] .danger {
    background-color: #3a1f26;
    color: #f3a6b2;
}

.code-block {
    background: #282c34;
    color: #abb2bf;
    padding: 1rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    overflow-x: auto;
    margin: 1rem 0;
}

.nav-back {
    display: inline-block;
    margin-bottom: 1rem;
    color: #6c757d;
    text-decoration: none;
}

body[data-theme="dark"] .nav-back {
    color: #9aa3af;
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d0d5dd;
    background: #ffffff;
    color: #1a1a1a;
    border-radius: 50%;
    padding: 0.5rem;
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    background: #f5f5f59d;
}

.theme-toggle svg {
    width: 1.3rem;
    height: 1.3rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Hide moon icon in light mode, show only sun */
body:not([data-theme="dark"]) .theme-toggle .moon-icon {
    display: none;
}

/* Hide sun icon in dark mode, show only moon */
body[data-theme="dark"] .theme-toggle .sun-icon {
    display: none;
}

body[data-theme="dark"] .theme-toggle {
    background: #1f273a;
    color: #e2e6eabe;
    border-color: #2c3340;
}

body[data-theme="dark"] .theme-toggle:hover {
    background: #2a3447;
}