/* ── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { font-size: var(--font-size); line-height: var(--line-height); -webkit-text-size-adjust: 100%; user-select: none; }
input, textarea { user-select: text; }

body {
  font-family:      var(--font-sans);
  background-color: var(--color-bg);
  color:            var(--color-text);
  min-height:       100vh;
  display:          flex;
  flex-direction:   column;
}

a { color: var(--color-primary); text-decoration: none; -webkit-user-drag: none; }
a:hover { text-decoration: underline; }

img { display: block; max-width: 100%; }

button { cursor: pointer; font-family: inherit; font-size: inherit; }

/* ── Maintenance banner ───────────────────────────────────────────────────── */
.maintenance-banner {
  position:        fixed;
  top:             0; left: 0; right: 0;
  z-index:         2000;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             .5rem;
  background:      #d97706;
  color:           #fff;
  font-size:       .8rem;
  font-weight:     600;
  padding:         0 1rem;
}

body.has-maintenance-banner .navbar               { top: 36px; }
body.has-maintenance-banner .main-content.with-nav { padding-top: 100px; }
body.has-maintenance-banner .main-content.full-screen { padding-top: 36px; }

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.navbar {
  position:         fixed;
  top:              0; left: 0; right: 0;
  height:           64px;
  background:       var(--color-navbar-bg);
  border-bottom:    1px solid var(--color-navbar-border);
  display:          flex;
  align-items:      center;
  padding:          0 1.5rem;
  gap:              1rem;
  z-index:          100;
}

.navbar-brand { flex: 1; display: flex; align-items: stretch; }
.brand-link { color: var(--color-navbar-text); font-weight: 700; font-size: 1.1rem; text-decoration: none; cursor: default; display: flex; align-items: center; }

.navbar-tabs {
  display:     flex;
  align-items: stretch;
  padding-left: 1.5rem;
}

.nav-tab {
  display:         flex;
  align-items:     center;
  gap:             .35rem;
  padding:         0 .9rem;
  font-size:       .875rem;
  font-weight:     500;
  color:           var(--color-navbar-text);
  opacity:         .55;
  text-decoration: none;
  border-bottom:   2px solid transparent;
  transition:      opacity var(--transition), border-color var(--transition);
  white-space:     nowrap;
}
.nav-tab:hover { opacity: .85; text-decoration: none; }
.nav-tab.active { opacity: 1; border-bottom-color: var(--color-primary); }

.nav-tab-notif { gap: .4rem; }

.notif-badge {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  min-width:     18px;
  height:        18px;
  padding:       0 5px;
  background:    var(--color-danger);
  color:         #fff;
  font-size:     .7rem;
  font-weight:   700;
  border-radius: 999px;
  line-height:   1;
}

.notif-badge-sm { min-width: 16px; height: 16px; font-size: .65rem; }

.dropdown-item-notif { display: flex; align-items: center; gap: .5rem; }
.dropdown-item-notif .notif-badge-sm { margin-left: auto; }

.navbar-menu {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
}

.locale-name { font-size: 0.85rem; }

/* ── Avatar dropdown menu ────────────────────────────────────────────────── */
.avatar-menu { position: relative; }

.hamburger-btn {
  background:    none;
  border:        1px solid var(--color-navbar-border);
  padding:       .45rem .55rem;
  display:       flex;
  flex-direction:column;
  justify-content:center;
  gap:           5px;
  cursor:        pointer;
  border-radius: var(--radius-md);
  transition:    background var(--transition), border-color var(--transition);
}
.hamburger-btn:hover { background: rgba(255,255,255,.1); }
[data-theme="light"] .hamburger-btn:hover { background: rgba(0,0,0,.06); }

.hamburger-bar {
  display:       block;
  width:         20px;
  height:        2px;
  background:    var(--color-navbar-text);
  border-radius: 2px;
  transition:    transform var(--transition), opacity var(--transition);
}

.hamburger-btn[aria-expanded="true"] .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn[aria-expanded="true"] .hamburger-bar:nth-child(2) { opacity: 0; }
.hamburger-btn[aria-expanded="true"] .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.avatar-dropdown {
  position:      absolute;
  top:           calc(100% + .5rem);
  right:         0;
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-lg);
  min-width:     180px;
  padding:       .25rem 0;
  z-index:       150;
}
.avatar-dropdown[hidden] { display: none; }

.dropdown-item {
  display:     flex;
  align-items: center;
  gap:         .6rem;
  width:       100%;
  padding:     .55rem .9rem;
  background:  none;
  border:      none;
  color:       var(--color-text);
  font-size:   .875rem;
  text-align:  left;
  cursor:      pointer;
  transition:  background var(--transition);
  white-space: nowrap;
}
.dropdown-item:hover          { background: var(--color-surface-2); }
.dropdown-item-danger         { color: var(--color-danger); }
.dropdown-item-danger:hover   { background: color-mix(in srgb, var(--color-danger) 8%, transparent); }

