/* ════════════════════════════════════════════════════════════════
   Design tokens - Sqilline Color Palette 2025
   ════════════════════════════════════════════════════════════════ */
:root {
  --c-light-gray: #F0F0F0;
  --c-electric-blue: #1767F5;
  --c-light-blue: #D0DCFF;
  --c-sky-blue: #85ADFF;
  --c-yellow: #FFD757;
  --c-orange: #FF9700;
  --c-white: #FFFFFF;
  --c-cool-gray: #E7E6E2;
  --c-warm-gray: #C6C5C1;
  --c-gray: #777C7F;
  --c-slate: #3D484A;
  --c-ink: #282828;

  --c-blue-hover: #0D50D4;
  --c-negative: #C0392B;
  --c-negative-soft: #FCEBEB;

  --r-sm: 7px;
  --r: 12px;
  --border: 1px solid rgba(0, 0, 0, 0.10);
  --shadow-card: 0 1px 3px rgba(40, 40, 40, 0.05);
  --shadow-pop: 0 8px 28px rgba(40, 40, 40, 0.14);
  --font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: var(--c-light-gray);
  font-family: var(--font-family);
  font-size: 15px;
  color: var(--c-ink);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ───────────────────────────────────────────────────── */
header {
  height: 56px;
  flex-shrink: 0;
  background: var(--c-white);
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
}
header .svg { height: 26px; width: auto; display: block; }
header .logo-fallback {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--c-electric-blue);
  line-height: 1;
}
header .product {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  padding-left: 14px;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}
header .product-name { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; color: var(--c-electric-blue); }
header .product-sub { font-size: 15px; font-weight: 400; letter-spacing: -0.2px; color: var(--c-sky-blue); }
header .slogan {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--c-slate);
  white-space: nowrap;
}

/* ── Page shell ────────────────────────────────────────────────── */
.background-container {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
}
.content-container {
  width: 100%;
  max-width: 940px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: opacity .2s;
}
.content-container.downloading { opacity: 0.45; pointer-events: none; }

/* ── Page-level message / error ──────────────────────────────── */
.message {
  width: 100%;
  max-height: 6em;
  overflow: auto;
  border-radius: var(--r-sm);
  padding: 11px 14px 11px 13px;
  font-size: 13.5px;
  line-height: 1.5;
  display: none;
}
.message.error {
  display: block;
  background: var(--c-negative-soft);
  border: 1px solid rgba(192, 57, 43, 0.28);
  border-left: 3px solid var(--c-negative);
  color: var(--c-negative);
}

/* ── The panel ────────────────────────────────────────────────── */
.app-container {
  position: relative;
  width: 100%;
  min-height: 460px;
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.86fr 1fr;
}

/* Separate desktop and web sections visually */
.desktop + .web,
.desktop + .web {
  margin-top: 48px;
}

/* Left pane */
.pane-info {
  background: #FAFAFA;
  border-right: var(--border);
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.content-title {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.22;
  color: var(--c-ink);
}
.hero-sub { font-size: 14px; line-height: 1.65; color: var(--c-gray); }

.facts-list { display: flex; flex-direction: column; gap: 11px; margin-top: 2px; }
.fact-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-slate);
}
.fact-row i { font-size: 17px; color: var(--c-electric-blue); flex-shrink: 0; margin-top: 1px; }

.app-version-info {
  margin-top: auto;
  padding-top: 18px;
  border-top: var(--border);
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--c-gray);
}
.app-version-info:empty { display: none; }

/* Right pane */
.pane-download {
  padding: calc(38px + 2 * 27px * 1.22 + 18px) 34px 38px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
}

.web .pane-download {
  padding-top: 38px;
}

.pane-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--c-slate);
}

/* ── Activity indicator ─────────────────────────────────────── */
.loader {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(1px);
  z-index: 3;
}
.loader::after {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--c-light-blue);
  border-top-color: var(--c-electric-blue);
  animation: spin .8s linear infinite;
}
.app-container.activity-indicator { pointer-events: none; }
.app-container.activity-indicator .loader { display: grid; }
@keyframes spin { to { transform: rotate(1turn); } }

