/* ================================================
   STYRCONTROL – app.css
   Konvention: utilities i HTML, ej specialare
   t-c=center  bg-d=dark  g-3=grid  mt-2=margin
   Separata filer: om-oss.css  portal.css  footer.css
================================================ */

/* ================================================
   VARIABLER
================================================ */
:root {
  --c0: #f2f7f7;
  --c1: #ffffff;
  --c2: #091b33;
  --c3: #00B0AD;
  --c4: #8f8f8f;
  --c5: #ddeaeb;
  --c6: #ffb454;
  --c7: #7c3aed;
  
  --g1: linear-gradient(135deg, #091b33 0%, #1e3a5c 60%, #0a6e6c 100%);
  --g2: linear-gradient(135deg, #091b33, #1e3a5c);
  --g3: linear-gradient(135deg, #00B0AD, #00d4d1);
  --g4: linear-gradient(135deg, #091b33, #ffb454);
  --g5: linear-gradient(135deg, #091b33, #7c3aed);

  --mw:   1100px;
  --pad:  clamp(10px, 2.5vw, 32px);
  --r:    12px;
  --r0:   6px;
  --nh:   80px;
  --bh:   64px;
  --ease: cubic-bezier(.4,0,.2,1);
  --ff-h: 'Outfit', sans-serif;
  --ff-b: 'Inter', sans-serif;
}

/* ================================================
   RESET & BODY
================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html   { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body   { font-family: var(--ff-b); background: var(--c0); color: var(--c2); line-height: 1.6; min-height: 100dvh; }
img, video { max-width: 100%; display: block; }
a      { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul     { list-style: none; }

/* ================================================
   TYPOGRAFI
================================================ */
h1, h2, h3, h4 { font-family: var(--ff-h); line-height: 1.15; letter-spacing: -.02em; color: var(--c2); }
h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 900; }
h2 { font-size: clamp(1.6rem, 4vw, 2.8rem); font-weight: 800; }
h3 { font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 700; }
p  { font-size: clamp(.9rem, 1.8vw, 1rem);  font-weight: 300; line-height: 1.75; }

.eyebrow    { display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--c3); margin-bottom: .6rem; }
.eyebrow--l { color: rgba(255,255,255,.45); }
.lead       { font-size: clamp(1rem, 2.5vw, 1.15rem); line-height: 1.7; max-width: 60ch; }
.ingress    { font-size: clamp(1.2rem, 2.5vw, 1.5rem); font-weight: 500; line-height: 1.5; max-width: 65ch; }

/* ================================================
   LAYOUT
================================================ */
.wrap     { max-width: var(--mw); margin: 0 auto; padding-inline: var(--pad); }
.section  { padding: 4rem 0; }
.hero--sm { max-height: 25rem; }
.mw-text  { max-width: 760px; }
.main     { padding-bottom: calc(var(--bh) + env(safe-area-inset-bottom) + 1rem); }
@media (min-width: 768px) { .main { padding-bottom: 2rem; } }

/* ================================================
   UTILITIES – text
================================================ */
.t-c { text-align: center; max-width: 100%;}
.t-l { text-align: left; }
.t-r { text-align: right; }

/* ================================================
   UTILITIES – färg
================================================ */
.c-accent  { color: var(--c3); }
.c-muted   { color: var(--c4); }
.c-light   { color: var(--c1); }
.c-primary { color: var(--c2); }

/* ================================================
   UTILITIES – bakgrund + dark-kontext
================================================ */
.bg-d   { background: var(--c2); }
.bg-l   { background: var(--c1); }
.bg-a   { background: var(--c3); }
.bg-g   { background: var(--c0); }
.s-grad { background: var(--g2); }

.bg-d h1, .bg-d h2, .bg-d h3,
.s-grad h1, .s-grad h2, .s-grad h3 { color: var(--c1); }
.bg-d p, .s-grad p                  { color: rgba(255,255,255,.7); }
.bg-d .eyebrow, .s-grad .eyebrow    { color: rgba(255,255,255,.45); }
.bg-d .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }

/* ================================================
   UTILITIES – spacing
================================================ */
.mt-1 { margin-top: .5rem;  } .mt-2 { margin-top: 1rem;   }
.mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem;   }
.mb-1 { margin-bottom: .5rem;  } .mb-2 { margin-bottom: 1rem;   }
.mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem;   }
.pt-1 { padding-top: .5rem;  } .pt-2 { padding-top: 1rem;   }
.pt-3 { padding-top: 1.5rem; } .pt-4 { padding-top: 2rem;   }
.pb-1 { padding-bottom: .5rem;  } .pb-2 { padding-bottom: 1rem;   }
.pb-3 { padding-bottom: 1.5rem; } .pb-4 { padding-bottom: 2rem;   }

