:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --accent:#ef4444;
  --topbar:#111827;
}
/* Global reset: no margins or extra padding anywhere */
*{margin:0;padding:0;box-sizing:border-box}
html,body,#app{height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent}
.topbar{
  height:56px;background:linear-gradient(90deg,#0f172a,#111827);color:#fff;display:flex;align-items:center;gap:6px;padding:0 6px;
}
.icon-btn{
  appearance:none;border:0;background:transparent;color:#fff;font-size:16px;padding:6px;border-radius:10px;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.icon-btn:active{transform:scale(0.98)}

/* Make reload button share the same outer design as the theme toggle */
.icon-btn.toggle-like{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding:6px;
  border-radius:10px;
  min-width:40px;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .12s, box-shadow .12s, background .12s;
}

/* Pressed state outline behavior same as theme toggle */
.icon-btn.toggle-like[aria-pressed="true"]{
  outline: 2px solid rgba(255,255,255,0.12);
  box-shadow: 0 2px 8px rgba(2,6,23,0.18);
}
.brand{font-weight:700;font-size:17px;letter-spacing:0.5px}
.menu{display:flex;gap:6px;margin-left:-8px}
.tab{
  background:transparent;border:none;color:rgba(255,255,255,0.85);padding:8px 10px;border-radius:8px;font-size:14px;display:inline-flex;align-items:center;gap:8px;
}
/* Small icon spacing inside tabs */
.tab i{font-size:16px;min-width:18px;display:inline-block}
.tab .label{line-height:1}
.tab.active{background:rgba(255,255,255,0.08)}
.actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.12);color:#fff;padding:6px 10px;border-radius:8px;font-size:13px}

main#viewport{height:calc(100vh - 56px - 42px);overflow:auto;padding:12px;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.content{background:var(--card);border-radius:12px;padding:12px;min-height:100%;box-shadow:0 2px 10px rgba(2,6,23,0.06)}

.footer{height:42px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted)}
.footer a{color:var(--accent);text-decoration:none}

.site-list{display:flex;flex-direction:column;gap:8px}
.site-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:8px;border:1px solid #eef2ff;background:#fff}
.site-item .meta{display:flex;flex-direction:column}
.site-item .meta .title{font-weight:600}
.site-item .meta .sub{font-size:13px;color:var(--muted)}

.checkbox{
  width:44px;height:32px;background:#f3f4f6;border-radius:8px;display:flex;align-items:center;padding:4px;cursor:pointer;
}
.checkbox .dot{width:22px;height:22px;background:#fff;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,0.06);transform:translateX(0);transition:transform .18s}
.checkbox.on{background:linear-gradient(90deg,#34d399,#10b981)}
.checkbox.on .dot{transform:translateX(12px)}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.45);display:flex;align-items:center;justify-content:center;z-index:9999}
.modal{background:var(--card);padding:18px;border-radius:12px;max-width:92%;width:360px;box-shadow:0 8px 30px rgba(2,6,23,0.2)}
.modal h3{margin:0 0 8px;font-size:16px}
.modal p{margin:0 0 12px;color:var(--muted);font-size:14px}
.modal .row{display:flex;gap:8px;justify-content:flex-end}
.modal .row button{padding:8px 12px;border-radius:8px;border:0;background:#111827;color:#fff}

/* Inputs */
input[type="checkbox"]{display:none}
input,button,textarea,select{touch-action:auto}

/* Prevent text selection except inputs */
*{user-select:none}
input,textarea,select{user-select:text}

/* Theme toggle button smaller styling (icon-btn already used) */
.icon-btn[aria-pressed="true"]{outline:2px solid rgba(255,255,255,0.12)}

/* Dark mode overrides applied to the app and injected content.
   Use specific selectors and !important to override inline styles in embedded pages. */
:root.dark, .dark {
  --bg: #0b1220 !important;
  --card: #0f1724 !important;
  --text: #e6eef8 !important;
  --muted: #9aa6b2 !important;
  --accent: #f87171 !important;
  --topbar: #0b1220 !important;
}

:root.dark body, .dark body,
:root.dark #app, .dark #app,
:root.dark .content, .dark .content,
:root.dark .card, .dark .card,
:root.dark .map-card, .dark .map-card,
:root.dark .map-body, .dark .map-body,
:root.dark .map-header, .dark .map-header,
:root.dark details, .dark details,
:root.dark summary, .dark summary,
:root.dark .home-box, .dark .home-box,
:root.dark .transport-detail, .dark .transport-detail,
:root.dark .river-box, .dark .river-box {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* More specific fixes for elements from embedded pages */
:root.dark .map-header, .dark .map-header {
  background-color: #0f1724 !important;
  color: var(--text) !important;
}
:root.dark .map-card, .dark .map-card { background: #0b1220 !important; border-color: rgba(255,255,255,0.04) !important; }
:root.dark .btn, .dark .btn, :root.dark .btn-maps, .dark .btn-maps {
  background: #1f2937 !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.04) !important;
}
:root.dark .warning, .dark .warning { background: #2a2f36 !important; color: var(--muted) !important; border-color: rgba(255,165,0,0.12) !important; }
:root.dark .home-box, .dark .home-box { background: #211613 !important; color: #ffd9b8 !important; border-color: rgba(255,165,0,0.12) !important; }
:root.dark .site-item, .dark .site-item { background: #0f1724 !important; border-color: rgba(255,255,255,0.04) !important; color: var(--text) !important; }
:root.dark .modal, .dark .modal { background: #0b1220 !important; color: var(--text) !important; }

/* Ensure embedded page headings and special summary headers are readable in dark mode */
:root.dark .content h1, .dark .content h1,
:root.dark .content h2, .dark .content h2,
:root.dark .content h3, .dark .content h3,
:root.dark summary.day-header, .dark summary.day-header,
:root.dark .card h1, .dark .card h1,
:root.dark .map-header span, .dark .map-header span {
  color: var(--text) !important;
}

/* Tweak Font Awesome chevrons and detail summaries for contrast */
:root.dark summary::after, .dark summary::after {
  color: var(--muted) !important;
}

/* Small screens adjustments */
@media (max-width:520px){
  .content{padding:10px}
  main#viewport{padding:10px}
  .brand{font-size:15px}
  .tab{padding:8px 8px;font-size:13px}
}