/* ── Download progress dialog ───────────────────────────────── */
.progress-container {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 300;
  width: 340px;
  max-width: calc(100vw - 40px);
  padding: 22px;
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-pop);
}
.progress-container label {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink);
}
.progress-container label i { color: var(--c-electric-blue); margin-right: 6px; }
progress#download-progress {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 8px;
  border: none;
  background: var(--c-light-gray);
  border-radius: 99px;
  overflow: hidden;
}
progress#download-progress::-webkit-progress-bar { background: var(--c-light-gray); border-radius: 99px; }
progress#download-progress::-webkit-progress-value { background: var(--c-electric-blue); border-radius: 99px; transition: width .2s; }
progress#download-progress::-moz-progress-bar { background: var(--c-electric-blue); border-radius: 99px; }

/* ── Footer ───────────────────────────────────────────────────── */
footer {
  flex-shrink: 0;
  padding: 0 24px 24px;
  text-align: center;
  font-size: 12px;
  color: var(--c-slate);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
footer a { color: var(--c-electric-blue); text-decoration: none; font-weight: 500; }
footer a:hover { text-decoration: underline; }

/* ── OS detection (desktop only) ─────────────────────────────── */
.desktop.os-windows .download-form.mac,
.desktop.os-mac .download-form.windows { display: none; }
.desktop.os-windows.show-other .download-form.mac,
.desktop.os-mac.show-other .download-form.windows { display: block; }

.other-os-toggle {
  display: none;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 1px 2px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--c-electric-blue);
  background: none;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.other-os-toggle i { font-size: 16px; }
.other-os-toggle span { text-decoration: underline; text-decoration-color: rgba(23, 103, 245, 0.35); text-underline-offset: 2px; }
.other-os-toggle:hover span { text-decoration-color: var(--c-electric-blue); }
.other-os-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(23, 103, 245, 0.3); }
.desktop.os-windows .other-os-toggle,
.desktop.os-mac .other-os-toggle { display: inline-flex; }
.desktop.show-other .other-os-toggle { display: none; }

.other-os-toggle .alt-label { display: none; }
.desktop.os-windows .other-os-toggle .alt-mac { display: inline; }
.desktop.os-mac .other-os-toggle .alt-windows { display: inline; }

/* ── Instructions link ───────────────────────────────────────── */
.pane-note { font-size: 13px; line-height: 1.65; color: var(--c-gray); }
.instructions {
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  color: var(--c-electric-blue);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(23, 103, 245, 0.35);
  text-underline-offset: 2px;
}
.instructions:hover { text-decoration-color: var(--c-electric-blue); }
.instructions:focus-visible { outline: none; border-radius: 3px; box-shadow: 0 0 0 3px rgba(23, 103, 245, 0.3); }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .background-container { align-items: flex-start; padding: 28px 20px; }
  .app-container { grid-template-columns: 1fr; min-height: 0; }
  .pane-info {
    border-right: none;
    border-bottom: var(--border);
    padding: 26px 22px;
  }
  .pane-download { padding: 26px 22px; }
  .content-title { font-size: 23px; }
  .app-version-info { margin-top: 6px; }
  header .slogan { display: none; }
}

/* ── OS row download form (desktop) ────────────────────────────── */
.os-list { display: flex; flex-direction: column; gap: 12px; }
.download-form {
  width: 100%;
  border: var(--border);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  transition: background .15s, border-color .15s;
}
.download-form:hover { background: #FAFBFF; border-color: rgba(23, 103, 245, 0.35); }
.os-list .control { display: flex; align-items: center; gap: 13px; }
.os-list .control .os-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.os-list .control .os-icon svg { width: 100%; height: 100%; display: block; }
.os-list .control .os-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.os-list .control .label { font-size: 14.5px; font-weight: 500; color: var(--c-ink); }
.os-list .control .os-note { font-size: 12px; color: var(--c-gray); }

.os-download-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-white);
  background: var(--c-electric-blue);
  border: 1px solid var(--c-electric-blue);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.os-download-btn:hover { background: var(--c-blue-hover); border-color: var(--c-blue-hover); }
.os-download-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(23, 103, 245, 0.3); }