* { box-sizing: border-box; }

body {
  margin: 0;
  background: #0B0B0D;
  font-family: 'Inter', sans-serif;
  color: #ECE9E4;
}

.mono { font-family: 'Inter', sans-serif; }

.hidden { display: none !important; }

.page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.card {
  width: 360px;
  max-width: 100%;
  background: #15161B;
  border-radius: 28px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px rgba(0,0,0,0.35);
  position: relative;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  position: relative;
}
.lang-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  border: 1px solid rgba(236,233,228,0.14);
  border-radius: 999px;
  overflow: hidden;
}
.lang-toggle-opt {
  background: transparent;
  color: #8A8479;
  border: none;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  cursor: pointer;
}
.lang-toggle-opt.active {
  background: #E85A4A;
  color: #1C1B19;
}
.wordmark {
  font-family: 'Lora', serif;
  font-size: 26px;
  font-weight: 600;
  color: #ECE9E4;
  letter-spacing: -0.01em;
}
.wordmark .a { color: #E85A4A; }
.subtitle {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #8A8479;
}

.divider {
  height: 1px;
  background: rgba(236,233,228,0.1);
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(236,233,228,0.04);
  border: 1px solid rgba(236,233,228,0.08);
  border-radius: 14px;
  padding: 13px 16px;
}
.status-left { display: flex; align-items: center; gap: 10px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4A4A4A; }
.status-dot.connected { background: #7A9B76; }
.status-dot.waiting { background: #D9A441; animation: migatch-pulse 1.4s ease-in-out infinite; }
@keyframes migatch-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.status-label { font-size: 10px; letter-spacing: 0.1em; color: #ECE9E4; }

.btn-connect {
  background: #E85A4A;
  color: #1C1B19;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.btn-connect:hover:not(:disabled) { opacity: 0.9; }
.btn-connect:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-disconnect {
  background: none;
  border: none;
  color: #8A8479;
  font-size: 10px;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 4px;
}
.btn-disconnect:hover { color: #ECE9E4; }

.hint {
  font-size: 9px;
  line-height: 1.6;
  color: #8A8479;
  text-align: center;
  padding: 6px 8px 2px;
}

.waiting-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px 20px;
  border: 1px solid rgba(217,164,65,0.35);
  background: rgba(217,164,65,0.08);
  border-radius: 16px;
  text-align: center;
}
.waiting-icon { font-size: 26px; color: #D9A441; }
.waiting-title { font-size: 11px; letter-spacing: 0.07em; color: #D9A441; }
.waiting-text { font-size: 12px; line-height: 1.55; color: #ECE9E4; max-width: 320px; }

.connected-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dropzone {
  border: 2px dashed rgba(236,233,228,0.18);
  border-radius: 16px;
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.dropzone.dragover { border-color: #E85A4A; background: rgba(232,90,74,0.06); }
.dropzone.busy { cursor: default; opacity: 0.7; }
.drop-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(236,233,228,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #ECE9E4;
}
.drop-label { font-size: 10px; letter-spacing: 0.08em; color: #ECE9E4; text-align: center; }
.drop-sub { font-size: 9.5px; color: #6B6660; }

.storage-section { display: flex; flex-direction: column; gap: 10px; }
.storage-head { display: flex; justify-content: space-between; align-items: baseline; }
.storage-head .label { font-size: 10px; letter-spacing: 0.1em; color: #8A8479; }
.storage-head .value { font-size: 10px; color: #8A8479; }

.storage-bar {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(236,233,228,0.08);
}
.storage-bar-seg { height: 100%; }

.profiles-section { display: flex; flex-direction: column; gap: 12px; }

/* --- mini podgląd A/B --- */
.profiles-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-preview-slot {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-preview-swatch {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(236,233,228,0.12);
  flex: none;
  position: relative;
  overflow: hidden;
}
.profile-preview-sep {
  font-size: 12px;
  color: #6B6660;
  flex: none;
}
.profile-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.profile-preview-tag { font-size: 8px; letter-spacing: 0.1em; color: #6B6660; }
.profile-preview-name { font-size: 10px; letter-spacing: 0.06em; color: #ECE9E4; }

.btn-themes {
  background: rgba(236,233,228,0.06);
  border: 1px solid rgba(236,233,228,0.14);
  border-radius: 999px;
  color: #ECE9E4;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.07em;
  padding: 8px 16px;
  cursor: pointer;
  width: 100%;
  text-align: center;
}
.btn-themes:hover { background: rgba(236,233,228,0.1); }
.btn-themes:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- modal motywów --- */
.modal-themes {
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.themes-modal-header {
  padding: 22px 22px 16px;
  border-bottom: 1px solid rgba(236,233,228,0.06);
}
.themes-modal-title {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #ECE9E4;
  margin-bottom: 4px;
}
.themes-modal-subtitle {
  font-size: 12px;
  color: #6B6660;
}
.themes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px 22px;
  overflow-y: auto;
}
@media (max-width: 400px) {
  .themes-grid { grid-template-columns: repeat(2, 1fr); }
}
.theme-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  cursor: pointer;
  border-radius: 10px;
  padding: 4px;
  transition: background 0.12s;
}
.theme-card:hover { background: rgba(236,233,228,0.05); }
.theme-card.selected-a,
.theme-card.selected-b,
.theme-card.selected-ab { outline: 2px solid transparent; }
.theme-card.selected-a { outline-color: #E85A4A; }
.theme-card.selected-b { outline-color: #6FA3D0; }
.theme-card.selected-ab { outline-color: #4ADE80; }
.theme-card-preview {
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  position: relative;
  border: 1px solid rgba(236,233,228,0.1);
}
.theme-card-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 3px;
}
.theme-badge {
  font-family: 'Inter', sans-serif;
  font-size: 7px;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 4px;
}
.theme-badge-a { background: #E85A4A; color: #fff; }
.theme-badge-b { background: #6FA3D0; color: #fff; }
.theme-card-name {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #ADA9A2;
  text-align: center;
}
.themes-modal-actions {
  padding: 12px 22px 18px;
  border-top: 1px solid rgba(236,233,228,0.06);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.book-list { display: flex; flex-direction: column; }
.book-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(236,233,228,0.06);
}
.book-row:last-child { border-bottom: none; }
.book-row-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.book-row-title {
  font-family: 'Lora', serif;
  font-size: 13px;
  color: #ECE9E4;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book-row-size { font-size: 9.5px; color: #6B6660; flex: none; }
.book-row-delete {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: none;
  background: none;
  color: #8A8479;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.book-row-delete:hover:not(:disabled) { background: rgba(236,233,228,0.08); color: #ECE9E4; }
.book-row-delete:disabled { opacity: 0.4; cursor: not-allowed; }

.book-list-empty {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #6B6660;
  text-align: center;
  padding: 16px 0;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
}
.modal {
  width: 280px;
  max-width: calc(100% - 40px);
  background: #1C1D22;
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.modal.modal-themes {
  width: min(600px, calc(100vw - 24px));
  max-width: min(600px, calc(100vw - 24px));
  padding: 0;
  gap: 0;
}
.modal-text { font-size: 13px; line-height: 1.5; color: #ECE9E4; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

.modal-lg { width: 360px; }

.chapter-list {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
  border-top: 1px solid rgba(236,233,228,0.06);
  border-bottom: 1px solid rgba(236,233,228,0.06);
}
.chapter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(236,233,228,0.06);
}
.chapter-row:last-child { border-bottom: none; }
.chapter-row-title {
  font-family: 'Lora', serif;
  font-size: 12.5px;
  color: #ECE9E4;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chapter-row-min { font-size: 9.5px; color: #8A8479; flex: none; }
.modal-summary { font-size: 10px; letter-spacing: 0.04em; color: #8A8479; }

.btn-cancel {
  background: none;
  border: 1px solid rgba(236,233,228,0.15);
  color: #ECE9E4;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 10px;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.btn-cancel:hover { background: rgba(236,233,228,0.06); }

.btn-danger {
  background: #D6392A;
  border: none;
  color: #ECE9E4;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.btn-danger:hover:not(:disabled) { opacity: 0.9; }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

.toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  width: 300px;
  max-width: calc(100% - 32px);
}
.toast {
  background: #1C1D22;
  border-left: 3px solid #6E8AA3;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.toast-glyph {
  font-size: 12px;
  font-weight: 700;
  flex: none;
  width: 14px;
  text-align: center;
}
.toast-text { font-size: 11px; line-height: 1.5; color: #ECE9E4; flex: 1; }
.toast-dismiss {
  background: none;
  border: none;
  color: #6B6660;
  font-size: 12px;
  cursor: pointer;
  flex: none;
}
.toast-dismiss:hover { color: #ECE9E4; }