/*
 * PlexUtils Design System — Portable Theme Reference
 * Use these tokens and patterns on any new site to match the look.
 * Font: Inter (Google Fonts) — load via:
 *   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
 */

/* ─── 1. DESIGN TOKENS ────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:              #0b0b0f;       /* page background */
  --bg-soft:         #101014;       /* slightly lighter surface */
  --sidebar:         #121218;       /* sidebar / nav */
  --surface:         #151515;       /* card background */
  --surface-raised:  #1d1d1d;       /* elevated card / modal row */
  --surface-hover:   #242424;       /* hover state on surface */

  /* Borders */
  --border:          rgba(255,255,255,.08);   /* default border */
  --border-strong:   rgba(255,255,255,.14);   /* prominent border */
  --border-solid:    #262626;                  /* solid equivalent */

  /* Text */
  --text:            #f4f0ff;       /* primary text (slightly purple-white) */
  --text-soft:       #d9d2e8;       /* secondary text */
  --muted:           #aaa0b8;       /* muted / helper text */
  --muted-strong:    #c2b8d1;       /* slightly brighter muted */

  /* Accent — purple */
  --accent:          #b57cff;       /* primary accent */
  --accent-strong:   #9a4cd1;       /* darker accent (hover) */
  --accent-soft:     rgba(181,124,255,.16);   /* tinted background */
  --accent-glow:     rgba(181,124,255,.34);   /* glow / box-shadow spread */

  /* Green (secondary accent — progress, success) */
  --green:           #2ae087;
  --green-soft:      rgba(42,224,135,.14);

  /* Semantic */
  --danger:          #ff6f8f;
  --danger-alt:      #ef4444;
  --warning:         #ffd27a;
  --success:         #2ae087;

  /* Border radius scale */
  --radius-sm:   10px;
  --radius-md:   14px;   /* buttons, inputs */
  --radius-lg:   20px;   /* cards */
  --radius-xl:   26px;   /* modals, large panels */
  --radius-pill: 999px;  /* badges, pills */

  /* Shadows */
  --shadow-card:    0 18px 44px rgba(0,0,0,.30);
  --shadow-popover: 0 24px 72px rgba(0,0,0,.50);

  /* Accent gradient (top bar, highlights) */
  --accent-line: linear-gradient(90deg, #b57cff 0%, #7d4dff 46%, #2ae087 100%);

  color-scheme: dark;
}


/* ─── 2. RESET & BASE ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea {
  font-family: 'Inter', sans-serif;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;

  /* Cinematic ambient glow + depth fade + subtle diagonal mesh */
  background-image:
    radial-gradient(1400px 900px at 10% 10%,  rgba(181,124,255,.08), transparent 60%),
    radial-gradient(1100px 800px at 90% 20%,  rgba(255,80,120,.07),  transparent 60%),
    radial-gradient(900px  700px at 50% 100%, rgba(26,167,255,.06),  transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.35)),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.025) 0px,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 100px
    );
  background-attachment: fixed;
}

/* Ultra-subtle film grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

a             { color: var(--text); text-decoration: none; }
a:hover       { color: #ffffff; }
.muted        { color: var(--muted) !important; }


/* ─── 3. TYPOGRAPHY ───────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 900; letter-spacing: .01em; }

.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
}


/* ─── 4. LAYOUT ───────────────────────────────────────────────────────────── */
.page-shell {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 16px;
}


/* ─── 5. CARDS & PANELS ───────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 240px);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-raised {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

/* Accent-top panel — purple-to-green bar at the top edge */
.accent-panel {
  position: relative;
  background: linear-gradient(180deg, rgba(21,21,21,.99), rgba(12,12,12,.99));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 5vw, 48px);
  box-shadow: 0 28px 90px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.025);
  overflow: hidden;
}
.accent-panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--accent-line);
  opacity: .9;
  box-shadow: 0 0 22px rgba(181,124,255,.34);
  pointer-events: none;
  z-index: 2;
}
.accent-panel > * { position: relative; z-index: 3; }


