/* ARYBOX 2.2.4 — consolidated stylesheet, adaptive Discover/footer. */
:root {
  color-scheme: dark;
  --ink: #f5f5f7;
  --nav-height: 46px;
  --accent: #0071e3;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: #08080a;
  scroll-behavior: smooth;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #2997ff; outline-offset: 3px; }
body.overlay-open { overflow: hidden; }

/* Global navigation: desktop stays visible while its contents actually fit. */
.header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--nav-height); padding: 0 clamp(14px, 6vw, 80px);
  background: rgba(12, 12, 16, .76);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.075);
}
.nav {
  display: flex; align-items: center; justify-content: flex-end;
  gap: clamp(7px, 1.5vw, 22px);
  height: var(--nav-height); max-width: 1200px; margin: 0 auto;
}
.logo { margin-right: auto; flex: none; font-weight: 800; font-size: 18px; letter-spacing: .14em; white-space: nowrap; }
.nav-links { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: clamp(8px, 1.7vw, 27px); white-space: nowrap; }
.nav-links a { font-size: 12px; color: #b7b7c0; transition: color .2s; }
.nav-links a:hover { color: white; }
.nav-action {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: 0; border-radius: 50%;
  color: #e8e8ed; cursor: pointer;
}
.nav-action:hover, .nav-action[aria-expanded="true"] { background: rgba(255,255,255,.12); }
.mobile-menu-toggle { display: none; }
.account { flex: none; position: relative; }
.account-menu {
  position: absolute; z-index: 110; right: 0; top: calc(100% + 10px);
  width: min(224px, calc(100vw - 24px)); padding: 16px 20px 17px;
  border-radius: 15px; background: #f5f5f7; color: #1d1d1f;
  box-shadow: 0 18px 55px rgba(0,0,0,.25);
}
.account-heading { margin: 0 0 7px; color: #77777e; font-size: 12px; }
.language-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0 9px; border-bottom: 1px solid #dedee3; margin-bottom: 3px; }
.language-row label { white-space: nowrap; font-size: 12px; color: #6e6e73; }
.language-row select { width: 105px; max-width: 100%; min-width: 0; padding: 4px 6px; border-radius: 7px; background: white; border: 1px solid #dedee3; color: #1d1d1f; font-size: 12px; }
.account-item { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 4px 0; font-size: 12px; font-weight: 600; }
.account-item svg { width: 16px; height: 16px; flex: none; fill: none; stroke: #71717a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.account-note { font-size: 10px; margin: 7px 0 0; color: #86868b; }

/* Navigation switches only when measured elements no longer fit. */
body.nav-compact .nav-links { display: none; }
body.nav-compact .mobile-menu-toggle { display: grid; }
body.nav-compact .search-toggle { margin-left: auto; }
body.nav-compact .logo { margin-right: 0; }

/* Overlay navigation and section search. */
.screen-overlay { position: fixed; inset: 0; z-index: 300; background: #f5f5f7; color: #1d1d1f; overflow-y: auto; overscroll-behavior: contain; animation: panel-appear .22s ease-out both; }
.overlay-topbar { display: flex; height: 56px; justify-content: flex-end; align-items: center; padding: 0 23px; }
.overlay-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: none; color: #1d1d1f; border: 0; border-radius: 50%; cursor: pointer; }
.mobile-nav-list { display: flex; flex-direction: column; gap: 0; max-width: 650px; margin: 0 auto; padding: clamp(30px, 6vh, 70px) 40px 60px; }
.mobile-nav-list a { padding: 12px 0; font-size: clamp(32px, 8vw, 44px); font-weight: 600; letter-spacing: -.048em; line-height: 1.15; }
.mobile-nav-list a:hover { color: #66666b; }
.search-panel { max-width: 760px; margin: 0 auto; padding: clamp(25px, 7vh, 65px) 28px; }
.search-topbar { display: flex; align-items: center; gap: 12px; }
.search-input-wrap { flex: 1; min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #d2d2d7; color: #86868b; }
.search-input-wrap svg { flex: none; }
.search-input-wrap input { width: 100%; min-width: 0; background: transparent; border: 0; outline: 0; color: #1d1d1f; font-size: clamp(20px, 3vw, 28px); font-weight: 500; letter-spacing: -.025em; }
.search-input-wrap input::placeholder { color: #86868b; }
.search-close { padding: 10px 0; border: 0; background: transparent; color: #1d1d1f; font-size: 14px; cursor: pointer; }
.search-caption { margin: 30px 0 8px; color: #86868b; font-size: 12px; }
.search-results { display: flex; flex-direction: column; gap: 0; }
.search-results a { padding: 12px 0; font-size: 21px; font-weight: 600; letter-spacing: -.035em; }
.search-results a:hover { color: var(--accent); }
.search-empty { font-size: 14px; color: #86868b; }
@keyframes panel-appear { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Hero */
.hero { min-height: 100svh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 110px 24px; text-align: center; background: radial-gradient(ellipse at 50% 75%, #14192a, #08080a 65%); }
.glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, #5266aa55, #27356518 45%, transparent 70%); filter: blur(24px); transform: translateY(120px); animation: breathe 7s ease-in-out infinite alternate; }
.hero-content { position: relative; z-index: 1; animation: appear 1.3s ease both; }
.eyebrow { font-size: 12px; letter-spacing: .26em; font-weight: 600; color: #91a8e9; }
.hero h1 { margin: 24px 0; font-size: clamp(48px, 8vw, 116px); font-weight: 700; line-height: 1.04; letter-spacing: -.065em; }
.subtitle { color: #a8a8b3; font-size: clamp(16px, 2vw, 22px); }
.hero-button { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; padding: 14px 25px; border-radius: 30px; background: var(--accent); font-size: 15px; transition: background .2s, transform .2s; }
.hero-button:hover { background: #2189f5; transform: translateY(-2px); }
.scroll-hint { position: absolute; bottom: 35px; margin: 0; color: #777987; font-size: 10px; letter-spacing: .25em; }
@keyframes appear { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
@keyframes breathe { from { transform: translateY(120px) scale(.85); opacity: .55; } to { transform: translateY(80px) scale(1.25); opacity: 1; } }

/* Experience — original zoom-and-reveal GSAP sequence. */
.experience { height: 100svh; min-height: 550px; background: #08080a; overflow: hidden; }
.experience-stage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; }
.experience-image { position: relative; width: 76%; height: 72%; overflow: hidden; border-radius: 30px; background: url("../images/design-story.jpg") center / cover no-repeat; will-change: width, height, border-radius; }
.experience-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.12) 40%,rgba(0,0,0,.65)); }
.experience-copy { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; opacity: 0; transform: translateY(35px); }
.experience-copy p { font-size: 12px; letter-spacing: .25em; color: #d2d9f0; }
.experience-copy h2 { margin: 22px 0; font-size: clamp(48px, 8vw, 110px); font-weight: 700; line-height: 1.04; letter-spacing: -.06em; }
.experience-copy span { font-size: clamp(16px, 2vw, 22px); color: #e2e2e7; }

/* Storytelling — matched pauses and transitions, locally stored photo. */
.storytelling { position: relative; background: #08080a; color: #f5f5f7; }
.story-stage { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.story-panel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 75svh; padding: 100px 24px; text-align: center; }
.story-design { background: linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.3) 55%,rgba(0,0,0,.55)),url("../images/design-story.jpg") center / cover no-repeat; }
.story-number { font-size: 12px; letter-spacing: .25em; color: #91a8e9; font-weight: 600; }
.story-panel h2 { margin: 25px 0 8px; font-size: clamp(48px, 7.8vw, 112px); font-weight: 600; line-height: 1.08; letter-spacing: -.055em; }
.story-panel p { margin: 12px 0; font-size: clamp(20px, 2.3vw, 30px); font-weight: 500; letter-spacing: -.025em; }
.story-description { margin-top: 18px; color: #a1a1aa; font-size: clamp(14px, 1.5vw, 17px); line-height: 1.5; }
.story-technology h2 { background: linear-gradient(120deg,#fff,#8da8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.story-wellbeing h2 { background: linear-gradient(120deg,#fff,#b5a8e9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.story-progress { display: none; position: absolute; z-index: 4; bottom: 42px; left: 50%; transform: translateX(-50%); width: 130px; height: 2px; background: #414149; overflow: hidden; }
.story-progress-fill { width: 100%; height: 100%; background: #a3b6ff; transform: scaleX(0); transform-origin: left; }
.storytelling.is-animated .story-stage { height: 100svh; }
.storytelling.is-animated .story-panel { position: absolute; inset: 0; min-height: 0; opacity: 0; visibility: hidden; }
.storytelling.is-animated .story-design { opacity: 1; visibility: visible; }
.storytelling.is-animated .story-progress { display: block; }

/* Discover — fluid spacing, compact photo grid, translucent footer. */
.explore {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 4vh, 54px) max(24px, calc((100vw - 1200px)/2));
  padding-bottom: calc(var(--nav-height) + clamp(16px, 3vh, 30px));
  background: #f5f5f7;
  color: #1d1d1f;
}
.explore > .eyebrow { margin: 0; color: #5076b7; }
.explore > h2 {
  margin: clamp(10px, 1.5vh, 22px) 0 0;
  font-size: clamp(38px, 6vw, 75px);
  font-weight: 700; line-height: 1.08; letter-spacing: -.05em;
}
.cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.45vh, 18px);
  margin-top: clamp(14px, 2vh, 28px);
}
.card {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  min-width: 0; min-height: 290px; overflow: hidden;
  padding: 25px; border-radius: 21px; background: #171a25; color: #fff;
  transition: transform .45s ease, box-shadow .45s ease;
}
.card::before {
  content: ""; position: absolute; z-index: -2; inset: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  transition: transform .85s cubic-bezier(.2,.7,.2,1);
}
.card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.10) 35%,rgba(0,0,0,.65)); }
.card[href*="life.arybox.com"]::before { background-image: url("../images/categories/life.jpg"); }
.card[href*="health.arybox.com"]::before { background-image: url("../images/categories/health.jpg"); }
.card[href*="apps.arybox.com"]::before { background-image: url("../images/categories/apps.jpg"); }
.card[href*="home.arybox.com"]::before { background-image: url("../images/categories/home.jpg"); }
.card[href*="design.arybox.com"]::before { background-image: url("../images/categories/design.jpg"); }
.card[href*="smart.arybox.com"]::before { background-image: url("../images/categories/smart.jpg"); }
.card > span:first-child { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: rgba(255,255,255,.85); }
.card h3 { max-width: 420px; margin: auto 0 0; font-size: clamp(23px,2.2vw,32px); font-weight: 600; line-height: 1.12; letter-spacing: -.045em; text-shadow: 0 2px 20px rgba(0,0,0,.12); }
.card > span:last-child { margin-top: 18px; font-size: 12px; font-weight: 500; letter-spacing: .03em; }
@media (hover:hover) {
  .card:hover { transform: translateY(-5px); box-shadow: 0 22px 45px rgba(0,0,0,.14); }
  .card:hover::before { transform: scale(1.075); }
}

/* Footer overlaps the Discover background so translucency is real,
   rather than dark glass over a black body. Reserved padding prevents overlap. */
footer {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  height: var(--nav-height); min-height: var(--nav-height);
  margin-top: calc(-1 * var(--nav-height)); padding: 0 16px;
  background: rgba(12, 12, 16, .76);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(255,255,255,.075);
  text-align: center; color: #e8e8ed; font-size: 11px; line-height: 1.3;
}

/* Desktop/tablet tall enough to fit the entire final scene in one viewport.
   Header is an overlay, footer is another overlay on the last 46px.
   Cards have a cap so spare height is NOT transferred into giant cards. */
@media (min-width: 901px) and (min-height: 580px),
       (min-width: 701px) and (max-width: 900px) and (min-height: 780px) {
  .explore {
    height: auto; min-height: 0; overflow: visible;
    padding-top: calc(var(--nav-height) + clamp(5px, 1vh, 12px));
    padding-bottom: calc(var(--nav-height) + clamp(8px, 1.5vh, 16px));
  }
  .explore > .eyebrow { flex: none; font-size: 11px; }
  .explore > h2 {
    flex: none; margin: clamp(5px, .9vh, 11px) 0 0;
    font-size: clamp(28px, min(4vw, 4.7vh), 58px);
    line-height: 1.04; letter-spacing: -.055em;
  }
  .cards {
    flex: none; min-height: 0;
    grid-template-rows: repeat(2, minmax(0, auto));
    gap: clamp(7px, 1.1vh, 14px);
    margin-top: clamp(9px, 1.45vh, 17px);
  }
  .card { height: clamp(155px, calc((100svh - 245px) / 2), 270px); min-height: 0; padding: clamp(12px, 1.7vh, 20px); border-radius: clamp(12px, 1.8vh, 20px); }
  .card h3 { font-size: clamp(17px, min(2.1vw, 3vh), 31px); }
  .card > span:first-child { font-size: clamp(9px, 1.1vh, 11px); }
  .card > span:last-child { font-size: clamp(10px, 1.25vh, 12px); margin-top: clamp(6px, 1vh, 10px); }
}

@media (min-width: 701px) and (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 701px) and (max-width: 900px) and (min-height: 780px) {
  .cards { grid-template-rows: repeat(3, minmax(0, auto)); }
  .card { height: clamp(135px, calc((100svh - 255px) / 3), 205px); }
}
@media (max-width: 700px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .card { min-height: 260px; padding: 25px; }
  .card h3 { font-size: clamp(25px, 6vw, 32px); }
  .story-panel { padding: 85px 18px; }
  .story-panel h2 { font-size: clamp(43px, 10vw, 76px); }
  .experience-image { width: 90%; height: 75%; border-radius: 20px; }
  .hero h1 { font-size: clamp(42px, 10vw, 65px); }
  .mobile-nav-list { padding-left: 34px; padding-right: 24px; }
  .search-panel { padding: 35px 24px; }
}
@media (max-width: 500px) {
  .header { padding: 0 16px; }
  .logo { font-size: 16px; }
  .nav { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .experience-copy { opacity: 1; transform: none; }
  .story-progress { display: none !important; }
}

/* Version number: aligned at the right without moving centered copyright. */
footer { position: relative; }
.site-version { position: absolute; right: clamp(12px, 3vw, 40px); font-size: 10px; letter-spacing: .02em; color: #b7b7c0; }
@media (max-width: 540px) { footer { font-size: 9px; padding: 0 65px 0 12px; } .site-version { right: 12px; font-size: 9px; } }





/* ARYBOX 2.2.3 — Discover spacing test 2 */
@media (min-width: 900px) {
  .explore {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 64px !important;
    padding-bottom: 60px !important;
    display: block !important;
  }

  .explore > h2 {
    margin-top: 12px !important;
    margin-bottom: 52px !important;
  }

  .explore > .cards {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  footer {
    min-height: 52px !important;
  }
}




/* ARYBOX 2.2.4 — Approved Discover desktop layout */
@media (min-width: 900px) {
  .explore {
    box-sizing: border-box !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-top: 64px !important;
    padding-bottom: 80px !important;
  }

  .explore > h2 {
    margin-top: 12px !important;
    margin-bottom: 52px !important;
  }

  .explore > .cards {
    height: auto !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  footer {
    position: relative !important;
    margin-top: 0 !important;
    min-height: 52px !important;
  }
}

/* ARYBOX 2.3.0 — Story backgrounds */
.storytelling .story-panel.story-technology {
  background-image:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.55)),
    url("../images/categories/apps.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.storytelling .story-panel.story-wellbeing {
  background-image:
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.5)),
    url("../images/categories/health.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* ARYBOX 2.3.7 — discreet authentication inside existing account dropdown. */
/* Keep all account screens exactly as wide as the default 224px dropdown. */
.account-menu.is-auth { padding: 13px 14px 16px; }
.account-item { width: 100%; border: 0; background: transparent; text-align: left; color: inherit; cursor: pointer; }
.account-item:hover { color: #0071e3; }
.auth-pane { font-size: 12px; }
.auth-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.auth-header strong { font-size: 13px; flex: 1; font-weight: 650; }
.auth-back, .auth-close { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: #6e6e73; font-size: 22px; line-height: 22px; }
.auth-back:hover, .auth-close:hover { background: #e5e5ea; }
.auth-pane form { display: flex; flex-direction: column; gap: 7px; }
.auth-pane label { color: #6e6e73; font-size: 11px; font-weight: 600; }
.auth-pane input { width: 100%; min-width: 0; min-height: 37px; padding: 9px 11px; background: #fff; border: 1px solid #d2d2d7; border-radius: 9px; outline: none; font-size: 12px; color: #1d1d1f; }
.auth-pane input:focus { border-color: #0071e3; box-shadow: 0 0 0 2px #0071e322; }
.auth-pane input.auth-code { font-size: 19px; text-align: center; letter-spacing: .38em; font-variant-numeric: tabular-nums; }
.auth-pane button.auth-primary, .auth-pane button.auth-secondary { display: block; width: 100%; min-height: 36px; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 600; margin-top: 7px; }
.auth-pane .auth-primary { border: 1px solid #1d1d1f; background: #1d1d1f; color: #fff; }
.auth-pane .auth-secondary { border: 1px solid #d2d2d7; background: #fff; color: #1d1d1f; }
.auth-pane button:disabled { opacity: .55; cursor: wait; }
.auth-instruction, .auth-timer, .auth-email-address, .auth-profile-email { font-size: 11px; color: #6e6e73; overflow-wrap: anywhere; line-height: 1.5; }
.auth-email-address { font-weight: 600; color: #1d1d1f; }
.auth-timer { text-align: center; margin: 5px 0 0; }
.auth-feedback { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #e8ecf3; color: #414b63; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.auth-feedback.is-error { background: #fff0f0; color: #a32432; }
.account-open span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-profile-details { margin: 0; display: grid; gap: 11px; }
.auth-profile-field { min-width: 0; }
.auth-profile-field dt { margin: 0 0 3px; color: #6e6e73; font-size: 11px; font-weight: 600; }
.auth-profile-field dd { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
@media (max-width: 440px) {
  .account-menu.is-auth { right: 0; }
}

/* ARYBOX 2.3.17 — compact account forms match the original white profile menu. */
/* Same 224 CSS-pixel container, padding, typography and palette on every step. */
.account-menu.is-auth {
  width: min(224px, calc(100vw - 24px));
  padding: 16px 20px 17px;
  background: #f5f5f7;
  color: #1d1d1f;
  border-radius: 15px;
}
.account-menu.is-auth .auth-pane {
  color: #1d1d1f;
  font-size: 12px;
  line-height: 1.4;
}
.account-menu.is-auth .auth-header {
  gap: 7px;
  margin: 0 0 12px;
  min-height: 22px;
}
.account-menu.is-auth .auth-header strong {
  color: #77777e;
  font-size: 12px;
  font-weight: 500;
}
.account-menu.is-auth .auth-back,
.account-menu.is-auth .auth-close {
  width: 22px;
  height: 22px;
  font-size: 19px;
  line-height: 20px;
  color: #77777e;
}
.account-menu.is-auth .auth-pane form {
  gap: 8px;
}
.account-menu.is-auth .auth-pane label {
  color: #6e6e73;
  font-size: 12px;
  font-weight: 500;
}
.account-menu.is-auth .auth-pane input {
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid #d2d2d7;
  background: #fff;
  color: #1d1d1f;
  font-size: 12px;
}
.account-menu.is-auth .auth-pane input:focus {
  border-color: #9ca8b9;
  box-shadow: 0 0 0 2px rgba(140, 153, 171, .18);
}
/* Both buttons are light, with just a subtle distinction in fill. */
.account-menu.is-auth .auth-pane button.auth-primary,
.account-menu.is-auth .auth-pane button.auth-secondary {
  min-height: 36px;
  margin-top: 7px;
  border: 1px solid #d2d2d7;
  border-radius: 9px;
  background: #fff;
  color: #1d1d1f;
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.account-menu.is-auth .auth-pane button.auth-primary {
  background: #e8e9ed;
  border-color: #dedfe4;
}
.account-menu.is-auth .auth-pane button.auth-primary:hover,
.account-menu.is-auth .auth-pane button.auth-secondary:hover {
  background: #dedfe5;
  border-color: #c6c8d0;
  color: #1d1d1f;
}
.account-menu.is-auth .auth-pane button.auth-primary:active,
.account-menu.is-auth .auth-pane button.auth-secondary:active {
  background: #d3d5dd;
}
.account-menu.is-auth .auth-pane button:disabled {
  opacity: .55;
  cursor: wait;
}
.account-menu.is-auth .auth-pane .auth-instruction,
.account-menu.is-auth .auth-pane .auth-timer,
.account-menu.is-auth .auth-pane .auth-profile-email {
  color: #77777e;
  font-size: 11px;
}
.account-menu.is-auth .auth-feedback {
  background: #e8e9ed;
  color: #41444e;
}
.account-menu.is-auth .auth-feedback.is-error {
  background: #fff0f0;
  color: #a32432;
}
/* Mouse clicks should not leave a blue focus box around the email menu item.
   Keyboard focus-visible highlighting stays intact for accessibility. */
.account-menu .account-open:hover,
.account-menu .account-open:focus:not(:focus-visible) {
  color: #1d1d1f;
}
.account-menu .account-open:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ARYBOX Safari autofill 2.3.18 — keep form fields white. */
/* Safari may paint a yellow system autofill surface over the input background.
   Inset white shadow covers the autofill fill while retaining real autofill. */
.account-menu.is-auth .auth-pane input:-webkit-autofill,
.account-menu.is-auth .auth-pane input:-webkit-autofill:hover,
.account-menu.is-auth .auth-pane input:-webkit-autofill:focus,
.account-menu.is-auth .auth-pane input:-webkit-autofill:active {
  -webkit-text-fill-color: #1d1d1f !important;
  caret-color: #1d1d1f;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  background-color: #fff !important;
  background-clip: padding-box;
  transition: background-color 99999s ease-out 0s;
}
/* Autofilled focused inputs keep a soft accessible outer focus indication. */
.account-menu.is-auth .auth-pane input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 2px rgba(140, 153, 171, .18) !important;
  box-shadow: 0 0 0 1000px #fff inset, 0 0 0 2px rgba(140, 153, 171, .18) !important;
}

/* ARYBOX 2.3.20: original compact account layout and controls */
#arybox-auth .auth-back {display:none!important}
#arybox-auth .auth-header {display:flex;align-items:center;gap:8px}
#arybox-auth .auth-title {flex:1;align-self:center;line-height:1.2}
#arybox-auth .auth-close,#arybox-auth #auth-profile-edit {align-self:center;line-height:1;flex:none}
#arybox-auth #auth-profile-edit {padding:2px 4px;background:transparent;border:0;color:#77777e;cursor:pointer;font-size:20px}
#arybox-auth #auth-profile-edit[hidden]{display:none!important}
#arybox-auth .auth-email-note{overflow-wrap:anywhere;color:#6e6e73;font-size:12px}
#arybox-auth .auth-phone-entry{display:flex;align-items:center;gap:5px}
#arybox-auth .auth-phone-entry>span{font-size:17px;color:#555;flex:none}
#arybox-auth .auth-phone-entry>input{min-width:0;flex:1}
#arybox-auth select{width:100%;min-width:0;padding:9px;border:1px solid #d2d2d7;border-radius:9px;background:#fff;color:#1d1d1f}

/* ARYBOX 2.3.21 — compact aligned UI */
#arybox-auth #auth-profile-edit {transform:scaleX(-1);}
#arybox-auth label {margin-top:12px;margin-bottom:5px;}
#arybox-auth .auth-primary,#arybox-auth .auth-secondary {min-height:38px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;}
#arybox-auth #auth-phone-dial {color:#45454b;white-space:nowrap;font-size:14px;font-weight:600;}
#arybox-auth #auth-phone-national {width:100%;min-width:0;}
#arybox-auth .auth-phone-entry {display:flex;gap:7px;align-items:center;}

/* ARYBOX 2.3.22: match the original compact profile spacing */
#arybox-auth [data-auth-screen="edit"],
#arybox-auth [data-auth-screen="phone"] {margin:0;padding:0;}
#arybox-auth [data-auth-screen="edit"] label,
#arybox-auth [data-auth-screen="phone"] label {display:block;margin:11px 0 5px;line-height:1.3;}
#arybox-auth [data-auth-screen="edit"] input,
#arybox-auth [data-auth-screen="phone"] input,
#arybox-auth [data-auth-screen="phone"] select {margin:0;min-height:36px;height:36px;box-sizing:border-box;}
#arybox-auth [data-auth-screen="edit"] .auth-email-note {margin:0 0 9px;line-height:1.35;}
#arybox-auth [data-auth-screen="edit"] .auth-secondary,
#arybox-auth [data-auth-screen="edit"] .auth-primary,
#arybox-auth [data-auth-screen="phone"] .auth-primary {min-height:38px;height:38px;margin:12px 0 0;padding:5px 9px;box-sizing:border-box;}
#arybox-auth [data-auth-screen="edit"] .auth-primary {margin-top:9px;}
#arybox-auth [data-auth-screen="phone"] .auth-instruction:empty,
#arybox-auth #auth-phone-result:empty {display:none!important;}
#arybox-auth .auth-edit-current-phone label {margin:10px 0 4px;}
#arybox-auth .auth-edit-current-phone .auth-email-note {margin:0 0 6px;}
#arybox-auth .auth-phone-entry {margin:0;align-items:center;gap:7px;}
#arybox-auth .auth-phone-entry>input {margin:0;}

/* ARYBOX 2.3.23 — unified compact controls and spacing */
.account-menu:not(.is-auth) .account-open { cursor:pointer; border-radius:8px; transition: background-color .15s ease; }
.account-menu:not(.is-auth) .account-open:hover,
.account-menu:not(.is-auth) .account-open:focus-visible { background:#e8e9ed; }
#arybox-auth [data-auth-screen="edit"],
#arybox-auth [data-auth-screen="phone"] { margin:0!important; padding:0!important; }
#arybox-auth [data-auth-screen="edit"] form,
#arybox-auth [data-auth-screen="phone"] form { display:flex; flex-direction:column; gap:0!important; margin:0!important; padding:0!important; }
#arybox-auth [data-auth-screen="edit"] label,
#arybox-auth [data-auth-screen="phone"] label,
#arybox-auth .auth-edit-current-phone label { display:block; margin:8px 0 3px!important; padding:0!important; line-height:1.25!important; }
#arybox-auth [data-auth-screen="edit"] input,
#arybox-auth [data-auth-screen="phone"] input,
#arybox-auth [data-auth-screen="phone"] select,
#arybox-auth [data-auth-screen="edit"] button.auth-primary,
#arybox-auth [data-auth-screen="edit"] button.auth-secondary,
#arybox-auth [data-auth-screen="phone"] button.auth-primary,
#arybox-auth [data-auth-screen="phone"] button.auth-secondary { height:36px!important; min-height:36px!important; max-height:36px; box-sizing:border-box!important; border-radius:8px!important; font-size:12px; }
#arybox-auth [data-auth-screen="edit"] button.auth-primary,
#arybox-auth [data-auth-screen="edit"] button.auth-secondary,
#arybox-auth [data-auth-screen="phone"] button.auth-primary,
#arybox-auth [data-auth-screen="phone"] button.auth-secondary { margin:8px 0 0!important; padding:5px 8px!important; }
#arybox-auth [data-auth-screen="edit"] .auth-email-note,
#arybox-auth .auth-edit-current-phone .auth-email-note { margin:0!important; padding:0!important; line-height:1.35!important; }
#arybox-auth .auth-edit-current-phone { margin:0!important; padding:0!important; }
#arybox-auth [data-auth-screen="phone"] .auth-phone-entry {margin:0!important;gap:6px!important;}
#arybox-auth .auth-header {margin-bottom:8px!important;min-height:22px!important;align-items:center!important;}
#arybox-auth .auth-title, #arybox-auth .auth-close, #arybox-auth #auth-profile-edit {align-self:center!important;}
#arybox-auth [data-auth-screen="phone"] .auth-instruction:empty,
#arybox-auth #auth-phone-result:empty {display:none!important;}

/* ARYBOX 2.3.24 — fix native hidden attribute versus author display rules.
   This is essential: .account-item{display:flex} and .auth-pane form{display:flex}
   otherwise override user-agent [hidden]{display:none} in some browsers. */
#account-menu[hidden],
#account-menu [hidden] {
  display: none !important;
}

/* Match Orders / Your Saves: blue foreground only, with no grey hover tile.
   Keep focus-visible styling for keyboard navigation. */
#account-menu:not(.is-auth) .account-open,
#account-menu:not(.is-auth) .account-open:hover,
#account-menu:not(.is-auth) .account-open:focus-visible {
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
}
#account-menu:not(.is-auth) .account-open:hover,
#account-menu:not(.is-auth) .account-open:focus-visible {
  color: #0071e3 !important;
}
#account-menu:not(.is-auth) .account-open:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 2px;
}

/* Compact consistent form layout: preserve the original 224px account menu. */
#arybox-auth [data-auth-screen="edit"],
#arybox-auth [data-auth-screen="phone"] {
  margin: 0 !important;
  padding: 0 !important;
}
#arybox-auth [data-auth-screen="edit"] form,
#arybox-auth [data-auth-screen="phone"] form {
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#arybox-auth [data-auth-screen="edit"] label,
#arybox-auth [data-auth-screen="phone"] label,
#arybox-auth .auth-edit-current-phone label {
  display: block;
  margin: 7px 0 3px !important;
  line-height: 1.3 !important;
}
#arybox-auth [data-auth-screen="edit"] input,
#arybox-auth [data-auth-screen="phone"] input,
#arybox-auth [data-auth-screen="phone"] select,
#arybox-auth [data-auth-screen="edit"] button.auth-primary,
#arybox-auth [data-auth-screen="edit"] button.auth-secondary,
#arybox-auth [data-auth-screen="phone"] button.auth-primary,
#arybox-auth [data-auth-screen="phone"] button.auth-secondary {
  box-sizing: border-box !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  border-radius: 8px !important;
}
#arybox-auth [data-auth-screen="edit"] button.auth-primary,
#arybox-auth [data-auth-screen="edit"] button.auth-secondary,
#arybox-auth [data-auth-screen="phone"] button.auth-primary,
#arybox-auth [data-auth-screen="phone"] button.auth-secondary {
  margin: 8px 0 0 !important;
  padding: 5px 8px !important;
}
#arybox-auth [data-auth-screen="edit"] .auth-email-note,
#arybox-auth .auth-edit-current-phone .auth-email-note {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
}
#arybox-auth .auth-header {margin-bottom: 8px !important;}


/* ARYBOX 2.3.25 — approved three-axis 12px Apple-style compact dropdown.
   Axis 1: x=12px (header/menu caption/back-arrow left edge).
   Axis 2: x=30px (centre of icons, never a circle).
   Axis 3: x=56px (all row copy, controls and actions).
   All four panels are exactly 224px wide with auto-height content. */
#account-menu,
#account-menu.is-auth {
  width:min(224px, calc(100vw - 24px)) !important;
  padding:12px !important;
  border-radius:15px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:calc(100dvh - 80px);
  overflow-y:auto;
  background:#f5f5f7;
  color:#1d1d1f;
}
#account-menu[hidden],
#account-menu [hidden] {display:none !important;}
#account-menu .account-heading {
  margin:0 0 7px !important;
  padding:0 !important;
  line-height:18px !important;
  font-size:12px !important;
  font-weight:500;
}
#account-menu .language-row {
  margin:0 0 3px !important;
  padding:3px 0 8px !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
#account-menu .language-row label {font-size:12px;line-height:18px;margin:0;padding:0;}
#account-menu #arybox-language {
  width:105px;
  height:28px;
  min-height:28px;
  box-sizing:border-box;
  padding:2px 6px;
  border-radius:7px;
}
#account-menu:not(.is-auth) .account-item {
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:8px;
  align-items:center;
  width:100%;
  min-height:30px;
  height:auto;
  padding:4px 0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
  text-align:left;
  font-size:12px;
  line-height:1.2;
  font-weight:600;
  color:#1d1d1f;
}
#account-menu:not(.is-auth) .account-item svg,
#account-menu:not(.is-auth) .account-item .arybox-line-icon {
  width:17px;
  height:17px;
  justify-self:center;
  flex:none;
  fill:none;
  stroke:#71717a;
  stroke-width:1.75;
}
#account-menu:not(.is-auth) .account-item span {
  width:auto;
  margin:0;
  padding:0;
  min-width:0;
  justify-self:start;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#account-menu:not(.is-auth) .account-item:hover,
#account-menu:not(.is-auth) .account-item:focus-visible,
#account-menu:not(.is-auth) .account-item:hover svg,
#account-menu:not(.is-auth) .account-item:focus-visible svg {
  color:#0071e3 !important;
  stroke:#0071e3 !important;
  background:transparent !important;
}
#account-menu:not(.is-auth) .account-item:focus-visible {
  outline:2px solid #0071e3;
  outline-offset:0;
}
#account-menu .account-signout {margin-bottom:0 !important;}
/* Nested screens share the same x=12/30/56 geometry as the avatar dropdown. */
#arybox-auth,
#arybox-auth .auth-pane,
#arybox-auth [data-auth-screen] {
  box-sizing:border-box;
  min-width:0;
}
#arybox-auth .auth-header {
  display:grid !important;
  grid-template-columns:36px minmax(0,1fr) 20px 20px;
  column-gap:8px !important;
  align-items:center !important;
  min-height:24px !important;
  margin:0 0 9px !important;
  padding:0 !important;
}
#arybox-auth .auth-title {
  grid-column:2;
  justify-self:start;
  align-self:center;
  margin:0;
  font-size:12px !important;
  line-height:18px !important;
  font-weight:500 !important;
  color:#6e6e73;
  white-space:nowrap;
}
#arybox-auth .auth-back {
  display:flex !important;
  grid-column:1;
  align-items:center;
  justify-content:flex-start;
  width:26px !important;
  height:24px !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  color:#6e6e73;
  cursor:pointer;
}
#arybox-auth .auth-back[hidden] {display:none !important;}
#arybox-auth #auth-profile-edit,
#arybox-auth .auth-close {
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:20px !important;
  height:24px !important;
  min-height:24px !important;
  box-sizing:border-box;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
  color:#6e6e73;
  cursor:pointer;
  transform:none !important;
  line-height:1 !important;
}
#arybox-auth #auth-profile-edit {grid-column:3;}
#arybox-auth #auth-profile-edit[hidden] {display:none !important;}
#arybox-auth .auth-close {grid-column:4;}
#arybox-auth .arybox-line-icon {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;flex:none;}
#arybox-auth .auth-back .arybox-line-icon {width:22px;height:20px;}
#arybox-auth .auth-close {font-size:22px !important;font-weight:400;}
#arybox-auth .auth-back:hover,
#arybox-auth #auth-profile-edit:hover,
#arybox-auth .auth-close:hover {color:#0071e3 !important;background:transparent !important;}
#arybox-auth [data-auth-screen="profile"],
#arybox-auth [data-auth-screen="edit"],
#arybox-auth [data-auth-screen="phone"] {
  margin:0 !important;
  padding:0 !important;
  height:auto !important;
  min-height:0 !important;
}
#arybox-auth form[data-auth-screen="edit"],
#arybox-auth form[data-auth-screen="phone"] {
  display:flex;
  flex-direction:column;
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
}
#arybox-auth .arybox-row {
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:8px;
  align-items:center;
  width:100%;
  margin:0;
  padding:4px 0;
  min-height:43px;
}
#arybox-auth .arybox-row+.arybox-row {margin-top:3px;}
#arybox-auth .arybox-row-icon {display:flex;align-items:center;justify-content:center;width:36px;min-height:20px;color:#6e6e73;}
#arybox-auth .arybox-row-main {min-width:0;display:flex;flex-direction:column;gap:2px;align-items:stretch;}
#arybox-auth .arybox-row-title,
#arybox-auth .arybox-row-main>label {
  display:block;
  padding:0;
  margin:0 !important;
  font-size:12px !important;
  line-height:16px !important;
  color:#1d1d1f !important;
  font-weight:600;
}
#arybox-auth .arybox-row-value {
  display:block;
  min-width:0;
  margin:0;
  padding:0;
  font-size:12px;
  font-weight:400;
  line-height:16px;
  color:#52566f;
  overflow-wrap:anywhere;
}
#arybox-auth .arybox-edit-link {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:5px;
  width:100%;
  min-height:20px;
  height:auto !important;
  max-height:none !important;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  color:#52566f !important;
  font-weight:400;
  font-size:12px;
  line-height:16px;
  text-align:left;
  cursor:pointer;
}
#arybox-auth .arybox-edit-link span {min-width:0;overflow-wrap:anywhere;}
#arybox-auth .arybox-edit-link .arybox-line-icon {width:15px;height:15px;color:#6e6e73;}
#arybox-auth .arybox-edit-link:hover,
#arybox-auth .arybox-edit-link:hover .arybox-line-icon,
#arybox-auth .arybox-edit-link:focus-visible,
#arybox-auth .arybox-edit-link:focus-visible .arybox-line-icon {color:#0071e3 !important;}
#arybox-auth #auth-edit-name,
#arybox-auth #auth-phone-national,
#arybox-auth #auth-phone-country {
  display:block;
  box-sizing:border-box !important;
  min-width:0;
  width:100%;
  height:28px !important;
  min-height:28px !important;
  max-height:28px !important;
  margin:0 !important;
  padding:3px 7px !important;
  border:1px solid #d2d2d7;
  border-radius:7px !important;
  background:white;
  color:#1d1d1f;
  font-size:12px;
}
#arybox-auth #auth-edit-name[hidden] {display:none !important;}
#arybox-auth .arybox-phone-input {display:flex;align-items:center;gap:7px;min-width:0;}
#arybox-auth #auth-phone-dial {flex:none;color:#52566f;min-width:0;font-size:12px;font-weight:400;}
#arybox-auth .arybox-phone-input #auth-phone-national {flex:1;width:100%;min-width:0;}
#arybox-auth .arybox-actions {
  display:block;
  margin:8px 0 0 44px;
  padding:7px 0 0;
  border-top:1px solid #dedee3;
}
#arybox-auth .arybox-text-action {
  display:inline;
  box-sizing:border-box;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
  width:auto !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  font-size:12px !important;
  line-height:18px !important;
  font-weight:600;
  text-align:left;
  color:#0071e3;
  cursor:pointer;
}
#arybox-auth .arybox-text-action:hover,
#arybox-auth .arybox-text-action:focus-visible {color:#004eac !important;text-decoration:underline;background:transparent !important;}
#arybox-auth .arybox-text-action:disabled {opacity:.5;cursor:wait;text-decoration:none;}
#arybox-auth #auth-phone-result:empty {display:none !important;}
#arybox-auth #auth-phone-result {margin:5px 0 0 44px !important;}
/* Exact 12px bottom measure is from the final text line, not from a padded row. */
#account-menu:not(.is-auth) .account-signout {
  min-height:14px;
  padding:0;
}
#arybox-auth [data-auth-screen="profile"] .arybox-row:last-child {
  min-height:0;
  padding:0;
}

/* ARYBOX 2.3.26 — final approved geometry.
   Window width: 224px; all outside content margins: 20px.
   Axes relative to window left edge: 1=20px, 2=30px (icon center), 3=56px.
   Input/select height: 24px. Text actions: Save name at axis 1 (20px).
   The window is content-height, with 20px padding bottom and top. */
#account-menu,
#account-menu.is-auth {
  box-sizing:border-box;
  width:min(224px,calc(100vw - 24px)) !important;
  padding:20px !important;
  min-height:0 !important;
  height:auto !important;
}
#account-menu .account-heading {
  margin:0 0 7px !important;
  padding:0 !important;
}
#account-menu .language-row {
  margin:0 0 3px !important;
  padding:3px 0 8px !important;
}
#account-menu #arybox-language {
  height:24px !important;
  min-height:24px !important;
  max-height:24px !important;
}
/* x20 + 28px column + 8px gap => third axis x56. */
#account-menu:not(.is-auth) .account-item {
  grid-template-columns:28px minmax(0,1fr) !important;
  gap:8px !important;
}
/* Icon center x20 + 2px inset + 8px half-size = x30. */
#account-menu:not(.is-auth) .account-item svg,
#account-menu:not(.is-auth) .account-item .arybox-line-icon {
  width:16px !important;
  height:16px !important;
  justify-self:start !important;
  margin-left:2px !important;
}
#arybox-auth .auth-header {
  grid-template-columns:28px minmax(0,1fr) 20px 20px !important;
  column-gap:8px !important;
}
#arybox-auth .auth-back {
  justify-content:flex-start !important;
  padding:0 !important;
}
#arybox-auth .arybox-row {
  grid-template-columns:28px minmax(0,1fr) !important;
  gap:8px !important;
}
#arybox-auth .arybox-row-icon {
  box-sizing:border-box;
  width:16px !important;
  height:20px !important;
  min-height:20px !important;
  margin-left:2px !important;
  justify-content:center !important;
}
#arybox-auth .arybox-row-icon .arybox-line-icon {
  width:16px !important;
  height:16px !important;
}
#arybox-auth #auth-edit-name,
#arybox-auth #auth-phone-national,
#arybox-auth #auth-phone-country {
  height:24px !important;
  min-height:24px !important;
  max-height:24px !important;
  padding:2px 6px !important;
}
/* Full-width separator, but the text action starts at the first axis. */
#arybox-auth .arybox-actions {
  margin:8px 0 0 !important;
  padding:7px 0 0 !important;
}
#arybox-auth #auth-phone-result {
  margin:5px 0 0 !important;
}
/* Keep the panel content flush: the final visible line ends above 20px padding. */
#account-menu:not(.is-auth) .account-signout,
#arybox-auth [data-auth-screen="profile"] .arybox-row:last-child {
  margin-bottom:0 !important;
}

