feat(native): fix the claim fields into one address box, add placeholders, shorter fields, better title

client/native-shell/main.ts

@@ -516,6 +516,7 @@ function showClaim(plan: CloudPlan, interval: 'month' | 'year', opts: { back?: b
     autocapitalize: 'off',
     spellcheck: false,
     value: '',
+    placeholder: t('native.claim.addressLabel'),
   });
   slugInput.setAttribute('inputmode', 'url');
   slugInput.setAttribute('autocomplete', 'off');
@@ -529,7 +530,13 @@ function showClaim(plan: CloudPlan, interval: 'month' | 'year', opts: { back?: b
   );
   const slugNote = el('p', { className: 'hint' });
 
-  const emailInput = el('input', { type: 'email', value: '', autocapitalize: 'off', spellcheck: false });
+  const emailInput = el('input', {
+    type: 'email',
+    value: '',
+    autocapitalize: 'off',
+    spellcheck: false,
+    placeholder: t('native.claim.emailLabel'),
+  });
   emailInput.setAttribute('inputmode', 'email');
   emailInput.setAttribute('autocomplete', 'email');
   emailInput.setAttribute('enterkeyhint', 'go');

client/native-shell/shell.css

@@ -565,8 +565,8 @@ a.linkbtn {
 .field input {
   width: 100%;
   font: inherit;
-  font-size: 1.05rem;
-  padding: 16px 18px;
+  font-size: 1rem;
+  padding: 13px 16px;
   border-radius: var(--radius);
   border: 1px solid var(--edge);
   background: var(--surface);
@@ -884,21 +884,44 @@ a.linkbtn {
 }
 
 /* ── Claim: address + email, and the provisioning wait ───────────────────── */
+/* One rounded field holding the address input and its fixed ".liketrek.com"
+   suffix — the input itself is seamless, the box and its states live here. */
 .slug-field {
   display: flex;
   align-items: center;
-  padding-right: 14px;
+  padding-right: 16px;
+  border-radius: var(--radius);
+  border: 1px solid var(--edge);
+  background: var(--surface);
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.18),
+    inset 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
+  transition:
+    border-color 0.2s,
+    box-shadow 0.25s;
 }
 .slug-field .slug-input {
   flex: 1;
   min-width: 0;
-  text-align: right;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.slug-field:focus-within {
+  border-color: var(--edge-strong);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 9%, transparent);
+}
+.slug-field.bad {
+  border-color: var(--danger);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent);
+  animation: shake 0.3s;
 }
 .slug-suffix {
   flex: none;
   color: var(--muted);
-  font-size: 0.98rem;
-  padding-left: 2px;
+  font-size: 0.95rem;
+  padding-left: 4px;
   user-select: none;
 }
 .hint {

shared/src/i18n/de/native.ts

@@ -56,7 +56,7 @@ const native: TranslationStrings = {
   'native.plans.loadError': 'Die Tarife konnten nicht geladen werden. Prüfe deine Verbindung und versuch es erneut.',
   'native.plans.retry': 'Erneut versuchen',
   'native.plans.soon': 'In-App-Abos kommen bald. Vorerst auf der Website abschließen.',
-  'native.claim.title': 'Deine TREK einrichten',
+  'native.claim.title': 'Fast geschafft',
   'native.claim.sub': 'Wähle deine Adresse. Wir richten sie sofort ein.',
   'native.claim.addressLabel': 'Deine Adresse',
   'native.claim.taken': 'Diese Adresse ist vergeben.',

shared/src/i18n/en/native.ts

@@ -55,7 +55,7 @@ const native: TranslationStrings = {
   'native.plans.loadError': 'Could not load the plans. Check your connection and try again.',
   'native.plans.retry': 'Try again',
   'native.plans.soon': 'In-app subscriptions are coming. For now, finish on the website.',
-  'native.claim.title': 'Create your TREK',
+  'native.claim.title': 'Almost there',
   'native.claim.sub': 'Choose your address. We set it up right away.',
   'native.claim.addressLabel': 'Your address',
   'native.claim.taken': 'That address is taken.',