/* R5 Remote – huisstijl, in lijn met de andere R5-apps (r5mod.nl). Zie docs/huisstijl.md.
 * Alle kleuren, maten en lettertypes staan in de tokens hieronder; pas die aan voor een eigen stijl.
 * Donker is standaard; licht volgt de systeeminstelling. */

@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* Kleuren (donker, bijna zwart – R5-huisstijl) */
  --bg: #09090b;
  --bg-raised: #111114;
  --surface: #111114;
  --surface-hover: #18181c;
  --border: #24242a;
  --border-strong: #303038;
  --fg: #f2f2f4;
  --fg-muted: #9d9da8;
  --fg-faint: #686873;
  /* Accent van R5 Remote: azuurblauw (scherm/kijken) */
  --accent: #2e9bff;
  --accent-hover: #53adff;
  --accent-fg: #ffffff;
  --accent-soft: rgba(46, 155, 255, 0.16);
  --accent-grad: linear-gradient(135deg, #5ac8ff, #2e6bff);
  --success: #2fd47a;
  --success-soft: rgba(47, 212, 122, 0.16);
  --warning: #f0a020;
  --warning-bg: #7a4406;
  --danger: #ff5a5f;
  --danger-soft: rgba(255, 90, 95, 0.14);
  --overlay: rgba(9, 9, 11, 0.85);

  /* Typografie: Unbounded (koppen), Geist (tekst), Geist Mono (codes) */
  --font: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;

  /* Ruimte en vorm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-sm: 7px;
  --radius: 11px;
  --radius-lg: 16px;
  --shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.8);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --topbar-h: 64px;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f6f8;
    --bg-raised: #ffffff;
    --surface: #ffffff;
    --surface-hover: #f0f1f4;
    --border: #e4e6ea;
    --border-strong: #d4d7dd;
    --fg: #15151a;
    --fg-muted: #5d5d68;
    --fg-faint: #8a8a96;
    --accent: #1f74e0;
    --accent-hover: #1a63c4;
    --accent-soft: rgba(31, 116, 224, 0.1);
    --accent-grad: linear-gradient(135deg, #3aa0ff, #1f6bff);
    --success: #17a35a;
    --success-soft: rgba(23, 163, 90, 0.12);
    --danger: #d93838;
    --danger-soft: rgba(217, 56, 56, 0.08);
    --overlay: rgba(255, 255, 255, 0.9);
    --shadow: 0 16px 40px -14px rgba(20, 24, 40, 0.22);
    color-scheme: light;
  }
}

/* ---------- Basis ---------- */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: var(--text-md) / 1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
h1, h2, h3 { margin: 0; line-height: 1.2; font-family: var(--font-display); letter-spacing: -0.02em; }
h2 { font-size: var(--text-xl); font-weight: 600; }
h3 { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; }
code { font-family: var(--font-mono); font-size: var(--text-sm); }

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

.muted { color: var(--fg-muted); }
.error {
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

/* ---------- Knoppen en velden ---------- */

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-fg);
  font: 600 var(--text-sm) / 1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
button:hover, .btn:hover { background: var(--accent-hover); }
.btn-lg:not(.btn-secondary) { background: var(--accent-grad); }
.btn-lg:not(.btn-secondary):hover { filter: brightness(1.08); background: var(--accent-grad); }
button:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.btn-lg { min-height: 44px; padding: 0 var(--space-5); font-size: var(--text-md); border-radius: var(--radius); }
.btn-secondary, button.btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); }
.btn-secondary:hover, button.btn-secondary:hover { background: var(--surface-hover); }
button.link, .link {
  background: none;
  border: none;
  color: var(--accent);
  padding: 0 var(--space-2);
  min-height: 32px;
  font-weight: 500;
}
button.link:hover { background: var(--accent-soft); }
.danger, button.link.danger { color: var(--danger); }
button.link.danger:hover { background: var(--danger-soft); }

input, select, textarea {
  font: var(--text-md) / 1.4 var(--font);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

form { display: grid; gap: var(--space-4); }
label { display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--fg-muted); }
label > input, label > select { color: var(--fg); }
label.inline { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--fg); }

/* Schakelaar (checkbox met role=switch) */
input.switch {
  appearance: none;
  width: 36px;
  height: 20px;
  padding: 0;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
  flex: none;
}
input.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
input.switch:checked { background: var(--accent); }
input.switch:checked::after { transform: translateX(16px); }

.error-wrap { position: fixed; left: 50%; bottom: var(--space-5); transform: translateX(-50%); z-index: 30; width: min(520px, calc(100vw - 2 * var(--space-4))); }
.error-wrap .error { box-shadow: var(--shadow); background: var(--surface); }