/* ARYBOX 2.3.27 — uniform vertical rhythm; preserve approved x20/x30/x56.
   Every list row has 36px vertical rhythm. Information blocks follow their
   actual content height, including wrapped translations, with equal 12px gaps.
   Controls remain 24px tall; menu edges remain 20px. */
#account-menu, #account-menu.is-auth {
  width:min(224px, calc(100vw - 24px)) !important;
  padding:20px !important;
  height:auto !important;
  min-height:0 !important;
  box-sizing:border-box;
}
/* Guest/authenticated menu entries: no special final item compression. */
#account-menu:not(.is-auth) .account-item,
#account-menu:not(.is-auth) .account-signout {
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:28px minmax(0,1fr) !important;
  column-gap:8px !important;
  align-items:center !important;
  width:100% !important;
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:18px !important;
  background:transparent !important;
}
#account-menu:not(.is-auth) .account-item[hidden],
#account-menu:not(.is-auth) .account-signout[hidden] {display:none !important;}
/* The language/header use their own compact row, not the menu-entry rhythm. */
#account-menu .account-heading {margin:0 0 7px !important;}
#account-menu .language-row {margin:0 0 3px !important;}
/* Parent controls the distance between information blocks, not margins
   added onto each individual row. This works if a label wraps to 2 lines. */