.dropdown-sep { height: 1px; background: var(--color-border); margin: .25rem 0; }

/* ── Main content areas ──────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.main-content.full-screen {
  flex:            1;
  justify-content: center;
  align-items:     center;
  padding:         1rem;
}

.main-content.with-nav {
  padding-top:    64px;
  padding-bottom: 2.5rem;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.app-footer {
  padding:     0.75rem 1.5rem 0;
  font-size:   0.8rem;
  color:       var(--color-text-subtle);
  text-align:  center;
  border-top:  1px solid var(--color-border);
  flex-shrink: 0;
}
.app-footer a { color: var(--color-text-muted); }
.footer-link-btn { background: none; border: none; padding: 0; font: inherit; font-size: inherit; color: var(--color-text-muted); cursor: pointer; text-decoration: underline; }
.footer-link-btn:hover { color: var(--color-text); }

.cookie-banner {
  position:      fixed;
  bottom:        1.25rem;
  right:         1.25rem;
  z-index:       300;
  display:       flex;
  flex-direction: column;
  gap:           .75rem;
  padding:       1rem 1.25rem;
  width:         min(320px, calc(100vw - 2.5rem));
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-lg);
  font-size:     .875rem;
  color:         var(--color-text-muted);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-actions { display: flex; gap: .5rem; justify-content: flex-end; }

.privacy-translation-bar {
  display:     flex;
  flex-shrink: 0;
  align-items: center;
  gap:         .5rem;
  flex-wrap:   wrap;
  padding:     .65rem 1.25rem;
  background:  var(--color-surface);
  border-top:  1px solid var(--color-border);
  font-size:   .8rem;
  color:       var(--color-text-muted);
}
.privacy-translation-bar[hidden] { display: none; }

.privacy-body { font-size: .9rem; line-height: 1.65; }
.privacy-body h1, .privacy-body h2 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .4rem; }
.privacy-body h3 { font-size: .9rem; font-weight: 600; margin: 1rem 0 .3rem; }
.privacy-body p  { margin: .5rem 0; }
.privacy-body ul { margin: .4rem 0 .4rem 1.25rem; }
.privacy-body li { margin: .2rem 0; }
.privacy-body hr { border: none; border-top: 1px solid var(--color-border); margin: 1rem 0; }
.privacy-body a  { color: var(--color-primary); word-break: break-all; }

.footer-flag-it {
  display:     flex;
  height:      7px;
  margin-top:  0.75rem;
  margin-left: -1.5rem;
  margin-right:-1.5rem;
}
.footer-flag-it span {
  flex: 1;
}
.footer-flag-it span:nth-child(1) { background: #008C45; }
.footer-flag-it span:nth-child(2) { background: #F4F9FF; }
.footer-flag-it span:nth-child(3) { background: #CD212A; }

/* ── Page container ──────────────────────────────────────────────────────── */
.page-container {
  max-width: 1100px;
  margin:    0 auto;
  padding:   2rem 1.5rem;
  width:     100%;
}

.page-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1.5rem;
}

.page-title { font-size: 1.5rem; font-weight: 700; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-sm);
}

.card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1rem 1.25rem;
  border-bottom:   1px solid var(--color-border);
}
.card-header h3 { font-size: 1rem; font-weight: 600; }
.card-body { padding: 1.25rem; }

/* ── Stats ───────────────────────────────────────────────────────────────── */
.stats-row {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:                   1rem;
  margin-bottom:         1.5rem;
}

.stat-card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       1.25rem;
  text-align:    center;
  box-shadow:    var(--shadow-sm);
}
.stat-value { font-size: 1.75rem; font-weight: 700; color: var(--color-primary); }
.stat-label { font-size: 0.8rem; color: var(--color-text-muted); margin-top: .25rem; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; }

.data-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.9rem;
}

.data-table th {
  text-align:    left;
  padding:       0.6rem 0.75rem;
  font-size:     0.78rem;
  font-weight:   600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:         var(--color-text-muted);
  border-bottom: 2px solid var(--color-border);
}

.data-table td {
  padding:       0.7rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align:middle;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--color-surface-2); }

.table-empty { text-align: center; color: var(--color-text-muted); padding: 2rem !important; }

.td-url .url-truncate {
  display:     block;
  max-width:   280px;
  overflow:    hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.td-actions {
  position:  relative;
  width:     1px;
  padding:   0 !important;
  border:    none !important;
}

.row-actions {
  position:       absolute;
  right:          .5rem;
  top:            50%;
  transform:      translateY(-50%);
  display:        flex;
  align-items:    center;
  gap:            .1rem;
  padding-left:   2.5rem;
  background:     linear-gradient(to right, transparent, var(--color-surface) 2.5rem);
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--transition);
  white-space:    nowrap;
}

