/* Wolf Review – Oberfläche von Verwaltung und Review
 *
 * Baut ausschließlich auf den Tokens aus wm-tokens.css auf. Feste Farbwerte
 * stehen hier bewusst nirgends: Ändert sich die Marke, wird die Token-Datei
 * ersetzt und diese Datei bleibt, wie sie ist.
 *
 * Zwei Oberflächen, ein Stylesheet:
 *   .admin   Verwaltungsseiten – heller Seitenkopf, wie die Website
 *   .review  Das Werkzeug – dunkle Leiste, damit die Kundenseite daneben
 *            eindeutig als Inhalt lesbar bleibt und nicht als Teil der Marke
 */

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--text-heading);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
  font-weight:var(--fw-bold);
  margin:0;
}
h1{font-size:1.625rem}
h2{font-size:1.125rem;margin:0 0 var(--space-2)}

a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
code{font-family:var(--font-mono);font-size:.92em}

*:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Kleines grünes Label über Abschnitten – das Erkennungszeichen der Marke. */
.eyebrow{
  font-family:var(--font-body);
  font-size:var(--fs-eyebrow);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--text-accent);
}

/* ================================================================ Seitenkopf */

.topbar{
  display:flex;gap:var(--space-4);align-items:center;
  padding:var(--space-3) var(--space-5);
  background:var(--surface-page);
  border-bottom:1px solid var(--border-subtle);
}
.topbar .mark{display:inline-flex;align-items:center;flex:none}
.topbar .mark img{display:block;height:26px;width:auto}
.topbar-title{
  font-size:var(--fs-xs);color:var(--text-muted);
  padding-left:var(--space-4);border-left:1px solid var(--border-subtle);
}
.topbar-nav{margin-left:auto;display:flex;gap:var(--space-4);align-items:center;
            font-size:var(--fs-xs)}
.topbar-nav .who{color:var(--text-muted)}
.topbar-nav a{color:var(--text-body);font-weight:var(--fw-semibold)}
.topbar-nav a:hover{color:var(--text-accent)}

/* =============================================================== Grundlayout */

body.admin{display:block;overflow:auto;background:var(--surface-subtle)}
.wrap{max-width:680px;margin:var(--space-7) auto;padding:0 var(--space-5)}
.wrap-wide{max-width:var(--container-max)}

.card{
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:var(--space-6);
}
.lead{color:var(--text-muted);margin:0 0 var(--space-5);line-height:var(--lh-body)}

.stack{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-5)}
.row{display:flex;gap:var(--space-3);flex-wrap:wrap}
.row>*{flex:1;min-width:180px}

/* -------------------------------------------------------------- Formularteile */

/* Beschriftungen sind bewusst KEIN Spalten-Flex: Sonst bekäme jedes Kind eine
   eigene Zeile, und ein kleines „optional" hinter dem Feldnamen würde das
   Eingabefeld nach unten schieben. So bleibt der Zusatz in der Zeile des
   Namens, und nur ein Hinweis nach dem Feld rückt darunter. */
label{display:block;
      font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-body)}
label>input:not([type=checkbox]),label>textarea,label>select{display:block;margin-top:6px}

label .hint{font-weight:var(--fw-regular);color:var(--text-muted);font-size:var(--fs-xs);
            line-height:var(--lh-snug)}
label .hint::before{content:"· ";color:var(--border-strong)}
input+.hint,textarea+.hint,select+.hint{display:block;margin-top:6px}
input+.hint::before,textarea+.hint::before,select+.hint::before{content:none}

input,textarea,select{
  width:100%;
  font-family:var(--font-body);font-size:var(--fs-sm);
  color:var(--text-heading);background:var(--wm-white);
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  padding:12px 14px;
  transition:border-color var(--dur-base) var(--ease-standard);
}
textarea{resize:vertical;min-height:84px;line-height:var(--lh-snug)}
input:focus,textarea:focus,select:focus{border-color:var(--brand-primary);outline:none}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:2px}
input[type=checkbox]{width:auto;accent-color:var(--brand-primary)}
.check{display:flex;flex-direction:row;align-items:center;gap:10px;font-weight:var(--fw-regular);
       font-size:var(--fs-sm)}

/* ------------------------------------------------------------------- Knöpfe */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-size:14px;font-weight:var(--fw-semibold);
  line-height:1.2;padding:12px 26px;
  border-radius:var(--radius-button);border:1px solid var(--border-subtle);
  background:var(--wm-white);color:var(--text-body);
  text-decoration:none;cursor:pointer;
  transition:background var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard),
             color var(--dur-base) var(--ease-standard);
}
.btn:hover{background:var(--wm-ink-050);color:var(--text-heading)}