#arybox-auth [data-auth-screen="profile"],
#arybox-auth form[data-auth-screen="edit"],
#arybox-auth form[data-auth-screen="phone"] {
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  margin:0 !important;
  padding:0 !important;
  height:auto !important;
  min-height:0 !important;
}
#arybox-auth .arybox-row,
#arybox-auth .arybox-row+.arybox-row {
  display:grid !important;
  grid-template-columns:28px minmax(0, 1fr) !important;
  column-gap:8px !important;
  align-items:center !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
}
#arybox-auth .arybox-row-main {
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  min-width:0 !important;
  gap:2px !important;
  margin:0 !important;
  padding:0 !important;
}
#arybox-auth .arybox-row-title,
#arybox-auth .arybox-row-main>label,
#arybox-auth .arybox-row-value {margin:0 !important;padding:0 !important;}
/* No extra margin on the last row: 20px outer window padding is its end gap. */
#arybox-auth .arybox-row:last-child {margin-bottom:0 !important;}
/* Action divider has a consistent distance to its preceding block.
   Action text starts at axis 1 (x20). */
#arybox-auth .arybox-actions {
  box-sizing:border-box !important;
  margin:0 !important;
  padding:9px 0 0 !important;
  border-top:1px solid #dedee3 !important;
  width:100% !important;
}
#arybox-auth .arybox-text-action {
  display:inline-block !important;
  width:auto !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  line-height:18px !important;
}
#arybox-auth #auth-edit-name,
#arybox-auth #auth-phone-country,
#arybox-auth #auth-phone-national,
#account-menu #arybox-language {
  box-sizing:border-box !important;
  min-height:24px !important;
  height:24px !important;
  max-height:24px !important;
}
#arybox-auth .arybox-phone-input {margin:0 !important;padding:0 !important;align-items:center !important;}
#arybox-auth #auth-phone-result:empty {display:none !important;}
#arybox-auth #auth-phone-result:not(:empty) {margin:0 !important;}

