@layer components {
  .ui-icon, [data-icon] svg { width: 1em; height: 1em; stroke-width: 1.7; }
  .lang-toggle { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 0.2rem; padding: 0.2rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); }
  .lang-btn { min-width: 2.4rem; min-height: 2.25rem; border: 0; border-radius: 0.35rem; background: transparent; color: var(--text-muted); font-size: 0.78rem; font-weight: 700; cursor: pointer; }
  .lang-btn.active, .lang-btn[aria-pressed="true"] { background: var(--surface-strong); color: var(--text-on-strong); }
  .sidebar .lang-toggle { border-color: rgb(255 255 255 / 0.18); background: rgb(255 255 255 / 0.06); }
  .sidebar .lang-btn { color: rgb(255 255 255 / 0.62); }
  .sidebar .lang-btn.active { background: #fff; color: #0d1a2f; }

  .btn, button[class*="btn"] { font-weight: 650; }
  .btn, .btn-primary, .btn-outline, .btn-accept-disclaimer, .sidebar-install-action {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast);
  }
  .btn-primary, .btn-accept-disclaimer { background: var(--action); color: #fff; }
  html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn-accept-disclaimer { color: #07101f; }
  .btn-primary:hover, .btn-accept-disclaimer:hover { background: var(--action-hover); }
  .btn-outline { border-color: var(--line-strong); background: transparent; color: var(--text); }
  .btn:active, .btn-primary:active, .btn-outline:active, .btn-accept-disclaimer:active { transform: translateY(1px); }

  .search-results-dropdown { position: absolute; z-index: var(--z-overlay); top: calc(100% + 0.45rem); left: 0; right: 0; max-height: min(28rem, 70vh); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface-raised); box-shadow: var(--shadow-float); }
  .search-result-item, .search-results-dropdown a { width: 100%; display: block; padding: 0.85rem 1rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; }
  .search-result-item:last-child, .search-results-dropdown a:last-child { border-bottom: 0; }
  .search-result-item:hover, .search-result-item.keyboard-active, .search-results-dropdown a:hover { background: var(--action-soft); }
  .search-result-title { font-weight: 680; }
  .search-result-desc, .search-result-no-match { margin-top: 0.15rem; color: var(--text-muted); font-size: 0.8rem; }
  .search-result-no-match { padding: 1rem; }

  .offline-banner { display: none; align-items: center; gap: 0.65rem; margin-bottom: 1rem; padding: 0.8rem 1rem; border: 1px solid var(--warning); border-radius: var(--radius-control); background: var(--warning-soft); color: var(--text); }
  .offline-banner.visible { display: flex; }

  .card, .content-card, .chart-card, .stat-card, .info-card, .data-card, .weather-card, .calendar-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--surface);
  }
  .stats-grid, .grid-2, .grid-3, .grid-4 { display: grid; gap: 1rem; }
  .stats-grid, .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { min-height: 9rem; padding: 1.1rem; }
  .stat-label { color: var(--text-muted); font-size: 0.82rem; }
  .stat-value { margin-top: 0.45rem; color: var(--text); font-size: clamp(1.75rem, 3vw, 2.8rem); font-weight: 730; letter-spacing: -0.045em; }
  .stat-sub, .stat-change { margin-top: 0.35rem; color: var(--text-muted); font-size: 0.78rem; }

  .loading-skeleton, .skeleton { position: relative; overflow: hidden; background: var(--canvas-muted); color: transparent; }
  .loading-skeleton::after, .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent); transform: translateX(-100%); animation: v5-shimmer 1.4s infinite; }
  .error-state, .empty-state { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); color: var(--text-soft); }
  .error-state { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }

  .disclaimer-bottom-toast { position: fixed; z-index: var(--z-modal); left: 50%; bottom: 1rem; width: min(calc(100% - 2rem), 60rem); transform: translateX(-50%); display: flex; align-items: center; gap: 1rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface-raised); box-shadow: var(--shadow-float); }
  .disclaimer-toast-content { flex: 1; }
  .disclaimer-toast-text { color: var(--text-soft); font-size: 0.86rem; }
  .disclaimer-toast-btn { flex: 0 0 auto; min-height: 2.5rem; padding: 0.55rem 0.8rem; border: 0; border-radius: var(--radius-control); background: var(--surface-strong); color: var(--text-on-strong); cursor: pointer; }

  .disclaimer-overlay, .ktmy-pwa-overlay { position: fixed; z-index: var(--z-modal); inset: 0; display: none; place-items: center; padding: 1rem; background: rgb(3 10 21 / 0.72); }
  .disclaimer-overlay.visible { display: grid; }
  .disclaimer-modal, .ios-guide-box { position: relative; width: min(100%, 42rem); max-height: min(88dvh, 54rem); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-float); }
  .disclaimer-header, .disclaimer-body, .disclaimer-footer { padding: 1.25rem clamp(1.1rem, 3vw, 2rem); }
  .disclaimer-header { border-bottom: 1px solid var(--line); }
  .disclaimer-badge { margin-bottom: 0.55rem; color: var(--danger); font-size: 0.76rem; font-weight: 750; }
  .disclaimer-section { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.9rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
  .disclaimer-section:last-child { border-bottom: 0; }
  .disclaimer-text p { margin-top: 0.4rem; color: var(--text-soft); }
  .disclaimer-footer { border-top: 1px solid var(--line); }

  .feedback-fab { position: fixed; z-index: var(--z-header); right: 1rem; bottom: 1rem; width: 3rem; height: 3rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--action); color: #fff; box-shadow: var(--shadow-float); cursor: pointer; }
  .feedback-card { position: fixed; z-index: var(--z-overlay); right: 1rem; bottom: 4.7rem; width: min(22rem, calc(100% - 2rem)); border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface-raised); box-shadow: var(--shadow-float); }
  .feedback-card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--line); }
  .feedback-card-header button { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
  .feedback-card-body { display: grid; gap: 0.5rem; padding: 1rem; }
  .feedback-link-btn { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem; border-radius: var(--radius-control); background: var(--canvas-muted); color: var(--text); text-decoration: none; }

  .ktmy-pwa-overlay.visible { display: grid; }
  .install-dialog { display: grid; gap: 1.25rem; width: min(100%, 38rem); padding: clamp(1.25rem, 4vw, 2rem); }
  .install-dialog > div:first-of-type { text-align: left; }
  .install-dialog .ios-guide-close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--text-soft); cursor: pointer; }
  .ktmy-install-preview { width: 100%; max-height: 12rem; margin-bottom: 1.25rem; border-radius: var(--radius-panel); object-fit: cover; object-position: 50% 18%; }
  .install-dialog-subtitle { max-width: 50ch; margin-top: 0.45rem; color: var(--text-soft); }
  .install-dialog-action { display: flex; align-items: center; gap: 0.75rem; }
  .install-status { color: var(--success); font-weight: 680; }
  .platform-tabs { display: flex; gap: 0.35rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .platform-tab-btn { min-height: 2.5rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-muted); cursor: pointer; }
  .platform-tab-btn.active { background: var(--action-soft); color: var(--action); }
  .guide-card { padding: 1rem; border-left: 3px solid var(--action); background: var(--canvas-muted); text-align: left; }
  .guide-card h3 { display: flex; align-items: center; gap: 0.45rem; font-size: 1rem; }
  .guide-card ol { margin-top: 0.65rem; padding-left: 1.25rem; color: var(--text-soft); }
  .guide-card li + li { margin-top: 0.35rem; }
  .install-qr-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); text-align: left; }
  .install-qr-row button { padding: 0.35rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: #fff; cursor: pointer; }
  .install-qr-row img { display: block; width: 4.5rem; height: 4.5rem; }
  .install-qr-row h3 { display: flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; }
  .install-qr-row p { margin-top: 0.25rem; color: var(--text-muted); font-size: 0.82rem; }
  .qr-lightbox { position: fixed; z-index: calc(var(--z-modal) + 1); inset: 0; display: grid; place-items: center; padding: 1rem; background: rgb(3 10 21 / 0.8); }
  .qr-lightbox-close { position: fixed; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border: 1px solid rgb(255 255 255 / 0.3); border-radius: var(--radius-control); background: transparent; color: #fff; cursor: pointer; }
  .qr-lightbox-box { display: grid; gap: 0.75rem; justify-items: center; padding: 1rem; border-radius: var(--radius-panel); background: #fff; color: #0d1a2f; }
  .qr-lightbox-img { width: min(18rem, 72vw); height: auto; }

  .footer { margin-top: clamp(4rem, 8vw, 8rem); border-top: 1px solid var(--line); }
  .footer .container { padding: 2.5rem 0 6rem; }
  .footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(10rem, 0.7fr)); gap: 2rem; }
  .footer-brand p { max-width: 38rem; color: var(--text-soft); }
  .footer-links-group ul { list-style: none; margin-top: 0.8rem; }
  .footer-links-group li + li { margin-top: 0.35rem; }
  .footer-links-group a { color: var(--text-soft); text-decoration: none; }
  .footer-links-group a:hover { color: var(--action); text-decoration: underline; }
  .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
}

