@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700;800;900&display=swap');

:root {
  --bg: #0B1220;
  --bg-overlay: rgba(16, 26, 44, .62);
  --panel: #172235;
  --panel-raised: #1C2A40;
  --button: #2A364B;
  --stroke: #34445E;
  --stroke-soft: #26364F;
  --cyan: #00D1B8;
  --cyan-2: #25CBD9;
  --text: #EEF5FF;
  --muted: #8EA0BA;
  --muted-dark: #5F708B;
  --card: #101A2A;
  --success-bg: #123D3A;
  --success-bg-2: #173D3E;
  --success-text: #7EF4C7;
  --warning: #FFBE55;
  --warning-bg: #25233B;
  --warning-stroke: #6C5630;
  --red: #FF6B6B;
  --purple: #8F7CFF;
  --shadow-small: 0 10px 24px -12px rgba(0, 0, 0, .36);
  --shadow-panel: 0 18px 38px -12px rgba(0, 0, 0, .50);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-card: 12px;
  --radius-control: 8px;
  --accent-soft: rgba(0, 209, 184, .14);
  --accent-muted: rgba(126, 244, 199, .72);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.2;
}
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app {
  position: fixed;
  inset: 0;
  overflow: auto;
  padding: max(16px, env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom));
  background:
    radial-gradient(210px 210px at calc(50% + 160px) -70px, rgba(37,203,217,.13), transparent 70%),
    radial-gradient(250px 250px at calc(50% - 230px) 120px, rgba(143,124,255,.11), transparent 72%),
    radial-gradient(210px 210px at calc(50% + 165px) calc(100% - 70px), rgba(0,209,184,.09), transparent 72%),
    linear-gradient(var(--bg-overlay), var(--bg-overlay)),
    var(--bg);
}

.app::before {
  content: '';
  position: fixed;
  inset: 112px calc(50% - 171px) auto;
  width: 342px;
  height: min(640px, calc(100vh - 160px));
  pointer-events: none;
  opacity: .7;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 56px);
}

#content,
#loading,
#error {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  padding: 0 24px 8px;
}

.hidden { display: none !important; }

.loading,
.error,
.empty-wide {
  min-height: 70vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  text-align: center;
  color: var(--muted);
}
.loading::before {
  content: '';
  width: 56px;
  height: 56px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
  box-shadow: var(--shadow-panel);
  animation: pulse 1.1s ease-in-out infinite alternate;
}
@keyframes pulse { to { transform: translateY(-4px); opacity: .72; } }
.error { color: #FFC2C2; }
.reload-btn,
.install-btn {
  border: 1px solid rgba(0,209,184,.32);
  background: var(--button);
  color: var(--text);
  border-radius: 8px;
  min-height: 44px;
  padding: 10px 16px;
  box-shadow: var(--shadow-small);
  cursor: pointer;
}
.install-btn { position: fixed; right: 18px; bottom: 18px; z-index: 5; }

.top-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.top-bar-left {
  min-width: 0;
  display: flex;
  align-items: stretch;
}
.top-bar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.top-bar select,
.branch-select-button {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-control);
  background: var(--button);
  border: 1px solid var(--stroke);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.branch-dropdown {
  position: relative;
  width: 100%;
}
.branch-select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-small);
}
.branch-select-button::after {
  content: '⌄';
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  opacity: .95;
}
.branch-dropdown.open .branch-select-button::after { transform: rotate(180deg); }
.branch-select-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  display: none;
  padding: var(--space-2);
  border-radius: var(--radius-card);
  background: var(--panel-raised);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-panel);
}
.branch-dropdown.open .branch-select-menu { display: grid; gap: var(--space-1); }
.branch-select-option {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.branch-select-option:hover,
.branch-select-option:focus-visible {
  background: rgba(42,54,75,.88);
  border-color: rgba(0,209,184,.20);
}
.branch-select-option.active {
  background: rgba(0,209,184,.15);
  border-color: rgba(0,209,184,.34);
  color: var(--success-text);
}
.menu-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--stroke);
  border-radius: 5px;
  background: var(--button);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.menu-icon span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--cyan);
  border-radius: 1px;
}