.btn.primary{background:var(--brand-primary);border-color:transparent;
             color:var(--brand-on-primary)}
.btn.primary:hover{background:var(--brand-primary-hover);color:var(--brand-on-primary);
                   box-shadow:var(--shadow-accent);transform:translateY(-1px)}
.btn.primary:active{background:var(--brand-primary-active);box-shadow:none;transform:none}

.btn.secondary{background:var(--brand-secondary);border-color:transparent;color:#fff}
.btn.secondary:hover{background:var(--brand-secondary-hover);color:#fff}

.btn.dark{background:var(--wm-ink-900);border-color:transparent;color:#fff}
.btn.dark:hover{background:var(--wm-ink-800);color:#fff}

.btn.ghost{background:transparent;border-color:var(--brand-primary);color:var(--text-accent)}
.btn.ghost:hover{background:var(--wm-green-050);color:var(--text-accent)}

.btn.quiet{background:transparent;border-color:transparent;color:var(--text-muted);
           font-weight:var(--fw-regular)}
.btn.quiet:hover{background:var(--wm-ink-100);color:var(--text-heading)}

.btn.small{padding:8px 18px;font-size:13px}

.btn.danger{color:var(--wm-danger);border-color:var(--wm-ink-200);background:var(--wm-white)}
.btn.danger:hover{background:#fbeded;color:var(--wm-danger)}

/* ----------------------------------------------------------------- Meldungen */

.note{
  margin:0 0 var(--space-4);padding:12px 14px;
  border-radius:var(--radius-sm);border-left:3px solid var(--border-strong);
  background:var(--surface-subtle);
  font-size:var(--fs-sm);line-height:var(--lh-snug);
}
.note-error{background:#fbeded;border-color:var(--wm-danger)}
.note-warn{background:#fdf4e3;border-color:var(--wm-warning)}
.note-ok{background:var(--wm-green-050);border-color:var(--brand-primary)}

.muted{color:var(--text-muted)}
.mono{font-family:var(--font-mono);font-size:var(--fs-xs);word-break:break-all}

/* ================================================================= Projekte */

.page-head{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5)}
.page-head h1{margin:0}
.page-head .btn{margin-left:auto}
.page-head .btn+.btn{margin-left:0}

.projects{display:grid;gap:var(--space-3)}
.project{
  display:flex;gap:var(--space-5);align-items:center;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  padding:var(--space-4) var(--space-5);
  transition:box-shadow var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard);
}
.project:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.project.archived{opacity:.6;box-shadow:none}
.project.archived:hover{transform:none;box-shadow:var(--shadow-card)}
.project-main{min-width:0;flex:1}
.project-main h2{margin:0 0 2px;font-size:1.125rem}
.project-main .url{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);
                   overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.counts{display:flex;gap:6px;flex:none}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:var(--fw-semibold);
  padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--wm-ink-100);color:var(--wm-ink-700);
}
.pill.open{background:var(--wm-green-100);color:var(--wm-green-800)}
.pill.busy{background:#fdf0d5;color:#8a6200}
.pill.done{background:var(--wm-ink-100);color:var(--text-muted)}
.project-acts{display:flex;gap:8px;flex:none}

.empty-state{
  background:var(--surface-card);border:1px dashed var(--border-strong);
  border-radius:var(--radius-card);padding:var(--space-8);
  text-align:center;color:var(--text-muted);
}

.share-line{display:flex;gap:8px;align-items:center;margin-top:8px}
.share-line input{font-family:var(--font-mono);font-size:var(--fs-xs);padding:9px 12px}
.share-line .lock{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  color:var(--wm-blue-700);background:var(--wm-blue-100);
  padding:5px 11px;border-radius:var(--radius-pill);
}

/* =============================================================== Review-UI */

body.review{display:flex;flex-direction:column;overflow:hidden;background:var(--wm-ink-100)}

/* ------------------------------------------------------------- Werkzeugleiste
   Dunkel gehalten: Die Kundenseite steht direkt daneben und ist selbst hell.
   Eine weiße Leiste würde mit ihr verschwimmen. */

.bar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:none;
  padding:10px var(--space-4);
  background:var(--wm-ink-900);color:var(--wm-white);
}
.bar .mark{display:inline-flex;align-items:center;gap:9px;flex:none;
           padding-right:var(--space-3);border-right:1px solid var(--wm-ink-700)}
.bar .mark img{display:block;height:22px;width:auto}
.bar .mark span{font-family:var(--font-display);font-weight:var(--fw-bold);
                font-size:14px;letter-spacing:var(--ls-heading);color:var(--wm-white)}
.bar .project-name{font-size:var(--fs-xs);color:var(--wm-ink-400);max-width:210px;
                   overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.bar input{
  width:auto;padding:9px 12px;
  font-family:var(--font-mono);font-size:13px;
  background:var(--wm-ink-800);color:var(--wm-white);
  border:1px solid var(--wm-ink-700);border-radius:var(--radius-sm);
}
.bar input#url{flex:1;min-width:190px}
.bar input::placeholder{color:var(--wm-ink-500)}
.bar input:focus{border-color:var(--brand-primary);outline:none}

.bar button{
  font-family:var(--font-body);font-size:13px;font-weight:var(--fw-medium);
  line-height:1.2;padding:9px 16px;cursor:pointer;
  border:1px solid transparent;border-radius:var(--radius-pill);
  background:var(--wm-ink-700);color:var(--wm-white);
  transition:background var(--dur-base) var(--ease-standard),
             color var(--dur-base) var(--ease-standard);
}
.bar button:hover{background:var(--wm-ink-600)}
.bar button.primary,.bar button.on{
  background:var(--brand-primary);color:var(--brand-on-primary);
  font-weight:var(--fw-semibold);
}
.bar button.primary:hover,.bar button.on:hover{background:var(--brand-primary-hover)}
.bar .btn{padding:8px 16px;font-size:13px;background:var(--wm-ink-700);
          border-color:transparent;color:var(--wm-white)}
.bar .btn:hover{background:var(--wm-ink-600);color:var(--wm-white)}

/* Umschalter Desktop/Handy – eine Pille, innen geteilt */
.group{display:inline-flex;background:var(--wm-ink-700);border-radius:var(--radius-pill);
       padding:3px;gap:3px}
.group button{background:transparent;padding:6px 14px;border-radius:var(--radius-pill)}
.group button:hover{background:var(--wm-ink-600)}

.bar .spacer{flex:1}
.bar .sync{font-size:var(--fs-xs);color:var(--wm-ink-400);min-width:76px;text-align:right}

/* ------------------------------------------------------------------- Bühne */

.work{flex:1;display:flex;min-height:0}
.stage{flex:1;min-width:0;display:flex;justify-content:center;
       padding:var(--space-5);overflow:auto;position:relative}
.frame{background:var(--wm-white);border-radius:var(--radius-sm);
       box-shadow:var(--shadow-lg);transform-origin:top center}
iframe{display:block;border:0;background:var(--wm-white);border-radius:inherit}
.hint{margin:auto;max-width:38ch;text-align:center;color:var(--text-muted);
      font-size:var(--fs-sm)}

/* -------------------------------------------------------------- Seitenleiste */

.panel{
  width:364px;flex:none;min-height:0;display:flex;flex-direction:column;
  background:var(--surface-card);border-left:1px solid var(--border-subtle);
}
.panel-head{
  padding:var(--space-4);border-bottom:1px solid var(--border-subtle);flex:none;
  display:flex;flex-direction:column;gap:10px;
}
.panel-head h2{
  margin:0;display:flex;justify-content:space-between;gap:8px;align-items:baseline;
  font-family:var(--font-body);font-size:var(--fs-eyebrow);
  font-weight:var(--fw-semibold);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-accent);
}
.panel-head h2 span{
  font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-regular);
  letter-spacing:0;text-transform:none;color:var(--text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Hinweis auf alles, was seit dem letzten Besuch dazugekommen ist */
.fresh{margin:0;display:flex;align-items:center;gap:8px;
       font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-body)}
/* Ohne diese Zeile gewönne "display:flex" gegen das hidden-Attribut des
   Browsers - der Hinweis stünde dann auch da, wenn es nichts Neues gibt. */
.fresh[hidden]{display:none}
.fresh::before{content:"";width:7px;height:7px;border-radius:50%;
               background:var(--wm-info);flex:none}
.fresh a{margin-left:auto;font-weight:var(--fw-regular);color:var(--text-muted)}
.fresh a:hover{color:var(--text-accent)}

.panel-head .search{font-size:13px;padding:8px 12px}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:var(--font-body);font-size:var(--fs-xs);line-height:1;
  padding:7px 12px;border-radius:var(--radius-pill);
  border:1px solid var(--border-subtle);background:var(--wm-white);color:var(--text-muted);
  transition:background var(--dur-base) var(--ease-standard),
             color var(--dur-base) var(--ease-standard);
}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--brand-primary);flex:none}
.chip.busy i{background:var(--wm-warning)}
.chip.done i{background:var(--wm-ink-400)}
.chip b{font-weight:var(--fw-semibold);color:var(--text-heading)}
.chip:hover{background:var(--wm-ink-050)}
.chip.on{background:var(--wm-ink-900);border-color:var(--wm-ink-900);color:var(--wm-white)}
.chip.on b{color:var(--wm-white)}