/* ================================================
   UTILITIES – flex
================================================ */
.d-f   { display: flex; }
.f-ac  { align-items: center; }
.f-jc  { justify-content: center; }
.f-jb  { justify-content: space-between; }
.f-col { flex-direction: column; }
.f-w   { flex-wrap: wrap; }
.gap-1 { gap: .5rem;  } .gap-2 { gap: 1rem;   }
.gap-3 { gap: 1.5rem; } .gap-4 { gap: 2rem;   }

/* ================================================
   UTILITIES – grid
================================================ */
.g-2, .g-3, .g-4 { display: grid; gap: 1.5rem; }
.g-2 { grid-template-columns: 1fr; }
.g-3 { grid-template-columns: 1fr; }
.g-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .g-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 600px) { .g-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .g-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .g-4 { grid-template-columns: repeat(4, 1fr); } }

/* ================================================
   ANIMATIONER
================================================ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drift  { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(40px,-30px) scale(1.06); } 66% { transform: translate(-30px,40px) scale(.96); } }
.anim-1 { animation: fadeUp .4s var(--ease) .05s both; }
.anim-2 { animation: fadeUp .4s var(--ease) .15s both; }
.anim-3 { animation: fadeUp .4s var(--ease) .25s both; }
.anim-4 { animation: fadeUp .4s var(--ease) .35s both; }

/* ================================================
   KORT – bas
================================================ */
.card { background: var(--c1); border-radius: var(--r); border: 1px solid var(--c5); overflow: hidden; transition: border-color .2s var(--ease); }
.card:hover { border-color: var(--c4); }
.card--p  { padding: 1.25rem; }
.card--lg { padding: 1.75rem; }

/* ================================================
   KNAPPAR
================================================ */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.4rem; border-radius: var(--r0); font-family: var(--ff-b); font-size: .9rem; font-weight: 600; border: 1.5px solid transparent; transition: all .2s var(--ease); cursor: pointer; text-decoration: none; }
.btn--sm   { padding: .4rem .85rem; font-size: .78rem; }
.btn--full { width: 100%; justify-content: center; }

.btn--primary       { background: var(--c2); color: var(--c1) !important; border-color: var(--c2); }
.btn--primary:hover { filter: brightness(1.2); }
.btn--accent        { background: var(--c3); color: var(--c1) !important; border-color: var(--c3); }
.btn--accent:hover  { filter: brightness(1.1); }
.btn--light         { background: var(--c1); color: var(--c2) !important; border-color: var(--c1); }
.btn--light:hover   { background: transparent; color: var(--c1) !important; }
.btn--o-primary       { background: transparent; color: var(--c2) !important; border-color: var(--c2); }
.btn--o-primary:hover { background: var(--c2); color: var(--c1) !important; }
.btn--o-accent        { background: transparent; color: var(--c3) !important; border-color: var(--c3); }
.btn--o-accent:hover  { background: var(--c3); color: var(--c1) !important; }
.btn--o-light         { background: transparent; color: var(--c1) !important; border-color: var(--c1); }
.btn--o-light:hover   { background: var(--c1); color: var(--c2) !important; }