/* ─── 6. BUTTONS ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-solid);
  background: #101010;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: #171717; border-color: #3a3a3a; color: #fff; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0b0b0b;
  font-weight: 800;
}
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #0b0b0b; }

.btn-secondary {
  background: var(--surface-raised);
  border: 1px solid rgba(255,255,255,.10);
  color: #f4efff;
  font-weight: 800;
}
.btn-secondary:hover { background: #242424; border-color: rgba(255,255,255,.18); color: #fff; }

.btn-danger {
  background: transparent;
  border-color: rgba(239,68,68,.45);
  color: #fecaca;
}
.btn-danger:hover { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.70); color: #fff; }

/* Icon-circle button (e.g. nav action buttons) */
.btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid #2a2a2a;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-icon:hover { background: rgba(0,0,0,.75); border-color: #3a3a3a; }

/* Focus ring — applies to all interactive elements */
:where(button, .btn, a, input, select, textarea):focus-visible {
  outline: none;
  border-color: rgba(181,124,255,.55) !important;
  box-shadow: 0 0 0 4px rgba(181,124,255,.14) !important;
}


/* ─── 7. FORM CONTROLS ────────────────────────────────────────────────────── */
:where(input[type="text"],
       input[type="email"],
       input[type="password"],
       input[type="url"],
       input[type="number"],
       input[type="search"],
       input[type="date"],
       select,
       textarea) {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: #101014;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  caret-color: var(--accent);
  transition: border-color .16s ease, box-shadow .16s ease;
}
:where(input, select, textarea)::placeholder { color: #8f879e; opacity: 1; }
:where(input, select, textarea):focus {
  outline: none;
  border-color: rgba(181,124,255,.55);
  box-shadow: 0 0 0 4px rgba(181,124,255,.14);
}

/* Styled select arrow */
select:not([multiple]) {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23d6c6ff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
}
select option { background: #15151d; color: var(--text); }

/* Custom checkbox */
.check-row   { display: flex; gap: 10px; align-items: center; cursor: pointer; user-select: none; }
.check-input { position: absolute; opacity: 0; pointer-events: none; }
.check-box {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12);
  background: #151515;
  color: transparent;
  flex: 0 0 auto;
  transition: border-color .14s, background .14s;
}
.check-row:hover .check-box            { border-color: var(--accent); }
.check-input:checked + .check-box      { background: rgba(181,124,255,.16); border-color: rgba(181,124,255,.68); color: #caa8ff; }


/* ─── 8. PILLS & BADGES ───────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.pill-default  { background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-soft); }
.pill-accent   { background: var(--accent-soft);    border: 1px solid rgba(181,124,255,.35); color: var(--accent); }
.pill-green    { background: var(--green-soft);     border: 1px solid rgba(42,224,135,.35);  color: var(--green); }
.pill-danger   { background: rgba(255,111,143,.12); border: 1px solid rgba(255,111,143,.35); color: var(--danger); }

/* Score badge */
.score-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 900;
  color: #f5f1ff;
  background: linear-gradient(180deg, rgba(36,25,58,.94), rgba(20,15,35,.90));
  border: 1px solid rgba(181,124,255,.42);
  box-shadow: 0 10px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
}


/* ─── 9. SCROLLBAR ────────────────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(181,124,255,.56) rgba(21,21,21,.72);
}
*::-webkit-scrollbar       { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: #151515; border-radius: var(--radius-pill); }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(181,124,255,.78), rgba(97,63,155,.78));
  border: 2px solid #151515;
  border-radius: var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background: rgba(199,153,255,.9); }


/* ─── 10. MODAL / OVERLAY ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3,3,8,.72);
  backdrop-filter: blur(10px);
}

.modal-box {
  width: min(560px, 100%);
  background: linear-gradient(180deg, rgba(21,21,21,.99), rgba(12,12,12,.99));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-xl);
  box-shadow: 0 28px 90px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.025);
  overflow: hidden;
  position: relative;
}
/* Accent bar at top of modal */
.modal-box::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--accent-line);
  opacity: .9;
  box-shadow: 0 0 18px rgba(181,124,255,.34);
}

.modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  font-weight: 900;
  font-size: 18px;
  color: #fff;
}
.modal-body   { padding: 20px 22px; }
.modal-footer {
  padding: 16px 22px;
  border-top: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.018);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}