/* ARYBOX 2.3.28 — prevent inactive account screens from displaying */
#arybox-auth[hidden],
#arybox-auth [data-auth-screen][hidden],
#arybox-auth .auth-pane[hidden] {
    display: none !important;
}

/* ARYBOX 2.3.28 — minimal text actions */

/* Login / Create account: text instead of large buttons */
#arybox-auth [data-auth-screen="choice"] button.auth-primary,
#arybox-auth [data-auth-screen="choice"] button.auth-secondary {
    display: block !important;
    width: max-content !important;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin: 10px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #1d1d1f !important;
    text-decoration: none !important;
    cursor: pointer;
}

/* Save actions: aligned with axis 3 (56px) */
#arybox-auth [data-auth-screen="edit"] button.auth-primary,
#arybox-auth [data-auth-screen="phone"] button.auth-primary {
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 8px 0 0 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #1d1d1f !important;
    text-decoration: none !important;
    cursor: pointer;
}

/* Hover only changes text color */
#arybox-auth [data-auth-screen="choice"] button.auth-primary:hover,
#arybox-auth [data-auth-screen="choice"] button.auth-secondary:hover,
#arybox-auth [data-auth-screen="edit"] button.auth-primary:hover,
#arybox-auth [data-auth-screen="phone"] button.auth-primary:hover {
    color: #007aff !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* No underline on mouse hover or focus */
