/* Approved unified visuals for public site + customer sign-in/panel.
   Load after existing site/layout/components CSS. Keep links and JS untouched. */
:root { --eja-web-max: 1160px; }
body { background:var(--bg); color:var(--text); }
:where(.wrap,.top-in,.foot-in) { max-width:var(--eja-web-max); }
.top { background:var(--card); border-bottom:2px solid var(--gold); box-shadow:var(--shadow-card); }
.top .plate,.brand .plate,.top .plate img,.brand img { background:transparent!important; border:0!important; box-shadow:none!important; border-radius:0!important; }
.brand { gap:12px; }
.brand-text b { font-size:calc(16px * var(--ts,1)); }
.brand-text span { font-size:calc(12px * var(--ts,1)); }
.top-tools { gap:8px; }
.top-tools .icon-btn,.top-tools .eja-btn { min-height:44px; border-radius:var(--radius-12); }
:where(.eja-card,.feature,.block,.device,.guide-entry,.contact-card,.card) { border:1px solid var(--line); border-radius:var(--radius-16); background:var(--card); box-shadow:var(--shadow-card); }
:where(.eja-btn,.btn-xl,.cta .eja-btn) { min-height:44px; border-radius:var(--radius-12); }
.btn-xl { min-height:50px; font-size:calc(15px * var(--ts,1)); padding-inline:22px; }
.eja-input { min-height:48px; }
.hero { gap:24px; padding-block:36px 24px; }
.hero h1 { font-size:clamp(calc(28px * var(--ts,1)),4vw,calc(40px * var(--ts,1))); line-height:1.18; }
.grid-cards, .contact-grid, .acc-grid { gap:16px; }
.section-t { color:var(--text); font-weight:800; }
:where(.chips,.sec-tabs,.acc-tabs) { gap:8px; }
:where(.chips,.sec-tabs,.acc-tabs) :is(button,a) { min-height:40px; border-radius:var(--radius-pill); }
:where(.page-main,.content,.acc) { min-width:0; }
:where(.key,.direct-link-url,.ar-code) { overflow-wrap:anywhere; direction:ltr; unicode-bidi:isolate; }
:where(button,input,select,a):focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
[dir="rtl"] .brand,[dir="rtl"] .top-in { text-align:start; }
@media(max-width:760px) { .hero { padding-block:24px 14px; } .cta { gap:10px; } .top-in { gap:8px; } .brand-text span { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }

/* (EJA 10/11/2026, the owner: «My account» like the approved board) On a computer the account's sections are a side menu
   in a white card next to the content, with rows like the app's side menu; the greeting and notices stay across the top.
   On a phone or a narrow window they stay the row of tabs on top. Presentation only: the same links and order. */
@media (min-width: 1000px) {
  .acc { grid-template-columns: 236px minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .acc > * { grid-column: 1 / -1; }
  .acc > .acc-tabs { grid-column: 1; position: sticky; top: 88px; display: flex; flex-direction: column; flex-wrap: nowrap;
    align-items: stretch; gap: 4px; margin: 0; padding: 8px; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-16); box-shadow: var(--shadow-card); }
  .acc > .acc-tabs ~ * { grid-column: 2; }
  .acc > .acc-tabs .sec-tab { justify-content: flex-start; width: 100%; min-height: 44px; padding-inline: 12px;
    border-radius: var(--radius-12); background: transparent; color: var(--brand); font-weight: 600; }
  .acc > .acc-tabs .sec-tab:hover { background: var(--bg2); }
  .acc > .acc-tabs .sec-tab.on { background: var(--brand-soft); color: var(--brand); }
}

/* (EJA 10/11/2026) The logo is the original transparent one everywhere (logo-clear / logo-card-clear): no white box behind
   it, on the bars, in the admin's menus and drawer, and on the sign-in cards. */
.plate, .signin-logo { background: transparent !important; border: 0 !important; box-shadow: none !important; }