/* =====================================================================
   PELATRA — account.css  (top-right account button + sign-in / profile panel)
   Same visual language as the cookie panel and the Exclusive card.
   ===================================================================== */

/* ---------- top-right button ---------- */
.ac-btn{
  position:fixed;
  top:calc(14px + env(safe-area-inset-top,0px));
  right:calc(14px + env(safe-area-inset-right,0px));
  z-index:60;
  display:inline-flex; align-items:center; gap:10px;
  max-width:min(60vw,260px);
  height:42px; padding:0 16px 0 8px; box-sizing:border-box;
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 4px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  cursor:pointer; pointer-events:auto;
  -webkit-appearance:none; appearance:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
  opacity:0; transform:translateY(-10px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), background .35s ease, border-color .35s ease, box-shadow .35s ease, color .5s ease;
}
.ac-btn.is-ready{ opacity:1; transform:none; }
.ac-btn:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); }
.ac-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.ac-btn.is-in{ padding-left:5px; }
.ac-btn .ac-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.ac-btn .ac-ico{ flex:none; margin-left:8px; color:#fff; filter:drop-shadow(0 0 6px rgba(255,255,255,.45)); }
.ac-btn.is-in .ac-ico{ display:none; }

/* avatar */
.ac-ava{
  position:relative; flex:none;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; letter-spacing:0; color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.35);
  overflow:hidden;
}
.ac-ava img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; }
.ac-ava.lg{ width:64px; height:64px; font-size:24px; box-shadow:0 0 28px rgba(255,255,255,.18); }
.ac-ava.is-admin{ border-color:rgba(255,198,26,.8); }

/* verified badge */
.ac-badge{
  flex:none; display:inline-block; width:16px; height:16px; vertical-align:-3px;
  color:#cf7188; filter:none;
}
.ac-badge.lg{ width:20px; height:20px; vertical-align:-4px; }

/* phones / short screens: compact round button, no text, so it never crowds the page */
@media (max-width:640px), (max-height:520px){
  .ac-btn, .ac-btn.is-in{
    width:40px; height:40px; padding:0; gap:0; max-width:none;
    justify-content:center;
    top:calc(10px + env(safe-area-inset-top,0px));
    right:calc(10px + env(safe-area-inset-right,0px));
  }
  .ac-btn .ac-label{ display:none; }
  .ac-btn .ac-ico{ margin:0; }
  .ac-btn .ac-ava{ width:32px; height:32px; }
  .ac-btn .ac-badge{
    position:absolute; right:-4px; bottom:-4px; width:17px; height:17px; vertical-align:baseline;
    filter:drop-shadow(0 0 0 #000) drop-shadow(0 0 3px rgba(0,0,0,.9)) drop-shadow(0 0 6px rgba(207,113,136,.7));
  }
}

/* hidden while a full-screen detail card (region list) needs the top-right corner */
body.ac-hide .ac-btn.is-ready{ opacity:0; transform:translateY(-8px); pointer-events:none; }

/* while the white story page is showing */
body.ac-light .ac-btn{
  color:rgba(26,26,24,.85);
  background:rgba(26,26,24,.05);
  border-color:rgba(26,26,24,.25);
  box-shadow:0 4px 16px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.4);
}
body.ac-light .ac-btn .ac-ico{ color:rgba(26,26,24,.85); filter:none; }
body.ac-light .ac-btn .ac-ava{ color:rgba(26,26,24,.85); border-color:rgba(26,26,24,.3); background:rgba(26,26,24,.05); }

/* =====================================================================
   ACCOUNT WINDOW — sign-in and profile
   Flat black and white, in the manner of X: pure black, thin grey dividers, plain text, no glow, no grid.
   ===================================================================== */
.ac-modal{
  --x-bg:#000; --x-line:#2f3336; --x-fg:#e7e9ea; --x-mute:#71767b; --x-hover:rgba(231,233,234,.04);
  --x-btn:#eff3f4; --x-btn-fg:#0f1419; --x-red:#f4212e;
  position:fixed; inset:0; z-index:110;
  display:flex; align-items:center; justify-content:center;
  padding:12px; box-sizing:border-box;
  font-family:'TwitterChirp',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-user-select:none; user-select:none;
  visibility:hidden; pointer-events:none;
  transition:visibility 0s linear .3s;
}
.ac-modal.is-show{ visibility:visible; pointer-events:auto; transition:visibility 0s; }
.ac-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.9); opacity:0; transition:opacity .25s ease; }
.ac-modal.is-show .ac-backdrop{ opacity:1; }

.ac-panel{
  position:relative; box-sizing:border-box; display:flex; flex-direction:column;
  width:min(92vw,440px); max-height:min(92vh,720px);
  overflow:hidden; outline:none; color:var(--x-fg);
  background:var(--x-bg); border:1px solid var(--x-line); border-radius:16px;
  box-shadow:0 0 30px rgba(255,255,255,.06);
  opacity:0; transform:translateY(10px) scale(.985);
  transition:opacity .22s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.ac-modal.is-show .ac-panel{ opacity:1; transform:none; }
.ac-panel .rc-corner{ display:none; }
.ac-panel.is-profile{ width:min(94vw,600px); max-height:min(92vh,820px); }

/* header */
.ac-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none; min-height:53px; padding:0 16px; box-sizing:border-box; }
.ac-title-wrap{ display:flex; align-items:center; gap:10px; min-width:0; }
.ac-title-wrap .ck-ico{ display:none; }
.ac-title{ font-size:20px; font-weight:800; letter-spacing:0; color:var(--x-fg); }
.ac-x{
  flex:none; width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center;
  color:var(--x-fg); background:transparent; border:0; border-radius:50%; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:background .15s ease;
}
.ac-x:hover{ background:rgba(231,233,234,.1); }
.ac-x:focus-visible{ outline:2px solid var(--x-fg); outline-offset:2px; }
.ac-panel:not(.is-profile) .ac-head{ padding:0 12px 0 32px; }
.ac-panel.is-profile .ac-head{ position:absolute; top:0; left:0; right:0; z-index:12; padding:10px 12px 0; justify-content:flex-end; pointer-events:none; }
.ac-panel.is-profile .ac-head > *{ pointer-events:auto; }
.ac-panel.is-profile .ac-title-wrap{ display:none; }
.ac-panel.is-profile .ac-x{ background:rgba(15,20,25,.75); }
.ac-panel.is-profile .ac-x:hover{ background:rgba(39,44,48,.75); }

