:root {
--bg-main-dark: #121212;
--bg-elevated-dark: #1e1e1e;
--bg-elevated-soft-dark: #252525;
--accent-dark: #7f5af0;
--accent-soft-dark: #9b82ff;
--border-subtle-dark: #2f2f2f;
--text-primary-dark: #f5f5f5;
--text-secondary-dark: #b3b3b3;
--shadow-soft-dark: 0 18px 45px rgba(0, 0, 0, 0.55);
--bg-main-light: #f3f3f3;
--bg-elevated-light: #e0e0e0;
--bg-elevated-soft-light: #e9e9e9;
--accent-light: #5b6cff;
--accent-soft-light: #7886ff;
--border-subtle-light: #c5c5c5;
--text-primary-light: #1f1f1f;
--text-secondary-light: #5a5a5a;
--shadow-soft-light: 0 18px 40px rgba(0, 0, 0, 0.25);
--radius-lg: 24px;
--radius-md: 16px;
--radius-sm: 999px;
--transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-med: 320ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 520ms cubic-bezier(0.4, 0, 0.2, 1);
--font-main: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
min-height: 100vh;
font-family: var(--font-main);
display: flex;
align-items: stretch;
justify-content: center;
color: #ffffff;
transition: background var(--transition-slow), color var(--transition-slow);
}

