:root{--colour-bg: #ffffff;--colour-surface: #f4f4f5;--colour-border: #d4d4d8;--colour-text: #18181b;--colour-text-muted: #52525b;--colour-primary: #1d4ed8;--colour-primary-fg: #ffffff;--colour-danger: #b91c1c;--colour-danger-fg: #ffffff;--colour-warning-bg: #fef3c7;--colour-warning-fg: #92400e;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--tap-min: 48px;--font-body: system-ui, "Segoe UI", Arial, sans-serif;--font-size-base: 16px;--line-height: 1.6}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);font-size:var(--font-size-base);line-height:var(--line-height);background:var(--colour-bg);color:var(--colour-text);min-height:100dvh}:focus-visible{outline:3px solid var(--colour-primary);outline-offset:2px;border-radius:4px}.screen{max-width:480px;margin:0 auto;padding:var(--space-lg) var(--space-md);min-height:100dvh;display:flex;flex-direction:column;gap:var(--space-md)}.screen__title{font-size:1.5rem;font-weight:700;color:var(--colour-text)}.field{display:flex;flex-direction:column;gap:var(--space-xs)}.field__label{font-weight:600;font-size:.9rem;color:var(--colour-text-muted)}.field__input{border:2px solid var(--colour-border);border-radius:8px;padding:var(--space-sm) var(--space-md);font-size:1rem;font-family:inherit;width:100%;min-height:var(--tap-min);background:var(--colour-bg);color:var(--colour-text);transition:border-color .15s}.field__input:focus{border-color:var(--colour-primary);outline:none;box-shadow:0 0 0 3px #1d4ed833}.field__note{font-size:.8rem;color:var(--colour-text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap-min);padding:var(--space-sm) var(--space-lg);border:none;border-radius:8px;font-size:1rem;font-weight:600;font-family:inherit;cursor:pointer;width:100%;transition:opacity .15s,background .15s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--colour-primary);color:var(--colour-primary-fg)}.btn--secondary{background:var(--colour-surface);color:var(--colour-text);border:2px solid var(--colour-border)}.btn--danger{background:var(--colour-danger);color:var(--colour-danger-fg)}.btn--primary:hover:not(:disabled){opacity:.9}.btn--secondary:hover:not(:disabled){background:var(--colour-border)}.alert{padding:var(--space-md);border-radius:8px;font-size:.95rem}.alert--warning{background:var(--colour-warning-bg);color:var(--colour-warning-fg);border:1px solid #fcd34d}.alert--info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}.alert--error{background:#fef2f2;color:var(--colour-danger);border:1px solid #fecaca}.card{border:1px solid var(--colour-border);border-radius:12px;padding:var(--space-md);background:var(--colour-bg);display:flex;flex-direction:column;gap:var(--space-sm)}.card__row{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem}.card__label{color:var(--colour-text-muted)}.card__value{font-weight:600}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:flex-end;z-index:100}.modal{background:var(--colour-bg);border-radius:16px 16px 0 0;padding:var(--space-xl) var(--space-md) var(--space-lg);width:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-md)}.modal__title{font-size:1.2rem;font-weight:700}.back-link{display:inline-flex;align-items:center;gap:var(--space-xs);color:var(--colour-primary);font-weight:600;background:none;border:none;cursor:pointer;min-height:var(--tap-min);font-size:1rem;font-family:inherit;padding:0}.app-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) 0;border-bottom:1px solid var(--colour-border);margin-bottom:var(--space-sm)}.app-header__title{font-size:1.25rem;font-weight:700;color:var(--colour-primary)}.lang-switch{display:inline-flex;align-items:center;gap:var(--space-xs);background:var(--colour-surface);border:1px solid var(--colour-border);border-radius:24px;padding:8px 16px;cursor:pointer;font-size:.9rem;font-weight:600;min-height:var(--tap-min);color:var(--colour-text);font-family:inherit}.lang-switch:hover{background:var(--colour-border)}