tr:hover .row-actions {
  opacity:        1;
  pointer-events: auto;
  background:     linear-gradient(to right, transparent, var(--color-surface-2) 2.5rem);
}

.code-link {
  font-family:  var(--font-mono);
  font-size:    0.85rem;
  color:        var(--color-code);
  background:   var(--color-code-bg);
  padding:      2px 6px;
  border-radius: var(--radius-sm);
  display:      inline-block;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 8px;
  border-radius: 999px;
  font-size:     0.75rem;
  font-weight:   500;
}
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-muted   { background: var(--color-surface-2);  color: var(--color-text-muted); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display:       inline-flex;
  align-items:   center;
  gap:           0.4rem;
  padding:       0.5rem 1rem;
  border-radius: var(--radius-md);
  border:        1px solid transparent;
  font-weight:   500;
  font-size:     0.9rem;
  transition:    background var(--transition), color var(--transition), border-color var(--transition);
  text-decoration: none;
  white-space:   nowrap;
}

.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--color-primary);
  color:      var(--color-primary-text);
  border-color: var(--color-primary);
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); text-decoration: none; }

.btn-outline {
  background:  transparent;
  color:       var(--color-text);
  border-color: var(--color-border);
}
.btn-outline:hover:not(:disabled) { background: var(--color-surface-2); }

.btn-ghost {
  background:  transparent;
  color:       var(--color-text);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) { background: var(--color-surface-2); }

.btn-danger {
  background: var(--color-danger);
  color:      var(--color-danger-text);
}
.btn-danger:hover:not(:disabled) { background: var(--color-danger-hover); }

.btn-danger-hover:hover:not(:disabled) { color: var(--color-danger); }

.btn-sm { padding: .3rem .65rem; font-size: .82rem; }
.btn-block { width: 100%; justify-content: center; }

.btn-icon {
  padding:       0.4rem;
  border-radius: var(--radius-sm);
  line-height:   1;
  color:         var(--color-text-muted);
}
.btn-icon:hover { color: var(--color-text); }

.btn-oauth { width: 100%; justify-content: center; border-color: var(--color-border); }
.btn-oauth:hover { background: var(--color-surface-2); }
.oauth-buttons { display: flex; flex-direction: column; gap: .5rem; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }

.form-group label {
  font-size:   0.85rem;
  font-weight: 500;
  color:       var(--color-text-muted);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="datetime-local"] {
  width:         100%;
  padding:       0.55rem 0.75rem;
  background:    var(--color-input-bg);
  border:        1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  color:         var(--color-text);
  font-size:     0.9rem;
  font-family:   inherit;
  transition:    border-color var(--transition), box-shadow var(--transition);
  outline:       none;
}
input:focus {
  border-color: var(--color-input-focus);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--color-input-focus) 20%, transparent);
}

.input-with-toggle { position: relative; display: flex; align-items: center; }
.input-with-toggle input { padding-right: 2.5rem; }

.input-with-validation { position: relative; display: flex; align-items: center; }
.input-with-validation input { padding-right: 2.2rem; width: 100%; }
.email-validity-icon {
  position:       absolute;
  right:          .6rem;
  display:        flex;
  align-items:    center;
  pointer-events: none;
  visibility:     hidden;
}
.email-validity-icon.valid   { visibility: visible; color: #16a34a; }
.email-validity-icon.invalid { visibility: visible; color: #dc2626; }
.toggle-pw {
  position:   absolute;
  right:      .5rem;
  background: none;
  border:     none;
  color:      var(--color-text-muted);
  padding:    .25rem;
  display:    flex;
  align-items:center;
  visibility: hidden;
}
.toggle-pw.visible { visibility: visible; }
.toggle-pw:hover { color: var(--color-text); }

input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--color-primary); }

.checkbox-label { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .9rem; }

.field-error { font-size: .8rem; color: var(--color-danger); }
.form-error  { display: block; font-size: .85rem; color: var(--color-danger); margin-bottom: .5rem; }
.form-hint   { font-size: .85rem; color: var(--color-text-muted); margin-bottom: .75rem; }
.form-static { font-size: .9rem; color: var(--color-text); }
.form-row    { display: flex; align-items: center; gap: 1rem; }
.form-row-between { justify-content: space-between; }

.optional { color: var(--color-text-subtle); font-size: .8rem; }

/* ── Auth pages ──────────────────────────────────────────────────────────── */
.auth-brand {
  position:        relative;
  display:         inline-block;
  text-align:      center;
  font-size:       2.2rem;
  font-weight:     800;
  letter-spacing:  -.02em;
  margin-bottom:   1.75rem;
  color:           #16a34a;
  text-shadow:     0 2px 8px rgba(22,163,74,.35), 0 1px 2px rgba(0,0,0,.15);
  filter:          drop-shadow(0 0 12px rgba(22,163,74,.2));
}