/* Shared form controls sit outside the component layer so they can keep their
   shape when a route adds a more specific layout rule (for example, .city-select).
   Native behavior remains intact: keyboard selection, autofill, validation and
   number steppers are deliberately left to the browser. */
:root {
  --control-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23657286' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}

html[data-theme="dark"] { --control-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23b9c7d9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); }

:where(input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]), select, textarea) {
  width: 100%;
  min-height: 2.875rem;
  padding: .68rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: .65rem;
  background-color: var(--surface);
  color: var(--text);
  font: inherit;
  line-height: 1.25;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background-color var(--duration-fast), color var(--duration-fast);
}

:where(input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]), select, textarea)::placeholder { color: var(--text-muted); opacity: 1; }

:where(input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]), select, textarea):hover {
  border-color: var(--line-strong);
  border-color: color-mix(in srgb, var(--action) 48%, var(--line-strong));
}

:where(input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]), select, textarea):focus {
  border-color: var(--action);
  box-shadow: 0 0 0 3px rgb(27 87 207 / 20%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 20%, transparent);
  outline: none;
}

:where(input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]), select, textarea)[aria-invalid="true"],
:where(input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]), select, textarea):user-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgb(204 48 66 / 18%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

:where(input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]), select, textarea):disabled {
  border-color: var(--line);
  background-color: var(--canvas-muted);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: .72;
}

select:not([multiple]) {
  appearance: none;
  padding-right: 2.75rem;
  background-image: var(--control-chevron);
  background-position: right .85rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  cursor: pointer;
}

select[multiple] { min-height: 8rem; }
select option { background: var(--surface); color: var(--text); }

input[type="checkbox"],
input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--action);
}

textarea { min-height: 7rem; resize: vertical; }

.v5-route-content label:not(.weather-location-label) {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .35rem;
  color: var(--text-soft);
  font-size: .78rem;
  font-weight: 680;
  line-height: 1.25;
}

.search-input-wrapper input {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.search-input-wrapper input:hover,
.search-input-wrapper input:focus { border-color: transparent; box-shadow: none; }

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
  cursor: not-allowed;
  opacity: .62;
}