/* Shared account and application controls match the public navigation */
:root {
  --control-radius: 16px;
  --control-fill: rgba(77, 124, 255, .16);
  --control-border: rgba(77, 124, 255, .45);
  --control-shadow: inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -1px 0 rgba(20, 40, 120, .25),
    0 10px 28px rgba(77, 124, 255, .18);
  --control-ease: cubic-bezier(.2, .8, .2, 1);
}

.auth-btn, .oauth-btn, .btn, .sess-ctrl-set, .user-area .auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 44px;
  height: auto;
  max-width: 100%;
  padding: .625rem 1.5rem;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .32), transparent 44%), var(--control-fill);
  color: var(--text);
  box-shadow: var(--control-shadow);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  font: 400 .875rem/1.5 var(--font);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.auth-btn { width: auto; }
.auth-form .auth-btn { min-width: 8rem; }
.user-area .auth-btn { min-width: 44px; padding: 0 24px; line-height: 1; }
.oauth-btn { width: 100%; background-color: rgba(255, 255, 255, .48); box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(77, 124, 255, .08); }
.oauth-btn svg { flex: none; }
.auth-btn:hover, .oauth-btn:hover, .btn:hover, .sess-ctrl-set:hover, .user-area .auth-btn:hover {
  color: var(--text);
  background-color: rgba(77, 124, 255, .24);
  border-color: rgba(77, 124, 255, .65);
  opacity: 1;
}
@media (hover: hover) {
  .auth-btn:not(:disabled):hover, .oauth-btn:not(:disabled):hover,
  .btn:not(:disabled):hover, .user-area .auth-btn:not(:disabled):hover { transform: translateY(-1px); }
}
.auth-btn:active, .oauth-btn:active, .btn:active, .user-area .auth-btn:active { transform: none; }
.auth-btn:disabled, .oauth-btn:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.user-area .auth-btn::before { display: none; }
.user-area .auth-btn:focus-visible { outline-color: var(--text); box-shadow: 0 0 0 5px var(--surface); }
.btn-stop, .del-confirm { color: #a83a35; border-color: rgba(168, 58, 53, .5); background-color: rgba(229, 96, 94, .1); box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(168, 58, 53, .08); }
.btn-stop:hover, .del-confirm:hover, .del-confirm:disabled { color: #a83a35; background-color: rgba(229, 96, 94, .18); border-color: #a83a35; }

.auth-page { padding: clamp(1.5rem, 6vh, 4rem) clamp(1rem, 4vw, 2rem) 3rem; }
.auth-container { max-width: 26rem; min-width: 0; }
.auth-card { padding: 0; }
.auth-header { gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.auth-back { font-size: .875rem; min-height: 44px; }
.auth-title { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 600; line-height: 1.2; margin: 0 0 .75rem; }
.auth-subtitle { font-size: 1rem; margin: 0 0 2rem; }
.auth-form { gap: 1.25rem; }
.form-group input { min-width: 0; width: 100%; min-height: 48px; font-size: 1rem; padding: .75rem 1rem; border-radius: var(--control-radius) !important; }
.form-group input::placeholder { font-size: .875rem; color: var(--dim); opacity: 1; }
.password-wrapper { min-width: 0; }
.password-wrapper input { padding-right: 3.5rem; }
.password-toggle { width: 44px; height: 44px; right: .25rem; border-radius: 12px; }
.form-group label, .auth-footer, .auth-context, .form-hint, .password-requirements { font-size: .875rem; }
.form-hint, .auth-footer, .auth-context, .error-message, .success-message { overflow-wrap: anywhere; }
.error-message { color: #a83a35; border-color: #a83a35; }
.success-message { color: #176744; border-color: #176744; }

/* Quiet selections keep navigation distinct from account actions */
.nav-item.active, .sidebar .nav-item.active,
.custom-dropdown-option.selected, .custom-dropdown.open .custom-dropdown-header {
  background: #eae9e6;
  border-color: #c9c6c0;
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  font-weight: 500;
}
.nav-item { border: 1px solid transparent; border-radius: 12px; }
.custom-dropdown-header {
  min-height: 36px; padding: .375rem .75rem; border-radius: 10px;
  background: #f1f0ed; font: 400 .8125rem/1.5 var(--font);
  transition: background-color 160ms ease, border-color 160ms ease;
}
.custom-dropdown-header:hover { background: #eae9e6; }
.custom-dropdown-options {
  border-radius: 12px; padding: .25rem; background: rgba(250, 249, 247, .98);
  box-shadow: 0 8px 24px rgba(25, 24, 22, .1);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transform-origin: top left;
}
.custom-dropdown.open .custom-dropdown-options { animation: dropdown-enter 160ms var(--control-ease); }
.custom-dropdown-chevron { transition: transform 180ms var(--control-ease); }
.custom-dropdown-option {
  min-height: 36px; padding: .375rem .75rem; border: 1px solid transparent;
  border-radius: 8px; font-size: .8125rem; line-height: 1.5;
  display: flex; align-items: center;
}
.custom-dropdown-option.selected:hover { background: #dedcd7; }
.custom-dropdown-option.active { outline: 1px solid #8b8882; outline-offset: -2px; }
.custom-dropdown-option.off { background: transparent; box-shadow: none; border-color: transparent; }
@keyframes dropdown-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (pointer: coarse), (max-width: 48rem) {
  .custom-dropdown-header, .custom-dropdown-option { min-height: 44px; }
}
.hm-switch { width: 36px; height: 22px; background: #e4e2de; border-color: #8b8882; }
.hm-switch::before { content: ''; position: absolute; inset: auto; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.hm-switch::after { top: 2px; left: 2px; width: 16px; height: 16px; }
.hm-switch.on { background: var(--control-fill); border-color: var(--control-border); box-shadow: var(--control-shadow); }
.hm-switch.on::after { transform: translateX(14px); background: #315bd2; }
.std-state { color: var(--dim); }
.std-name { font-size: 1rem; line-height: 1.3; }
.std-chev { width: 1rem; height: 1rem; color: var(--dim); transition: transform .35s var(--control-ease); }
.std-chev::before, .std-chev::after { left: 50%; top: 50%; border-radius: 2px; transform: translate(-50%, -50%); }
.std-chev::before { width: 100%; height: 2px; }
.std-chev::after { width: 2px; height: 100%; transition: transform .35s var(--control-ease); }
.std-card.open .std-chev { transform: rotate(180deg); }
.std-card.open .std-chev::after { transform: translate(-50%, -50%) rotate(90deg); }
.std-body-wrap { transition: grid-template-rows .35s var(--control-ease); }
.std-body { min-height: 0; }
.std-body[aria-hidden="true"] { visibility: hidden; }
.std-body[aria-hidden="false"] { visibility: visible; }

.overview-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem; }
.card { overflow-wrap: anywhere; }
.overview-summary > div { flex: 1 1 20rem; }
.overview-summary h2 { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.35; margin-bottom: .5rem; }
.overview-summary p { max-width: 65ch; color: var(--dim); font-size: .9375rem; line-height: 1.6; }
.ov-empty p { margin: .75rem auto 1.5rem; max-width: 44ch; line-height: 1.6; }
.sess-row:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }
.sess-meta, .sess-metrics, .sess-count, .ov-enf-when { font-family: var(--font); }
.sess-metrics { font-size: .8125rem; }
.sess-metrics::after { content: '+'; display: inline-block; margin-left: .75rem; font-size: 1rem; }
.sess-item.open .sess-metrics::after { content: '−'; }
.ov-enf-gate { font-family: var(--font); background: transparent; padding: 0; color: var(--text); }
.ov-enf-gates { gap: .5rem 1rem; }
.ov-enf-row { padding: .75rem 0; gap: 1rem; flex-wrap: wrap; }
.ov-rank-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.ov-rank-name { white-space: normal; overflow-wrap: anywhere; }
.session-selector-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }

@media (max-width: 48rem) {
  .sidebar .nav-item.active { color: #f5f5f5; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); box-shadow: none; }
  .sidebar .nav-item.active:hover { background: rgba(255, 255, 255, .18); }
  .auth-header { margin-bottom: 2rem; }
  .std-head { flex-wrap: wrap; }
  .std-heading { flex: 1 1 10rem; }
  .std-ctrl { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-btn:hover, .oauth-btn:hover, .btn:hover, .user-area .auth-btn:hover { transform: none; }
  .std-chev, .std-chev::after, .std-body-wrap, .custom-dropdown-chevron, .custom-dropdown-header { transition: none; }
  .custom-dropdown.open .custom-dropdown-options { animation: none; }
}

/* Catalog entries describe coverage; only Settings contains switches */
.gate-views { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.gate-views button, .catalog-retry {
  min-height: 44px; padding: .5rem 1rem; border: 1px solid #c9c6c0;
  border-radius: 10px; background: transparent; color: var(--text);
  font: 400 .875rem/1.5 var(--font); cursor: pointer; box-shadow: none;
}
.gate-views button[aria-pressed="true"], .catalog-retry:hover { background: #eae9e6; }
.gate-views button:focus-visible, .catalog-retry:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
#gate-settings-view[hidden], #gate-catalog-view[hidden] { display: none; }
.catalog-count, .catalog-status { color: var(--dim); font-size: .875rem; line-height: 1.6; margin-bottom: 1.5rem; }
.catalog-group + .catalog-group { margin-top: 2.5rem; }
.catalog-heading { font-size: 1rem; font-weight: 600; line-height: 1.4; margin-bottom: .75rem; }
.catalog-list { margin: 0; padding: 0; list-style: none; }
.catalog-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, .35fr); gap: 1rem 2rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.catalog-name { font-size: .875rem; font-weight: 500; line-height: 1.5; margin: 0 0 .25rem; }
.catalog-description, .catalog-scope { color: var(--dim); font-size: .875rem; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
@media (max-width: 36rem) {
  .catalog-row { grid-template-columns: minmax(0, 1fr); gap: .375rem; }
}