.form-footer { margin-top: var(--space-xl); }
.form-validation-error {
margin: 0 0 var(--space-md);
padding: var(--space-md) var(--space-lg);
border: 1px solid color-mix(in srgb, var(--red) 42%, transparent);
border-radius: var(--radius-sm);
background: var(--red-soft);
color: var(--red);
font-size: var(--font-size-xs);
line-height: 1.45;
}
.btn-primary {
width: 100%;
min-height: var(--control-h);
padding: var(--space-md) var(--space-xl);
border: none;
border-radius: var(--radius-md);
color: var(--on-glass);
font-family: inherit;
font-size: var(--font-size-md);
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
position: relative;
overflow: hidden;
transition: transform var(--motion-fast), box-shadow var(--motion-base), filter var(--motion-base);
}
.action-primary {
position: relative;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--accent-2) 52%, transparent);
border-radius: var(--radius-md);
color: var(--on-glass);
background:
linear-gradient(120deg,
color-mix(in srgb, var(--accent) 34%, transparent),
color-mix(in srgb, var(--accent-2) 30%, transparent));
backdrop-filter: blur(6.4px) saturate(150%);
-webkit-backdrop-filter: blur(6.4px) saturate(150%);
box-shadow:
var(--glass-rim-lit), var(--glass-cast);
transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out),
background var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}
.action-onward {
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
color: var(--accent-2-text);
background: var(--surface-alt);
transition: color var(--motion-fast) var(--ease-out),
border-color var(--motion-fast) var(--ease-out),
background var(--motion-fast) var(--ease-out);
}
.action-onward:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
.action-onward:hover {
border-color: color-mix(in srgb, var(--accent-2) 58%, transparent);
background: var(--surface-hover);
color: var(--text);
}
}
.action-primary[aria-disabled="true"] { cursor: wait; }
.action-primary:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
.action-primary:not([aria-disabled="true"]):hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--accent-2) 74%, transparent);
background:
linear-gradient(120deg,
color-mix(in srgb, var(--accent) 46%, transparent),
color-mix(in srgb, var(--accent-2) 40%, transparent));
box-shadow:
var(--glass-rim-hot), var(--glass-cast);
}
}
.action-primary:not([aria-disabled="true"]):active {
transform: scale(0.985);
}
.action-primary::after,
.btn-primary::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity var(--motion-base) var(--ease-out);
background: radial-gradient(130px circle at var(--mx, 50%) var(--my, 50%),
rgba(255, 255, 255, 0.32), transparent 65%);
}
.action-primary:focus-visible::after,
.btn-primary:focus-visible::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
.action-primary:hover::after,
.btn-primary:hover::after { opacity: 1; }
}
.action-continue {
min-height: var(--control-h);
display: inline-flex;
align-items: center;
justify-content: center;
gap: normal;
padding: 0 var(--space-xl);
font-family: inherit;
font-size: var(--font-size-2xs);
font-weight: 760;
line-height: 1.45;
cursor: pointer;
transition: transform var(--motion-base) var(--ease-out), opacity var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out),
box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}
.action-continue > span[aria-hidden="true"] {
display: inline-block;
transition: transform var(--motion-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.action-continue:hover > span[aria-hidden="true"] {
transform: translateX(3px);
}
}
.btn-spinner {
width: 15px;
height: 15px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
border-radius: 50%;
display: none;
animation: spin 0.7s linear infinite;
}
.btn-primary.loading .btn-spinner,
.recalculate-btn.loading .btn-spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.autocalc-note {
text-align: center;
font-size: var(--font-size-2xs);
color: var(--text-faint);
margin-top: var(--space-md);
}
.recalculate-btn {
width: 100%;
min-height: var(--control-h-compact);
position: relative;
overflow: hidden;
}
.recalculate-btn[aria-disabled="true"] { cursor: wait; }
.main-head {
position: relative;
z-index: 60;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-xl);
margin-bottom: var(--space-2xl);
}
.main-head h1 {
margin-top: var(--space-xs);
font-size: var(--display-md);
font-weight: 760;
line-height: 1.05;
letter-spacing: -0.04em;
}
.main-head p {
max-width: 680px;
min-height: 1.4em;
font-size: var(--font-size-sm);
color: var(--text-dim);
margin-top: var(--space-sm);
}
.result-currency {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm) var(--space-md);
max-width: 680px;
margin-top: var(--space-lg);
}
.result-currency label {
color: var(--text-dim);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.result-currency select {
min-height: var(--control-h);
padding: var(--space-xs) var(--space-3xl) var(--space-xs) var(--space-lg);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background-color: color-mix(in srgb, var(--surface-solid) 84%, transparent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%239299b0' d='M6 8.5L1 3.5h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-lg) center;
color: var(--text);
font-family: inherit;
font-size: var(--font-size-xs);
font-weight: 600;
appearance: none;
cursor: pointer;
}
.result-currency select:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 3px;
}
.result-currency select:disabled { cursor: not-allowed; }
.result-currency select option {
background: var(--surface-solid);
color: var(--text);
}
.result-currency-note {
flex-basis: 100%;
color: var(--text-dim);
font-size: var(--font-size-2xs);
line-height: 1.45;
}
.main-kicker {
display: block;
margin-bottom: var(--space-xs);
color: var(--accent-2-text);
font-size: var(--font-size-2xs);
font-weight: 800;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.13em;
}
.main-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
padding: var(--space-xs);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--surface-solid) 55%, transparent);
backdrop-filter: blur(12px);
}
.ghost-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
min-height: var(--control-h-compact);
padding: var(--space-sm) var(--space-lg);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--surface-alt) 45%, transparent);
backdrop-filter: blur(6.4px) saturate(140%);
-webkit-backdrop-filter: blur(6.4px) saturate(140%);
box-shadow:
var(--glass-rim), var(--glass-cast);
color: var(--text-dim);
font-family: inherit;
font-size: var(--font-size-xs);
font-weight: 600;
cursor: pointer;
transition: background var(--motion-base), color var(--motion-base), transform var(--motion-fast), border-color var(--motion-base);
}
@media (hover: hover) and (pointer: fine) {
.ghost-btn:hover {
background: var(--surface-hover);
color: var(--text);
border-color: var(--border-strong);
transform: translateY(-1px);
}
}
.ghost-btn:focus-visible,
.site-theme:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 3px;
}
.ghost-btn svg {
width: var(--control-icon-compact);
height: var(--control-icon-compact);
}
.scenario-chips:empty { display: none; }
.scenario-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background: var(--surface);
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--text-dim);
animation: fadeUp var(--motion-slow) var(--ease-out) both;
}
.chip-dot {
display: inline-block;
width: 9px;
height: 9px;
min-width: 9px;
border-radius: 50%;
background: var(--chip-color, var(--accent));
}
.chip-x {
border: none;
background: none;
color: var(--text-faint);
font-size: var(--font-size-lg);
line-height: 1;
cursor: pointer;
padding: 0 var(--space-2xs);
transition: color var(--motion-base);
}
.chip-x:hover { color: var(--red); }
.compare-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-sm) var(--space-md);
overflow-x: auto;
}
.compare-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-xs);
}
.compare-table th, .compare-table td {
padding: var(--space-md) var(--space-lg);
text-align: right;
white-space: nowrap;
}
.compare-table th:first-child, .compare-table td:first-child {
text-align: left;
color: var(--text-dim);
font-weight: 500;
}
.compare-table thead th {
font-size: var(--font-size-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-dim);
border-bottom: 1px solid var(--border);
}
.compare-table thead th .chip-dot { margin-right: var(--space-sm); }
.compare-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border); }
.compare-table td:not(:first-child) { font-weight: 650; font-variant-numeric: tabular-nums; }