/* ================================================
   NAV
================================================ */
.nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nh); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--c5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .4s var(--ease); }
.nav-wrap.hidden { transform: translateY(-100%); }
.nav-inner { max-width: var(--mw); margin: 0 auto; padding-inline: var(--pad); height: 100%; display: flex; align-items: stretch; gap: .25rem; }
.nav-logo  { display: flex; align-items: center; padding-right: 1.5rem; flex-shrink: 0; }
.nav-links { display: none; align-items: stretch; position: relative; flex: 1; }
.nav-indicator { position: absolute; top: 0; bottom: 0; background: var(--c0); transition: left .3s var(--ease), width .3s var(--ease); pointer-events: none; z-index: 0; }
.nav-link  { display: flex; align-items: center; gap: .4rem; padding: 0 1.1rem; font-size: .88rem; font-weight: 500; color: var(--c2); position: relative; z-index: 1; white-space: nowrap; transition: color .2s var(--ease); }
.nav-link:hover, .nav-link--active { color: var(--c3); }
.nav-contact { display: none; align-items: center; gap: 1.25rem; padding-left: 1.5rem; margin-left: auto; flex-shrink: 0; border-left: 1px solid var(--c5); }
.nav-contact a { display: flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 500; color: var(--c2); transition: color .2s; }
.nav-contact a:hover { color: var(--c3); }
.nav-contact a i { color: var(--c3); font-size: .85rem; }
.nav-contact-mobile { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.nav-contact-mobile a { width: 36px; height: 36px; border-radius: 50%; background: var(--c0); border: 1px solid var(--c5); display: flex; align-items: center; justify-content: center; color: var(--c2); font-size: .9rem; transition: background .2s; }
.nav-contact-mobile a:hover { background: var(--c5); }
.nav-user { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 500; }
.nav-user:hover { color: var(--c3); }
.nav-user__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--c3); color: var(--c1); display: flex; align-items: center; justify-content: center; font-family: var(--ff-h); font-size: .85rem; font-weight: 800; }
.nav-logout { width: 32px; height: 32px; border-radius: 50%; background: var(--c0); border: 1px solid var(--c5); display: flex; align-items: center; justify-content: center; color: var(--c4); font-size: .85rem; transition: all .2s; }
.nav-logout:hover { background: #fee2e2; border-color: #ef4444; color: #ef4444; }
@media (min-width: 768px) { .nav-links { display: flex; } .nav-contact { display: flex; } .nav-contact-mobile { display: none; } }
@media (min-width: 768px) and (max-width: 1100px) { .nav-contact a span { display: none; } }

/* ================================================
   BOT-NAV (mobil + iOS fix)
================================================ */
.bot-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; height: 155px; margin-bottom: -100px; background: var(--c1); border-top: 1px solid var(--c5); display: flex; align-items: flex-start; padding-bottom: env(safe-area-inset-bottom); will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bot-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: .6rem 0; min-height: var(--bh); color: var(--c2); font-size: .68rem; font-weight: 500; transition: color .2s var(--ease); }
.bot-nav a i { font-size: 1.2rem; }
.bot-nav a.active { color: var(--c3); }
@media (min-width: 768px) { .bot-nav { display: none; } }

/* ================================================
   HERO
================================================ */
.hero { position: relative; height: 100dvh; display: flex; align-items: center; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; background: var(--g1); z-index: 0; }
.hero__orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .2; }
.hero__orb--1 { width: 600px; height: 600px; background: var(--c3); top: -150px; right: -150px; animation: drift 9s ease-in-out infinite; }
.hero__orb--2 { width: 400px; height: 400px; background: var(--c2); bottom: -100px; left: -100px; animation: drift 12s ease-in-out 2s infinite reverse; }
.hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 48px 48px; }
.hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--mw); margin: 0 auto; padding: 8rem var(--pad) 4rem; }
.hero__inner h1     { color: var(--c1); max-width: 14ch; }
.hero__inner .lead  { color: rgba(255,255,255,.75); margin-top: 1rem; }
.hero__inner .eyebrow { color: rgba(255,255,255,.5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ================================================
   BLOCK – v-card (ikon + rubrik + text)
================================================ */
.v-card { padding: 1.75rem; display: flex; flex-direction: column; gap: .75rem; }
.v-card__icon { width: 44px; height: 44px; border-radius: var(--r0); background: var(--g3); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--c1); }

/* ================================================
   BLOCK – d-card (ikon + rubrik + text + tag)
================================================ */
.d-card { padding: 1.75rem; display: flex; flex-direction: column; gap: .75rem; }
.d-card__icon { width: 48px; height: 48px; border-radius: var(--r0); background: var(--g3); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--c1); }
.d-card__tag  { font-size: .7rem; font-weight: 600; color: var(--c3); text-transform: uppercase; letter-spacing: .08em; }