#arybox-auth [data-auth-screen="choice"] button.auth-primary,
#arybox-auth [data-auth-screen="choice"] button.auth-secondary,
#arybox-auth [data-auth-screen="edit"] button.auth-primary,
#arybox-auth [data-auth-screen="phone"] button.auth-primary {
    text-decoration: none !important;
}

/* Keep inactive screens hidden */
#arybox-auth[hidden],
#arybox-auth [data-auth-screen][hidden],
#arybox-auth .auth-pane[hidden] {
    display: none !important;
}


/* ARYBOX ACCOUNT ACTIONS FINAL FIX */

/* Save name / Save number: dark text, blue on hover */
.account-menu.is-auth #arybox-auth .arybox-text-action {
    color: #1d1d1f !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 18px !important;
    cursor: pointer;
}

.account-menu.is-auth #arybox-auth .arybox-text-action:hover,
.account-menu.is-auth #arybox-auth .arybox-text-action:focus-visible {
    color: #007aff !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* Action text starts at axis 3: 56px from panel edge */
.account-menu.is-auth #arybox-auth .arybox-actions {
    box-sizing: border-box !important;
    margin: 8px 0 0 36px !important;
    width: calc(100% - 36px) !important;
    padding: 9px 0 0 !important;
    border-top: 1px solid #dedee3 !important;
}