.auth-brand-beta {
  position:      absolute;
  top:           -.6em;
  right:         -.1em;
  font-size:     .35em;
  font-weight:   700;
  letter-spacing:.06em;
  line-height:   1;
  padding:       .25em .5em;
  border-radius: .4em;
  background:    #d97706;
  color:         #fff;
  text-shadow:   none;
  filter:        none;
  box-shadow:    0 2px 6px rgba(217,119,6,.45);
}

.auth-container {
  width:   100%;
  display: flex;
  justify-content:center;
}

/* ── Login split layout ───────────────────────────────────────────────────── */
.login-split {
  display:   flex;
  gap:       2rem;
  width:     100%;
  max-width: 920px;
  align-items: flex-start;
}

.login-split-single {
  justify-content: center;
}

.login-split-panel {
  flex: 1;
  min-width: 0;
  display:   flex;
  justify-content: center;
}

.login-split-panel .auth-card {
  width:     100%;
  max-width: 420px;
}

@media (max-width: 700px) {
  .login-split {
    flex-direction: column;
    align-items:    center;
  }
  .login-split-panel {
    width: 100%;
  }
}

/* ── Anonymous result box ─────────────────────────────────────────────────── */
.anon-result-box {
  background:    var(--color-surface-2);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       .65rem .9rem;
  margin-bottom: .75rem;
  word-break:    break-all;
  font-size:     .95rem;
  font-weight:   600;
  color:         var(--color-primary);
}

.anon-perks {
  border-top:  1px solid var(--color-border);
  padding-top: 1rem;
  display:     flex;
  flex-direction: column;
  gap:         .6rem;
}

.anon-perks-title {
  font-size:   .82rem;
  font-weight: 600;
  color:       var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.anon-perks ul {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        .35rem;
}

.anon-perks ul li {
  font-size:   .88rem;
  color:       var(--color-text);
  padding-left: 1.25rem;
  position:    relative;
}

.anon-perks ul li::before {
  content:     '✓';
  position:    absolute;
  left:        0;
  color:       var(--color-primary);
  font-weight: 700;
}

.anon-result-actions {
  display:   flex;
  gap:       .5rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}

.anon-result-label-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             .5rem;
  margin-bottom:   0;
}
.anon-result-label-row .form-hint {
  margin-bottom: 0;
}

.auth-card {
  width:         100%;
  max-width:     420px;
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding:       2rem;
  box-shadow:    var(--shadow-lg);
  display:       flex;
  flex-direction:column;
  gap:           1rem;
}

.auth-header { text-align: center; }
.auth-title  { font-size: 1.5rem; font-weight: 700; margin-bottom: .25rem; }
.auth-subtitle { color: var(--color-text-muted); font-size: .9rem; margin-bottom: 1rem; }
.auth-form   { display: flex; flex-direction: column; }

.auth-footer-link { text-align: center; font-size: .875rem; color: var(--color-text-muted); }
.auth-card > div > .auth-footer-link { margin-top: 1rem; }

.divider {
  display:         flex;
  align-items:     center;
  gap:             .75rem;
  color:           var(--color-text-subtle);
  font-size:       .82rem;
}
.divider::before, .divider::after {
  content: '';
  flex:    1;
  height:  1px;
  background: var(--color-border);
}

.login-controls {
  position: fixed;
  top:      1rem;
  right:    1rem;
  display:  flex;
  gap:      .5rem;
  z-index:  100;
}

.theme-toggle {
  background:    none;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       .4rem .6rem;
  color:         var(--color-text-muted);
  display:       flex;
  align-items:   center;
  gap:           .3rem;
  transition:    background var(--transition), color var(--transition);
}
.theme-toggle:hover { background: var(--color-surface-2); color: var(--color-text); }

/* Show/hide sun-moon icons */
[data-theme="light"] .icon-moon, [data-theme="dark"] .icon-sun { display: none; }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset:    0;
  z-index:  200;
  display:  flex;
  align-items:  center;
  justify-content: center;
}

.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute;
  inset:    0;
  background: rgba(0,0,0,.45);
}

.modal-box {
  position:       relative;
  background:     var(--color-surface);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-xl);
  box-shadow:     var(--shadow-lg);
  width:          100%;
  max-width:      520px;
  max-height:     90vh;
  overflow:       hidden;
  margin:         1rem;
  display:        flex;
  flex-direction: column;
}

.modal-box-sm { max-width: 360px; }
.modal-box-lg { max-width: 680px; }

.modal-subtitle {
  font-size: .8rem;
  color:     var(--color-text-muted);
  margin-top: .15rem;
}

