/* ===========================
   kryo.link — Main Stylesheet
   Figma-based redesign
   =========================== */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ===========================
   Landing page (dark theme)
   =========================== */

.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #2a3545, #1a2230, #0e141c);
  background-size: 500% 500%;
  animation: bg-drift 80s ease-in-out infinite;
  color: #fff;
  position: relative;
}

@keyframes bg-drift {
  0%   { background-position: 50% -10%; }
  12%  { background-position: 100% -20%; }
  24%  { background-position: 150% -10%; }
  36%  { background-position: 120% -20%; }
  48%  { background-position: 180% -10%; }
  60%  { background-position: 120% -20%; }
  72%  { background-position: 150% -10%; }
  84%  { background-position: 100% -20%; }
  100% { background-position: 50% -10%; }
}

/* Top-right icon buttons */
.top-actions {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  z-index: 10;
}

.top-email {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.15s ease;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Brand */
.brand {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.brand h1,
h1 {
  font-weight: 200;
  font-size: 2.8rem;
  letter-spacing: 0.02em;
  margin: 0;
  color: #fff;
}

.beta-badge {
  background: #00A8FF;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 500;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

.beta-badge.small {
  font-size: 0.5rem;
  padding: 0.1rem 0.3rem;
  margin-top: 0;
}

.subtitle {
  font-size: 0.95rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 2.5rem 0;
}

/* Landing container */
.landing-container {
  max-width: 560px;
  width: 100%;
  padding: 0 1.5rem;
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Shorten form — landing */
.shorten-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shorten-form input[type="url"] {
  width: 100%;
  padding: 0.85rem 1.25rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 300;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 25px;
  outline: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: border-color 0.2s, background 0.2s;
}

.shorten-form input[type="url"]::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.shorten-form input[type="url"]:focus {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(0, 168, 255, 0.5);
  box-shadow: 0 2px 16px rgba(0, 168, 255, 0.15);
}

.shorten-form input[type="url"].input-error {
  border-color: rgba(224, 82, 82, 0.5);
  box-shadow: 0 2px 16px rgba(224, 82, 82, 0.15);
}

/* Circular submit button */
.submit-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #00A8FF;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease;
  box-shadow: 0 3px 12px rgba(0, 168, 255, 0.35);
  flex-shrink: 0;
}

/* Only add top margin when in a vertical (landing) form */
.shorten-form .submit-circle {
  margin-top: 1.25rem;
}

.submit-circle:hover {
  background: #0090d9;
  transform: scale(1.05);
}

.submit-circle.small {
  width: 40px;
  height: 40px;
}

/* Error message */
.error {
  color: #e05252;
  font-size: 0.85rem;
  margin: 0.5rem 0 0 0;
}

/* Guest notice */
.guest-notice {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 1.5rem 0 0 0;
}

/* Auth status on landing */
.auth-status {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 1.5rem 0 0 0;
}

.inline-logout { display: inline; }

.logout-link {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 300;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.logout-link:hover { color: #fff; }

.dash-link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.dash-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.75rem;
}

.toggle-switch.dark {
  color: #777;
}

.toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: relative;
  width: 34px;
  height: 18px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 9px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.toggle-switch.dark .toggle-slider {
  background: #ccc;
}

.toggle-slider::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
}

.toggle-switch input:checked + .toggle-slider {
  background: #00A8FF;
}

.toggle-switch input:checked + .toggle-slider::after {
  transform: translateX(16px);
}

/* ===========================
   Result page
   =========================== */

.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.short-url {
  font-size: 1.3rem;
  font-weight: 300;
  color: #fff;
  word-break: break-all;
  text-align: center;
}

.copy-btn {
  padding: 0.5rem 1.5rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 300;
  background: #00A8FF;
  color: #fff;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.copy-btn:hover { background: #0090d9; }

.original-url {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.75rem;
  word-break: break-all;
  text-align: center;
}

.link-info {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.5rem;
}

.shorten-another {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.9rem;
  margin-top: 1.5rem;
}

.shorten-another:hover {
  text-decoration: underline;
  color: #fff;
}

/* ===========================
   Auth pages (login, register, pending)
   =========================== */

.auth-container {
  max-width: 380px;
  width: 100%;
  padding: 2rem 1.5rem;
  text-align: center;
  z-index: 1;
  position: relative;
}

.auth-container h2 {
  font-weight: 300;
  font-size: 1.2rem;
  margin: 1rem 0 1.5rem 0;
  color: rgba(255, 255, 255, 0.75);
}

.auth-field {
  margin-bottom: 0.75rem;
}

.auth-field input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 300;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 25px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.auth-field input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.auth-field input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(0, 168, 255, 0.5);
}

.auth-field input.input-error {
  border-color: rgba(224, 82, 82, 0.5);
}

.auth-btn {
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.5rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  background: #00A8FF;
  color: #fff;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.auth-btn:hover { background: #0090d9; }

.auth-switch {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
}

.auth-switch:hover { color: #fff; }

.logo-link {
  color: inherit;
  text-decoration: none;
}

.pending-message {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
}

/* ===========================
   Dashboard / Admin layout (sidebar)
   =========================== */

/* Dashboard theme variables */
.dashboard-layout {
  --bg: #f5f5f5;
  --bg-content: #fff;
  --text: #333;
  --text-muted: #888;
  --text-faint: #aaa;
  --border: #e0e0e0;
  --border-light: #eee;
  --table-header-bg: #fafafa;
  --table-hover: #f8f9fa;
  --input-bg: #fff;
  --input-border: #ddd;
  --btn-secondary-bg: #f5f5f5;
  --btn-secondary-border: #ddd;
  --btn-secondary-text: #555;
  --badge-regular-bg: #e8e8e8;
  --badge-regular-text: #666;
  --code-bg: #f0f0f0;
  --sidebar-bg: #1a1a1a;

  display: flex;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

.dashboard-layout[data-theme="dark"] {
  --bg: #0e141c;
  --bg-content: rgba(255,255,255,0.04);
  --text: #e0e0e0;
  --text-muted: #8395a7;
  --text-faint: #5a6a7a;
  --border: rgba(255,255,255,0.1);
  --border-light: rgba(255,255,255,0.06);
  --table-header-bg: rgba(255,255,255,0.04);
  --table-hover: rgba(255,255,255,0.03);
  --input-bg: rgba(255,255,255,0.06);
  --input-border: rgba(255,255,255,0.12);
  --btn-secondary-bg: rgba(255,255,255,0.06);
  --btn-secondary-border: rgba(255,255,255,0.12);
  --btn-secondary-text: #8395a7;
  --badge-regular-bg: rgba(255,255,255,0.08);
  --badge-regular-text: #8395a7;
  --code-bg: rgba(255,255,255,0.08);
  --sidebar-bg: #0a0f15;
}

.dashboard-layout[data-theme="dark"] .main-content {
  background: radial-gradient(ellipse at center, #1a2230, #0e141c);
  background-size: 500% 500%;
  animation: bg-drift 80s ease-in-out infinite;
}

/* Sidebar */
.sidebar {
  width: 200px;
  background: var(--sidebar-bg);
  color: #fff;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 1.25rem 0;
}

.sidebar-brand {
  padding: 0 1.25rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sidebar-brand .logo-link {
  font-size: 1.15rem;
  font-weight: 300;
  color: #fff;
  text-decoration: none;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.nav-item.active {
  background: #00A8FF;
  color: #fff;
  font-weight: 400;
}

/* Main content area */
.main-content {
  flex: 1;
  padding: 2rem 2.5rem;
  overflow-y: auto;
}

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

.main-header h2 {
  font-weight: 300;
  font-size: 1.8rem;
  margin: 0;
  color: var(--text);
}

.header-info {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.main-content .icon-btn {
  background: var(--btn-secondary-bg);
  color: var(--text-muted);
}

.main-content .icon-btn:hover {
  background: var(--input-border);
  color: var(--text);
}

/* Dashboard shorten form */
.dash-shorten-form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  flex-wrap: nowrap;
}

.dash-shorten-form input[type="url"] {
  flex: 1;
  padding: 0.7rem 1.1rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 300;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 25px;
  outline: none;
  transition: border-color 0.15s ease;
}

.dash-shorten-form input[type="url"]::placeholder {
  color: var(--text-faint);
}

.dash-shorten-form input[type="url"]:focus {
  border-color: #00A8FF;
}

/* Recent links section */
.recent-links {
  margin-top: 0.5rem;
}

.recent-links h3 {
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--text);
  margin: 0 0 0.75rem 0;
}

.empty-state {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
  padding: 2rem 0;
}

/* ===========================
   Shared table styles (dashboard + admin)
   =========================== */

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  background: var(--bg-content);
  border: 1px solid var(--border);
}

.dash-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  color: var(--text-muted);
  background: var(--table-header-bg);
  border-bottom: 2px solid var(--border);
  font-weight: 400;
  font-size: 0.8rem;
}

.dash-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
  vertical-align: middle;
}

.dash-table tbody tr:hover {
  background: var(--table-hover);
}

.orig-cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.short-code {
  font-size: 0.82rem;
  color: var(--text);
}

.copy-btn-sm {
  padding: 0.15rem 0.5rem;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 400;
  background: #00A8FF;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 0.4rem;
}

.copy-btn-sm:hover { background: #0090d9; }

.delete-btn {
  padding: 0.2rem 0.6rem;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 400;
  background: var(--btn-secondary-bg);
  color: var(--text-muted);
  border: 1px solid var(--btn-secondary-border);
  border-radius: 3px;
  cursor: pointer;
}

.delete-btn:hover {
  background: #e05252;
  color: #fff;
  border-color: #e05252;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.page-btn {
  padding: 0.35rem 0.9rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 400;
  background: #00A8FF;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}

.page-btn:hover { background: #0090d9; }

.page-num {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ===========================
   Admin-specific
   =========================== */

.admin-section {
  margin: 1.25rem 0;
  text-align: left;
}

.admin-section h3 {
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--text);
  margin: 0 0 0.4rem 0;
}

.gate-status {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 0.6rem 0;
}

.btn-secondary {
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 400;
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.btn-secondary:hover {
  background: var(--table-hover);
}

.filter-tabs {
  display: flex;
  gap: 0.4rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 0.35rem 0.75rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 4px;
  background: var(--btn-secondary-bg);
  transition: background 0.12s ease;
}

.filter-tab:hover {
  background: var(--table-hover);
  color: var(--text);
}

.filter-tab.active {
  background: #00A8FF;
  color: #fff;
}

.action-cell {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.inline-form { display: inline; }

.approve-btn, .deny-btn, .revoke-btn, .reapprove-btn {
  padding: 0.2rem 0.6rem;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 400;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.approve-btn { background: #00A8FF; color: #fff; }
.approve-btn:hover { background: #0090d9; }

.deny-btn { background: var(--btn-secondary-bg); color: var(--text-muted); border: 1px solid var(--btn-secondary-border); }
.deny-btn:hover { background: #e05252; color: #fff; border-color: #e05252; }

.revoke-btn { background: #fff0f0; color: #c44; border: 1px solid #e0b0b0; }
.revoke-btn:hover { background: #e05252; color: #fff; border-color: #e05252; }

.reapprove-btn { background: #00A8FF; color: #fff; }
.reapprove-btn:hover { background: #0090d9; }

.you-label {
  font-size: 0.75rem;
  color: var(--text-faint);
  font-style: italic;
}

.status-badge {
  padding: 0.15rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 400;
  border-radius: 10px;
}

.status-pending { background: #fff3cd; color: #856404; }
.status-approved { background: #d4edda; color: #155724; }
.status-denied { background: #f8d7da; color: #721c24; }

.type-badge {
  padding: 0.15rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 400;
  border-radius: 10px;
  font-family: inherit;
}

button.type-badge {
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.12s;
}

button.type-badge:hover {
  opacity: 0.75;
}

.type-regular { background: var(--badge-regular-bg); color: var(--badge-regular-text); }
.type-professional { background: #d4e8ff; color: #1a5ea6; }

/* Theme toggle button */
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--btn-secondary-bg);
  color: var(--text-muted);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  padding: 0;
}

.theme-toggle:hover {
  background: var(--input-border);
  color: var(--text);
}

.reset-pw-btn {
  padding: 0.2rem 0.5rem;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 400;
  background: #f5f5f5;
  color: #888;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
}

.reset-pw-btn:hover {
  background: #e8e8e8;
  color: #555;
}

/* Password reset modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 1000;
  display: none;
}

.modal.show {
  display: flex;
}

.modal-content {
  background: var(--bg, #fff);
  border-radius: 8px;
  padding: 2rem;
  max-width: 420px;
  width: 90%;
  text-align: center;
}

.modal-content h3 {
  margin: 0 0 0.75rem;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--text, #333);
}

.modal-content p {
  font-size: 0.85rem;
  color: var(--text-muted, #666);
  margin: 0 0 0.75rem;
}

.pw-display {
  display: block;
  padding: 0.75rem 1rem;
  background: var(--code-bg, #f5f5f5);
  border: 1px solid var(--border, #ddd);
  color: var(--text, #333);
  border-radius: 6px;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  margin: 0.5rem 0;
  user-select: all;
}

.copy-pw-btn {
  padding: 0.4rem 1rem;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 400;
  background: #00A8FF;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 0.5rem 0;
}

.copy-pw-btn:hover { background: #0090d9; }

.pw-warning {
  font-size: 0.75rem;
  color: #c44;
  margin: 0.5rem 0 1rem;
}

.modal-close {
  padding: 0.4rem 1.5rem;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 400;
  background: var(--btn-secondary-bg, #f0f0f0);
  color: var(--btn-secondary-text, #555);
  border: 1px solid var(--btn-secondary-border, #ddd);
  border-radius: 4px;
  cursor: pointer;
}

.modal-close:hover { background: #e0e0e0; }

/* ===========================
   Footer
   =========================== */

footer {
  position: absolute;
  bottom: 1rem;
  width: 100%;
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  z-index: 1;
  line-height: 1.5;
}

footer strong {
  font-weight: 400;
}

/* ===========================
   Settings page
   =========================== */

.settings-section {
  max-width: 400px;
}

.settings-section h3 {
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--text);
  margin: 0 0 1rem 0;
}

.settings-form .auth-field input {
  border-radius: 6px;
  box-shadow: none;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  backdrop-filter: none;
}

.settings-form .auth-field input::placeholder {
  color: var(--text-faint);
}

.settings-form .auth-field input:focus {
  border-color: #00A8FF;
  box-shadow: none;
}

.settings-error {
  color: #e05252;
  font-size: 0.82rem;
  margin: 0.25rem 0 0.5rem;
}

.settings-success {
  color: #155724;
  font-size: 0.82rem;
  margin: 0.25rem 0 0.5rem;
}

.settings-save-btn {
  padding: 0.6rem 1.5rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 400;
  background: #00A8FF;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 0.25rem;
}

.settings-save-btn:hover { background: #0090d9; }

/* ===========================
   Analytics
   =========================== */

.analytics-link {
  color: #00A8FF;
  text-decoration: none;
  font-weight: 400;
}

.analytics-link:hover {
  text-decoration: underline;
}

.analytics-subtitle {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0.25rem 0 0 0;
}

.back-link {
  color: #00A8FF;
  text-decoration: none;
  font-size: 0.82rem;
}

.back-link:hover {
  text-decoration: underline;
}

.analytics-target {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 1rem 0;
}

.analytics-url {
  color: var(--text);
  word-break: break-all;
}

.analytics-table .ua-cell {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.analytics-table .nowrap {
  white-space: nowrap;
}

.analytics-table code {
  font-size: 0.75rem;
  background: var(--code-bg);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}

/* ===========================
   Inline expiry editor
   =========================== */

.expiry-cell {
  cursor: pointer;
  position: relative;
}

.expiry-cell:hover .expiry-label {
  color: #00A8FF;
  text-decoration: underline;
}

.expiry-editor {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: nowrap;
}

/* Toggle between date and permanent */
.expiry-mode-toggle {
  display: flex;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  overflow: hidden;
  font-size: 0.7rem;
}

.expiry-mode-toggle button {
  padding: 0.25rem 0.55rem;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 400;
  border: none;
  cursor: pointer;
  background: var(--btn-secondary-bg);
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}

.expiry-mode-toggle button.active {
  background: #00A8FF;
  color: #fff;
}

.expiry-date-input {
  padding: 0.2rem 0.35rem;
  font-family: inherit;
  font-size: 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 3px;
  outline: none;
  width: 130px;
  transition: opacity 0.15s;
  background: var(--input-bg);
  color: var(--text);
}

.expiry-date-input:focus {
  border-color: #00A8FF;
}

.expiry-date-input.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.expiry-save-btn {
  padding: 0.2rem 0.5rem;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 400;
  background: #00A8FF;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.expiry-save-btn:hover {
  background: #0090d9;
}

.expiry-cancel-btn {
  padding: 0.15rem 0.4rem;
  font-family: inherit;
  font-size: 0.85rem;
  background: none;
  color: #999;
  border: none;
  cursor: pointer;
  line-height: 1;
}

.expiry-cancel-btn:hover {
  color: var(--text);
}

/* ===========================
   Sidebar footer
   =========================== */

.sidebar-footer {
  margin-top: auto;
  padding: 1rem 1.25rem;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
}

/* ===========================
   Header email
   =========================== */

.header-email {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-right: 0.25rem;
}

/* ===========================
   View all link
   =========================== */

.view-all-link {
  margin-top: 1rem;
  text-align: right;
}

.view-all-link a {
  font-size: 0.82rem;
  color: #00A8FF;
  text-decoration: none;
}

.view-all-link a:hover {
  text-decoration: underline;
}

/* ===========================
   Toast notification
   =========================== */

.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #333;
  color: #fff;
  padding: 0.6rem 1.5rem;
  border-radius: 25px;
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===========================
   Row flash animation
   =========================== */

.row-flash {
  animation: row-blink 1.5s ease;
}

@keyframes row-blink {
  0%   { background: #d4edff; }
  50%  { background: #d4edff; }
  100% { background: transparent; }
}

/* ===========================
   Utility
   =========================== */

.hidden { display: none; }

/* ===========================
   Responsive
   =========================== */

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }

  .main-content {
    padding: 1.5rem 1rem;
  }

  .main-header h2 {
    font-size: 1.3rem;
  }

  .dash-shorten-form {
    flex-direction: column;
  }

  .orig-cell { display: none; }
  .dash-table { font-size: 0.78rem; }
}

@media (max-width: 480px) {
  .brand h1 {
    font-size: 2rem;
  }

  .landing-container {
    padding: 0 1rem;
  }
}