.calculator-page { width: min(1180px, calc(100% - 32px)); margin: 24px auto; }
.calculator-nav, .languages { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.calculator-nav a, .calculator-footer a { color: var(--accent-dark); }
.languages { margin-left: auto; gap: 12px; }
.languages [aria-current] { font-weight: 700; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.calculator-intro { margin: 42px 0 24px; max-width: 760px; }
.calculator-intro h1 { font-size: clamp(28px, 4vw, 42px); margin: 12px 0; }
.calculator-intro p, .calculator-footer { color: var(--muted); line-height: 1.6; }
.calculator-note { padding: 16px 20px; background: var(--soft); border-left: 4px solid var(--accent); border-radius: 6px; line-height: 1.5; }
.calculator-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.calculator-card { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 8px 24px #202a370a; scroll-margin-top: 18px; }
.calculator-card h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 22px; }
.calculator-card h2 span { background: var(--soft); color: var(--accent-dark); border-radius: 10px; padding: 8px 14px; }
.screen-example { display: flex; height: 180px; align-items: center; justify-content: center; background: #f8fafc; border-radius: 8px; }
.screen-example img { max-width: 100%; max-height: 100%; object-fit: contain; }
.calculator-help { min-height: 84px; line-height: 1.5; color: var(--muted); }
.calculator-card label { display: block; margin: 16px 0 8px; font-weight: 700; }
.calculator-card input:not([type=hidden]) { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; font-size: 16px; }
.calculator-card button { padding: 12px 14px; cursor: pointer; border-radius: 6px; }
.calculator-card .generate { width: 100%; margin-top: 22px; background: var(--accent-dark); color: white; border: 0; font-weight: 700; }
.calculator-card :focus-visible, .calculator-nav a:focus-visible { outline: 3px solid #1688c6; outline-offset: 3px; }
.calculator-result { margin-top: 20px; padding: 14px; border: 1px solid #99cbb0; background: #effaf3; border-radius: 8px; }
.calculator-result label { margin-top: 0; font-size: 13px; }
.calculator-result input { font-family: monospace; font-size: 28px !important; letter-spacing: 4px; }
.copy-password { margin-top: 10px; }
.copy-status { display: block; margin-top: 8px; font-size: 13px; }
.calculator-error { color: #a02718; line-height: 1.5; }
.calculator-footer { margin-top: 28px; font-size: 14px; }
@media (max-width: 900px) { .calculator-grid { grid-template-columns: 1fr; } .calculator-help { min-height: 0; } .screen-example { height: 200px; } }
@media (max-width: 480px) { .calculator-nav { gap: 14px; } .languages { margin-left: 0; } .calculator-card { padding: 18px; } }