/* Edit rows: pencil aligned with corresponding icon */
.account-menu.is-auth #arybox-auth
[data-auth-screen="edit"] .arybox-row-main {
    position: relative;
}

.account-menu.is-auth #arybox-auth
[data-auth-screen="edit"] .arybox-edit-link {
    position: static;
}

/* Icon center at 10px in the first 20px row */
.account-menu.is-auth #arybox-auth
[data-auth-screen="edit"] .arybox-edit-link .arybox-line-icon {
    position: absolute !important;
    top: 2px !important;
    right: 0 !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}

/* Reserve room for the pencil without overlapping text */
.account-menu.is-auth #arybox-auth
[data-auth-screen="edit"] .arybox-edit-link span {
    padding-right: 20px;
}

/* Login / Create account as plain text */
.account-menu.is-auth #arybox-auth
[data-auth-screen="choice"] button {
    color: #1d1d1f !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    padding: 0 !important;
    width: max-content !important;
    min-height: 0 !important;
    height: auto !important;
    cursor: pointer;
}

.account-menu.is-auth #arybox-auth
[data-auth-screen="choice"] button:hover {
    color: #007aff !important;
    text-decoration: none !important;
}

/* Preserve already fixed hidden-screen behaviour */
#arybox-auth[hidden],
#arybox-auth [data-auth-screen][hidden],
#arybox-auth .auth-pane[hidden] {
    display: none !important;
}


