/* Profile customization: one form row, a focused picker, no OS emoji dependency. */
.badge-field-label { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:20px 0 8px; font-size:13px; font-weight:650; color:var(--ink); }
.badge-field-label small { color:var(--ink-2); font-size:11px; font-weight:400; }
.badge-trigger { display:flex; align-items:center; gap:12px; width:100%; min-height:64px; padding:10px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); text-align:left; }
.badge-trigger:hover { border-color:var(--ink-2); background:var(--cream); }
.badge-trigger-preview { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; }
.badge-trigger-preview .badge-symbol { background:var(--cream); border-radius:50%; }
.badge-trigger-name { min-width:0; flex:1; font-size:14px; font-weight:600; }
.badge-trigger-action { color:var(--ink-2); font-size:12px; }
.badge-trigger-chevron { font-size:22px; color:var(--ink-2); }
.badge-flag { display:block; width:36px; height:36px; flex-shrink:0; }
.badge-symbol { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; font-size:26px; line-height:1; }
.profile-marker { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; line-height:1; }
.profile-marker .badge-flag, .profile-marker .badge-symbol { width:19px; height:19px; font-size:17px; }
#badge-picker { width:min(560px, calc(100% - 48px)); height:720px; max-width:none; max-height:calc(100dvh - 64px); padding:0; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:var(--surface); color:var(--ink); box-shadow:0 24px 80px #0003; }
#badge-picker::backdrop { background:#141b17a8; backdrop-filter:blur(4px); }
#badge-picker[open] { display:flex; flex-direction:column; }
.badge-picker-header { flex-shrink:0; padding:28px 28px 0; }
.badge-picker-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#badge-picker h2 { margin:0; font-size:26px; line-height:1.2; letter-spacing:-.8px; }
#badge-picker-close { flex-shrink:0; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); font-size:25px; }
.badge-picker-caption { margin:10px 0 22px; color:var(--ink-2); font-size:13px; line-height:1.5; }
.badge-picker-tabs { display:flex; gap:24px; border-bottom:1px solid var(--line); }
.badge-picker-tabs button { min-height:48px; padding:0 2px; border:0; border-bottom:3px solid transparent; border-radius:0; background:none; color:var(--ink-2); font-size:14px; font-weight:600; }
.badge-picker-tabs button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--ink); }
#badge-search-wrap { position:relative; margin:20px 0 0; }
#badge-search-wrap svg { position:absolute; top:15px; left:14px; width:18px; height:18px; fill:none; stroke:var(--ink-2); stroke-width:1.7; pointer-events:none; }
#badge-search { width:100%; height:48px; margin:0; padding:0 14px 0 42px; border:1px solid var(--line); border-radius:12px; background:var(--cream); color:var(--ink); font-size:16px; box-sizing:border-box; }
#badge-search::placeholder { color:var(--ink-2); opacity:1; }
#badge-result-count { margin:16px 0 10px; color:var(--ink-2); font-size:11px; letter-spacing:.3px; }
#badge-picker-panel { min-height:0; flex:1; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:0 28px 20px; }
#badge-picker-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.badge-option { display:flex; align-items:center; gap:10px; position:relative; min-height:68px; min-width:0; padding:12px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:transparent; text-align:left; }
.badge-option:hover { background:var(--cream); border-color:var(--ink-2); }
.badge-option[aria-pressed="true"] { border-color:var(--ink); background:var(--lime-soft); }
.badge-option-label { overflow-wrap:anywhere; font-size:12px; line-height:1.4; }
.badge-option-check { display:none; position:absolute; top:4px; right:5px; font-size:11px; font-weight:800; }
.badge-option[aria-pressed="true"] .badge-option-check { display:block; }
#badge-picker-grid[data-category="symbols"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
#badge-picker-grid[data-category="symbols"] .badge-option { flex-direction:column; justify-content:center; min-height:94px; gap:7px; text-align:center; }
#badge-picker-empty { padding:24px 8px; margin:0; text-align:center; color:var(--ink-2); font-size:14px; line-height:1.6; }
.badge-picker-footer { flex-shrink:0; border-top:1px solid var(--line); padding:12px 28px max(16px, env(safe-area-inset-bottom)); }
#badge-picker-clear { width:100%; min-height:44px; border:0; background:none; color:var(--ink-2); font-size:13px; text-decoration:underline; text-underline-offset:4px; }
#badge-picker-clear:disabled { opacity:.55; text-decoration:none; cursor:default; }
#badge-picker button:focus-visible, .badge-trigger:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
#badge-picker .badge-option:focus-visible { outline-offset:-4px; }
@media (max-width:600px) {
  #badge-picker { width:100%; max-height:90dvh; max-height:90svh; margin:auto 0 0; border-radius:24px 24px 0 0; border-bottom:0; }
  .badge-picker-header { padding:20px 20px 0; }
  #badge-picker h2 { font-size:24px; }
  .badge-picker-caption { margin:8px 0 14px; font-size:12px; }
  #badge-search-wrap { margin-top:16px; }
  #badge-picker-panel { padding:0 20px 16px; }
  .badge-picker-footer { padding-left:20px; padding-right:20px; }
  .badge-option { padding:10px; gap:8px; }
  .badge-option .badge-flag { width:30px; height:30px; }
}
@media (max-width:350px) {
  .badge-picker-header { padding:16px 16px 0; }
  #badge-picker-panel { padding-left:16px; padding-right:16px; }
  .badge-option { padding:8px; gap:7px; }
  .badge-option-label { font-size:11px; }
}
@media (max-height:500px) {
  #badge-picker { max-height:calc(100dvh - 8px); }
  .badge-picker-caption { display:none; }
  .badge-picker-header { padding-top:8px; }
  #badge-search-wrap { margin-top:8px; }
  #badge-result-count { margin:8px 0; }
  .badge-picker-footer { padding-top:4px; padding-bottom:4px; }
}