body[data-theme="dark"] {
background: radial-gradient(circle at 0 0, #2b2b2b 0, #050505 40%, #0b0b0b 100%);
}

body[data-theme="light"] {
background: radial-gradient(circle at 100% 0, #f8f8f8 0, #f0f0f0 40%, #dedede 100%);
}

.app {
flex: 1;
max-width: 960px;
margin: 24px;
border-radius: 32px;
display: flex;
flex-direction: column;
transition: background-color var(--transition-slow), box-shadow var(--transition-slow), color var(--transition-slow), transform var(--transition-slow);
overflow: hidden;
}

.app[data-theme="dark"] {
background: radial-gradient(circle at 0 0, #272727 0, var(--bg-main-dark) 45%, #050505 100%);
box-shadow: var(--shadow-soft-dark);
color: var(--text-primary-dark);
}

.app[data-theme="light"] {
background: radial-gradient(circle at 100% 0, #f8f8f8 0, var(--bg-main-light) 40%, #d6d6d6 100%);
box-shadow: var(--shadow-soft-light);
color: var(--text-primary-light);
}

.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px 8px;
}

.logo {
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 18px;
}

.theme-toggle {
position: relative;
width: 56px;
height: 30px;
border-radius: var(--radius-sm);
border: none;
cursor: pointer;
background: linear-gradient(135deg, #313131, #1b1b1b);
display: flex;
align-items: center;
padding: 4px;
transition: background var(--transition-slow), transform var(--transition-fast), box-shadow var(--transition-slow);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

.app[data-theme="light"] .theme-toggle {
background: linear-gradient(135deg, #dadada, #c0c0c0);
}

.theme-toggle-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #ffffff, #d5d5d5);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
transform: translateX(0);
transition: transform var(--transition-slow), background var(--transition-slow), box-shadow var(--transition-slow);
}

.app[data-theme="light"] .theme-toggle-thumb {
transform: translateX(24px);
background: radial-gradient(circle at 30% 30%, #fefefe, #f2f2f2);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.main {
flex: 1;
display: flex;
align-items: stretch;
justify-content: center;
padding: 8px 24px 16px;
}

.panel {
width: 100%;
background: rgba(18, 18, 18, 0.4);
border-radius: 28px;
padding: 20px;
backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: background var(--transition-med), border-color var(--transition-med);
}

.app[data-theme="light"] .panel {
background: rgba(243, 243, 243, 0.85);
border-color: rgba(0, 0, 0, 0.06);
}

.title {
font-size: 26px;
letter-spacing: 0.03em;
margin-bottom: 4px;
}

.subtitle {
font-size: 14px;
opacity: 0.75;
margin-bottom: 20px;
}

.cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-bottom: 22px;
}

.card {
display: flex;
flex-direction: column;
background: linear-gradient(145deg, rgba(30, 30, 30, 0.92), rgba(22, 22, 22, 0.98));
border-radius: var(--radius-lg);
padding: 18px 18px 16px;
border: 1px solid var(--border-subtle-dark);
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45);
transition: transform var(--transition-med), box-shadow var(--transition-med), background var(--transition-med), border-color var(--transition-med);
}

.app[data-theme="light"] .card {
background: linear-gradient(145deg, rgba(224, 224, 224, 0.98), rgba(233, 233, 233, 0.95));
border-color: var(--border-subtle-light);
box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
}

.card:hover {
transform: translateY(-4px);
box-shadow: 0 22px 40px rgba(0, 0, 0, 0.6);
}

.app[data-theme="light"] .card:hover {
box-shadow: 0 20px 32px rgba(0, 0, 0, 0.28);
}

.card-title {
font-size: 16px;
margin-bottom: 14px;
}

.field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
}

.field-label {
font-size: 13px;
opacity: 0.78;
}

.input {
border-radius: 14px;
border: 1px solid var(--border-subtle-dark);
padding: 10px 11px;
font-size: 14px;
background: radial-gradient(circle at 0 0, #313131 0, #1b1b1b 60%, #161616 100%);
color: var(--text-primary-dark);
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.input::placeholder {
color: var(--text-secondary-dark);
opacity: 0.75;
}

.app[data-theme="light"] .input {
background: radial-gradient(circle at 0 0, #f2f2f2 0, #e0e0e0 45%, #d8d8d8 100%);
color: var(--text-primary-light);
border-color: var(--border-subtle-light);
}

.app[data-theme="light"] .input::placeholder {
color: var(--text-secondary-light);
}

.input:focus {
border-color: var(--accent-dark);
box-shadow: 0 0 0 1px rgba(127, 90, 240, 0.5);
}

.app[data-theme="light"] .input:focus {
border-color: var(--accent-light);
box-shadow: 0 0 0 1px rgba(91, 108, 255, 0.5);
}

.button {
margin-top: 4px;
width: 100%;
border-radius: 999px;
border: none;
padding: 9px 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
background: linear-gradient(135deg, var(--accent-dark), var(--accent-soft-dark));
color: #ffffff;
box-shadow: 0 12px 22px rgba(127, 90, 240, 0.45);
transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-med), opacity var(--transition-fast);
}

.button:active {
transform: translateY(1px) scale(0.99);
box-shadow: 0 8px 16px rgba(127, 90, 240, 0.38);
}

.app[data-theme="light"] .button {
background: linear-gradient(135deg, var(--accent-light), var(--accent-soft-light));
box-shadow: 0 12px 22px rgba(91, 108, 255, 0.42);
}

.output {
margin-top: 10px;
min-height: 24px;
font-size: 14px;
padding: 8px 10px;
border-radius: 12px;
background: rgba(9, 9, 9, 0.75);
border: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
word-break: break-word;
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.app[data-theme="light"] .output {
background: rgba(245, 245, 245, 0.92);
border-color: rgba(0, 0, 0, 0.05);
}

.output:active {
transform: scale(0.99);
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
}

.extra {
margin-top: 4px;
}

.extra-title {
font-size: 15px;
margin-bottom: 8px;
}

.extra-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.extra-item {
background: linear-gradient(145deg, #1f1f1f, #151515);
border-radius: 14px;
padding: 10px 11px;
border: 1px solid rgba(255, 255, 255, 0.04);
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
}

.extra-label {
opacity: 0.7;
}

.extra-value {
font-size: 13px;
}

.app[data-theme="light"] .extra-item {
background: linear-gradient(145deg, #e4e4e4, #d7d7d7);
border-color: rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
.app {
margin: 12px;
border-radius: 24px;
}

.panel {
padding: 16px;
border-radius: 22px;
}

body {
font-size: 14px;
}

.title {
font-size: 22px;
}

.subtitle {
font-size: 12px;
}

.card-title {
font-size: 14px;
}

.field-label {
font-size: 11px;
}

.input {
font-size: 13px;
padding: 8px 9px;
}

.button {
font-size: 13px;
padding: 8px 10px;
}

.extra-title {
font-size: 13px;
}

.extra-item {
font-size: 11px;
}

.cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.card {
padding: 14px 12px 12px;
}
}