.onlypage{display:flex;flex-direction:row;align-items:center;gap:8px;
          font-weight:var(--fw-regular);font-size:var(--fs-xs);color:var(--text-muted)}

/* ------------------------------------------------------------ Kommentarliste */

.list{overflow:auto;flex:1}
.item{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--wm-ink-100)}
.item .top{display:flex;gap:9px;align-items:baseline}

.num{
  flex:none;width:22px;height:22px;border-radius:var(--radius-pill);
  display:grid;place-items:center;position:relative;cursor:pointer;
  font-family:var(--font-body);font-size:11px;font-weight:var(--fw-bold);
  background:var(--brand-primary);
  /* Schwarz statt Weiß: bei 11 px ist Weiß auf diesem Grün zu schwach.
     Die Nadeln in der Kundenseite halten es genauso. */
  color:var(--wm-ink-900);
}
.item.is-busy .num{background:var(--wm-warning);color:var(--wm-white)}
.item.is-done .num{background:var(--wm-ink-300);color:var(--wm-ink-700)}
.item.is-done .text{text-decoration:line-through;color:var(--text-muted)}
.item.flash{background:var(--wm-green-050)}

.who{font-weight:var(--fw-semibold);color:var(--text-heading)}
.who .side{font-weight:var(--fw-regular);color:var(--text-muted);font-size:11px}
.kind{color:var(--text-muted);font-size:var(--fs-xs);margin-left:auto;white-space:nowrap}
.text{margin:7px 0 0;white-space:pre-wrap;line-height:var(--lh-snug)}
.meta{margin:6px 0 0;font-family:var(--font-mono);font-size:11px;line-height:1.5;
      color:var(--text-muted);word-break:break-all}