/* ================================================
   BLOCK – blurp (text + bild, .blurp--rev vänder)
================================================ */
.blurp { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 768px) { .blurp { grid-template-columns: 1fr 1fr; } }
.blurp--rev .blurp__media { order: -1; }
@media (max-width: 767px) { .blurp--rev .blurp__media { order: 0; } }

/* ================================================
   BLOCK – payoff + trust
================================================ */
.payoff { background: var(--c1); border-top: 1px solid var(--c5); border-bottom: 1px solid var(--c5); padding: 3rem 0; }
.payoff__text { max-width: 680px; margin-bottom: 2rem; }
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--c5); }
.trust__item  { flex: 1; min-width: 80px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem; }
.trust__num   { font-family: var(--ff-h); font-size: 2.2rem; font-weight: 900; line-height: 1; }
.trust__num em { font-style: normal; font-size: 1.1rem; color: var(--c3); }
.trust__label { font-size: .72rem; font-weight: 500; }
.trust__sep   { width: 1px; height: 36px; background: var(--c5); align-self: center; }

/* ================================================
   BLOCK – cta-band (.s-grad / .bg-d / .bg-l)
================================================ */
.cta-band { border-radius: var(--r); padding: 2.5rem; }
.cta-band__inner { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 600px) { .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ================================================
   BLOCK – kontaktkort (cc)
================================================ */
.cc__hero   { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--g2); }
.cc__avatar { width: 52px; height: 52px; min-width: 52px; border-radius: 50%; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-family: var(--ff-h); font-size: 1rem; font-weight: 800; color: var(--c1); flex-shrink: 0; }
.cc__name   { font-size: 1rem; font-weight: 700; color: var(--c1); }
.cc__role   { font-size: .75rem; color: rgba(255,255,255,.75); margin: .1rem 0; }
.cc__row    { display: flex; align-items: center; gap: .9rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--c5); transition: background .15s; text-decoration: none; }
.cc__row:last-child { border-bottom: none; }
.cc__row:hover { background: var(--c0); }
.cc__row-icon { color: var(--c3); font-size: 1rem; width: 18px; flex-shrink: 0; text-align: center; }
.cc__label  { font-size: .7rem; color: var(--c4); }
.cc__val    { font-size: .88rem; font-weight: 500; }
.c__data    { display: flex; flex-direction: column;}