/* ARYBOX EDIT PROFILE ALIGNMENT FIX */

/* Pencil centers align with person/phone icon centers */
#arybox-auth [data-auth-screen="edit"] .arybox-row-main {
    position: relative !important;
}

#arybox-auth [data-auth-screen="edit"]
.arybox-edit-link .arybox-line-icon {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
}

/* Compact gap before Save name separator */
#arybox-auth [data-auth-screen="edit"] .arybox-row:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#arybox-auth [data-auth-screen="edit"] .arybox-actions {
    margin-top: -4px !important;
    padding-top: 8px !important;
}


/* ARYBOX EDIT ALIGNMENT V2 */

/* The whole information row is the positioning reference. */
.account-menu.is-auth #arybox-auth
[data-auth-screen="edit"] .arybox-row {
    position: relative !important;
}

/* Do not anchor pencils to the text column. */
.account-menu.is-auth #arybox-auth
[data-auth-screen="edit"] .arybox-row-main {
    position: static !important;
}

/* Person and phone icons remain centered in their rows. */
.account-menu.is-auth #arybox-auth
[data-auth-screen="edit"] .arybox-row-icon {
    align-self: center !important;
}

/* Pencil center = information row center = main icon center. */
.account-menu.is-auth #arybox-auth
[data-auth-screen="edit"] .arybox-edit-link .arybox-line-icon {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
}

/* Reduce the space before the Save name separator. */
.account-menu.is-auth #arybox-auth
#auth-edit-form .arybox-actions {
    margin-top: -6px !important;
    padding-top: 7px !important;
}

/* Preserve dark text and blue hover. */
.account-menu.is-auth #arybox-auth
#auth-edit-form .arybox-text-action {
    color: #1d1d1f !important;
    text-decoration: none !important;
}

.account-menu.is-auth #arybox-auth
#auth-edit-form .arybox-text-action:hover {
    color: #007aff !important;
    text-decoration: none !important;
}


/* ARYBOX EDIT DIVIDER SPACING FIX */

/* Match the divider spacing used by the phone screen. */
.account-menu.is-auth #arybox-auth
#auth-edit-form .arybox-actions {
    margin-top: 8px !important;
}


/* ARYBOX — language selector focus */

#account-menu #arybox-language:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
    border-color: #d2d2d7 !important;
}

#account-menu #arybox-language:focus-visible {
    outline: 1px solid #8e8e93 !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
}