.ac-body{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:#3e4144 transparent; padding:4px 32px 32px;
}
.ac-body::-webkit-scrollbar{ width:6px }
.ac-body::-webkit-scrollbar-thumb{ background:#3e4144; border-radius:3px }
.ac-panel.is-profile .ac-body{ padding:0; }

/* sign-in view */
.ac-lead{ margin:8px 0 8px; font-size:28px; line-height:1.15; font-weight:800; letter-spacing:0; color:var(--x-fg); text-align:left; }
.ac-text{ margin:0; font-size:15px; line-height:1.5; color:var(--x-mute); text-align:left; }
.ac-text.left{ margin:0; }
.ac-perks{ list-style:none; margin:16px 0 4px; padding:0; display:grid; gap:10px; }
.ac-perks li{ position:relative; padding:0 0 0 20px; font-size:15px; line-height:1.4; color:var(--x-fg); }
.ac-perks li::before{ content:""; position:absolute; left:2px; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--x-mute); }
.ac-load{ display:flex; justify-content:center; padding:34px 0 24px; }
.ac-load i{ width:28px; height:28px; border-radius:50%; border:3px solid #2f3336; border-top-color:var(--x-fg); animation:acSpin .8s linear infinite; }
@keyframes acSpin{ to{ transform:rotate(360deg) } }
.ac-note{ margin:14px 0 0; font-size:13px; line-height:1.5; color:var(--x-mute); text-align:left; }
.ac-err{ display:none; margin-top:12px; font-size:13px; line-height:1.4; color:var(--x-red); text-align:left; }
.ac-err.show{ display:block; }

/* tabs: guest method switch and profile tabs share one look */
.ac-seg{ display:flex; margin:20px -32px 0; border-bottom:1px solid var(--x-line); }
.ac-seg-b{
  position:relative; flex:1 1 0; padding:14px 0; font-family:inherit; font-size:15px; font-weight:500; color:var(--x-mute);
  background:none; border:0; cursor:pointer; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
  transition:background .15s ease, color .15s ease;
}
.ac-seg-b:hover{ background:rgba(231,233,234,.1); }
.ac-seg-b[aria-selected="true"]{ color:var(--x-fg); font-weight:700; }
.ac-seg-b[aria-selected="true"]::after{ content:""; position:absolute; left:50%; bottom:0; width:56px; height:4px; margin-left:-28px; border-radius:9999px; background:var(--x-btn); }
.ac-seg-b:focus-visible{ outline:2px solid var(--x-fg); outline-offset:-2px; }

/* buttons */
.ac-act{
  position:relative; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin-top:12px; padding:13px 20px; min-height:44px;
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:0; text-transform:none; line-height:20px; text-decoration:none;
  color:var(--x-fg); background:transparent; border:1px solid #536471; border-radius:10px;
  cursor:pointer; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.ac-act:hover{ background:rgba(239,243,244,.1); }
.ac-act:focus-visible{ outline:2px solid var(--x-fg); outline-offset:2px; }
.ac-act:disabled{ opacity:.5; cursor:progress; }
.ac-act.primary{ color:var(--x-btn-fg); background:var(--x-btn); border-color:var(--x-btn); }
.ac-act.primary:hover{ background:#d7dbdc; border-color:#d7dbdc; }
.ac-act.ghost{ font-weight:600; }
.ac-act.danger{ color:var(--x-red); border-color:rgba(244,33,46,.45); }
.ac-act.danger:hover{ background:rgba(244,33,46,.1); border-color:var(--x-red); }
.ac-act.sm{ width:auto; margin-top:0; padding:8px 16px; min-height:36px; font-size:14px; }

/* forms */
.ac-form{ display:grid; gap:16px; margin-top:16px; }
.ac-field{ display:grid; gap:6px; min-width:0; }
.ac-field-l{ font-size:13px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--x-mute); }
.ac-field-h{ font-size:13px; line-height:1.4; color:var(--x-mute); }
.ac-input-wrap{ position:relative; display:flex; align-items:center; }
.ac-input{
  box-sizing:border-box; width:100%; padding:14px 12px; font-family:inherit; font-size:17px; letter-spacing:0; color:var(--x-fg);
  background:transparent; border:1px solid #333639; border-radius:4px; outline:none;
  -webkit-user-select:text; user-select:text; -webkit-appearance:none; appearance:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ac-input::placeholder{ color:#536471; }
.ac-input:focus{ border-color:var(--x-btn); box-shadow:0 0 0 1px var(--x-btn); }
.ac-input-wrap:has(.ac-reveal) .ac-input{ padding-right:48px; }
.ac-reveal{
  position:absolute; right:6px; top:50%; transform:translateY(-50%); width:34px; height:34px; padding:0;
  display:flex; align-items:center; justify-content:center; color:var(--x-mute);
  background:none; border:0; border-radius:50%; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.ac-reveal:hover{ color:var(--x-fg); background:rgba(231,233,234,.1); }
.ac-reveal:focus-visible{ outline:2px solid var(--x-fg); outline-offset:1px; }
.ac-hidden-user{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; left:-9999px; }
.ac-meter-row{ display:flex; align-items:center; gap:12px; margin-top:-6px; min-height:14px; }
.ac-meter{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; width:150px; }
.ac-meter i{ height:4px; border-radius:2px; background:#2f3336; transition:background .2s ease; }
.ac-meter[data-s="1"] i:nth-child(-n+1){ background:#f4212e; }
.ac-meter[data-s="2"] i:nth-child(-n+2){ background:#ffd400; }
.ac-meter[data-s="3"] i:nth-child(-n+3){ background:#aab0b5; }
.ac-meter[data-s="4"] i{ background:var(--x-fg); }
.ac-meter-t{ font-size:13px; color:var(--x-mute); }

/* toast */
.ac-toast{
  position:absolute; left:50%; bottom:20px; z-index:30; max-width:calc(100% - 32px); box-sizing:border-box;
  padding:12px 16px; font-size:15px; font-weight:500; line-height:20px; text-align:center; color:var(--x-btn-fg);
  background:var(--x-btn); border-radius:8px; box-shadow:0 0 15px rgba(255,255,255,.15);
  opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,8px);
  transition:opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s linear .25s;
}
.ac-toast.show{ opacity:1; visibility:visible; transform:translate(-50%,0); transition:opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.ac-toast.err{ background:var(--x-red); color:#fff; }

/* ---------------- profile ---------------- */
.ac-pf{ position:relative; }
.ac-banner{
  --b1:#333639;
  position:relative; height:150px; overflow:hidden; background:var(--b1);
}
.ac-banner.has-img{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.ac-banner-glow{ display:none; }

.ac-pf-top{
  position:relative; z-index:3; display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:start;
  padding:0 16px; margin-top:-56px;
}
.ac-ava-btn{ grid-area:1 / 1; position:relative; width:112px; height:112px; padding:0; margin:0; border:0; border-radius:50%; background:none; -webkit-tap-highlight-color:transparent; -webkit-appearance:none; appearance:none; }
button.ac-ava-btn{ cursor:zoom-in; }
button.ac-ava-btn.is-edit{ cursor:pointer; }
span.ac-ava-btn{ display:block; cursor:default; }
.ac-ava-btn:focus-visible{ outline:2px solid var(--x-fg); outline-offset:3px; }
.ac-ava.xl{
  box-sizing:border-box; width:112px; height:112px; font-size:44px; font-weight:700; color:var(--x-fg);
  background:#16181c; border:4px solid #000; box-shadow:none;
}
.ac-ava-edit{
  position:absolute; inset:0; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff;
  background:rgba(0,0,0,.5); opacity:0; transition:opacity .15s ease; pointer-events:none;
}
.ac-ava-btn:hover .ac-ava-edit, .ac-ava-btn:focus-visible .ac-ava-edit{ opacity:1; }
@media (hover:none){
  .ac-ava-edit{ inset:auto 0 0 auto; width:32px; height:32px; opacity:1; color:var(--x-btn-fg); background:var(--x-btn); box-shadow:0 0 0 3px #000; }
  .ac-ava-edit svg{ width:16px; height:16px; }
}
.ac-edit-btn{
  grid-area:1 / 2; justify-self:end; align-self:start; margin-top:68px;
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; min-height:36px; box-sizing:border-box;
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--x-fg);
  background:transparent; border:1px solid #536471; border-radius:10px; cursor:pointer;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; transition:background .15s ease;
}
.ac-edit-btn:hover{ background:rgba(239,243,244,.1); }
.ac-edit-btn:focus-visible{ outline:2px solid var(--x-fg); outline-offset:2px; }

.ac-who{ grid-area:2 / 1 / 3 / 3; min-width:0; margin-top:12px; }
.ac-name{ display:flex; align-items:center; gap:4px; max-width:100%; font-size:20px; line-height:24px; font-weight:800; letter-spacing:0; text-transform:none; color:var(--x-fg); word-break:break-word; }
.ac-handle{ margin-top:2px; font-size:15px; line-height:20px; color:var(--x-mute); overflow-wrap:anywhere; }
.ac-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }

/* verified tick + tooltip */
.ac-panel .ac-badge{ color:#1d9bf0; filter:none; }
.ac-vf{ position:relative; display:inline-flex; flex:none; cursor:help; border-radius:50%; outline:none; }
.ac-vf:focus-visible{ outline:2px solid var(--x-fg); outline-offset:2px; }
.ac-vf svg{ width:20px; height:20px; vertical-align:baseline; }
.ac-vf-tip{
  position:absolute; left:-12px; top:calc(100% + 10px); z-index:20; width:max-content; max-width:min(260px,70vw); box-sizing:border-box;
  display:grid; gap:4px; padding:10px 12px; text-align:left; white-space:normal;
  font-size:13px; font-weight:400; line-height:1.4; letter-spacing:0; color:var(--x-mute);
  background:#000; border:1px solid var(--x-line); border-radius:8px; box-shadow:0 0 15px rgba(255,255,255,.12);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.ac-vf-tip b{ font-size:14px; font-weight:700; color:var(--x-fg); }
.ac-vf-tip::before{ content:""; position:absolute; left:18px; top:-5px; width:8px; height:8px; margin-left:-4px; background:#000; border-left:1px solid var(--x-line); border-top:1px solid var(--x-line); transform:rotate(45deg); }
.ac-vf:hover .ac-vf-tip, .ac-vf:focus-visible .ac-vf-tip, .ac-vf.open .ac-vf-tip{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }

/* Pelatra ID chip (click to copy) */
.ac-pid{
  display:inline-flex; align-items:center; gap:8px; padding:4px 10px; min-height:28px; box-sizing:border-box;
  font-family:ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace; font-size:13px; letter-spacing:.04em; color:var(--x-fg);
  background:transparent; border:1px solid var(--x-line); border-radius:6px; cursor:pointer;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; transition:background .15s ease, border-color .15s ease;
}
.ac-pid:hover{ background:rgba(231,233,234,.08); border-color:#536471; }
.ac-pid:focus-visible{ outline:2px solid var(--x-fg); outline-offset:2px; }
.ac-pid-ico{ flex:none; color:var(--x-mute); }
.ac-pid-label{ color:var(--x-mute); font-family:inherit; white-space:nowrap; }
.ac-pid-text{ white-space:nowrap; min-width:9ch; }
.ac-pid.copied{ border-color:var(--x-fg); }
.ac-pid.copied .ac-pid-ico{ color:var(--x-fg); }

/* tabs */
.ac-tabs{ display:flex; margin:16px 0 0; border-bottom:1px solid var(--x-line); }
.ac-tab{
  position:relative; flex:1 1 0; padding:16px 0; margin:0; font-family:inherit; font-size:15px; font-weight:500; letter-spacing:0; text-transform:none; text-align:center;
  color:var(--x-mute); background:none; border:0; cursor:pointer; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
  transition:background .15s ease, color .15s ease;
}
.ac-tab:hover{ background:rgba(231,233,234,.1); }
.ac-tab[aria-selected="true"]{ color:var(--x-fg); font-weight:700; }
.ac-tab[aria-selected="true"]::after{ content:""; position:absolute; left:50%; bottom:0; width:56px; height:4px; margin-left:-28px; border-radius:9999px; background:var(--x-btn); }
.ac-tab:focus-visible{ outline:2px solid var(--x-fg); outline-offset:-2px; }

.ac-pane{ padding:0 0 24px; }
.ac-pane[hidden]{ display:none; }
.ac-sec{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0; padding:16px 16px 12px; }
.ac-sec-t{ font-size:20px; line-height:24px; font-weight:800; letter-spacing:0; text-transform:none; color:var(--x-fg); }
.ac-sec-h{ font-size:13px; color:var(--x-mute); }

/* details list */
.ac-stats{ margin:0; display:block; }
.ac-stat{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; border-top:1px solid var(--x-line); }
.ac-stat span{ font-size:15px; letter-spacing:0; text-transform:none; color:var(--x-mute); }
.ac-stat b{ font-size:15px; font-weight:400; letter-spacing:0; color:var(--x-fg); text-align:right; }
.ac-stat b.mono{ font-family:ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace; letter-spacing:.04em; }

/* edit mode */
.ac-ph-row{ display:flex; align-items:center; gap:16px; padding:16px; border-top:1px solid var(--x-line); border-radius:0; background:none; }
.ac-ph-tx{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:2px; }
.ac-ph-tx b{ font-size:15px; font-weight:700; color:var(--x-fg); }
.ac-ph-tx span{ font-size:13px; line-height:1.4; color:var(--x-mute); }
.ac-ph-acts{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; flex:none; }
.ac-ph-acts .ac-act{ margin:0; }
.ac-bn-card{ display:grid; gap:14px; }
.ac-bn-card .ac-ph-acts{ justify-content:flex-start; }
.ac-sws{ display:flex; flex-wrap:wrap; gap:8px; }
.ac-sw{
  --b1:#333639;
  width:44px; height:32px; padding:0; display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer;
  background:var(--b1); border:1px solid rgba(255,255,255,.22); border-radius:6px;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
}
.ac-sw:hover{ border-color:var(--x-fg); }
.ac-sw[aria-pressed="true"]{ outline:2px solid var(--x-fg); outline-offset:2px; }
.ac-sw:focus-visible{ outline:2px solid var(--x-fg); outline-offset:2px; }
[data-bn="graphite"]{ --b1:#1c1f23; }
[data-bn="navy"]    { --b1:#1d3557; }
[data-bn="indigo"]  { --b1:#2b2d6e; }
[data-bn="wine"]    { --b1:#5a1a2b; }
[data-bn="forest"]  { --b1:#1b4332; }
[data-bn="bronze"]  { --b1:#5c4318; }
[data-bn="steel"]   { --b1:#2a4a5c; }
[data-bn="plum"]    { --b1:#4a2a63; }

.ac-pane > .ac-form{ margin:0; padding:16px; border-top:1px solid var(--x-line); }
.ac-pane > .ac-form .ac-edit-acts{ margin-top:4px; }
.ac-edit-acts{ display:grid; grid-template-columns:1fr 1.4fr; gap:10px; }
.ac-edit-acts .ac-act{ margin:0; }
.ac-pane > .ac-note{ margin:0; padding:0 16px; }
.ac-pane > .ac-act{ width:calc(100% - 32px); margin:16px 16px 0; }
.ac-pane > .ac-accs + .ac-act{ margin-top:24px; }
.ac-peer-acts{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; padding:12px 16px 2px; }
/* slim, one-line buttons (a long label such as "Remove from friends" used to wrap into two lines and made the button tall on phones) */
.ac-peer-acts .ac-act{ margin:0; min-width:0; min-height:38px; padding:0 10px; font-size:14px; line-height:20px; white-space:nowrap; }
.ac-peer-acts .ac-act > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:400px){ .ac-peer-acts .ac-act{ min-height:36px; padding:0 6px; font-size:13px; } }
.ac-peer-acts .ac-act:only-child{ grid-column:1 / -1; }

/* security rows */
.ac-accs{ display:block; border-top:1px solid var(--x-line); }
.ac-acc{ background:none; border:0; border-bottom:1px solid var(--x-line); border-radius:0; }
.ac-acc-h{ display:flex; align-items:center; gap:14px; width:100%; box-sizing:border-box; padding:16px; margin:0; text-align:left; font-family:inherit; color:inherit; background:none; border:0; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; }
button.ac-acc-h{ cursor:pointer; transition:background .15s ease; }
button.ac-acc-h:hover{ background:var(--x-hover); }
button.ac-acc-h:focus-visible{ outline:2px solid var(--x-fg); outline-offset:-2px; }
.ac-method-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ac-method-tx b{ font-size:15px; font-weight:700; letter-spacing:0; color:var(--x-fg); }
.ac-method-tx span{ font-size:13px; line-height:1.4; color:var(--x-mute); white-space:normal; }
.ac-state{ display:inline-flex; align-items:center; gap:5px; flex:none; font-size:13px; letter-spacing:0; text-transform:none; color:var(--x-mute); background:none; border:0; padding:0; }
.ac-state.on{ color:var(--x-fg); }
.ac-acc-chev{ flex:none; color:var(--x-mute); transition:transform .2s ease; }
.ac-acc.open .ac-acc-chev{ transform:rotate(180deg); color:var(--x-fg); }
.ac-acc-b{ border-top:0; }
.ac-acc-b[hidden]{ display:none; }
.ac-acc-in{ padding:4px 16px 20px; display:grid; gap:12px; }
.ac-acc-in .ac-form{ margin:0; padding:0; border:0; }
.ac-acc-in .ac-act{ margin-top:0; }
.ac-acc-in .ac-note, .ac-acc-in .ac-text{ margin:0; padding:0; }
.ac-acc-in .ac-verify{ padding:0; }

/* confirmation by code */
.ac-pane > .ac-verify{ padding:16px; }
.ac-verify{ display:grid; gap:12px; }
.ac-verify-t{ font-size:20px; line-height:24px; font-weight:800; color:var(--x-fg); }
.ac-verify-p{ margin:0; font-size:15px; line-height:1.5; color:var(--x-mute); }
.ac-verify .ac-form{ margin:4px 0 0; }
.ac-code{ text-align:center; font-family:ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace; font-size:26px; letter-spacing:.5em; padding:14px 8px 14px calc(8px + .5em); }
.ac-verify-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ac-verify-row .ac-act{ margin:0; }
.ac-tgbox{ display:grid; gap:12px; padding:16px; border:1px solid var(--x-line); border-radius:12px; }
.ac-tgbox .ac-act{ justify-self:start; }
.ac-form[hidden], .ac-tgbox[hidden], .ac-verify [hidden]{ display:none !important; }

/* photo and banner editors */
.ac-crop{ position:absolute; inset:0; z-index:25; display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box; background:rgba(0,0,0,.88); animation:acIn .2s ease both; }
@keyframes acIn{ from{ opacity:0 } to{ opacity:1 } }
.ac-crop-card{ width:min(100%,340px); max-height:100%; overflow-y:auto; padding:20px; box-sizing:border-box; background:#000; border:1px solid var(--x-line); border-radius:16px; }
.ac-crop-title{ margin-bottom:14px; text-align:left; font-size:20px; line-height:24px; font-weight:800; color:var(--x-fg); }
.ac-crop-stage{ position:relative; width:280px; height:280px; max-width:100%; margin:0 auto; overflow:hidden; border-radius:8px; background:#16181c; cursor:grab; touch-action:none; outline:none; }
.ac-crop-stage:active{ cursor:grabbing; }
.ac-crop-stage:focus-visible{ outline:2px solid var(--x-fg); outline-offset:3px; }
.ac-crop-canvas{ display:block; width:100%; height:100%; -webkit-user-drag:none; }
.ac-crop-ring{ position:absolute; inset:0; border-radius:50%; pointer-events:none; box-shadow:0 0 0 400px rgba(0,0,0,.62), inset 0 0 0 2px rgba(255,255,255,.9); }
.ac-crop-frame{ position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 2px rgba(255,255,255,.9); }
.ac-zoom{ display:flex; align-items:center; gap:12px; margin:16px 4px 4px; color:var(--x-mute); }
.ac-zoom input{ flex:1 1 auto; accent-color:var(--x-btn); height:24px; cursor:pointer; }
.ac-crop-acts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.ac-crop-acts .ac-act{ margin:0; padding:10px; }

/* big photo */
.ac-lb{ position:absolute; inset:0; z-index:26; display:flex; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; background:rgba(0,0,0,.92); cursor:zoom-out; outline:none; animation:acIn .2s ease both; }
.ac-lb-img{ display:block; width:min(86vw,400px,100%); aspect-ratio:1/1; object-fit:cover; border-radius:50%; border:1px solid var(--x-line); animation:acPop .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes acPop{ from{ opacity:0; transform:scale(.9) } to{ opacity:1; transform:none } }
.ac-lb-x{ position:absolute; top:12px; right:12px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--x-fg); background:rgba(15,20,25,.75); border:0; border-radius:50%; cursor:pointer; }
.ac-lb-x:hover{ background:rgba(39,44,48,.9); }

/* ---- phones ---- */
@media (max-width:640px){
  .ac-modal{ padding:8px; }
  .ac-panel{ width:100%; }
  .ac-panel.is-profile{ width:100%; max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); }
  .ac-body{ padding:4px 20px 24px; }
  .ac-seg{ margin:18px -20px 0; }
  .ac-banner{ height:120px; }
  .ac-pf-top{ padding:0 12px; margin-top:-44px; }
  .ac-ava-btn{ width:88px; height:88px; }
  .ac-ava.xl{ width:88px; height:88px; font-size:36px; }
  .ac-edit-btn{ margin-top:56px; }
  .ac-ph-row{ flex-wrap:wrap; }
  .ac-ph-tx{ flex-basis:calc(100% - 4px); }
  .ac-ph-acts{ flex-basis:100%; justify-content:flex-start; }
  .ac-edit-acts{ grid-template-columns:1fr; }
  .ac-edit-acts .ac-act:first-child{ order:2; }
  .ac-code{ font-size:24px; letter-spacing:.4em; padding-left:calc(8px + .4em); }
  .ac-vf-tip{ max-width:min(240px,64vw); }
}
@media (prefers-reduced-motion:reduce){
  .ac-btn, .ac-panel, .ac-backdrop{ transition:opacity .15s ease, visibility 0s; transform:none; }
  .ac-load i{ animation:none; }
  .ac-lb, .ac-lb-img, .ac-crop{ animation:none; }
  .ac-toast, .ac-toast.show{ transition:none; }
}

/* small screens: the regions map uses the whole screen, so the button steps aside while it is open */
@media (max-width:640px), (max-height:520px){
  body.ac-regions .ac-btn.is-ready, body.ac-exclusive .ac-btn.is-ready{ opacity:0; transform:translateY(-8px); pointer-events:none; }
}

/* ---------- main screen: PELATRA STAR HUNT button ---------- */
.glass-btn.hunt-btn{
  text-decoration:none; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  position:relative; overflow:visible;
}
.hunt-btn .hb-star{ color:#ffc61a; filter:drop-shadow(0 0 5px rgba(255,198,26,.6)); }
.hunt-btn .hb-lock{ display:none; opacity:.7; }
.hunt-btn.is-locked .hb-lock{ display:inline-block; }
/* static on purpose: animated shadows next to blurred buttons make them flicker on some phones */
.hunt-btn .new-tag{
  position:absolute; top:-9px; right:-6px; padding:3px 8px 2px;
  font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; line-height:1.2;
  color:#000; background:#fff; border-radius:999px; box-shadow:0 0 12px rgba(255,255,255,.5);
  pointer-events:none;
}



/* =====================================================================
   RECOVERY, QR SIGN-IN, DEVICES
   ===================================================================== */
.ac-modal [hidden]{ display:none !important; }
.ac-link-btn{
  display:inline-block; margin:14px 0 0; padding:0; font-family:inherit; font-size:15px; text-align:left; color:var(--x-fg);
  background:none; border:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
}
.ac-link-btn:hover{ text-decoration-thickness:2px; }
.ac-link-btn:focus-visible{ outline:2px solid var(--x-fg); outline-offset:3px; border-radius:2px; }
.ac-link-btn.first{ margin:4px 0 8px; }
.ac-note.first{ margin:16px 0 0; }
.ac-text.rec-info{ margin-top:12px; }

/* QR sign-in */
.ac-qr{ display:flex; flex-direction:column; align-items:center; gap:12px; margin:20px 0 4px; }
.ac-qr-frame{ width:216px; height:216px; background:#fff; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.ac-qr-frame svg{ display:block; width:100%; height:100%; }
.ac-qr-frame .ac-load{ padding:0; }
.ac-qr-frame .ac-load i{ border-color:#d0d3d6; border-top-color:#000; }
.ac-qr-fallback{ padding:16px; text-align:center; font-size:14px; color:#0f1419; }
.ac-qr-code{ min-height:28px; font-family:ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace; font-size:22px; font-weight:700; letter-spacing:.16em; color:var(--x-fg); -webkit-user-select:text; user-select:text; }
.ac-qr-stat{ min-height:18px; font-size:13px; color:var(--x-mute); text-align:center; }
.ac-qr-steps{ margin:16px 0 0; padding:0 0 0 20px; display:grid; gap:8px; font-size:14px; line-height:1.45; color:var(--x-mute); }
.ac-qr-steps li::marker{ color:var(--x-fg); font-weight:700; }

/* devices, as in the messenger "Devices" screen */
.ac-dev{
  display:flex; align-items:center; gap:14px; width:100%; box-sizing:border-box; margin:0; padding:12px 0; text-align:left;
  font-family:inherit; color:inherit; background:none; border:0; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
}
button.ac-dev{ width:calc(100% + 16px); margin:0 -8px; padding:12px 8px; border-radius:10px; cursor:pointer; transition:background .15s ease; }
button.ac-dev:hover{ background:var(--x-hover); }
button.ac-dev:focus-visible{ outline:2px solid var(--x-fg); outline-offset:-2px; }
.ac-dev-ic{ flex:none; width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--x-fg); background:#16181c; border:1px solid var(--x-line); border-radius:50%; }
.ac-dev-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ac-dev-tx b{ font-size:15px; font-weight:700; line-height:20px; color:var(--x-fg); overflow-wrap:anywhere; }
.ac-dev-tx span{ font-size:13px; line-height:18px; color:var(--x-mute); overflow-wrap:anywhere; }
.ac-dev-r{ flex:none; font-size:13px; color:var(--x-mute); }
.ac-dev-r.on{ color:var(--x-fg); }
.ac-sess{ gap:18px; }
.ac-sess-link{ border-bottom:1px solid var(--x-line); padding-bottom:6px; }
.ac-link-form{ padding:6px 0 12px; display:grid; gap:12px; }
.ac-link-form .ac-form{ margin:0; padding:0; border:0; }
.ac-code.sm{ font-size:20px; letter-spacing:.2em; padding:12px 8px 12px calc(8px + .2em); text-transform:uppercase; }
.ac-sess-h{ display:flex; align-items:center; gap:8px; margin:0 0 2px; font-size:13px; font-weight:700; color:var(--x-mute); }
.ac-sess-h em{ font-style:normal; font-weight:400; }
.ac-sess-kill .ac-act{ width:100%; }
.ac-sess-kill .ac-note{ margin:8px 0 0; }
.ac-sess-item{ border-bottom:1px solid var(--x-line); }
.ac-sess-item:last-child{ border-bottom:0; }
.ac-sess-det{ display:grid; gap:8px; padding:2px 0 16px 54px; }
.ac-kv{ display:flex; justify-content:space-between; gap:16px; font-size:14px; line-height:1.4; }
.ac-kv span{ color:var(--x-mute); }
.ac-kv b{ font-weight:400; color:var(--x-fg); text-align:right; overflow-wrap:anywhere; }
.ac-sess-det .ac-act{ justify-self:start; margin-top:6px; }

/* a device asks to be signed in */
.ac-req{ display:grid; gap:8px; }
.ac-req .ac-dev{ padding:8px 0; }
.ac-req .ac-edit-acts{ margin-top:6px; }
.ac-approve{ display:grid; gap:14px; padding:64px 20px 24px; }
.ac-approve .ac-lead{ margin:0; }
.ac-req-holder .ac-load{ padding:20px 0; }

@media (max-width:640px){
  .ac-qr-frame{ width:200px; height:200px; }
  .ac-sess-det{ padding-left:0; }
  .ac-approve{ padding:60px 16px 20px; }
}

/* ---------- pinned Mythic stars around the profile photo (from update 1, placed for the new profile header) ---------- */
.ac-mstar{
  position:absolute; width:24px; height:24px; margin:-12px 0 0 -12px; padding:0;
  color:#e11d48; background:none; border:0; cursor:help; z-index:3;
  filter:drop-shadow(0 0 5px rgba(225,29,72,.95)) drop-shadow(0 0 12px rgba(150,10,45,.9));
  -webkit-tap-highlight-color:transparent;
}
.ac-mstar svg{ display:block; width:100%; height:100%; animation:acMs 3.6s ease-in-out var(--d,0s) infinite; }
.ac-mstar:hover, .ac-mstar:focus-visible, .ac-mstar.is-tip{ outline:none; z-index:6; }
.ac-mstar:hover svg, .ac-mstar:focus-visible svg{ transform:scale(1.3); animation:none; }
@keyframes acMs{ 0%,100%{ opacity:.85; transform:scale(1) rotate(0) } 50%{ opacity:1; transform:scale(1.14) rotate(10deg) } }
.ac-mstar-tip{
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%) translateY(4px);
  padding:6px 11px; white-space:nowrap; pointer-events:none;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  background:rgba(14,6,10,.96); border:1px solid rgba(225,29,72,.7); border-radius:999px;
  box-shadow:0 0 18px rgba(225,29,72,.35);
  opacity:0; transition:opacity .2s ease, transform .2s ease;
}
.ac-mstar:hover .ac-mstar-tip, .ac-mstar:focus-visible .ac-mstar-tip, .ac-mstar.is-tip .ac-mstar-tip{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (prefers-reduced-motion:reduce){ .ac-mstar svg{ animation:none } }

.ac-mstar.royal{ animation:acHue 6s linear infinite; }
@keyframes acHue{ from{ filter:hue-rotate(0deg) drop-shadow(0 0 5px rgba(225,29,72,.95)) drop-shadow(0 0 12px rgba(225,29,72,.7)); } to{ filter:hue-rotate(360deg) drop-shadow(0 0 5px rgba(225,29,72,.95)) drop-shadow(0 0 12px rgba(225,29,72,.7)); } }
@media (prefers-reduced-motion:reduce){ .ac-mstar.royal{ animation:none } }

/* mythic star caption: a small card floating under the avatar (no layout shift), shown only on hover / tap */
.ac-mstar:hover svg, .ac-mstar.is-tip svg{ transform:scale(1.3); animation:none; }
.ac-star-cap{ position:absolute; left:50%; top:134px; z-index:8; width:max-content; max-width:calc(100% - 24px); opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-50%) translateY(-6px); transition:opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s linear .25s; }
.ac-star-cap.on{ opacity:1; visibility:visible; transform:translateX(-50%); transition:opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.ac-star-cap-box{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:10px 12px 9px; border-radius:16px; background:rgba(14,6,10,.97); border:1px solid rgba(255,90,125,.35); box-shadow:0 12px 30px rgba(0,0,0,.6), 0 0 26px rgba(225,29,72,.28); }
.ac-star-cap-in{ display:inline-flex; align-items:center; gap:8px; max-width:100%; box-sizing:border-box; height:30px; padding:0 14px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:linear-gradient(90deg,rgba(225,29,72,.32),rgba(120,10,40,.55)); border:1px solid rgba(255,90,125,.65); box-shadow:inset 0 0 12px rgba(225,29,72,.2); }
.ac-cap-ico{ flex:none; width:12px; height:12px; color:#ff5a7d; filter:drop-shadow(0 0 4px rgba(255,90,125,.9)); }
.ac-cap-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-cap-id{ flex:none; padding-left:8px; border-left:1px solid rgba(255,255,255,.3); color:#ff9db3; font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.ac-star-cap.royal .ac-star-cap-in{ border-color:transparent; background:linear-gradient(#1a0a12,#1a0a12) padding-box, linear-gradient(90deg,#ff5b5b,#ffb347,#fff35b,#5bff8a,#5bb8ff,#c35bff) border-box; }
.ac-star-cap-date{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(235,235,240,.62); }
.ac-star-cap-date:empty{ display:none; }
@media (prefers-reduced-motion:reduce){ .ac-star-cap, .ac-star-cap.on{ transition:none } }
.ac-mstar::before{ content:""; position:absolute; inset:-9px; border-radius:50%; }

.ac-star-cap-src{ font-size:9.5px; font-weight:600; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase; color:rgba(235,235,240,.55); }
.ac-star-cap-rar{ padding:3px 12px 3px 14px; font-size:10px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:#ff6b8a; border:1px solid rgba(225,29,72,.7); border-radius:999px; background:rgba(225,29,72,.12); box-shadow:0 0 12px rgba(225,29,72,.35); text-shadow:0 0 10px rgba(225,29,72,.8); }
.ac-star-cap-box{ gap:8px; padding:11px 14px 10px; }

/* placement for the new profile header: the photo sits in grid cell 1/1 over the banner, the name is below it */
.ac-av-wrap{ grid-area:1 / 1; position:relative; width:112px; height:112px; }
.ac-star-cap{ left:0; top:calc(100% + 8px); max-width:min(280px, calc(100vw - 40px)); transform:translateY(4px); }
.ac-star-cap.on{ transform:none; }
.ac-star-cap-box{ border-radius:12px; background:#000; border-color:#2f3336; }
@media (max-width:640px){ .ac-av-wrap{ width:88px; height:88px; } }



/* delete profile */
.ac-del-zone{ margin:20px 16px 16px; padding-top:16px; border-top:1px solid var(--x-line); }
.ac-del{ padding:0 16px 16px; }
.ac-del-list{ margin:12px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.ac-del-list li{ position:relative; padding-left:20px; font-size:14px; line-height:1.45; color:var(--x-mute); }
.ac-del-list li::before{ content:''; position:absolute; left:4px; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--x-red); }
.ac-del-check{ display:flex; align-items:flex-start; gap:10px; margin-top:16px; font-size:14px; line-height:1.4; color:var(--x-fg); cursor:pointer; }
.ac-del-check input{ flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--x-red); }
.ac-act.danger.solid, .ac-act.primary.danger-solid{ background:var(--x-red); border-color:var(--x-red); color:#fff; }
.ac-act.danger.solid:hover:not(:disabled), .ac-act.primary.danger-solid:hover:not(:disabled){ background:#d91d2a; border-color:#d91d2a; }
.ac-act.danger.solid:disabled{ opacity:.4; cursor:not-allowed; }
.ac-del .ac-edit-acts{ margin-top:22px; }
.ac-del-check span{ padding-top:0; }


/* =====================================================================
   v18 — tidier forms and profile (X / Threads look), e-mail sign-up steps
   ===================================================================== */

/* the row under a primary button must not touch it (Change e-mail / Resend code used to overlap the button) */
.ac-verify-row{ flex-wrap:wrap; margin-top:12px; }
.ac-verify .ac-verify-row{ margin-top:0; }
.ac-verify-row .ac-act{ flex:0 1 auto; }
.ac-codeonly{ display:block; }
.ac-codeonly .ac-err{ margin-top:12px; }
.ac-codeonly .ac-verify-row{ margin-top:14px; }
.ac-acc-in .ac-codeonly .ac-form{ margin-top:16px; }
.ac-acc-in .ac-codeonly .ac-verify-row{ margin-top:12px; }
.ac-form .ac-err{ margin-top:0; }

/* sign-up: confirmed e-mail line, name step */
.ac-okline{ display:flex; align-items:center; gap:10px; padding:11px 14px; font-size:14px; line-height:1.35; color:var(--x-fg); background:rgba(231,233,234,.04); border:1px solid var(--x-line); border-radius:12px; overflow-wrap:anywhere; }
.ac-okline svg{ flex:none; color:var(--x-fg); }
.ac-onb-acts{ display:grid; gap:10px; margin-top:4px; }
.ac-onb-acts .ac-act{ margin:0; }
.ac-step{ margin:0 0 4px; font-size:13px; font-weight:700; line-height:1.4; color:var(--x-mute); }

/* buttons: one pill shape everywhere */
.ac-act, .ac-edit-btn{ border-radius:9999px; }
.ac-act.sm{ padding:8px 18px; }
.ac-edit-acts{ gap:12px; }

/* profile header */
.ac-banner:not(.has-img)::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(0,0,0,.30) 100%); }
.ac-name{ font-size:22px; line-height:28px; }
.ac-chips{ gap:8px 16px; margin-top:10px; }
.ac-pid{ border-radius:9999px; padding:4px 12px; min-height:30px; }
.ac-joined{ display:inline-flex; align-items:center; gap:6px; font-size:14px; line-height:20px; color:var(--x-mute); white-space:nowrap; }
.ac-joined svg{ flex:none; }
.ac-tabs{ margin-top:18px; }

/* sections and rows */
.ac-sec{ padding:20px 16px 12px; }
.ac-stat{ padding:14px 16px; min-height:52px; box-sizing:border-box; }
.ac-stats{ border-bottom:1px solid var(--x-line); }
.ac-rows{ border-top:1px solid var(--x-line); border-bottom:1px solid var(--x-line); }
.ac-row-btn{
  display:flex; align-items:center; gap:14px; width:100%; box-sizing:border-box; margin:0; padding:16px; text-align:left;
  font-family:inherit; color:inherit; background:none; border:0; cursor:pointer;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; transition:background .15s ease;
}
.ac-row-btn:hover{ background:var(--x-hover); }
.ac-row-btn:focus-visible{ outline:2px solid var(--x-fg); outline-offset:-2px; }
.ac-row-btn .ac-acc-chev{ transform:none; }
.ac-row-btn.danger .ac-method-tx b{ color:var(--x-red); }
.ac-accs{ border-bottom:0; }
.ac-pane > .ac-accs + .ac-act{ margin-top:20px; }

@media (max-width:640px){
  .ac-name{ font-size:20px; line-height:24px; }
  .ac-chips{ gap:8px 12px; }
}

/* v18b — centred section titles, icons on tabs and on the delete row */
.ac-sec{ justify-content:center; text-align:center; }
.ac-tab{ display:flex; align-items:center; justify-content:center; gap:8px; }
.ac-tab-ico{ flex:none; }
.ac-row-ico{ flex:none; color:var(--x-mute); }
.ac-row-btn.danger .ac-row-ico{ color:var(--x-red); }

/* ---------- sign in through the bot ---------- */
a.ac-act, a.ac-act:hover{ text-decoration:none; }
.ac-act[aria-disabled="true"]{ opacity:.5; pointer-events:none; }


/* =====================================================================
   v19 — ACCOUNT WINDOW IN THE MESSENGER STYLE
   Same palette and shapes as /messenger: graphite surfaces, wine accent (#8f2f46 / #cf7188), pill buttons,
   rounded cards instead of hairline lists. Everything below only re-colours and re-shapes; markup is unchanged.
   ===================================================================== */
.ac-modal{
  --x-bg:#141416; --x-surf:#1a1a1d; --x-line:#2a2a2f; --x-fg:#ececee; --x-mute:#8e8e96; --x-hover:rgba(255,255,255,.05);
  --x-btn:#8f2f46; --x-btn-h:#a23650; --x-rgb:143,47,70; --x-btn-fg:#fff; --x-blue:#cf7188; --x-acc:#cf7188; --x-field:#121215;
}
.ac-panel{
  border-radius:20px; border-color:#2a2a2f;
  background:radial-gradient(120% 55% at 50% 0%,rgba(var(--x-rgb),.16),transparent 70%),var(--x-bg);
  box-shadow:0 12px 56px rgba(0,0,0,.7);
}
.ac-panel.is-profile{ background:var(--x-bg); }
.ac-body::-webkit-scrollbar-thumb{ background:#3a3a40; }
.ac-load i{ border-color:var(--x-line); border-top-color:var(--x-acc); }
.ac-perks li::before{ background:var(--x-acc); }
.ac-link-btn{ color:var(--x-acc); }
.ac-err{ color:#ff6b78; }

/* buttons */
.ac-act{ border-color:#3a3a40; }
.ac-act:hover{ background:rgba(255,255,255,.07); border-color:#4a4a52; }
.ac-act.primary{ color:#fff; background:var(--x-btn); border-color:var(--x-btn); }
.ac-act.primary:hover{ background:var(--x-btn-h); border-color:var(--x-btn-h); }
.ac-act:focus-visible, .ac-edit-btn:focus-visible, .ac-pid:focus-visible, .ac-row-btn:focus-visible{ outline-color:var(--x-acc); }
.ac-edit-btn{ border-color:rgba(var(--x-rgb),.75); }
.ac-edit-btn:hover{ background:rgba(var(--x-rgb),.22); }
.ac-x:hover{ background:rgba(255,255,255,.1); }
.ac-panel.is-profile .ac-x{ background:rgba(20,20,22,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.ac-panel.is-profile .ac-x:hover{ background:rgba(20,20,22,.92); }
.ac-toast{ border-radius:999px; box-shadow:0 4px 20px rgba(0,0,0,.6); }

/* fields */
.ac-input{ background:var(--x-field); border-color:var(--x-line); border-radius:12px; padding:13px 14px; font-size:16px; }
.ac-input::placeholder{ color:#5d6068; }
.ac-input:focus{ border-color:var(--x-acc); box-shadow:0 0 0 1px rgba(var(--x-rgb),.7); }
.ac-reveal:hover{ background:rgba(255,255,255,.08); }
.ac-meter i{ background:var(--x-line); }
.ac-meter[data-s="3"] i:nth-child(-n+3){ background:#b9b9c0; }
.ac-meter[data-s="4"] i{ background:var(--x-acc); }
.ac-okline{ background:var(--x-surf); }

/* tabs */
.ac-tab:hover, .ac-seg-b:hover{ background:var(--x-hover); }
.ac-tab[aria-selected="true"], .ac-seg-b[aria-selected="true"]{ color:var(--x-fg); }
.ac-tab[aria-selected="true"] .ac-tab-ico{ color:var(--x-acc); }
.ac-tab[aria-selected="true"]::after, .ac-seg-b[aria-selected="true"]::after{ width:44px; height:3px; margin-left:-22px; background:var(--x-acc); }

/* header of the profile: wine banner, avatar ringed in the panel colour */
.ac-banner:not([data-bn]):not(.has-img), .ac-sw:not([data-bn]){ --b1:#8f2f46; }
.ac-banner{
  height:132px; background:var(--b1);
  background:radial-gradient(80% 140% at 100% 0%,rgba(207,113,136,.38),transparent 62%),linear-gradient(135deg,color-mix(in srgb,var(--b1) 30%,#000) 0%,var(--b1) 100%);
}
.ac-banner.has-img{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.ac-banner:not(.has-img)::after{ background:linear-gradient(180deg,transparent 35%,rgba(20,20,22,.6) 100%); }
.ac-pf-top{ margin-top:-52px; padding:0 20px; }
.ac-ava.xl{ background:var(--x-surf); border:4px solid var(--x-bg); box-shadow:0 0 0 1px rgba(var(--x-rgb),.55),0 8px 24px rgba(0,0,0,.45); }
@media (hover:none){ .ac-ava-edit{ box-shadow:0 0 0 3px var(--x-bg); } }
.ac-edit-btn{ margin-top:62px; }
.ac-panel .ac-badge{ color:var(--x-acc); }
.ac-vf-tip{ background:var(--x-surf); box-shadow:0 8px 28px rgba(0,0,0,.55); }
.ac-vf-tip::before{ background:var(--x-surf); }
.ac-name{ letter-spacing:0; }
.ac-pid{ background:rgba(var(--x-rgb),.14); border-color:rgba(var(--x-rgb),.5); }
.ac-pid:hover{ background:rgba(var(--x-rgb),.26); border-color:rgba(var(--x-rgb),.8); }
.ac-pid-ico, .ac-pid-label{ color:var(--x-acc); }
.ac-pid.copied{ border-color:var(--x-acc); }
.ac-pid.copied .ac-pid-ico{ color:var(--x-acc); }

/* sections: small accent labels, content in rounded cards */
.ac-sec{ justify-content:flex-start; text-align:left; padding:22px 20px 10px; }
.ac-sec-t{ font-size:12px; line-height:16px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--x-acc); }
.ac-stats, .ac-rows, .ac-accs{ margin:0 16px; overflow:hidden; background:var(--x-surf); border:1px solid var(--x-line); border-radius:16px; }
.ac-stat:first-child{ border-top:0; }
.ac-stat span{ color:var(--x-mute); }
.ac-acc:last-child{ border-bottom:0; }
.ac-pane > .ac-note{ padding:0 20px; }
.ac-pane > .ac-form{ padding:16px 20px; }
.ac-ph-row{ padding:16px 20px; }
.ac-row-btn:hover, button.ac-acc-h:hover{ background:var(--x-hover); }
.ac-acc.open .ac-acc-chev{ color:var(--x-acc); }
.ac-state.on{ color:var(--x-acc); }
.ac-dev-ic{ background:var(--x-bg); border-color:var(--x-line); color:var(--x-acc); }
.ac-dev-r.on{ color:var(--x-acc); }
.ac-del-zone{ margin:20px 20px 16px; }
.ac-act.danger{ border-color:rgba(244,33,46,.45); }

/* photo / banner editor, big photo, star caption */
.ac-crop{ background:rgba(0,0,0,.82); }
.ac-crop-card{ background:var(--x-surf); border-radius:20px; box-shadow:0 12px 40px rgba(0,0,0,.55); }
.ac-crop-stage{ background:var(--x-field); }
.ac-star-cap-box{ background:var(--x-surf); border-color:var(--x-line); }
.ac-lb-x{ background:rgba(20,20,22,.8); }
.ac-lb-x:hover{ background:rgba(20,20,22,.95); }
.ac-sw:hover, .ac-sw[aria-pressed="true"]{ border-color:var(--x-acc); }
.ac-sw[aria-pressed="true"]{ outline-color:var(--x-acc); }
.ac-zoom input{ accent-color:var(--x-acc); }

@media (max-width:640px){
  .ac-pf-top{ margin-top:-42px; padding:0 14px; }
  .ac-banner{ height:112px; }
  .ac-edit-btn{ margin-top:52px; }
  .ac-stats, .ac-rows, .ac-accs{ margin:0 12px; }
  .ac-sec{ padding:20px 16px 10px; }
  .ac-pane > .ac-form, .ac-ph-row{ padding-left:16px; padding-right:16px; }
}

/* ---------- another person's profile (read only): opened from the messenger, so it must sit above the messenger window ---------- */
.ac-modal.is-peer{ z-index:120; }
.ac-pf.is-peer .ac-pane{ padding-bottom:16px; }
.ac-pf.is-peer .ac-pane > .ac-act{ display:flex; align-items:center; justify-content:center; width:calc(100% - 32px); box-sizing:border-box; }

/* =====================================================================
   v28 — profile window: the text no longer jumps while the card loads
   ===================================================================== */
/* no slide / scale on a profile: it only fades in */
.ac-panel.is-profile, .ac-modal.is-show .ac-panel.is-profile{ transform:none; }
.ac-panel.is-profile{ transition:opacity .2s ease; }
/* it grows downwards only: its top edge stays where it is when the rest of the card arrives */
.ac-modal.is-peer{ align-items:flex-start; padding-top:max(12px,7vh); }
@media (max-width:640px){ .ac-modal.is-peer{ padding:8px; } }
.ac-joined.is-ph{ visibility:hidden; }
.ac-pf.is-peer .ac-pane{ min-height:240px; }
.ac-pf.is-peer .ac-pane > .ac-load{ padding:48px 0; }

/* v57: where codes and notices go (Profile > Security > E-mail) */
.ac-deliv{ margin:0 0 14px; }
.ac-deliv-t{ font-size:13px; font-weight:700; color:var(--x-mute); margin:0 0 8px; }
.ac-choice{ display:flex; gap:8px; }
.ac-choice-b{ flex:1 1 0; min-width:0; padding:10px 12px; font:inherit; font-size:14px; font-weight:600; color:var(--x-mute); background:transparent; border:1px solid var(--x-line); border-radius:12px; cursor:pointer; transition:background .15s ease,border-color .15s ease,color .15s ease; }
.ac-choice-b:hover{ background:var(--x-hover); }
.ac-choice-b.is-on{ color:var(--x-fg); border-color:var(--x-acc); background:rgba(207,113,136,.12); cursor:default; }
.ac-choice-b:focus-visible{ outline:2px solid var(--x-fg); outline-offset:2px; }
.ac-deliv-n{ margin:8px 0 0; font-size:12.5px; line-height:1.45; color:var(--x-mute); }

/* sign-in and security opened from the messenger settings: it is one more page of the settings window, same size, same header, same colours, same dimming */
.ac-back[hidden]{ display:none; }
.ac-panel.is-sec{ width:min(100%,480px); height:min(86vh,680px); max-height:100%; border-radius:16px; border:1px solid var(--x-line); background:var(--x-surf); box-shadow:0 12px 40px rgba(0,0,0,.55); }
.ac-panel.is-sec .ac-head{ position:relative; top:auto; left:auto; right:auto; z-index:12; flex:none; gap:6px; min-height:54px; padding:0 10px 0 8px; box-sizing:border-box; justify-content:space-between; pointer-events:auto; background:var(--x-surf); border-bottom:1px solid var(--x-line); }
.ac-panel.is-sec .ac-x{ width:36px; height:36px; background:transparent; }
.ac-panel.is-sec .ac-x:hover{ background:var(--x-hover); }
.ac-panel.is-sec .ac-title-wrap{ display:flex; flex:1 1 auto; min-width:0; }
.ac-panel.is-sec .ac-title{ padding-left:8px; font-size:18px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-panel.is-sec .ac-body{ padding:0; }
.ac-panel.is-sec .ac-accs{ background:rgba(255,255,255,.04); border-color:transparent; }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-panel.is-sec .ac-accs{ background:rgba(0,0,0,.04); }
/* the same button look as in the messenger settings (these rules live under .ch-modal in chat.css, which this window is not inside) */
.ac-modal.is-instant .ac-act.primary{ color:#fff; background:var(--x-btn); border-color:var(--x-btn); }
.ac-modal.is-instant .ac-act.primary:hover{ background:var(--x-btn-h); border-color:var(--x-btn-h); }
.ac-modal.is-instant .ac-act:not(.primary):not(.danger){ border-color:#202d3b; }
.ac-modal.is-instant .ac-act:not(.primary):hover{ background:rgba(255,255,255,.06); }
.ac-modal.is-instant:is([data-theme="light"],[data-theme="paper"]) .ac-act:not(.primary):hover{ background:rgba(0,0,0,.06); }
.ac-modal.is-instant .ac-input{ border-color:#202d3b; border-radius:10px; }
.ac-panel.is-sec .ac-acc{ border-bottom-color:var(--x-line); }
.ac-sec-only{ padding:12px 0 16px; }
@media (max-width:720px){ .ac-modal.is-instant{ padding:0; } .ac-panel.is-sec{ width:100%; height:100%; border:0; border-radius:0; } }

/* opened from the messenger settings: appears and disappears at once, with the dimming already in place (no fade-in gap that looked like a flash) */
.ac-modal.is-instant, .ac-modal.is-instant.is-show{ transition:none; }
.ac-modal.is-instant .ac-backdrop{ opacity:1; transition:none; background:transparent; }      /* the settings window under it already dims the page */
html.ch-win .ac-modal.is-instant .ac-backdrop{ background:#0e0e10; }
html.ch-win .ac-panel.is-sec{ width:min(100%,760px); height:100%; max-height:none; border-radius:0; }
.ac-modal.is-instant .ac-panel{ transition:none; }

/* ===== Sign-in and security: separate rounded cards with small gaps (like the rest of the messenger menu); Devices folded, laid out as tiles ===== */
.ac-panel.is-sec{ --sec-card:rgba(255,255,255,.04); --sec-card-h:rgba(255,255,255,.07); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-panel.is-sec{ --sec-card:rgba(0,0,0,.04); --sec-card-h:rgba(0,0,0,.07); }
.ac-panel.is-sec .ac-sec-only{ padding:10px 14px calc(20px + env(safe-area-inset-bottom,0px)); }
.ac-panel.is-sec .ac-pane{ padding:0; }
.ac-panel.is-sec .ac-accs{ display:flex; flex-direction:column; gap:4px; margin:0; background:none; border:0; border-radius:0; overflow:visible; }
.ac-panel.is-sec .ac-acc{ background:var(--sec-card); border:0; border-radius:16px; overflow:hidden; transition:background .15s ease; }
.ac-panel.is-sec .ac-acc:hover{ background:var(--sec-card-h); }
.ac-panel.is-sec .ac-acc.open:hover{ background:var(--sec-card); }
.ac-panel.is-sec .ac-acc:last-child{ border-bottom:0; }
.ac-panel.is-sec .ac-acc-h{ padding:11px 12px; gap:12px; }
.ac-panel.is-sec button.ac-acc-h{ background:none !important; }
.ac-panel.is-sec .ac-acc-chev{ transform:rotate(-90deg); }
.ac-panel.is-sec .ac-acc.open .ac-acc-chev{ transform:rotate(0deg); }
.ac-panel.is-sec .ac-acc-in{ padding:2px 14px 16px; }
.ac-panel.is-sec .ac-pane > .ac-err{ margin:8px 2px 0; }

/* "Send codes and notices to": the same burgundy pill switch as the messenger menu (Lock automatically used to look like this) */
.ac-panel.is-sec .ac-choice{ display:flex; gap:2px; padding:3px; background:var(--sec-card); border-radius:9999px; }
.ac-panel.is-sec .ac-choice-b{ padding:9px 12px; font-size:14px; font-weight:700; color:var(--x-mute); background:transparent; border:0; border-radius:9999px; }
.ac-panel.is-sec .ac-choice-b:hover{ background:var(--sec-card-h); }
.ac-panel.is-sec .ac-choice-b.is-on{ color:#fff; background:var(--x-btn); border:0; }
.ac-panel.is-sec .ac-choice-b.is-on:hover{ background:var(--x-btn); }

/* Devices: a sober list. Neutral icons, hairlines instead of coloured chips, one quiet destructive button */
.ac-panel.is-sec .ac-sess{ gap:18px; padding:2px 12px 14px; }
.ac-panel.is-sec .ac-sess-link{ border:0; padding:0; }
.ac-panel.is-sec .ac-sess-block{ display:flex; flex-direction:column; gap:0; }
.ac-panel.is-sec .ac-sess-h{ margin:0 2px 8px; padding:0; font-size:11.5px; line-height:16px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--x-mute); }
.ac-panel.is-sec .ac-sess-h em{ margin-left:6px; min-width:0; height:auto; padding:0; font-size:11.5px; font-weight:600; letter-spacing:0; color:var(--x-mute); background:none; border-radius:0; }
.ac-panel.is-sec .ac-sess .ac-dev{ padding:11px 12px; gap:12px; border-radius:12px; background:rgba(0,0,0,.22); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-panel.is-sec .ac-sess .ac-dev{ background:rgba(0,0,0,.05); }
.ac-panel.is-sec .ac-sess button.ac-dev{ width:100%; margin:0; transition:background .15s ease; }
.ac-panel.is-sec .ac-sess button.ac-dev:hover{ background:rgba(0,0,0,.34); }
.ac-panel.is-sec .ac-sess .ac-dev-ic{ width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.06); border:0; color:var(--x-fg); opacity:.85; }
.ac-panel.is-sec .ac-sess .ac-dev-ic.is-acc{ background:rgba(255,255,255,.06); color:var(--x-fg); }
.ac-panel.is-sec .ac-sess .ac-dev-tx b{ font-size:14.5px; font-weight:600; }
.ac-panel.is-sec .ac-sess .ac-dev-tx span{ font-size:12.5px; }
.ac-panel.is-sec .ac-sess .ac-dev-r{ font-size:12.5px; color:var(--x-mute); }
.ac-panel.is-sec .ac-sess .ac-dev-r.on{ padding:0; background:none; border-radius:0; font-weight:600; color:#b0405c; }
.ac-panel.is-sec .ac-sess .ac-dev-r.on::before{ content:none; display:none; }
/* the other devices: one grouped list, rows split by hairlines */
.ac-panel.is-sec .ac-sess-item{ background:rgba(0,0,0,.22); border:0; border-radius:0; overflow:hidden; }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-panel.is-sec .ac-sess-item{ background:rgba(0,0,0,.05); }
.ac-panel.is-sec .ac-sess-item + .ac-sess-item{ border-top:1px solid var(--x-line); }
.ac-panel.is-sec .ac-sess-h + .ac-sess-item{ border-radius:12px 12px 0 0; }
.ac-panel.is-sec .ac-sess-item:last-child{ border-radius:0 0 12px 12px; }
.ac-panel.is-sec .ac-sess-h + .ac-sess-item:last-child{ border-radius:12px; }
.ac-panel.is-sec .ac-sess-item .ac-dev{ border-radius:0; background:none; }
.ac-panel.is-sec .ac-sess-item button.ac-dev:hover{ background:rgba(255,255,255,.04); }
.ac-panel.is-sec .ac-sess-item button.ac-dev::after{ content:""; flex:none; width:6px; height:6px; margin:0 3px 0 2px; border-right:1.5px solid var(--x-mute); border-bottom:1.5px solid var(--x-mute); transform:translateY(-2px) rotate(45deg); transition:transform .2s ease; }
.ac-panel.is-sec .ac-sess-item.open button.ac-dev::after{ transform:translateY(2px) rotate(-135deg); }
.ac-panel.is-sec .ac-sess-det{ gap:0; margin:0; padding:0 12px 12px 60px; border-top:0; }
.ac-panel.is-sec .ac-sess-det .ac-kv{ padding:7px 0; font-size:13px; border-bottom:1px solid var(--x-line); }
.ac-panel.is-sec .ac-sess-det .ac-kv:last-of-type{ border-bottom:0; }
.ac-panel.is-sec .ac-sess-det .ac-act{ justify-self:stretch; width:100%; min-height:40px; margin-top:8px; border-radius:10px; font-size:14px; }
/* log out everywhere: quiet outlined button under the list */
.ac-panel.is-sec .ac-sess-kill:empty{ display:none; }
.ac-panel.is-sec .ac-sess-kill .ac-act{ width:100%; min-height:44px; border-radius:12px; background:transparent; border-color:rgba(244,33,46,.35); font-size:14.5px; font-weight:600; }
.ac-panel.is-sec .ac-sess-kill .ac-act:hover{ background:rgba(244,33,46,.08); }
.ac-panel.is-sec .ac-sess-kill .ac-kill-note{ margin:8px 2px 0; text-align:left; font-size:12.5px; color:var(--x-mute); }
.ac-panel.is-sec .ac-link-form{ padding:10px 2px 2px; }
@media (max-width:640px){ .ac-panel.is-sec .ac-sess-det{ padding-left:12px; } }

/* Delete account: a separate block at the bottom of Sign-in and security */
.ac-panel.is-sec .ac-accs-del{ margin-top:22px; padding-top:18px; border-top:1px solid var(--x-line); }
.ac-panel.is-sec .ac-acc-del .ac-method-tx b{ color:#f4212e; }
.ac-panel.is-sec .ac-acc-del .ac-acc-chev{ color:rgba(244,33,46,.7); }
.ac-panel.is-sec .ac-acc-del.open .ac-acc-chev{ transform:rotate(-90deg); }
.ac-panel.is-sec .ac-acc-h:disabled, .ac-act:disabled{ opacity:.5; cursor:not-allowed; }

/* =====================================================================
   v39 — another person's profile: compact and harmonious
   Photo on the left with the name and status beside it (no empty space next to the photo),
   actions right under the header, facts as small tiles instead of a long table.
   ===================================================================== */
.ac-pf.is-compact .ac-banner{ height:104px; }
.ac-pf.is-compact .ac-peer-head{ margin-top:-40px; padding:0 20px; column-gap:16px; align-items:start; }
.ac-pf.is-compact .ac-av-wrap, .ac-pf.is-compact .ac-ava-btn{ width:96px; height:96px; }
.ac-pf.is-compact .ac-ava.xl{ width:96px; height:96px; font-size:38px; }
.ac-pf.is-compact .ac-who{ grid-area:1 / 2; align-self:start; margin-top:48px; min-width:0; }
.ac-pf.is-compact .ac-name{ font-size:22px; line-height:28px; }
.ac-pf.is-compact .ac-name-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-pf.is-compact .ac-name .ac-vf{ flex:none; }
.ac-peer-sub{ display:flex; align-items:center; gap:7px; min-height:20px; margin-top:2px; font-size:14px; line-height:20px; color:var(--x-mute); }
.ac-peer-sub > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-peer-dot{ flex:none; width:8px; height:8px; border-radius:50%; background:#4a4a52; }
.ac-peer-dot.is-on{ background:var(--x-acc); box-shadow:0 0 0 3px rgba(var(--x-rgb),.28); }

/* actions: the main one takes the room, the destructive one stays quiet until it is tapped */
.ac-pf.is-compact .ac-peer-acts{ display:flex; gap:8px; padding:16px 20px 0; }
.ac-pf.is-compact .ac-peer-acts .ac-act{ flex:1 1 auto; min-height:42px; padding:0 16px; font-size:15px; font-weight:700; }
.ac-pf.is-compact .ac-peer-acts .ac-act{ width:auto; box-sizing:border-box; }
.ac-pf.is-compact .ac-peer-acts .ac-act.primary{ flex:1 1 0; min-width:0; }
.ac-pf.is-compact .ac-peer-acts .ac-act.danger{ flex:0 0 auto; }
.ac-pf.is-compact .ac-peer-acts .ac-act.ghost{ flex:1 1 0; }
.ac-pf.is-compact .ac-peer-acts .ac-act > span{ overflow:visible; text-overflow:clip; }
.ac-pf.is-compact .ac-peer-acts .ac-act.danger{ color:#ff6b78; background:transparent; border-color:rgba(244,33,46,.32); }
.ac-pf.is-compact .ac-peer-acts .ac-act.danger:hover{ background:rgba(244,33,46,.1); border-color:rgba(244,33,46,.6); }
.ac-pf.is-compact .ac-peer-acts .ac-act.danger.is-armed{ color:#fff; background:var(--x-red); border-color:var(--x-red); }
.ac-pf.is-compact .ac-peer-acts .ac-act:only-child{ flex:1 1 100%; }

/* facts */
.ac-peer-info{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; padding:16px 20px 20px; }
.ac-peer-tile{
  box-sizing:border-box; min-width:0; display:flex; flex-direction:column; gap:3px; margin:0; padding:12px 14px; text-align:left;
  font:inherit; color:var(--x-fg); background:var(--x-surf); border:1px solid var(--x-line); border-radius:14px;
}
.ac-peer-tile > span{ font-size:12.5px; line-height:16px; color:var(--x-mute); }
.ac-peer-tile > b{ font-size:15px; line-height:20px; font-weight:600; color:var(--x-fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-peer-tile:last-child:nth-child(even){ grid-column:1 / -1; }
.ac-peer-id{
  grid-column:1 / -1; flex-direction:row; align-items:center; gap:12px; cursor:pointer;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; transition:background .15s ease, border-color .15s ease;
}
.ac-peer-id:hover{ background:rgba(var(--x-rgb),.14); border-color:rgba(var(--x-rgb),.55); }
.ac-peer-id:focus-visible{ outline:2px solid var(--x-acc); outline-offset:2px; }
.ac-peer-id-ico{ flex:none; box-sizing:content-box; padding:9px; color:var(--x-acc); background:rgba(var(--x-rgb),.16); border-radius:50%; }
.ac-peer-id-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ac-peer-id-l{ font-size:12.5px; line-height:16px; color:var(--x-mute); }
.ac-peer-id-v{ font-family:ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace; font-size:16px; line-height:22px; font-weight:700; letter-spacing:.05em; color:var(--x-fg); }
.ac-peer-id-cp{ flex:none; color:var(--x-mute); transition:color .15s ease; }
.ac-peer-id:hover .ac-peer-id-cp, .ac-peer-id.copied .ac-peer-id-cp{ color:var(--x-acc); }
.ac-peer-id.copied{ border-color:var(--x-acc); }

/* loading / error below the header */
.ac-pf.is-compact .ac-pane{ min-height:0; padding-bottom:12px; }
.ac-pf.is-compact .ac-pane > .ac-load{ padding:28px 0; }
.ac-pf.is-compact .ac-pane > .ac-note{ padding:20px 20px 8px; }

@media (max-width:640px){
  .ac-pf.is-compact .ac-banner{ height:92px; }
  .ac-pf.is-compact .ac-peer-head{ margin-top:-34px; padding:0 14px; column-gap:12px; }
  .ac-pf.is-compact .ac-av-wrap, .ac-pf.is-compact .ac-ava-btn{ width:80px; height:80px; }
  .ac-pf.is-compact .ac-ava.xl{ width:80px; height:80px; font-size:32px; }
  .ac-pf.is-compact .ac-who{ margin-top:42px; }
  .ac-pf.is-compact .ac-name{ font-size:20px; line-height:26px; }
  .ac-pf.is-compact .ac-peer-acts{ padding:14px 14px 0; }
  .ac-pf.is-compact .ac-peer-acts .ac-act{ padding:0 10px; font-size:14px; }
  .ac-peer-info{ padding:14px 14px 18px; }
}
@media (max-width:360px){ .ac-pf.is-compact .ac-peer-acts{ flex-wrap:wrap; } .ac-pf.is-compact .ac-peer-acts .ac-act{ flex:1 1 100%; } }
@media (prefers-reduced-motion:reduce){ .ac-peer-id, .ac-peer-id-cp{ transition:none; } }

/* own profile: same header and tiles, the pane only wraps them; the edit form is made of cards too */
.ac-pf.is-compact .ac-pane.is-info{ padding:0; }
.ac-pf.is-compact .ac-peer-acts .ac-act svg{ flex:none; }
.ac-pf.is-compact .ac-peer-sub:empty{ display:none; }
.ac-pf.is-compact .ac-sec{ padding:18px 20px 10px; }
.ac-pf.is-compact .ac-sec-t{ font-size:17px; line-height:22px; font-weight:800; letter-spacing:0; text-transform:none; color:var(--x-fg); }
.ac-pf.is-compact .ac-pane{ padding-bottom:20px; }
.ac-pf.is-compact .ac-ph-row{ margin:0 20px 8px; padding:14px; flex-wrap:wrap; background:var(--x-surf); border:1px solid var(--x-line); border-radius:14px; }
.ac-pf.is-compact .ac-pane > .ac-form{ margin:0; padding:8px 20px 0; border-top:0; }
@media (max-width:640px){
  .ac-pf.is-compact .ac-sec{ padding:16px 14px 8px; }
  .ac-pf.is-compact .ac-ph-row{ margin:0 14px 8px; }
  .ac-pf.is-compact .ac-pane > .ac-form{ padding:8px 14px 0; }
}

/* v83: the messenger opened the sign-in window for a signed-out visitor: it is simply there (no fade, no slide), and the opaque backdrop hides the "Sign in" gate behind it, so the gate can never flash for a moment */
.ac-modal.is-boot, .ac-modal.is-boot.is-show{ transition:none; }
.ac-modal.is-boot .ac-backdrop{ opacity:1; transition:none; background:#0e0e10; }
.ac-modal.is-boot .ac-panel, .ac-modal.is-boot.is-show .ac-panel{ opacity:1; transform:none; transition:none; }

/* v100: ONE verified seal colour everywhere (chat list, chat header, profiles, account window, settings).
   Before: light/paper themes lightened the seal in chats but the profile kept the dark accent, so profiles looked darker.
   Now every seal reads --seal, and --seal is the same in both windows. No glow, no filter. */
.ch-modal, .ac-modal{ --seal:var(--x-acc); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]), .ac-modal:is([data-theme="light"],[data-theme="paper"]){ --seal:color-mix(in srgb, var(--x-btn) 62%, #ffffff); }
.ch-modal .ch-vbadge, .ch-modal .ch-cat-i.is-seal, .ch-modal .ch-ibtn.is-verified,
.ac-modal .ac-badge, .ac-modal .ac-panel .ac-badge{ color:var(--seal) !important; filter:none !important; opacity:1; }
.ac-btn .ac-badge{ color:#cf7188; filter:none; }
@media (max-width:640px), (max-height:520px){
  .ac-btn .ac-badge{ filter:drop-shadow(0 0 0 #000) drop-shadow(0 0 3px rgba(0,0,0,.9)); }
}