/* ─── 11. DROPDOWN MENUS ──────────────────────────────────────────────────── */
.dropdown-menu {
  background: #15151d;
  border: 1px solid rgba(181,124,255,.22);
  border-radius: 18px;
  box-shadow: 0 18px 54px rgba(0,0,0,.48);
  overflow: hidden;
  padding: 6px;
}
.dropdown-item {
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease;
}
.dropdown-item:hover { background: var(--accent-soft); color: var(--accent); }


/* ─── 12. PAGE ACCENT PANEL (section headers, split-panels) ─────────────────*/
.page-panel {
  background: linear-gradient(180deg, rgba(17,17,22,.97), rgba(11,11,15,.99));
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-xl);
}

/* Thin purple→green top bar — can be added as ::before on any container */
.accent-bar::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--accent-line);
  box-shadow: 0 0 22px rgba(181,124,255,.34);
}


/* ─── 13. POSTER / MEDIA CARD ────────────────────────────────────────────── */
.poster-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;   /* clips badges, progress bar, etc. to the art shape */
}
.media-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* Watch progress bar at bottom of poster */
.poster-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 5px;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  background: rgba(0,0,0,.32);
}
.poster-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green) 0%, var(--accent) 100%);
  width: 0%;
  transition: width .6s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 8px 2px rgba(181,124,255,.65), 0 0 4px 1px rgba(42,224,135,.5);
}

/* Watched badge (top-left circle on poster) */
.poster-watched-badge {
  position: absolute;
  top: 8px; left: 8px;
  width: 34px; height: 34px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(181,124,255,.6);
  background: rgba(0,0,0,.55);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  pointer-events: none;
}

/* Action button (top-right circle on poster — e.g. favourite) */
.poster-action-btn {
  position: absolute;
  top: 8px; right: 8px;
  width: 34px; height: 34px;
  border-radius: var(--radius-pill);
  border: 1px solid #2a2a2a;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
}
.poster-action-btn:hover { background: rgba(0,0,0,.75); border-color: #3a3a3a; }


/* ─── 14. UTILITY ─────────────────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ─── 15. APPLICATION SHELL ─────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11,11,15,.86);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
}

.site-nav,
.nav-actions,
.section-heading,
.data-row {
  display: flex;
  align-items: center;
}

.site-nav { justify-content: space-between; padding-block: 14px; }
.brand { font-size: 17px; font-weight: 900; }
.nav-actions { gap: 12px; }
.nav-actions form { margin: 0; }

.auth-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
}

.auth-card { width: min(480px, 100%); }
.auth-card h1 { margin: 8px 0; font-size: clamp(32px, 7vw, 48px); }
.auth-card > .muted { margin: 0 0 28px; }

.form-group { margin-bottom: 18px; }
.form-group label,
.invite-result label {
  display: block;
  margin-bottom: 7px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 800;
}
.form-submit { width: 100%; margin-top: 24px; }
.field-error { margin: 6px 0 0; color: var(--danger); font-size: 13px; }
.field-help { margin: 6px 0 0; color: var(--muted); font-size: 12px; }

.flash-stack { display: grid; gap: 10px; margin-bottom: 18px; }
.flash { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); transition: opacity .25s ease, transform .25s ease; }
.flash.is-leaving { opacity: 0; transform: translateY(-8px); }
.flash-success { background: var(--green-soft); border-color: rgba(42,224,135,.35); }
.flash-danger { background: rgba(255,111,143,.12); border-color: rgba(255,111,143,.35); }
.flash-warning { background: rgba(255,210,122,.12); border-color: rgba(255,210,122,.35); }

.welcome-card h1 { margin: 8px 0; font-size: clamp(36px, 7vw, 64px); }
.welcome-card .muted { margin-bottom: 24px; }

.section-heading { justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.section-heading h1 { margin: 6px 0 0; }
.admin-section { margin-bottom: 22px; }
.admin-section .section-title { margin-top: 0; }
.invite-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; }
.invite-form .form-group { margin: 0; }
.invite-result { margin-top: 18px; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.data-list { display: grid; gap: 1px; }
.data-row { justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.data-row:last-child { border-bottom: 0; }

@media (max-width: 700px) {
  .site-nav,
  .section-heading { align-items: flex-start; }
  .site-nav { gap: 16px; }
  .nav-actions { flex-wrap: wrap; justify-content: flex-end; }
  .nav-actions > .muted { display: none; }
  .invite-form,
  .admin-grid { grid-template-columns: 1fr; }
}


/* ─── 16. STATUS DASHBOARD ──────────────────────────────────────────────── */
.dashboard-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 18px 0 30px;
}
.dashboard-heading h1 { margin: 6px 0; font-size: clamp(36px, 6vw, 58px); }
.dashboard-heading p:last-child { margin-bottom: 0; }