/* ---------- Bovenbalk ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: var(--space-2); color: var(--fg); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); letter-spacing: -0.01em; white-space: nowrap; flex: none; }
.brand img { width: 28px; height: 28px; }
.brand small { font-weight: 400; color: var(--fg-muted); font-size: var(--text-md); }
.tabs { display: flex; gap: var(--space-1); margin-left: var(--space-4); }
.tabs button { background: none; color: var(--fg-muted); border-radius: var(--radius-sm); }
.tabs button:hover { background: var(--surface-hover); color: var(--fg); }
.tabs button[aria-selected="true"] { color: var(--accent); background: var(--accent-soft); }
.topbar .spacer { flex: 1; }
.user { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--fg-muted); }

/* ---------- Pagina's ---------- */

main.page { max-width: 1120px; margin: 0 auto; padding: var(--space-6) var(--space-5); }
.page-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.page-head p { margin: var(--space-1) 0 0; }
/* Zachte gloed in de accentkleur achter de titel (R5-huisstijl). */
.page-head::before {
  content: "";
  position: absolute;
  right: 0;
  top: -60%;
  width: 55%;
  height: 220%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 20%, transparent), transparent);
}

/* Inlog/instellen: gecentreerde kaart */
.auth { position: relative; min-height: calc(100vh - var(--topbar-h)); display: grid; place-items: center; padding: var(--space-5); overflow: hidden; }
.auth::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 20%;
  width: 70%;
  height: 70%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
}
.auth > * { position: relative; z-index: 1; }
.auth-card {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow);
}
.auth-card h2 { margin-bottom: var(--space-2); }
.auth-card > p { margin: 0 0 var(--space-5); color: var(--fg-muted); }
.auth-card form button[type="submit"] { min-height: 44px; font-size: var(--text-md); }
.auth-card details { margin-top: var(--space-4); font-size: var(--text-sm); }
.auth-card summary { cursor: pointer; color: var(--accent); }
#mfa-qr { display: block; margin: var(--space-4) auto; background: #fff; padding: var(--space-2); border-radius: var(--radius); }

.codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  padding: 0;
  margin: var(--space-4) 0;
  list-style: none;
  font: 600 var(--text-md) / 1.6 var(--font-mono);
}
.codes li { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: center; padding: var(--space-1); }

/* ---------- Apparaten ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }

.device-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color 0.15s, transform 0.15s;
}
.device-card.online:hover { border-color: var(--accent); }
.device-head { display: flex; align-items: center; gap: var(--space-3); }
.device-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-grad);
  color: #fff;
  flex: none;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.device-card.offline .device-icon { background: var(--surface-hover); color: var(--fg-faint); box-shadow: none; }
.device-head h3 { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--space-2);
  border-radius: 6px;
  font: 500 11.5px var(--font-mono);
  background: rgba(9, 9, 11, 0.6);
  border: 1px solid var(--border-strong);
  color: var(--fg-muted);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.online { background: var(--success-soft); border-color: transparent; color: var(--success); }
.device-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3); margin: 0; font-size: var(--text-sm); }
.device-meta dt { color: var(--fg-muted); }
.device-meta dd { margin: 0; overflow: hidden; text-overflow: ellipsis; }
.device-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: auto; }
.device-actions .btn-lg { flex: 1; min-width: 140px; }
.device-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: var(--text-sm); }

.online-text { color: var(--success); }

dialog {
  width: min(540px, calc(100vw - 2 * var(--space-4)));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  padding: 0;
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(9, 9, 11, 0.7); backdrop-filter: blur(2px); }
.modal { display: grid; gap: var(--space-3); padding: var(--space-5); }
.modal h3 { font-size: var(--text-lg); }
.modal h4 { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--fg-muted); font-family: var(--font); }
.share-add { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; }
.share-add label { flex: 1 1 140px; min-width: 0; }
.share-add label:first-child { flex: 1 1 100%; }
.share-add input, .share-add select { width: 100%; }
.share-add button { flex: 0 0 auto; min-height: 38px; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

.empty {
  text-align: center;
  padding: var(--space-6);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--fg-muted);
}

.pairing-card {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.pairing-code { font: 700 var(--text-2xl) / 1 var(--font-mono); letter-spacing: 3px; }
.pairing-card ol { margin: 0; padding-left: var(--space-5); font-size: var(--text-sm); color: var(--fg-muted); }

/* ---------- Logboek ---------- */

.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--fg-muted); font-weight: 500; background: var(--bg-raised); position: sticky; top: 0; }
tr:last-child td { border-bottom: none; }
td.detail { white-space: normal; color: var(--fg-muted); }

/* ---------- Kijkpagina ---------- */

body.viewer { height: 100dvh; overflow: hidden; background: #000; display: flex; flex-direction: column; }

/* Werkbalk zweeft boven het beeld en verdwijnt na een paar seconden zonder beweging. */
.session-bar {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  max-width: calc(100vw - 2 * var(--space-3));
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  background: var(--overlay);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: var(--fg);
  font-size: var(--text-sm);
  transition: opacity 0.25s, transform 0.25s;
}
body.viewer.idle .session-bar:not(:focus-within):not(:hover) { opacity: 0; transform: translate(-50%, -12px); pointer-events: none; }
.session-bar .brand { font-size: var(--text-md); }
.session-bar .brand img { width: 22px; height: 22px; }
.session-bar .sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 var(--space-1); }
.session-bar button.link { color: var(--fg); min-height: 30px; }
.session-bar button.link.danger { color: var(--danger); }
.session-bar select { padding: 2px var(--space-2); font-size: var(--text-sm); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-muted); }
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
.status-pill.ok::before { background: var(--success); }
.status-pill.bad::before { background: var(--danger); }