/* ================================================
   BLOCK – notice/alert
================================================ */
.notice { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem 1.25rem; background: var(--c1); border: 1px solid var(--c5); border-radius: var(--r); }
.notice--info { background: rgba(0,176,173,.06);  border-color: rgba(0,176,173,.2); }
.notice--warn { background: rgba(245,158,11,.06); border-color: rgba(245,158,11,.2); }
.notice--ok   { background: rgba(16,185,129,.06); border-color: rgba(16,185,129,.2); }
.notice--err  { background: rgba(239,68,68,.06);  border-color: rgba(239,68,68,.2); }
.notice > i   { font-size: 1rem; margin-top: .1rem; flex-shrink: 0; color: var(--c3); }
.notice--warn > i { color: #f59e0b; }
.notice--ok   > i { color: #10b981; }
.notice--err  > i { color: #ef4444; }
.notice__title { font-size: .88rem; font-weight: 600; }
.notice__text  { font-size: .8rem; color: var(--c4); max-width: 100%; }
.notice__time  { font-size: .72rem; color: var(--c4); white-space: nowrap; flex-shrink: 0; }

/* ================================================
   BLOCK – merger notice (startsida-banner)
================================================ */
.merger-notice { background: linear-gradient(90deg, rgba(0,176,173,.12), transparent); border-bottom: 1px solid var(--c5); padding: .65rem var(--pad); font-size: .85rem; display: flex; align-items: center; }
.merger-notice .wrap { display: flex; align-items: center; gap: .75rem; }
.merger-notice__link { margin-left: auto; color: var(--c3); font-weight: 600; display: flex; align-items: center; gap: .3rem; }
.merger-notice__link:hover { text-decoration: underline; }

/* ================================================
   BLOCK – referensslider
================================================ */
.slider { position: relative; overflow: hidden; }
.slider__track { display: flex; transition: transform .45s var(--ease); cursor: grab; }
.slider__track:active { cursor: grabbing; }
.slide { min-width: 100%; display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .slide { grid-template-columns: 1fr 1fr; } }
.slide__img { min-height: 240px; display: flex; align-items: flex-end; padding: 1.25rem; position: relative; overflow: hidden; }
.slide__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide__img--1 { background: var(--g1); }
.slide__img--2 { background: linear-gradient(135deg, #0d2535, var(--c2)); }
.slide__img--3 { background: var(--g2); }
.slide__client { font-family: var(--ff-h); font-size: 1.4rem; font-weight: 800; color: var(--c1); position: relative; z-index: 1; }
.slide__body   { padding: 1.75rem; display: flex; flex-direction: column; gap: .6rem; justify-content: center; }
.slide__tag    { font-size: .7rem; font-weight: 600; color: var(--c3); text-transform: uppercase; letter-spacing: .08em; }
.slide__meta   { display: flex; gap: 1rem; font-size: .75rem; color: var(--c4); margin-top: .25rem; }
.slide__meta i { color: var(--c3); }
.slider__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--c1); border: 1px solid var(--c5); display: none; align-items: center; justify-content: center; color: var(--c2); font-size: .9rem; z-index: 10; transition: background .2s; }
.slider__btn:hover { background: var(--c0); }
.slider__btn--prev { left: .75rem; }
.slider__btn--next { right: .75rem; }
@media (min-width: 768px) { .slider__btn { display: flex; } }
.slider__dots { display: flex; justify-content: center; gap: .4rem; padding: 1rem 0 .5rem; }
.slider__dot  { width: 8px; height: 8px; border-radius: 50%; background: var(--c5); border: none; cursor: pointer; transition: background .2s, transform .2s; }
.slider__dot.active { background: var(--c3); transform: scale(1.3); }

/* ================================================
   BLOCK – filter-knappar
================================================ */
.filter-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filter-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .9rem; border-radius: 999px; border: 1.5px solid var(--c5); background: var(--c1); font-size: .82rem; font-weight: 500; transition: all .2s var(--ease); cursor: pointer; }
.filter-btn:hover  { border-color: var(--c3); color: var(--c3); }
.filter-btn.active { background: var(--c3); border-color: var(--c3); color: var(--c1); }

/* ================================================
   BLOCK – form placeholder
================================================ */
.form-placeholder { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 3rem; border: 2px dashed var(--c5); border-radius: var(--r); color: var(--c4); font-size: .9rem; }
.form-placeholder i { font-size: 2rem; color: var(--c3); opacity: .4; }

/* ================================================
   BLOCK – policy-sidor
================================================ */
.policy__block { padding: 2rem 0; border-bottom: 1px solid var(--c5); }
.policy__block:last-child { border-bottom: none; }
.policy__block h2 { margin-top: 2rem; }
.policy__block h3 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
.policy__block p  { margin-bottom: .75rem; }
.policy__block a  { color: var(--c3); text-decoration: underline; text-underline-offset: 3px; }
.policy__list { display: flex; flex-direction: column; gap: .4rem; padding-left: 1.25rem; }
.policy__list li { font-size: clamp(.9rem,1.8vw,1rem); list-style: disc; line-height: 1.75; }
.policy__table { border: 1px solid var(--c5); border-radius: var(--r0); overflow: hidden; margin-top: .75rem; }
.policy__table-row { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 1rem; padding: .75rem 1rem; font-size: .85rem; border-bottom: 1px solid var(--c5); }
.policy__table-row:last-child { border-bottom: none; }
.policy__table-row--head { background: var(--c0); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }

/* ================================================
   AUTH
================================================ */
.auth-wrap { min-height: calc(100dvh - var(--nh)); display: flex; align-items: center; justify-content: center; padding:min(24vw , 150px) var(--pad); }
.auth-card { background: var(--c1); border: 1px solid var(--c5); border-radius: var(--r); padding: 2.5rem; width: 100%; max-width: 440px; }
.auth-card__head { text-align: center; margin-bottom: 2rem; }
.auth-card__head img { margin: 0 auto 1.25rem; }
.auth-card__head h1 { font-size: 1.5rem; margin-bottom: .4rem; }
.auth-card__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.auth-card__link { font-size: .82rem; color: var(--c3); font-weight: 500; transition: color .2s; }
.auth-card__link:hover { color: var(--c2); }
.auth-card__footer { text-align: center; font-size: .82rem; margin-top: 1.5rem; max-width: 100%; }
.auth-card__footer a { color: var(--c3); font-weight: 500; }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.field label { font-size: .82rem; font-weight: 600; }
.field input { font-family: var(--ff-b); font-size: .9rem; padding: .65rem .9rem; border: 1.5px solid var(--c5); border-radius: var(--r0); background: var(--c0); color: var(--c2); transition: border-color .2s var(--ease); width: 100%; }
.field input:focus { outline: none; border-color: var(--c3); background: var(--c1); }
.field input.field--error { border-color: #ef4444; }
.field__error { font-size: .78rem; color: #ef4444; }
.check { display: flex; align-items: center; gap: .4rem; font-size: .82rem; cursor: pointer; }
.check input { width: auto; }
.alert { padding: .75rem 1rem; border-radius: var(--r0); font-size: .85rem; margin-bottom: 1.25rem; }
.alert--ok  { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); color: #065f46; }
.alert--err { background: rgba(239,68,68,.08);  border: 1px solid rgba(239,68,68,.25);  color: #991b1b; }
.auth-tip { position: relative; color: var(--c4); font-size: .82rem; cursor: help; line-height: 1; }
.auth-tip__text { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--c2); color: var(--c1); font-size: .75rem; font-weight: 400; padding: .6rem .9rem; border-radius: var(--r0); width: 240px; text-align: center; line-height: 1.5; z-index: 50; pointer-events: none; }
.auth-tip__text::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--c2); }
.auth-tip:hover .auth-tip__text { display: block; }

/* ================================================
   COOKIE CONSENT
================================================ */
.cookie-backdrop { position: fixed; inset: 0; z-index: 998; background: rgba(9,27,51,.5); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s var(--ease); }
.cookie-modal { position: fixed; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -48%); width: calc(100% - 2rem); max-width: 480px; background: var(--c1); border-radius: var(--r); border: 1px solid var(--c5); padding: 2rem; opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease); }
#cookieModal.cookie-modal--visible .cookie-backdrop { opacity: 1; }
#cookieModal.cookie-modal--visible .cookie-modal { opacity: 1; transform: translate(-50%, -50%); }
.cookie-modal__head { margin-bottom: 1.5rem; }
.cookie-modal__head h2 { font-size: 1.2rem; margin-bottom: .4rem; }
.cookie-modal__head p  { font-size: .85rem; color: var(--c4); max-width: 100%; }
.cookie-modal__cats { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }
.cookie-cat { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; background: var(--c0); border-radius: var(--r0); border: 1px solid var(--c5); }
.cookie-cat__info { display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.cookie-cat__info strong { font-size: .88rem; font-weight: 600; }
.cookie-cat__info span   { font-size: .78rem; color: var(--c4); }
.cookie-toggle { position: relative; flex-shrink: 0; width: 44px; height: 24px; cursor: pointer; }
.cookie-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.cookie-toggle__track { position: absolute; inset: 0; background: var(--c5); border-radius: 999px; transition: background .2s var(--ease); }
.cookie-toggle__track::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: white; top: 3px; left: 3px; transition: transform .2s var(--ease); box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.cookie-toggle input:checked + .cookie-toggle__track { background: var(--c3); }
.cookie-toggle input:checked + .cookie-toggle__track::after { transform: translateX(20px); }
.cookie-toggle--locked { width: 44px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--c3); }
.cookie-modal__actions { display: flex; gap: .75rem; margin-bottom: 1rem; }
.cookie-modal__actions .btn { flex: 1; justify-content: center; }
.cookie-modal__policy { text-align: center; font-size: .75rem; color: var(--c4); max-width: 100%; }
.cookie-modal__policy a { color: var(--c3); text-decoration: underline; text-underline-offset: 3px; }