.meta .tag{display:inline-block;font-family:var(--font-body);
           background:var(--wm-ink-100);color:var(--wm-ink-600);
           border-radius:var(--radius-xs);padding:1px 6px;margin-right:5px}

.acts{margin-top:10px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.acts select{width:auto;padding:6px 10px;font-size:var(--fs-xs)}
.acts button{
  padding:6px 12px;font-family:var(--font-body);font-size:var(--fs-xs);line-height:1;
  background:var(--wm-white);color:var(--text-body);cursor:pointer;
  border:1px solid var(--border-subtle);border-radius:var(--radius-pill);
  transition:background var(--dur-base) var(--ease-standard);
}
.acts button:hover{background:var(--wm-ink-050)}
.acts .del{margin-left:auto;color:var(--wm-danger);border-color:var(--wm-ink-200)}
.acts .del:hover{background:#fbeded}

/* Status direkt am Kommentar setzen. Steht bewusst nach ".acts button",
   sonst gewinnt dessen helle Grundfarbe bei gleicher Spezifität. */
.statusset{display:inline-flex;border:1px solid var(--border-subtle);
           border-radius:var(--radius-pill);overflow:hidden}
.acts .statusset button{
  padding:6px 12px;border:0;border-right:1px solid var(--border-subtle);
  border-radius:0;background:var(--wm-white);color:var(--text-muted);
}
.acts .statusset button:last-child{border-right:0}
.acts .statusset button:hover{background:var(--wm-ink-050);color:var(--text-heading)}
.acts .statusset button.on{background:var(--brand-primary);color:var(--brand-on-primary);
                           font-weight:var(--fw-semibold)}
.acts .statusset button[data-s=in_progress].on{background:var(--wm-warning);color:var(--wm-white)}
.acts .statusset button[data-s=done].on{background:var(--wm-ink-600);color:var(--wm-white)}

/* Nur-Lese-Anzeige, wenn der Kunde den Status nicht ändern darf */
.statustag{display:inline-flex;align-items:center;gap:6px;
           font-size:var(--fs-xs);color:var(--text-muted)}
.statustag::before{content:"";width:7px;height:7px;border-radius:50%;
                   background:var(--brand-primary)}
.statustag.in_progress::before{background:var(--wm-warning)}
.statustag.done::before{background:var(--wm-ink-400)}

/* Ohne die Kürzung schiebt ein langer Name Datum und Symbol aus der Zeile. */
.item .top .who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .top .when{margin-left:auto;flex:none;color:var(--text-muted);font-size:11px;
                 white-space:nowrap}
.item .top .dev{color:var(--text-muted);display:inline-flex;flex:none;align-self:center}

.num .new{position:absolute;top:-3px;right:-3px;width:8px;height:8px;
          border-radius:50%;background:var(--wm-info);
          border:1.5px solid var(--surface-card)}
.item.is-new{background:var(--wm-blue-050)}

/* Gruppierung nach Unterseite, wenn alle Seiten angezeigt werden */
.pagegroup>.head{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:9px var(--space-4);cursor:pointer;text-align:left;
  background:var(--surface-subtle);border:0;
  border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--wm-ink-100);
  font-family:var(--font-body);font-size:11px;line-height:1.3;
  font-weight:var(--fw-semibold);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-heading);
}
.pagegroup:first-child>.head{border-top:0}
.pagegroup>.head:hover{background:var(--wm-ink-100)}
.pagegroup>.head .caret{flex:none;transition:transform var(--dur-fast) var(--ease-standard)}
.pagegroup.closed>.head .caret{transform:rotate(-90deg)}
.pagegroup>.head .path{font-family:var(--font-mono);font-size:11px;font-weight:var(--fw-regular);
      text-transform:none;letter-spacing:0;color:var(--text-muted);
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pagegroup>.head .n{margin-left:auto;flex:none;font-weight:var(--fw-regular);
                    color:var(--text-muted)}
.pagegroup.closed>.body{display:none}

/* ---------------------------------------------------------------- Antworten */

.replies{margin:10px 0 0;padding:0 0 0 var(--space-3);
         border-left:2px solid var(--wm-ink-100)}
.reply{margin:0 0 8px;font-size:var(--fs-xs);line-height:var(--lh-snug)}
.reply b{font-size:var(--fs-xs);color:var(--text-heading)}
.reply .when{color:var(--text-muted);font-size:11px;margin-left:5px}
.reply-form{display:flex;gap:6px;margin-top:8px}
.reply-form input{font-size:var(--fs-xs);padding:8px 12px;border-radius:var(--radius-pill)}
.reply-form button{
  flex:none;padding:8px 16px;font-family:var(--font-body);font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);cursor:pointer;
  background:var(--wm-white);color:var(--text-body);
  border:1px solid var(--border-subtle);border-radius:var(--radius-pill);
}
.reply-form button:hover{background:var(--wm-ink-050)}