/* User profile import */
.user-profile-controls {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  margin-bottom: .75rem;
}
.user-profile-count {
  margin-left: auto;
  font-size:   .82rem;
  color:       var(--color-text-muted);
}
.user-profile-list {
  max-height:   380px;
  overflow-y:   auto;
  border:       1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.user-profile-item {
  display:     flex;
  align-items: flex-start;
  gap:         .75rem;
  padding:     .6rem .875rem;
  cursor:      pointer;
  border-bottom: 1px solid var(--color-border);
  transition:  background .1s;
}
.user-profile-item:last-child { border-bottom: none; }
.user-profile-item:hover { background: var(--color-surface-2); }
.user-profile-item input[type="checkbox"] { margin-top: .15rem; flex-shrink: 0; }
.user-profile-item-info {
  display:   flex;
  flex-direction: column;
  gap:       .15rem;
  min-width: 0;
}
.user-profile-item-title {
  font-size:     .875rem;
  font-weight:   500;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.user-profile-item-url {
  font-size:     .75rem;
  color:         var(--color-text-muted);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.user-profile-empty {
  padding:    1.5rem;
  text-align: center;
  color:      var(--color-text-muted);
  font-size:  .9rem;
}

.modal-header {
  display:         flex;
  align-items:     center;
  flex-shrink:     0;
  justify-content: space-between;
  padding:         1.1rem 1.25rem;
  border-bottom:   1px solid var(--color-border);
}
.modal-header h3 { font-size: 1rem; font-weight: 600; }

.modal-close {
  background:  none;
  border:      none;
  font-size:   1.4rem;
  line-height: 1;
  color:       var(--color-text-muted);
  padding:     0 .25rem;
}
.modal-close:hover { color: var(--color-text); }

.modal-body   { padding: 1.25rem; overflow-y: auto; flex: 1; }
.modal-footer {
  display:         flex;
  justify-content: flex-end;
  gap:             .75rem;
  padding:         1rem 1.25rem 1.25rem;
  border-top:      1px solid var(--color-border);
  margin-top:      1rem;
}

/* Lang modal */
.lang-list { display: flex; flex-direction: column; gap: .25rem; }
.lang-option {
  display:       flex;
  align-items:   center;
  gap:           .75rem;
  padding:       .6rem .75rem;
  border:        1px solid transparent;
  border-radius: var(--radius-md);
  background:    none;
  color:         var(--color-text);
  width:         100%;
  text-align:    left;
  font-size:     .9rem;
  cursor:        pointer;
}
.lang-option:hover  { background: var(--color-surface-2); }
.lang-option.active { border-color: var(--color-primary); color: var(--color-primary); }

.flag-icon { border-radius: 2px; flex-shrink: 0; }

/* ── Account layout ──────────────────────────────────────────────────────── */
.account-layout {
  display:     flex;
  gap:         2rem;
  max-width:   900px;
  margin:      2rem auto;
  padding:     0 1.5rem;
  width:       100%;
}

.account-sidebar {
  width:       220px;
  flex-shrink: 0;
}

.account-nav {
  display:       flex;
  flex-direction:column;
  gap:           .25rem;
}

.account-nav-item {
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  padding:       .6rem .75rem;
  border:        1px solid transparent;
  border-radius: var(--radius-md);
  background:    none;
  color:         var(--color-text-muted);
  font-size:     .9rem;
  text-align:    left;
  cursor:        pointer;
  transition:    background var(--transition), color var(--transition);
}
.account-nav-item:hover  { background: var(--color-surface-2); color: var(--color-text); }
.account-nav-item.active { background: var(--color-primary); color: var(--color-primary-text); border-color: var(--color-primary); }
.account-nav-item--danger        { color: var(--color-danger); margin-top: auto; }
.account-nav-item--danger:hover  { background: var(--color-danger-bg, #fef2f2); color: var(--color-danger); }
.account-nav-item--danger.active { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.card--danger                  { border-color: var(--color-danger); }
.card--danger .card-header     { border-bottom-color: var(--color-danger-muted, #fecaca); }
.card--danger .card-header h3  { color: var(--color-danger); }
.danger-zone-row               { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.danger-zone-row p             { margin: .25rem 0 0; font-size: .875rem; }

.setting-row                   { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .75rem 0; border-bottom: 1px solid var(--color-border); }
.setting-row:last-of-type      { border-bottom: none; padding-bottom: 0; }
.setting-row-info              { min-width: 0; }
.setting-row-info p            { margin: .2rem 0 0; font-size: .875rem; }
.freq-options                  { display: flex; flex-shrink: 0; border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow: hidden; }
.push-time-range               { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.push-time-range input[type="time"] { width: 7.5rem; }
.freq-option                   { position: relative; }
.freq-option input             { position: absolute; opacity: 0; width: 0; height: 0; }
.freq-option span              { display: block; padding: .35rem .65rem; font-size: .8125rem; cursor: pointer; white-space: nowrap; transition: background var(--transition), color var(--transition); border-right: 1px solid var(--color-border); }
.freq-option:last-child span   { border-right: none; }
.freq-option span:hover        { background: var(--color-surface-2); }
.freq-option input:checked + span { background: var(--color-primary); color: var(--color-primary-text); }
.freq-option input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.form-select--inline { flex-shrink: 0; padding: .35rem .6rem; font-size: .875rem; border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.form-select--inline:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.account-main { flex: 1; display: flex; flex-direction: column; gap: 1rem; }

.email-row { display: flex; align-items: center; gap: .75rem; }
.email-row .btn { margin-left: auto; }

.social-account-row {
  display:       flex;
  align-items:   center;
  gap:           .75rem;
  padding:       .6rem 0;
  border-bottom: 1px solid var(--color-border);
}
.social-account-row:last-child { border-bottom: none; }
.social-provider { font-weight: 500; text-transform: capitalize; min-width: 90px; }
.social-email    { flex: 1; color: var(--color-text-muted); font-size: .85rem; }

/* ── Notifications ───────────────────────────────────────────────────────── */
#notification-container {
  position:       fixed;
  bottom:         1.5rem;
  right:          1.5rem;
  display:        flex;
  flex-direction: column;
  gap:            .5rem;
  z-index:        999;
  pointer-events: none;
}

.notification {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       .75rem 1.1rem;
  font-size:     .875rem;
  box-shadow:    var(--shadow-md);
  opacity:       0;
  transform:     translateY(8px);
  transition:    opacity .2s, transform .2s;
  pointer-events:auto;
  max-width:     340px;
}

.notification-show { opacity: 1; transform: none; }
.notification-error { border-left: 3px solid var(--color-danger); }

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.spinner {
  display:       inline-block;
  width:         1rem;
  height:        1rem;
  border:        2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation:     spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Error page ──────────────────────────────────────────────────────────── */
.error-page {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  flex:            1;
  padding:         3rem;
  text-align:      center;
  gap:             1rem;
}
.error-code  { font-size: 5rem; font-weight: 800; color: var(--color-primary); line-height: 1; }
.error-title { font-size: 1.5rem; font-weight: 600; }
.error-desc  { color: var(--color-text-muted); }

/* ── Context menu ────────────────────────────────────────────────────────── */
.ctxmenu {
  list-style:    none;
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-lg);
  min-width:     150px;
  padding:       .25rem 0;
}
.ctxmenu-item {
  display:     flex;
  align-items: center;
  gap:         .55rem;
  padding:     .5rem .9rem;
  cursor:      pointer;
  font-size:   .875rem;
  color:       var(--color-text);
  outline:     none;
}
.ctxmenu-icon { display: flex; align-items: center; flex-shrink: 0; width: 14px; height: 14px; opacity: .75; }
.ctxmenu-icon svg { width: 14px; height: 14px; }
.ctxmenu-item:hover, .ctxmenu-item:focus { background: var(--color-surface-2); }
.ctxmenu-item:hover .ctxmenu-icon, .ctxmenu-item:focus .ctxmenu-icon { opacity: 1; }
.ctxmenu-item-danger { color: var(--color-danger); }
.ctxmenu-item[aria-disabled="true"] { color: var(--color-text-muted); cursor: default; pointer-events: none; }
.ctxmenu-separator   { height: 1px; background: var(--color-border); margin: .25rem 0; }

/* ── Utilities ───────────────────────────────────────────────────────────── */
.text-muted  { color: var(--color-text-muted); }
.link-muted  { color: var(--color-text-muted); font-size: .875rem; }
.link-muted:hover { color: var(--color-text); }

.loading-placeholder { color: var(--color-text-muted); font-size: .9rem; padding: 1rem 0; }

/* ── Toggle switch ───────────────────────────────────────────────────────── */
.collapse-switch-wrap {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  cursor:      pointer;
  font-size:   .875rem;
  color:       var(--color-text-muted);
  white-space: nowrap;
  user-select: none;
}

.toggle-switch {
  position: relative;
  display:  inline-block;
  width:    36px;
  height:   20px;
  flex-shrink: 0;
}

.toggle-switch input {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.toggle-slider {
  position:      absolute;
  inset:         0;
  background:    var(--color-border);
  border-radius: 999px;
  transition:    background var(--transition);
}

.toggle-slider::before {
  content:       '';
  position:      absolute;
  width:         14px;
  height:        14px;
  left:          3px;
  top:           3px;
  background:    #fff;
  border-radius: 50%;
  transition:    transform var(--transition);
  box-shadow:    0 1px 3px rgba(0,0,0,.25);
}

.toggle-switch input:checked + .toggle-slider { background: var(--color-primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }
.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.filter-bar {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  margin-bottom: 1rem;
}

.filter-input-wrap {
  position:    relative;
  display:     flex;
  align-items: center;
  flex:        1;
}

.filter-icon {
  position:       absolute;
  left:           .65rem;
  color:          var(--color-text-muted);
  pointer-events: none;
  flex-shrink:    0;
}

.filter-input {
  width:         100%;
  padding:       .5rem .75rem .5rem 2.1rem;
  background:    var(--color-input-bg);
  border:        1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  color:         var(--color-text);
  font-size:     .875rem;
  font-family:   inherit;
  outline:       none;
  transition:    border-color var(--transition), box-shadow var(--transition);
}
.filter-input:focus {
  border-color: var(--color-input-focus);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--color-input-focus) 20%, transparent);
}
.filter-input::-webkit-search-cancel-button { display: none; }

.filter-clear {
  position:    absolute;
  right:       .4rem;
  background:  none;
  border:      none;
  font-size:   1.1rem;
  line-height: 1;
  color:       var(--color-text-muted);
  padding:     .2rem .35rem;
  cursor:      pointer;
}
.filter-clear:hover { color: var(--color-text); }

/* ── Redirect cards ──────────────────────────────────────────────────────── */
.redirect-card + .redirect-card { margin-top: 1rem; }

.redirect-card[data-collapsed="true"] .redirect-codes-section { display: none; }

.collapse-toggle {
  flex-shrink: 0;
  color:       var(--color-text-muted);
  padding:     .25rem;
  margin-right: -.25rem;
}
.collapse-toggle:hover { color: var(--color-text); }

.chevron-icon {
  display:    block;
  transition: transform .2s ease;
}
.redirect-card[data-collapsed="true"] .chevron-icon { transform: rotate(-90deg); }

.redirect-card-head {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             .75rem;
  padding:         .9rem 1.25rem;
  cursor:          pointer;
  user-select:     none;
}

.redirect-card-info {
  flex:      1;
  min-width: 0;
  display:   flex;
  flex-direction: column;
  gap:       .2rem;
}

.redirect-target-url {
  font-size:     .9rem;
  font-weight:   500;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  display:       block;
  color:         var(--color-text);
}

.redirect-desc-text { font-size: .8rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.redirect-card-actions {
  display:     flex;
  align-items: center;
  gap:         .65rem;
  flex-shrink: 0;
  font-size:   .8rem;
  color:       var(--color-text-muted);
  white-space: nowrap;
}

.redirect-card-btns {
  position:       absolute;
  right:          1.25rem;
  top:            50%;
  transform:      translateY(-50%);
  display:        flex;
  align-items:    center;
  gap:            .1rem;
  padding-left:   2.5rem;
  background:     linear-gradient(to right, transparent, var(--color-surface) 2.5rem);
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--transition);
}

.redirect-card-head:hover .redirect-card-btns {
  opacity:        1;
  pointer-events: auto;
}

.redirect-codes-section { border-top: 1px solid var(--color-border); }

.redirect-codes-section .data-table td:first-child { padding-left: 1.25rem; }
.redirect-codes-section .data-table td:last-child  { padding-right: 1.25rem; }
.redirect-codes-section .data-table td:nth-child(2) { text-align: left; width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.redirect-codes-section .data-table td:nth-child(3),
.redirect-codes-section .data-table td:nth-child(4) { text-align: right; white-space: nowrap; width: 1%; }

.redirect-codes-footer {
  padding:    .5rem 1rem;
  border-top: 1px solid var(--color-border);
}

/* ── Notifications page ──────────────────────────────────────────────────── */
.notifications-page {
  max-width:  700px;
  margin:     2rem auto;
  padding:    0 1.5rem;
  width:      100%;
}

.notifications-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1.25rem;
}

.page-title { font-size: 1.4rem; font-weight: 700; }

.notifications-list { display: flex; flex-direction: column; gap: .5rem; }

.notif-item {
  display:       flex;
  align-items:   flex-start;
  gap:           .75rem;
  padding:       .875rem 1rem;
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:    background var(--transition);
}

.notif-item--unread { background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); }

.notif-dot {
  flex-shrink:   0;
  width:         8px;
  height:        8px;
  margin-top:    .35rem;
  border-radius: 50%;
  background:    var(--color-primary);
}

.notif-dot--read { background: transparent; }

.notif-body { flex: 1; min-width: 0; }

.notif-label {
  font-size:     .9rem;
  font-weight:   500;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  display:       flex;
  align-items:   baseline;
  gap:           .3rem;
}

.notif-code     { font-style: normal; color: var(--color-primary); flex-shrink: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.notif-arrow    { color: var(--color-text-muted); font-weight: 400; flex-shrink: 0; }
.notif-redirect { color: var(--color-text); font-weight: 400; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.notif-verb     { color: var(--color-text-muted); font-weight: 400; font-size: .8rem; flex-shrink: 0; }

.notif-meta {
  font-size: .8rem;
  color:     var(--color-text-muted);
  margin-top: .2rem;
}

.notif-push-banner {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           .75rem;
  padding:       .875rem 1rem;
  margin-bottom: 1rem;
  background:    color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  border:        1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  border-radius: var(--radius-md);
}

.notif-push-banner-content {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  flex:        1;
  min-width:   0;
}

.notif-push-banner-icon {
  flex-shrink: 0;
  color:       var(--color-primary);
  opacity:     .85;
}

.notif-push-banner-content strong { font-size: .9rem; display: block; }
.notif-push-banner-content .text-muted { font-size: .8rem; margin-top: .1rem; }

.notif-push-banner-actions { flex-shrink: 0; }

.notif-push-banner .form-error { flex-basis: 100%; margin-top: -.25rem; }

.notifications-empty {
  text-align: center;
  padding:    3rem 0;
  color:      var(--color-text-muted);
}

.notifications-loading {
  display:         flex;
  justify-content: center;
  padding:         1rem 0;
}

/* ── Stats page ──────────────────────────────────────────────────────────── */
.stats-page {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.stats-filters { overflow: visible; }

.stats-filters-inner {
  display:        flex;
  flex-wrap:      wrap;
  align-items:    center;
  gap:            .75rem 1.25rem;
  padding:        1rem 1.25rem;
}

.stats-row-group {
  display:     flex;
  align-items: center;
  gap:         .5rem;
}

.stats-label {
  font-size:   .8rem;
  font-weight: 600;
  color:       var(--color-text-muted);
  white-space: nowrap;
}

.stats-scope-group {
  display:       flex;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow:      hidden;
}

.stats-scope-btn {
  padding:        .3rem .8rem;
  font-size:      .82rem;
  font-weight:    500;
  background:     var(--color-surface);
  color:          var(--color-text-muted);
  border:         none;
  border-right:   1px solid var(--color-border);
  transition:     background var(--transition), color var(--transition);
}
.stats-scope-btn:last-child { border-right: none; }
.stats-scope-btn:hover:not(.active) { background: var(--color-surface-2); color: var(--color-text); }
.stats-scope-btn.active { background: var(--color-primary); color: var(--color-primary-text); }

.stats-select { max-width: 260px; }

.stats-select-error {
  outline:        2px solid var(--color-danger);
  outline-offset: 1px;
  border-radius:  var(--border-radius);
  animation:      stats-shake .25s ease;
}

@keyframes stats-shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-4px); }
  75%       { transform: translateX(4px); }
}

.stats-presets { display: flex; gap: .4rem; flex-wrap: wrap; }

.stats-preset { transition: background var(--transition), color var(--transition), border-color var(--transition); }
.stats-preset.active {
  background:   var(--color-primary);
  color:        var(--color-primary-text);
  border-color: var(--color-primary);
}

.stats-date-inputs { display: flex; align-items: center; gap: .4rem; }
.stats-date-sep    { color: var(--color-text-muted); font-size: .9rem; }

.stats-actions-row { margin-left: auto; gap: .6rem; }

.stats-report-wrap {
  flex:          1;
  min-height:    480px;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  border:        1px solid var(--color-border);
  background:    var(--color-surface);
}

.stats-placeholder {
  height:          100%;
  min-height:      480px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1rem;
  color:           var(--color-text-muted);
  text-align:      center;
  padding:         2rem;
}

.stats-placeholder p { font-size: .9rem; line-height: 1.6; }
.stats-placeholder strong { color: var(--color-text); }

.stats-iframe {
  display: block;
  width:   100%;
  height:  calc(100vh - 280px);
  min-height: 480px;
  border:  none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .main-content.full-screen { padding-top: 4rem; }
  .account-layout  { flex-direction: column; }
  .account-sidebar { width: 100%; }
  .account-nav     { flex-direction: row; flex-wrap: wrap; }
  .navbar          { padding: 0 1rem; }
  .navbar-tabs     { display: none; }
  .page-container  { padding: 1.25rem 1rem; }
  .collapse-switch-wrap  { display: none; }
  .collapse-toggle       { display: none; }
  .redirect-card-head    { flex-direction: column; }
  .redirect-card-info    { width: 100%; }
  .redirect-card-actions { flex-wrap: wrap; }
  .col-hide-mobile       { display: none; }
  .notifications-page    { padding: 0 1rem; }
  .stats-filters-inner   { flex-direction: column; align-items: flex-start; }
  .stats-actions-row     { margin-left: 0; }
  .stats-select          { max-width: 100%; width: 100%; }
  .stats-iframe          { height: calc(100vh - 200px); }
}