.status-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 22px; }
.filter-button { border: 1px solid var(--border); color: var(--muted-strong); cursor: pointer; }
.filter-button:hover,
.filter-button.is-active { color: var(--text); border-color: rgba(181,124,255,.42); box-shadow: 0 0 0 3px rgba(181,124,255,.09); }

.site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-card,
.add-site-card {
  min-height: 260px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(29,29,29,.94), rgba(17,17,17,.98));
  box-shadow: var(--shadow-card);
}

.site-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.site-card.is-pinned { border-color: rgba(181,124,255,.42); box-shadow: 0 20px 48px rgba(0,0,0,.38), 0 0 0 1px rgba(181,124,255,.08); }
.pinned-label {
  position: absolute;
  top: -9px;
  left: 18px;
  padding: 3px 8px;
  border: 1px solid rgba(181,124,255,.4);
  border-radius: var(--radius-pill);
  background: #241736;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-card[hidden] { display: none; }
.site-card-link { display: flex; flex: 1; min-width: 0; flex-direction: column; border-radius: var(--radius-md); }
.site-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; box-shadow: none !important; }
.site-card:hover {
  transform: translateY(-3px);
  border-color: rgba(181,124,255,.3);
  box-shadow: 0 22px 50px rgba(0,0,0,.4);
}

.site-card-top,
.site-card-actions {
  display: flex;
  align-items: center;
}
.site-card-top { justify-content: space-between; gap: 12px; }
.site-icon-wrap {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(181,124,255,.32);
  border-radius: 17px;
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.site-icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-card-body { flex: 1; min-width: 0; padding: 22px 0 14px; }
.site-card-body h2 {
  overflow: hidden;
  margin: 0 0 7px;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-host {
  overflow: hidden;
  margin: 0 0 13px;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-meta { margin: 0; color: var(--muted-strong); font-size: 12px; }
.last-checked { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }

.status-pill { padding: 6px 9px; border: 1px solid var(--border); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.status-online { color: var(--green); background: var(--green-soft); border-color: rgba(42,224,135,.3); }
.status-offline { color: var(--danger); background: rgba(255,111,143,.12); border-color: rgba(255,111,143,.3); }
.status-unreachable { color: var(--warning); background: rgba(255,210,122,.11); border-color: rgba(255,210,122,.3); }
.status-pending,
.status-checking { color: var(--accent); background: var(--accent-soft); border-color: rgba(181,124,255,.3); }
.status-checking .status-dot { animation: status-pulse 1s ease-in-out infinite; }
@keyframes status-pulse { 50% { opacity: .3; transform: scale(.75); } }

.site-card-actions { gap: 9px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.045); }
.site-card-actions > .btn { flex: 1; }
.site-card-actions form { margin: 0; }
.site-card-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.delete-button { color: var(--danger); font-size: 22px; }
.edit-button { color: var(--text-soft); }
.pin-button { color: var(--muted-strong); }
.pin-button.is-active { color: var(--accent); border-color: rgba(181,124,255,.45); background: var(--accent-soft); }

.add-site-card { min-height: 260px; border-style: dashed; background: rgba(21,21,21,.55); box-shadow: none; }
.add-site-card button {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 258px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.add-site-card:hover { border-color: rgba(181,124,255,.5); background: var(--accent-soft); }
.add-icon {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 2px solid var(--accent);
  border-radius: 50%;
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
}

.empty-state { grid-column: 1 / -1; text-align: center; }
.modal-overlay:not([open]) { display: none; }
dialog.modal-overlay { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; color: var(--text); }
dialog.modal-overlay::backdrop { background: rgba(3,3,8,.72); backdrop-filter: blur(10px); }
.modal-box .form-group:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .dashboard-heading { align-items: flex-start; flex-direction: column; }
  .site-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
  .site-card { min-height: 245px; padding: 15px; }
  .site-card-actions { flex-wrap: wrap; }
  .site-card-actions > .btn { min-width: 100%; }
}