/* =========================
   CONTADORIA – login CORE (responsive)
   ========================= */

/* ---------- Design tokens ---------- */
:root{
  /* Brand */
  --brand: #6a1b9a;
  --brand-hi: color-mix(in oklab, var(--brand) 88%, white);
  --brand-lo: color-mix(in oklab, var(--brand) 70%, black);

  /* Surfaces & text */
  --bg:    #0b1020;
  --panel: #131937;
  --ink:   #eef2ff;
  --muted: #b7bcd1;

  /* Borders, inputs */
  --panel-border: rgb(255 255 255 / 6%);
  --input-bg:     #0f1428;
  --input-border: #3b4266;

  /* Links & social */
  --link:        color-mix(in oklab, var(--brand) 55%, #c7b6ff);
  --social-bg:   #0f1428;
  --social-bord: #2f365a;

  /* Glass quick accounts */
  --qa-bg:        #11162a;
  --qa-border:    #47507b;
  --qa-ink:       #eef2ff;
  --qa-ink-muted: #cfd5ff;
  --qa-avatar:    color-mix(in oklab, var(--brand) 45%, #5460a9);
  --qa-shadow:    0 0.125rem 0.625rem rgb(0 0 0 / 25%);

  /* Shadows */
  --quote-shadow: 0 0.5rem 2.5rem rgb(0 0 0 / 35%);

  /* Overlay (desktop/hero může přepsat) */
  --overlay: radial-gradient(75rem 37.5rem at 70% 60%,
               color-mix(in oklab, var(--brand) 55%, transparent),
               rgb(0 0 0 / 45%) 60%,
               rgb(0 0 0 / 60%));

  /* Spacing & shape */
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;

  /* Card sizing – snadno overrides v mobile/desktop */
  --card-w: clamp(18rem, 42vw, 32rem);
  --card-pad-block: clamp(1rem, 2.5vi, 1.375rem);
  --card-pad-inline: clamp(.875rem, 2.5vi, 1.25rem);
}

/* Light */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb; --panel:#fff; --ink:#0b1020; --muted:#5b6275;
    --panel-border: rgb(0 0 0 / 8%);
    --input-bg: #fff; --input-border:#d5dae5;
    --link: color-mix(in oklab, var(--brand) 70%, #5b4cda);
    --social-bg:#fff; --social-bord:#dfe3ee;

    --qa-bg:#f5f7ff; --qa-border:#b9c1e3; --qa-ink:#0b1020; --qa-ink-muted:#2b3370;
    --qa-avatar: color-mix(in oklab, var(--brand) 55%, #7f8bdb);

    --quote-shadow: 0 .625rem 1.875rem rgb(0 0 0 / 12%);
    --overlay: radial-gradient(75rem 37.5rem at 70% 60%,
                 color-mix(in oklab, var(--brand) 40%, transparent),
                 rgb(0 0 0 / 10%) 60%,
                 rgb(0 0 0 / 20%));
  }
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
body{
  margin: 0;
  font-family: system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* ---------- Layout hooks (jen „háčky“ – layout řeší overrides) ---------- */
.shell{
  display: grid;
  min-block-size: 100%;
  /* žádné pevné sloupce/řádky – mobil/desktop si nastaví */
}
.left{ display: grid; align-content: start; }
.right{ position: relative; }

/* ---------- Card + typografie ---------- */
.card{
  inline-size: min(var(--card-w), 92vi);
  margin-inline: auto;
  padding-block: var(--card-pad-block);
  padding-inline: var(--card-pad-inline);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--quote-shadow);
}

.brand{ display:flex; gap: var(--space-3); align-items:center; margin: .25rem 0 var(--space-4); }
.brand .logo{ inline-size: 1.75rem; block-size: 1.75rem; }
.brand .title{ font-weight: 700; letter-spacing: .2px; }
.title .accent{ color: var(--brand); }

h2{ margin: 0 0 var(--space-3); font-size: clamp(1.05rem, 1.4vw + .9rem, 1.35rem); }
label{ font-size: .92rem; color: var(--muted); }

/* ---------- Inputs ---------- */
.field{ display:flex; flex-direction:column; gap: .375rem; margin: .625rem 0 1rem; }
.input{
  padding: .75rem;
  font-size: 1rem;
  color: var(--ink);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: .625rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 .1875rem color-mix(in oklab, var(--brand) 25%, transparent);
}
.input-affix{
  position: relative;
  display: flex; align-items: stretch;
  border: 1px solid var(--input-border);
  border-radius: .625rem;
  background: var(--input-bg);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input-affix:focus-within{
  border-color: var(--brand);
  box-shadow: 0 0 0 .1875rem color-mix(in oklab, var(--brand) 22%, transparent);
}
.input-affix .input{ border: none; background: transparent; flex: 1; }
.input-affix .suffix{
  display:flex; align-items:center;
  padding-inline: .625rem;
  font-size: .95rem; color: var(--muted);
  border-inline-start: 1px solid var(--input-border);
  white-space: nowrap;
}
.input-affix.invalid .input{
  border-color: #ef4444;
  box-shadow: 0 0 0 .1875rem rgb(239 68 68 / 12%);
}
.input-error{ margin: .375rem .125rem 0; font-size: .86rem; color: #ef9a9a; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; gap: .6rem; align-items:center; justify-content:center;
  inline-size: 100%;
  padding: .75rem 1rem;
  font-size: 1rem; font-weight: 600;
  color: #fff; background: var(--brand);
  border: 0; border-radius: .75rem;
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.btn:hover{ filter: brightness(1.06); box-shadow: 0 .375rem 1.125rem color-mix(in oklab, var(--brand) 28%, transparent); }
.btn:active{ transform: translateY(1px); }

/* ---------- Footer / odkazy ---------- */
.muted{ margin-block-start: var(--space-3); font-size: .9rem; color: var(--muted); }
.muted a{ color: var(--link); text-decoration: none; }
.muted a:hover{ text-decoration: underline; }

.footnote{ margin-block-start: var(--space-4); font-size: .85rem; color: var(--muted); }

.footer-bar{
  display:flex; gap: var(--space-3);
  align-items:center; justify-content: space-between;
  margin-block-start: var(--space-3);
  padding-block-start: .625rem;
  border-block-start: 1px solid var(--panel-border);
}
.privacy-link a{ font-size: .9rem; color: var(--link); text-decoration: none; }
.privacy-link a:hover{ text-decoration: underline; }

.social-links{ display:flex; gap: .625rem; }
.social-icon{
  display:grid; place-items:center;
  inline-size: 2.125rem; block-size: 2.125rem;
  color: var(--link); text-decoration: none;
  background: var(--social-bg);
  border: 1px solid var(--social-bord);
  border-radius: 50%;
  transition: filter .15s ease, transform .06s ease;
}
.social-icon:active{ transform: translateY(1px); }

/* ---------- Quick Accounts (shared look) ---------- */
.quick-accounts{ margin-block-start: .875rem; }
.qa-title{ font-size: .78rem; color: var(--muted, #aab); margin-block-end: .375rem; }
.qa-list{ display:flex; flex-direction: column; gap: .5rem; }

.qa-chip{
  inline-size: 100%; block-size: 2.625rem;
  position: relative; display:flex; align-items:center; gap: .5rem;
  padding-inline: 4.375rem .5rem; /* rezerva pro (i) + × vpravo */
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  background: color-mix(in oklab, var(--panel) 85%, transparent);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: transform .06s ease, border-color .15s ease, box-shadow .15s ease;
}
.qa-chip:hover{
  border-color: color-mix(in oklab, var(--brand) 40%, var(--ink) 10%);
  box-shadow: 0 .25rem .875rem rgb(0 0 0 / 18%);
  transform: translateY(-1px);
}
.qa-chip .avatar{
  inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%;
  display:grid; place-items:center; flex-shrink: 0; user-select:none;
  font-weight: 700; font-size: .75rem; color: #fff;
  background: linear-gradient(135deg,
              color-mix(in oklab, var(--brand) 72%, white),
              color-mix(in oklab, var(--brand) 48%, #3c2a57));
}
.qa-chip .label{ position:relative; display:grid; flex:1; min-inline-size:0; text-align:left; }
.qa-chip .label span{
  grid-area: 1/1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .875rem; line-height: 1; color: var(--ink);
}
.qa-chip .qa-info, .qa-chip .close{
  position: absolute; inset-block-start: 50%; transform: translateY(-50%);
  inline-size: 1.375rem; block-size: 1.375rem; display:grid; place-items:center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--panel) 85%, transparent);
  border: 1px solid color-mix(in oklab, var(--ink) 15%, transparent);
  color: var(--ink); font-size: .75rem; line-height: 1; cursor: pointer;
}
.qa-chip .qa-info{ inset-inline-end: 2.25rem; }
.qa-chip .close{ inset-inline-end: .5rem; font-size: 1rem; font-weight: 600; border: none; }

/* Hinty */
.qa-chip .label .label-hint{ display:none; opacity:.9; font-size:.75rem; }
.qa-chip .label .label-email{ display:inline; }
.qa-chip:hover .label .label-email{ display:none; }
.qa-chip:hover .label .label-hint--login{ display:inline; }
.qa-chip:has(.qa-info:hover) .label .label-hint{ display:none; }
.qa-chip:has(.qa-info:hover) .label .label-hint--devices{ display:inline; }
.qa-chip:has(.close:hover) .label .label-hint{ display:none; }
.qa-chip:has(.close:hover) .label .label-hint--remove{ display:inline; }
.qa-chip:has(.avatar:hover) .label .label-hint{ display:none; }
.qa-chip:has(.avatar:hover) .label .label-hint--profile{ display:inline; }

/* ---------- Glass popover (shared) ---------- */
.qa-pop{ position:fixed; inset:0; display:none; z-index:1000; }
.qa-pop.active{ display:block; }
.qa-backdrop{ position:absolute; inset:0; background:transparent; }
.qa-bubble{
  position:absolute;
  inline-size: 17.5rem; max-block-size: 18.75rem; overflow:auto;
  background: color-mix(in oklab, var(--panel) 85%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in oklab, var(--brand) 25%, var(--ink) 12%);
  border-radius: .875rem; padding: .75rem;
  box-shadow: 0 .625rem 2.5rem rgb(0 0 0 / 35%);
  animation: qaSlideIn .12s ease;
}
@keyframes qaSlideIn { from{ transform: translateX(.375rem); opacity:0; } to{ transform:none; opacity:1; } }
.qa-bubble::before{
  content:""; position:absolute; inset-inline-start:-.375rem; inset-block-start:.875rem;
  inline-size:.75rem; block-size:.75rem; transform:rotate(45deg);
  background: inherit;
  border-inline-start: 1px solid color-mix(in oklab, var(--brand) 25%, var(--ink) 12%);
  border-block-start: 1px solid color-mix(in oklab, var(--brand) 25%, var(--ink) 12%);
}
.qa-bubble.flip::before{
  inset-inline-start: auto; inset-inline-end: -.375rem;
  border-inline-start: 0; border-block-start: 0;
  border-inline-end: 1px solid color-mix(in oklab, var(--brand) 25%, var(--ink) 12%);
  border-block-end: 1px solid color-mix(in oklab, var(--brand) 25%, var(--ink) 12%);
}
.qa-bubble h6{ margin:0 0 .5rem; font: 600 .84375rem/1.35 system-ui; color: color-mix(in oklab, var(--brand) 40%, var(--ink)); }

.qa-dev-list{ list-style:none; margin:0; padding:0; display:grid; gap: .5rem; }
.qa-dev-item{
  padding: .5rem .625rem; border-radius: .625rem;
  border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  background: color-mix(in oklab, var(--panel) 96%, transparent);
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.qa-dev-item:hover{ transform: translateY(-1px); background: color-mix(in oklab, var(--panel) 100%, transparent); border-color: color-mix(in oklab, var(--brand) 35%, var(--ink) 12%); }
.qa-dev-item.active{ border-color: color-mix(in oklab, var(--brand) 75%, var(--ink) 10%); box-shadow: 0 0 0 .125rem color-mix(in oklab, var(--brand) 28%, transparent); }
.qa-bubble .dev-title{ font-weight: 600; font-size: .84375rem; }
.qa-bubble .dev-meta{ font-size: .75rem; color: var(--muted); }
.qa-bubble .empty{ font-size: .78rem; color: var(--muted); text-align: center; padding: .625rem; }

/* ---------- MFA modal (shared) ---------- */
.modal{ position:fixed; inset:0; z-index:9999; display:none; place-items:center;
  background: radial-gradient(80% 60% at 50% 40%, rgb(0 0 0 / .62), rgb(0 0 0 / .78)); }
.modal[hidden]{ display:none; }
.modal:not([hidden]){ display:grid; }

.modal-dialog{
  inline-size: min(45rem, 92vi);
  border-radius: 1.125rem; padding: 0;
  background: rgb(15 18 40 / 90%);
  border: 1px solid rgb(255 255 255 / 14%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  box-shadow: 0 1.875rem 5rem rgb(0 0 0 / 45%), 0 0 0 1px rgb(255 255 255 / 4%) inset;
  color: var(--ink);
}
.modal-head, .modal-foot{ padding: 1rem 1.125rem; }
.modal-head{
  border-block-end: 1px solid rgb(255 255 255 / 10%);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-head h3{ margin:0; font-size: clamp(1rem, .6vi + .95rem, 1.15rem); letter-spacing:.2px; }
.modal-body{ padding: 1.125rem; }
.modal-foot{
  border-block-start: 1px solid rgb(255 255 255 / 10%);
  display:flex; justify-content:flex-end; gap: .625rem;
}
.icon-btn{ appearance:none; border:0; background:transparent; color:var(--link); font-size: 1.375rem; cursor:pointer; opacity:.9; }
.icon-btn:hover{ opacity:1; }
.steps{ margin: .5rem 0 .875rem 1.375rem; }
.steps li{ margin: .375rem 0; color: color-mix(in oklab, var(--ink) 92%, #cfd5ff); line-height: 1.5; }
.store-row{ display:flex; flex-wrap:wrap; gap: .625rem; margin: .625rem 0 .875rem; }
.qr-wrap{ display:flex; justify-content:center; padding: .375rem 0 .25rem; }
.qr-wrap img{
  inline-size: 10rem; block-size: 10rem; border-radius: .75rem;
  border: 1px solid rgb(255 255 255 / 14%); background: rgb(0 0 0 / 20%);
}
.modal .btn{ inline-size: auto; min-inline-size: 13.75rem; padding: .75rem 1rem; border-radius: .75rem; }

/* ---------- Motion respect ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}