.empty{padding:var(--space-5) var(--space-4);color:var(--text-muted);font-size:var(--fs-sm)}

.panel-foot{
  flex:none;padding:11px var(--space-4);border-top:1px solid var(--border-subtle);
  font-size:var(--fs-xs);color:var(--text-muted);
  display:flex;gap:10px;align-items:center;
}
.panel-foot a{color:var(--text-body);font-weight:var(--fw-semibold)}
.panel-foot a:hover{color:var(--text-accent)}

/* ---------------------------------------------------------- Zu schmal
   Das Werkzeug ist bewusst nur für den Rechner gebaut: Beurteilt werden
   Desktop- und Handy-Ansicht im Vergleich, und dafür braucht es beide
   nebeneinander. Statt die Kommentarleiste stillschweigend auszublenden,
   sagt der Hinweis, was zu tun ist. */

.toosmall{display:none}

@media (max-width:900px){
  .toosmall{position:fixed;inset:0;z-index:60;background:var(--surface-subtle);
            display:grid;place-items:center;padding:var(--space-5);text-align:center}
  .toosmall .card{max-width:400px}
  .toosmall .lead{margin-bottom:var(--space-3)}
  .bar .project-name,.bar .sync{display:none}
}

/* --------------------------------------------------------- Namensabfrage */

.gate{position:fixed;inset:0;z-index:50;padding:var(--space-5);
      background:rgba(16,20,16,.55);display:grid;place-items:center}
.gate .card{max-width:420px;width:100%;box-shadow:var(--shadow-lg)}
.gate .card .logo{display:block;height:30px;width:auto;margin:0 0 var(--space-4)}