/* ARYBOX UNIFIED 36PX ROW GRID */

/* Only the three nested account screens */
#account-menu.is-auth #arybox-auth
[data-auth-screen="profile"] .arybox-row,

#account-menu.is-auth #arybox-auth
[data-auth-screen="edit"] .arybox-row,

#account-menu.is-auth #arybox-auth
[data-auth-screen="phone"] .arybox-row {
    box-sizing: border-box !important;
    min-height: 36px !important;
}

/* Divider begins at axis 2: x = 30px */
#account-menu.is-auth #arybox-auth
[data-auth-screen="edit"] .arybox-actions,

#account-menu.is-auth #arybox-auth
[data-auth-screen="phone"] .arybox-actions {
    box-sizing: border-box !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
    width: calc(100% - 10px) !important;
    padding-left: 26px !important;
    border-top: 1px solid #dedee3 !important;
}

/* Save text begins at axis 3: x = 56px */
#account-menu.is-auth #arybox-auth
.arybox-actions .arybox-text-action {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Preserve hidden screens */
#arybox-auth[hidden],
#arybox-auth [data-auth-screen][hidden] {
    display: none !important;
}


/* ARYBOX DIVIDER AXIS 1 FINAL */

/* Divider begins at axis 1 (20px from panel edge) */
#account-menu.is-auth #arybox-auth
[data-auth-screen="edit"] .arybox-actions,

#account-menu.is-auth #arybox-auth
[data-auth-screen="phone"] .arybox-actions {
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding-left: 36px !important;
    border-top: 1px solid #dedee3 !important;
}

/* Save text remains at axis 3 (56px) */
#account-menu.is-auth #arybox-auth
.arybox-actions .arybox-text-action {
    margin-left: 0 !important;
}


/* ARYBOX MAIN MENU 32PX */

/* Only the four navigation items in the first menu */
#account-menu:not(.is-auth) .account-item,
#account-menu:not(.is-auth) .account-signout {
    box-sizing: border-box !important;
    height: 32px !important;
    min-height: 32px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
}


/* ARYBOX AUTH GRID 20-30-56 */

/* Titles: axis 3 */
#arybox-auth:has([data-auth-screen="choice"]:not([hidden])) .auth-title,
#arybox-auth:has([data-auth-screen="login"]:not([hidden])) .auth-title,
#arybox-auth:has([data-auth-screen="register"]:not([hidden])) .auth-title {
    margin-left: 0 !important;
}

/* Header: arrow axis 1, title axis 3 */
#arybox-auth:has([data-auth-screen="choice"]:not([hidden])) .auth-header,
#arybox-auth:has([data-auth-screen="login"]:not([hidden])) .auth-header,
#arybox-auth:has([data-auth-screen="register"]:not([hidden])) .auth-header {
    display: grid !important;
    grid-template-columns: 28px minmax(0,1fr) 20px 20px !important;
    column-gap: 8px !important;
}

/* Login and registration: labels and fields on axis 3 */
#arybox-auth [data-auth-screen="login"],
#arybox-auth [data-auth-screen="register"] {
    padding-left: 36px !important;
    box-sizing: border-box !important;
}

/* Compact input boxes */
#arybox-auth [data-auth-screen="login"] input,
#arybox-auth [data-auth-screen="register"] input {
    height: 24px !important;
    min-height: 24px !important;
    box-sizing: border-box !important;
}

/* Text actions instead of large buttons */
#arybox-auth [data-auth-screen="choice"] button,
#arybox-auth [data-auth-screen="login"] button.auth-primary,
#arybox-auth [data-auth-screen="register"] button.auth-primary {
    display: block !important;
    width: max-content !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #1d1d1f !important;
    text-decoration: none !important;
    cursor: pointer;
}

#arybox-auth [data-auth-screen="choice"] button:hover,
#arybox-auth [data-auth-screen="login"] button.auth-primary:hover,
#arybox-auth [data-auth-screen="register"] button.auth-primary:hover {
    color: #007aff !important;
    text-decoration: none !important;
}

/* Keep inactive screens hidden */
#arybox-auth[hidden],
#arybox-auth [data-auth-screen][hidden] {
    display: none !important;
}


/* ARYBOX AUTH ICONS AND SELECT FOCUS FIX */

/* 1. Remove blue focus ring from phone-country selector */
#account-menu #auth-phone-country:focus,
#account-menu #auth-phone-country:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: #d2d2d7 !important;
}

/* Retain a subtle keyboard focus indication */
#account-menu #auth-phone-country:focus-visible {
    outline: 1px solid #8e8e93 !important;
    outline-offset: 1px !important;
}

/* 2. Choice screen: text starts on axis 3 */
#arybox-auth [data-auth-screen="choice"] {
    box-sizing: border-box !important;
    padding-left: 36px !important;
}

#arybox-auth [data-auth-screen="choice"] button {
    position: relative !important;
    margin-left: 0 !important;
    text-align: left !important;
}

/* 3. Shared icon geometry: centers at axis 2 */
#arybox-auth [data-auth-screen="choice"] button::before,
#arybox-auth [data-auth-screen="login"] label[for="auth-login-email"]::before,
#arybox-auth [data-auth-screen="register"] label[for="auth-name"]::before,
#arybox-auth [data-auth-screen="register"] label[for="auth-register-email"]::before {
    content: "" !important;
    position: absolute !important;
    left: -34px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    pointer-events: none !important;
}

/* User icon: Sign in / Name */
#arybox-auth [data-auth-screen="choice"] [data-auth-go="login"]::before,
#arybox-auth [data-auth-screen="register"] label[for="auth-name"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") !important;
}

/* User plus icon: Create account */
#arybox-auth [data-auth-screen="choice"] [data-auth-go="register"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='9' cy='7' r='3.5'/%3E%3Cpath d='M2 21a7 7 0 0 1 14 0M19 7v8M15 11h8'/%3E%3C/svg%3E") !important;
}

/* Envelope icon: Email */
#arybox-auth [data-auth-screen="login"] label[for="auth-login-email"]::before,
#arybox-auth [data-auth-screen="register"] label[for="auth-register-email"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") !important;
}

/* 4. Position label icons relative to their labels */
#arybox-auth [data-auth-screen="login"] label[for="auth-login-email"],
#arybox-auth [data-auth-screen="register"] label[for="auth-name"],
#arybox-auth [data-auth-screen="register"] label[for="auth-register-email"] {
    position: relative !important;
}

/* 5. Hover changes text and icon color, no background */
#arybox-auth [data-auth-screen="choice"] button:hover,
#arybox-auth [data-auth-screen="choice"] button:focus-visible {
    color: #007aff !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* 6. Do not expose inactive forms */
#arybox-auth[hidden],
#arybox-auth [data-auth-screen][hidden] {
    display: none !important;
}



/* ARYBOX DIRECT AUTH HOTFIX */

#account-menu.is-auth #arybox-auth .arybox-auth-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px !important;
    padding: 0 !important;
    align-items: center;
}

#account-menu.is-auth #arybox-auth .arybox-auth-tab {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #77777e !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    text-decoration: none !important;
    cursor: pointer;
}

#account-menu.is-auth #arybox-auth
.arybox-auth-tab.is-active {
    color: #1d1d1f !important;
    font-weight: 700 !important;
}

#account-menu.is-auth #arybox-auth
.arybox-auth-tab:not(.is-active):hover {
    color: #007aff !important;
    text-decoration: none !important;
}

#arybox-auth[hidden],
#arybox-auth [data-auth-screen][hidden] {
    display: none !important;
}