/* ── select2 -> Helix tokens (profile dropdowns: country, state, timezone, phone code) select2.min.css gives structure + hides the native ; this paints it to match .f-input so dark/light both look native, not light-Bootstrap. ── */ .select2-container--default .select2-selection--single{ background:var(--field);border:var(--hairline);border-radius:var(--radius-sm); height:auto;min-height:38px;padding:6px 10px;display:flex;align-items:center; } .select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--ink);line-height:1.4;padding:0;font-family:var(--font-body);font-size:var(--fs-body); } .select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--slate-soft);} .select2-container--default .select2-selection--single .select2-selection__arrow{height:36px;right:8px;} .select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:var(--slate) transparent transparent;} .select2-container--default.select2-container--open .select2-selection--single{border-color:var(--signal);} .select2-dropdown{background:var(--surface);border:var(--hairline);border-radius:var(--radius-sm);color:var(--ink);} .select2-container--default .select2-results__option{color:var(--ink);font-size:var(--fs-body);} .select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--signal-tint);color:var(--ink);} .select2-container--default .select2-results__option[aria-selected=true]{background:var(--paper-2);} .select2-search--dropdown .select2-search__field{background:var(--field);border:var(--hairline);color:var(--ink);border-radius:var(--radius-sm);} /* ── Helix form fields (.f-grid / .f-field / .f-label / .f-input) ────────────── These were referenced (e.g. the select2 block above is described as matching .f-input) but NEVER actually defined -> the account forms (profile, password, manage-share-access, telegram settings, offline-invoice) rendered as ragged browser-default inputs with inline labels. Paint them to match the select2 dropdowns (same --field bg + 38px min-height) so columns line up. */ .f-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;} .f-field{display:flex;flex-direction:column;gap:6px;min-width:0;} .f-label{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);font-weight:500;} .f-input{width:100%;box-sizing:border-box;padding:0 10px;min-height:38px;font-family:var(--font-body);font-size:var(--fs-body);color:var(--ink);background:var(--field);border:var(--hairline);border-radius:var(--radius-sm);transition:border-color 140ms;} .f-input:focus{outline:none;border-color:var(--signal);} .f-input:disabled{background:var(--paper-2);color:var(--slate);cursor:not-allowed;} .f-input::placeholder{color:var(--slate-soft);} textarea.f-input{min-height:90px;padding:8px 10px;line-height:1.5;resize:vertical;} @media (max-width:640px){.f-grid{grid-template-columns:1fr;}}