.segmented-tabs {
  display: flex;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--stroke-soft);
  border-radius: 4px;
  padding: 4px;
  margin-bottom: 16px;
}
.branch-toolbar {
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px;
  gap: 12px;
  align-items: center;
  padding: 16px 18px 14px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  box-shadow: var(--shadow-panel);
  margin-bottom: 16px;
}
.open-badge,
.available-badge,
.now-pill,
.today-badge,
.now-badge,
.closed-badge,
.free-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 700;
}
.open-badge {
  min-width: 82px;
  height: 26px;
  padding: 0 12px;
  font-size: 11px;
  color: var(--success-text);
  background: var(--success-bg);
  border: 1px solid rgba(0,209,184,.24);
}
.open-badge.is-closed { color: #FFC2C2; background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.28); }
.branch-name-row { margin-top: 6px; display: flex; gap: 8px; align-items: center; min-width: 0; }
.branch-name-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.branch-name-row select {
  max-width: 130px;
  min-height: 32px;
  color: var(--text);
  background: var(--button);
  border: 1px solid rgba(0,209,184,.28);
  border-radius: 5px;
  padding: 4px 24px 4px 8px;
}
.branch-contact { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--muted); font-size: 11px; }
.branch-time { text-align: right; min-width: 0; }
.branch-time span { display: block; color: var(--muted-dark); font-size: 10px; }
.branch-time strong { display: block; color: var(--text); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.branch-time em { display: block; color: var(--muted); font-style: normal; font-size: 10px; }

.segmented-tabs {
  height: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  padding: 6px;
  border-radius: var(--radius-card);
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  margin-bottom: 26px;
}
.top-bar .segmented-tabs {
  margin-bottom: 0;
  align-self: stretch;
}
.tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  min-height: 44px;
}
.tab.active { background: var(--button); color: var(--text); border-color: rgba(0,209,184,.22); box-shadow: var(--shadow-small); }
button:focus-visible,
select:focus-visible,
summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
button:active, summary:active { transform: translateY(1px); }

.content-section { display: grid; gap: var(--space-6); padding-bottom: 52px; }
.section-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2); }
.section-title-row h2 { margin: 0; font-size: 28px; line-height: 1.05; font-weight: 600; letter-spacing: -.01em; }
.section-title-row span { color: var(--accent-muted); font-size: 13px; white-space: nowrap; }