.segmented { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }
.segmented button { background: none; color: var(--fg-muted); min-height: 28px; padding: 0 var(--space-3); border-radius: 4px; }
.segmented button:hover { color: var(--fg); background: var(--surface-hover); }
.segmented button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }

/* Panelen onder de werkbalk */
.drawers { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); z-index: 19; width: min(760px, calc(100vw - 2 * var(--space-3))); display: grid; gap: var(--space-2); }
.panel {
  background: var(--overlay);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  color: var(--fg);
  font-size: var(--text-sm);
  box-shadow: var(--shadow);
}
.banner { background: var(--warning-bg); color: #fff; border-color: transparent; }

.keys { display: flex; flex-wrap: wrap; gap: 6px; }
.keys button { background: var(--surface); color: var(--fg); border: 1px solid var(--border); min-width: 44px; min-height: 36px; padding: 0 var(--space-3); }
.keys button:hover { background: var(--surface-hover); }
.keys button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.keys button.accent { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
#text-input { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.clipboard { display: flex; gap: var(--space-3); align-items: flex-start; }
.clipboard textarea { flex: 1; resize: vertical; font: var(--text-sm) / 1.4 var(--font-mono); }
.clip-actions { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; }

.files { max-height: 45vh; overflow: auto; }
.files-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.files-list { list-style: none; margin: 0; padding: 0; }
.files-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--border); }
.files-list li:last-child { border-bottom: none; }
.files-list button { color: var(--fg); justify-content: flex-start; flex: 1; text-align: left; }
.button-like { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-fg); font-weight: 600; cursor: pointer; }
#file-bar { width: 160px; accent-color: var(--accent); }

.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; display: flex; }
.viewport { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform-origin: 0 0; }
.stage video { max-width: 100%; max-height: 100%; background: #000; }
.stage video:focus { outline: 2px solid var(--warning); outline-offset: -2px; }
.stage .error { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: min(480px, 90vw); text-align: center; background: var(--surface); }

.touch-only { display: none; }
@media (hover: none) and (pointer: coarse) {
  .touch-only { display: inline; }
  .desktop-only { display: none; }
}

/* ---------- Desktop-app ("Deze pc") ---------- */

body.app { min-height: 100vh; }
.app-main { max-width: 560px; margin: 0 auto; padding: var(--space-5); display: grid; gap: var(--space-4); }
.app-foot { font-size: var(--text-sm); }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row.between { justify-content: space-between; }
.row > input[type="text"] { flex: 1; }

.status-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.status-hero::before {
  content: "";
  position: absolute;
  right: -10%;
  top: -60%;
  width: 60%;
  height: 220%;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
}
.status-hero > * { position: relative; }
.status-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--fg-muted); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg-muted) 20%, transparent); }
.status-dot.ok { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.status-dot.wait { background: var(--warning); box-shadow: 0 0 0 4px rgba(240, 160, 32, 0.2); }
.status-dot.bad { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.status-dot.off { background: var(--fg-muted); }
.status-hero h2 { font-size: var(--text-lg); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}
.card h3 { font-size: var(--text-md); }
.card > p { margin: 0; }
.switch-row { cursor: pointer; }
.switch-row span { font-size: var(--text-md); color: var(--fg); }

/* Toestemmingsvenster */
.approve-body { display: grid; place-items: center; min-height: 100vh; padding: var(--space-5); }
.approve { text-align: center; display: grid; gap: var(--space-3); max-width: 360px; }
.approve-icon { font-size: 40px; }
.approve h2 { font-size: var(--text-lg); }
.approve-actions { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-2); }
.approve-actions button { min-width: 130px; min-height: 42px; }

.viewer-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.viewer-list li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.viewer-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex: none; }

/* ---------- Smalle schermen ---------- */

@media (max-width: 640px) {
  .topbar { padding: 0 var(--space-3); gap: var(--space-2); }
  .brand small, .brand-text, .user span { display: none; }
  .tabs button { padding: 0 var(--space-3); }
  .user button { padding: 0 var(--space-3); }
  .tabs { margin-left: 0; }
  main.page { padding: var(--space-4) var(--space-3); }
  .cards { grid-template-columns: 1fr; }
  .auth-card { padding: var(--space-5); }
  .session-bar { top: var(--space-2); gap: var(--space-1); padding: var(--space-1) var(--space-2); }
  .session-bar .brand span, .session-bar .sep { display: none; }
  .drawers { top: 96px; }
  .clipboard { flex-direction: column; align-items: stretch; }
  .clip-actions { flex-direction: row; align-items: center; }
  .keys button { min-width: 40px; min-height: 34px; padding: 0 var(--space-2); }
}