.accordion {
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  box-shadow: var(--shadow-small);
}
.accordion[open] { border-radius: var(--radius-card); box-shadow: var(--shadow-panel); }
.accordion:not([open]) { background: rgba(23, 34, 53, .78); }
.accordion-summary {
  list-style: none;
  min-height: 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  user-select: none;
}
.accordion-summary::-webkit-details-marker { display: none; }
.accordion[open] .accordion-summary { min-height: 76px; background: var(--panel-raised); }
.group-title { color: var(--text); font-size: 18px; line-height: 1.15; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accordion[open] .group-title { font-size: 20px; }
.group-meta { margin-top: var(--space-1); color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accordion-side { display: flex; align-items: center; gap: var(--space-3); }
.summary-price { display: grid; text-align: right; color: var(--accent-muted); font-size: 18px; font-weight: 600; }
.summary-price small { color: rgba(142,160,186,.72); font-size: 12px; font-weight: 400; }
.now-pill { min-width: 72px; height: 24px; color: var(--success-text); background: var(--success-bg-2); border: 1px solid rgba(0,209,184,.24); font-size: 10px; }
.chevron { color: var(--muted); font-size: 22px; line-height: 1; transition: transform .18s ease; }
.accordion[open] .chevron { transform: rotate(90deg); }
.accordion-body { padding: 0 var(--space-6) var(--space-6); }

.tariff-card {
  display: grid;
  gap: var(--space-5);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  background: rgba(16,26,42,.88);
  border: 0;
  box-shadow: var(--shadow-small);
}
.tariff-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; }
.tariff-copy { min-width: 0; display: grid; gap: var(--space-2); }
.title { font-size: 24px; line-height: 1.05; color: var(--text); font-weight: 600; letter-spacing: -.01em; }
.tariff-subline { color: var(--muted); font-size: 13px; line-height: 1.25; }
.tariff-summary { display: grid; justify-items: end; gap: var(--space-1); text-align: right; }
.free-badge { min-height: 22px; padding: 0 var(--space-2); color: rgba(255,190,85,.84); background: rgba(255,190,85,.10); border: 1px solid rgba(255,190,85,.18); font-size: 12px; font-weight: 600; }
.price-line { display: flex; align-items: baseline; gap: var(--space-3); margin: 0; }
.money { display: block; font-size: 32px; line-height: .95; font-weight: 700; color: var(--cyan); letter-spacing: -.02em; }
.unit { color: rgba(142,160,186,.72); font-size: 13px; font-weight: 500; }
.today-line { display: none; }
.weekday-chips { display: grid; grid-template-columns: repeat(7, minmax(32px, 1fr)); gap: var(--space-2); margin: 0; }
.weekday-chip { min-width: 0; height: 32px; display: grid; place-items: center; border-radius: var(--radius-control); color: var(--muted); background: rgba(42,54,75,.62); border: 1px solid rgba(38,54,79,.46); font-size: 12px; font-weight: 600; padding: 0; margin: 0; cursor: pointer; position: relative; }
.weekday-chip.current { color: var(--bg); background: rgba(0,209,184,.95); border-color: rgba(0,209,184,.40); }
.weekday-chip.closed:not(.current) { color: #FFC2C2; border-color: rgba(255,107,107,.22); background: rgba(255,107,107,.08); }
.weekday-chip.today-marker:not(.current)::after { content: ''; position: absolute; bottom: 3px; left: 50%; width: 4px; height: 4px; border-radius: 999px; background: var(--cyan); transform: translateX(-50%); }
.week-list { display: grid; gap: 0; }
.week-day-block { border: 0; border-radius: var(--radius-control); overflow: hidden; background: rgba(23,34,53,.62); }
.week-day-block.today { box-shadow: 0 0 0 1px rgba(0,209,184,.22) inset; }
.week-day-block.closed { border-color: rgba(255,107,107,.28); background: rgba(255,107,107,.045); }
.week-day-title { margin: 0; padding: var(--space-3) var(--space-4); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; color: var(--text); font-size: 16px; line-height: 1.2; font-weight: 600; background: rgba(28,42,64,.72); }
.week-row { display: grid; grid-template-columns: minmax(112px, 1fr) minmax(92px, auto); gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); border-top: 1px solid rgba(52,68,94,.30); }
.week-row.now { background: var(--accent-soft); box-shadow: 3px 0 0 var(--cyan) inset; }
.week-time { color: var(--accent-muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.week-row.now .week-time { color: var(--cyan); }
.week-price { color: var(--text); font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.week-free { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.week-empty,
.week-closed,
.empty { padding: var(--space-3) var(--space-4); color: var(--muted); font-size: 13px; }
.week-closed { color: var(--red); font-weight: 700; }
.today-badge,
.now-badge,
.closed-badge { min-height: 18px; padding: 0 var(--space-2); font-size: 11px; font-weight: 600; }
.today-badge,
.now-badge { color: var(--accent-muted); background: rgba(0,209,184,.10); border: 1px solid rgba(0,209,184,.16); }
.closed-badge { color: #FFC2C2; background: rgba(255,107,107,.14); border: 1px solid rgba(255,107,107,.25); }

.package-list { display: grid; gap: 12px; }
.package-card {
  min-height: 82px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 18px;
  border-radius: 6px;
  background: var(--card);
  border: 1px solid rgba(52,68,94,.58);
  box-shadow: var(--shadow-small);
}
.package-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; color: var(--purple); background: rgba(143,124,255,.16); border: 1px solid rgba(143,124,255,.28); font-size: 13px; font-weight: 700; }
.package-title { color: var(--text); font-size: 15px; font-weight: 600; }
.package-meta { margin-top: 5px; color: var(--muted); font-size: 11px; }
.available-badge { margin-top: 8px; min-height: 20px; padding: 0 9px; color: var(--success-text); background: var(--success-bg); border: 1px solid rgba(0,209,184,.20); font-size: 9px; }
.package-price { text-align: right; white-space: nowrap; }
.package-price b { display: block; font-size: 18px; color: var(--text); font-weight: 600; }
.package-price span { display: block; color: var(--cyan); font-size: 11px; }

.bottom-nav {
  min-height: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 0 22px;
  border-radius: 5px;
  color: var(--muted);
  background: rgba(23,34,53,.95);
  border: 1px solid var(--stroke-soft);
}
.bottom-nav-item {
  text-align: center;
  font-size: 11px;
  white-space: nowrap;
}
.bottom-nav-item.active { color: var(--cyan); }
.home-indicator {
  width: 116px;
  height: 4px;
  margin: 3px auto 0;
  border-radius: 2px;
  background: rgba(255,255,255,.28);
}

.empty-wide { min-height: 160px; padding: 22px; border: 1px dashed rgba(52,68,94,.7); border-radius: 6px; background: rgba(23,34,53,.52); color: var(--muted); }

@media (hover: hover) {
  .tab:hover,
  .qr-button:hover,
  .accordion-summary:hover { filter: brightness(1.08); }
}

/* ---------- Tablet: 600–1024px ---------- */
@media (min-width: 600px) {
  #content, #loading, #error {
    max-width: 680px;
  }

  /* Hide the fixed-position grid-line overlay — it's aligned for mobile 390px */
  .app::before { display: none; }

  /* Two-column package grid */
  .package-list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Slightly roomier touch targets */
  .accordion-summary { min-height: 80px; }
  .tab { font-size: 14px; }
  .weekday-chip { height: 30px; font-size: 10px; }
}

/* ---------- Desktop / wide: >1024px ---------- */
@media (min-width: 1025px) {
  #content, #loading, #error {
    max-width: 1060px;
  }

  /* Two-column accordion layout for host groups */
  .accordion-list {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
  .accordion-list > .section-title-row,
  .accordion-list > .empty-wide {
    grid-column: 1 / -1;
  }

  /* Two columns for packages inside accordion bodies */
  .package-list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Wider weekday chips inside wider tariff cards */
  .weekday-chips { gap: var(--space-2); }
  .weekday-chip { height: 32px; font-size: 12px; }
}

@media (max-width: 359px) {
  #content, #loading, #error { padding-left: 16px; padding-right: 16px; }
  .app::before { display: none; }
  .branch-toolbar { grid-template-columns: 1fr; }
  .branch-time { text-align: left; }
  .package-card { grid-template-columns: 34px minmax(0, 1fr); }
  .package-price { grid-column: 2; text-align: left; }
  .weekday-chips { gap: 5px; }
}

@media (max-width: 599px) {
  .top-bar { grid-template-columns: 1fr; }
  .segmented-tabs { width: 100%; }
}

@media (max-width: 680px) {
  .accordion-summary {
    padding: var(--space-5) var(--space-6);
  }

  .accordion-body {
    padding: 0 var(--space-4) var(--space-4);
  }

  .tariff-card {
    width: 100%;
    margin-inline: auto;
    padding: var(--space-5) var(--space-4);
  }

  .tariff-head {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--space-3);
  }

  .tariff-copy,
  .tariff-summary {
    width: 100%;
    justify-items: center;
    text-align: center;
  }

  .weekday-chips {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
  }

  .week-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-3);
  }
}