:root {
      /* BMTC teal accent on a cool dark theme. (var names kept as --red/--red-dark
         so existing rules cascade; they now hold teal values.) */
      --red: #14a3b8;          /* primary accent (BMTC teal/cyan) */
      --red-dark: #0c7e8f;     /* hover / pressed */
      --accent: #14a3b8;
      --accent-dark: #0c7e8f;
      --accent-bright: #38d0e0;/* lighter cyan for gradients */
      --black: #0d1416;
      --dark: #121b1d;
      --card-bg: #16201f;
      --card-hover: #1d2a29;
      --border: #243133;
      --muted: #8aa0a3;
      --white: #fff;
      --green: #46d369;
      --gold: #f5c518;
      --blue: #54b3d6;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--black); color: var(--white); font-family: 'DM Sans', sans-serif; min-height: 100vh; }

    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #1a1a1a; }
    ::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

    /* Floating glowing glass capsule nav (V12). The bar itself is transparent
       (with a soft top fade so scrolled content dissolves under it); the capsule floats. */
    .nf-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      padding: 0 4%;
      height: 100px;                   /* taller region → capsule sits lower, leaving space at top */
      display: flex; align-items: center;
      pointer-events: none;            /* let clicks pass through the transparent strip */
      background: linear-gradient(180deg, rgba(7,18,20,.94) 0%, rgba(7,18,20,.55) 60%, rgba(7,18,20,0) 100%);
    }
    .nav-capsule {
      pointer-events: auto;
      width: 100%; max-width: 1300px; margin: 0 auto; height: 52px;
      display: flex; align-items: center; justify-content: space-between; gap: 17px;
      padding: 0 10px 0 23px; border-radius: 42px;
      background: rgba(8,28,32,.78);
      border: 1px solid rgba(56,208,224,.5);
      box-shadow: 0 0 0 1px rgba(56,208,224,.16), 0 12px 36px rgba(20,163,184,.30);
      backdrop-filter: blur(12px);
    }
    .nf-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.52rem; color: var(--red); letter-spacing: 2.2px; text-decoration: none; }
    /* Segmented pill group */
    .nav-links { display: flex; gap: 2px; list-style: none; margin: 0; background: rgba(0,0,0,.30); border-radius: 25px; padding: 4px; }
    .nav-links a {
      color: #cfe0e2; text-decoration: none; font-size: .85rem; padding: 7px 16px;
      border-radius: 21px; transition: all .18s; font-weight: 500; display: block;
    }
    .nav-links a:hover { color: var(--white); background: rgba(255,255,255,.08); }
    .nav-links a.active { color: #06232a; background: var(--accent-bright); font-weight: 600; box-shadow: 0 0 14px rgba(56,208,224,.55); }
    .nav-right { display: flex; align-items: center; gap: 11px; }
    .nav-right .icon-btn {
      width: 37px; height: 37px; border-radius: 50%;
      background: rgba(255,255,255,.10); border: none;
      color: #cfe0e2; display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all .2s; font-size: .88rem; text-decoration: none;
    }
    .nav-right .icon-btn:hover { background: rgba(255,255,255,.2); color: var(--white); }
    .avatar { width: 35px; height: 35px; border-radius: 50%; background: linear-gradient(135deg,var(--red),var(--accent-bright)); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; cursor: pointer; }

    .hero-band {
      padding: 108px 4% 36px;
      background: linear-gradient(135deg, #06363d 0%, #0b1416 55%, #04282e 100%);
      border-bottom: 1px solid var(--border);
      position: relative; overflow: hidden;
    }
    .hero-band::before {
      content: '';
      position: absolute; top: -60px; right: -60px;
      width: 400px; height: 400px; border-radius: 50%;
      background: radial-gradient(circle, rgba(20,163,184,.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-band h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: 2px; margin-bottom: 8px; }
    .hero-band p { color: var(--muted); font-size: .92rem; max-width: 500px; }
    .hero-stats { display: flex; gap: 28px; margin-top: 20px; }
    .stat-chip { display: flex; flex-direction: column; }
    .stat-chip .num { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: var(--red); letter-spacing: 1px; line-height: 1; }
    .stat-chip .lbl { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

    .filter-bar {
      padding: 18px 4%;
      background: var(--dark);
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    }
    .search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 360px; }
    .search-wrap i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #555; font-size: .82rem; }
    .search-wrap input {
      width: 100%; background: rgba(255,255,255,.06); border: 1px solid #333;
      color: var(--white); padding: 9px 12px 9px 36px; border-radius: 6px;
      font-size: .85rem; font-family: 'DM Sans', sans-serif; transition: border-color .2s;
    }
    .search-wrap input:focus { outline: none; border-color: var(--red); }
    .search-wrap input::placeholder { color: #555; }
    .filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
    .pill {
      padding: 6px 16px; border-radius: 20px; font-size: .78rem;
      font-weight: 600; cursor: pointer; border: 1px solid #333;
      background: transparent; color: #aaa;
      transition: all .2s; letter-spacing: .3px;
    }
    .pill:hover { border-color: var(--red); color: var(--white); }
    .pill.active { background: var(--red); border-color: var(--red); color: var(--white); }
    .ml-auto { margin-left: auto; }
    .add-btn {
      background: var(--red); color: var(--white); border: none;
      padding: 9px 20px; border-radius: 6px; font-size: .85rem;
      font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 7px;
      transition: background .2s, transform .15s; white-space: nowrap;
      font-family: 'DM Sans', sans-serif; text-decoration: none;
    }
    .add-btn:hover { background: var(--red-dark); transform: scale(1.02); color: var(--white); text-decoration: none; }

    .nf-section { padding: 28px 4% 8px; }
    .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .section-title { font-size: 1rem; font-weight: 700; color: #e5e5e5; display: flex; align-items: center; gap: 10px; }
    .section-title .badge-count { background: var(--red); color: #fff; font-size: .65rem; padding: 2px 7px; border-radius: 10px; font-weight: 700; }
    .view-all { font-size: .78rem; color: var(--blue); text-decoration: none; display: flex; align-items: center; gap: 4px; }
    .view-all:hover { color: #fff; }

    .sites-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 8px;
    }
    .site-card {
      background: var(--card-bg); border-radius: 6px; overflow: hidden;
      cursor: pointer; position: relative; border: 1px solid transparent;
      transition: transform .25s, border-color .25s, box-shadow .25s;
    }
    .site-card:hover {
      transform: scale(1.04) translateY(-2px);
      border-color: rgba(20,163,184,.4);
      box-shadow: 0 8px 32px rgba(0,0,0,.5);
      z-index: 5;
    }
    .site-card-thumb {
      height: 100px; background: #222;
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .site-card-thumb .bg-blur {
      position: absolute; inset: 0;
      filter: blur(20px) saturate(1.5); opacity: .35;
      background-size: cover; background-position: center;
    }
    .site-logo {
      width: 54px; height: 54px; border-radius: 12px;
      object-fit: contain; position: relative; z-index: 1;
      box-shadow: 0 4px 16px rgba(0,0,0,.6);
      background: #fff; padding: 6px;
    }
    .site-logo-placeholder {
      width: 54px; height: 54px; border-radius: 12px;
      background: linear-gradient(135deg, var(--red), var(--accent-bright));
      display: flex; align-items: center; justify-content: center;
      font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem;
      position: relative; z-index: 1;
      box-shadow: 0 4px 16px rgba(0,0,0,.6);
    }
    .cat-dot { position: absolute; top: 8px; left: 8px; z-index: 2; width: 8px; height: 8px; border-radius: 50%; }
    .fav-btn {
      position: absolute; top: 6px; right: 6px; z-index: 2;
      width: 26px; height: 26px; border-radius: 50%;
      background: rgba(0,0,0,.6); border: none;
      color: #aaa; font-size: .7rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all .2s;
    }
    .fav-btn:hover, .fav-btn.active { color: var(--gold); background: rgba(0,0,0,.8); }
    .site-card-body { padding: 10px 12px 12px; }
    .site-name { font-size: .88rem; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .site-url { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; }
    .site-tags { display: flex; gap: 4px; flex-wrap: wrap; }
    .site-tag { font-size: .62rem; padding: 2px 7px; border-radius: 3px; font-weight: 600; letter-spacing: .3px; }
    .site-card-footer {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.05);
    }
    .launch-btn {
      font-size: .72rem; color: var(--white); text-decoration: none;
      background: var(--red); padding: 4px 12px; border-radius: 3px;
      font-weight: 600; transition: background .2s;
      display: flex; align-items: center; gap: 5px;
    }
    .launch-btn:hover { background: var(--red-dark); color: var(--white); }
    .launch-btn:disabled { opacity: .6; cursor: not-allowed; pointer-events: none; }
    .card-actions { display: flex; gap: 6px; }
    .card-icon-btn {
      width: 26px; height: 26px; border-radius: 4px;
      background: rgba(255,255,255,.07); border: none;
      color: #aaa; font-size: .68rem; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      vertical-align: middle; transition: all .2s;
    }
    .card-icon-btn:hover { background: rgba(255,255,255,.15); color: var(--white); }

    .nf-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
    .nf-row::-webkit-scrollbar { display: none; }
    .recent-card {
      flex: 0 0 180px; background: var(--card-bg);
      border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
      cursor: pointer; transition: all .25s;
    }
    .recent-card:hover { transform: scale(1.05); border-color: rgba(20,163,184,.3); }
    .recent-card .thumb { height: 80px; background: #222; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
    .recent-card .thumb .bg-blur { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(18px) saturate(1.4); opacity: .45; transform: scale(1.35); }
    .recent-card .thumb img { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; background: #fff; padding: 4px; position: relative; z-index: 1; }
    .recent-card .thumb > div:not(.bg-blur) { position: relative; z-index: 1; }
    .recent-card .info { padding: 8px 10px; }
    .recent-card .info .name { font-size: .8rem; font-weight: 600; }
    .recent-card .info .time { font-size: .65rem; color: var(--muted); margin-top: 2px; }

    .reminder-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
    .reminder-strip::-webkit-scrollbar { display: none; }
    .reminder-chip {
      flex: 0 0 auto; background: var(--card-bg); border: 1px solid var(--border);
      border-radius: 6px; padding: 10px 14px;
      display: flex; align-items: center; gap: 10px;
      min-width: 220px; cursor: pointer; transition: border-color .2s;
    }
    .reminder-chip:hover { border-color: var(--red); }
    .reminder-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .reminder-chip .r-title { font-size: .8rem; font-weight: 600; }
    .reminder-chip .r-time { font-size: .67rem; color: var(--muted); margin-top: 2px; }
    .reminder-chip .r-site { font-size: .67rem; color: var(--blue); }

    .empty-state { padding: 48px 20px; text-align: center; color: var(--muted); }
    .empty-state i { font-size: 2.5rem; margin-bottom: 14px; opacity: .3; }
    .empty-state p { font-size: .88rem; }

    /* AUTH LOADING OVERLAY */
    .auth-overlay {
      display: none;
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,.85);
      align-items: center; justify-content: center;
      flex-direction: column; gap: 16px;
      backdrop-filter: blur(4px);
    }
    .auth-overlay.show { display: flex; }
    .auth-spinner {
      width: 48px; height: 48px; border-radius: 50%;
      border: 3px solid #333;
      border-top-color: var(--red);
      animation: spin .8s linear infinite;
    }
    .auth-overlay p { font-size: .9rem; color: #ccc; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .modal-content { background: #1e1e1e; border: 1px solid #333; border-radius: 8px; color: var(--white); }
    .modal-header { border-bottom: 1px solid #2a2a2a; padding: 18px 22px 14px; }
    .modal-footer { border-top: 1px solid #2a2a2a; }
    .modal-title { font-weight: 700; font-size: 1rem; }
    .btn-close { filter: invert(1) opacity(.6); }
    .form-label { font-size: .82rem; color: #ccc; margin-bottom: 5px; font-weight: 500; }
    .form-control, .form-select {
      background: #111; border: 1px solid #333; color: var(--white);
      font-family: 'DM Sans', sans-serif; font-size: .85rem; border-radius: 6px; padding: 9px 12px;
    }
    .form-control:focus, .form-select:focus { background: #111; border-color: var(--red); color: var(--white); box-shadow: 0 0 0 2px rgba(20,163,184,.15); }
    .form-select option { background: #1e1e1e; }
    .form-control::placeholder { color: #555; }
    .color-grid { display: flex; gap: 8px; flex-wrap: wrap; }
    .color-swatch { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: border-color .2s, transform .2s; }
    .color-swatch:hover { transform: scale(1.15); }
    .color-swatch.selected { border-color: var(--white); }

    /* AUTH ERROR TOAST */
    .auth-toast {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
      background: #2a0a0a; border: 1px solid var(--red);
      color: #fff; padding: 12px 20px; border-radius: 8px;
      font-size: .85rem; z-index: 9999;
      display: flex; align-items: center; gap: 10px;
      opacity: 0; pointer-events: none;
      transition: opacity .3s;
      white-space: nowrap;
    }
    .auth-toast.show { opacity: 1; }

    footer {
      margin-top: 60px; padding: 24px 4%;
      border-top: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      color: var(--muted); font-size: .75rem;
    }

    @media (max-width: 768px) {
      .nav-links { display: none; }
      .hero-stats { gap: 16px; }
      .sites-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
      .sites-grid { grid-template-columns: repeat(2, 1fr); }
      .hero-band h1 { font-size: 2rem; }
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .site-card { animation: fadeUp .4s ease both; }
    .site-card:nth-child(1) { animation-delay: .05s; }
    .site-card:nth-child(2) { animation-delay: .1s; }
    .site-card:nth-child(3) { animation-delay: .15s; }
    .site-card:nth-child(4) { animation-delay: .2s; }
    .site-card:nth-child(5) { animation-delay: .25s; }
    .site-card:nth-child(6) { animation-delay: .3s; }
    .site-card:nth-child(7) { animation-delay: .35s; }
    .site-card:nth-child(8) { animation-delay: .4s; }

/* ─── Added for the SSO portal (auth, admin, tables) ─────────────────────── */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background: radial-gradient(circle at 30% 20%, #06363d 0%, #0b1416 55%, #04282e 100%); }
.auth-card { width:100%; max-width:400px; background:var(--card-bg); border:1px solid var(--border);
  border-radius:12px; padding:36px 32px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.auth-card .nf-logo { display:block; text-align:center; margin-bottom:6px; font-size:2rem; }
.auth-card .sub { text-align:center; color:var(--muted); font-size:.85rem; margin-bottom:24px; }
.auth-card .form-label { font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.alert-inline { padding:10px 14px; border-radius:8px; font-size:.85rem; margin-bottom:16px; display:flex; gap:8px; align-items:center; }
.alert-err  { background:rgba(20,163,184,.12); border:1px solid rgba(20,163,184,.4); color:#ff8a8a; }
.alert-ok   { background:rgba(70,211,105,.12); border:1px solid rgba(70,211,105,.4); color:#8ff0a8; }
.alert-warn { background:rgba(245,197,24,.12); border:1px solid rgba(245,197,24,.4); color:#f3d779; }

.page-wrap { max-width:1200px; margin:0 auto; padding:28px 4% 60px; }  /* sits below the full-width .page-hero */
.page-wrap.no-hero { padding-top:84px; }  /* fallback: clear the 60px nav when a page has no hero */

/* Dashboard "Categories" tiles — click to jump to that category in Collections. */
.cat-tile-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.cat-tile { display:flex; align-items:center; gap:12px; padding:14px 16px; background:rgba(255,255,255,.03);
  border:1px solid var(--border); border-radius:12px; text-decoration:none; color:var(--white);
  transition:transform .15s, border-color .2s, background .2s; }
.cat-tile:hover { transform:translateY(-2px); border-color:rgba(20,163,184,.45); background:rgba(20,163,184,.07);
  color:var(--white); text-decoration:none; }
.cat-tile-name { font-weight:600; font-size:.9rem; }
.cat-tile-count { font-size:.7rem; color:var(--muted); margin-top:2px; }
.cat-section { scroll-margin-top:90px; }   /* so deep-linked category isn't hidden under the fixed nav */
.cat-section.cat-flash { animation:catFlash 1.6s ease-out; border-radius:12px; }
@keyframes catFlash { 0% { box-shadow:0 0 0 2px rgba(20,163,184,.6); background:rgba(20,163,184,.08); }
  100% { box-shadow:0 0 0 0 rgba(20,163,184,0); background:transparent; } }
.page-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.page-head h1 { font-family:'Bebas Neue',sans-serif; font-size:2rem; letter-spacing:1px; }
.page-head .sub { color:var(--muted); font-size:.85rem; }

.data-table { width:100%; border-collapse:collapse; background:var(--card-bg); border-radius:10px; overflow:hidden; }
.data-table th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
  padding:12px 14px; border-bottom:1px solid var(--border); background:#161616; }
.data-table td { padding:12px 14px; border-bottom:1px solid var(--border); font-size:.85rem; vertical-align:middle; }
.data-table tr:hover td { background:var(--card-hover); }
.data-table tr:last-child td { border-bottom:none; }

.pill-badge { display:inline-block; padding:2px 10px; border-radius:20px; font-size:.7rem; font-weight:600; }
.b-active { background:rgba(70,211,105,.15); color:var(--green); }
.b-inactive { background:rgba(153,153,153,.15); color:var(--muted); }
.b-admin { background:rgba(20,163,184,.15); color:#ff8a8a; }
.b-user { background:rgba(84,179,214,.15); color:var(--blue); }
.chip { display:inline-block; padding:3px 10px; border-radius:6px; font-size:.72rem; font-weight:600; letter-spacing:.2px; background:rgba(255,255,255,.07); color:#ccc; margin:2px; border:1px solid transparent; }
/* audit action colours */
.chip-green  { background:rgba(70,211,105,.15);  color:#5fdc83; border-color:rgba(70,211,105,.30); }
.chip-red    { background:rgba(224,65,75,.15);   color:#ff7b84; border-color:rgba(224,65,75,.30); }
.chip-amber  { background:rgba(245,197,24,.15);  color:#f3c63b; border-color:rgba(245,197,24,.30); }
.chip-teal   { background:rgba(20,163,184,.18);  color:#38d0e0; border-color:rgba(20,163,184,.35); }
.chip-blue   { background:rgba(84,179,214,.16);  color:#7cc4e6; border-color:rgba(84,179,214,.30); }
.chip-purple { background:rgba(124,92,191,.18);  color:#b69cf0; border-color:rgba(124,92,191,.35); }
.chip-grey   { background:rgba(255,255,255,.07); color:#aebcbe; border-color:var(--border); }

.admin-tabs { display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:22px; flex-wrap:wrap; }
.admin-tabs a { padding:10px 16px; color:#ccc; text-decoration:none; font-size:.85rem; border-bottom:2px solid transparent; }
.admin-tabs a.active, .admin-tabs a:hover { color:#fff; border-bottom-color:var(--red); }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.form-grid .full { grid-column:1 / -1; }
@media(max-width:640px){ .form-grid { grid-template-columns:1fr; } }
.card-box { background:var(--card-bg); border:1px solid var(--border); border-radius:10px; padding:22px; }
.mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.8rem; }

/* ─── Dashboard tile classes (DB-driven version) ─────────────────────────── */
.card-thumb { position:relative; height:120px; border-radius:8px 8px 0 0; overflow:hidden; background:#0f0f0f; }
.card-body { padding:10px 12px 12px; }
.card-name { font-weight:700; font-size:.92rem; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-cat { font-size:.72rem; color:var(--muted); margin-bottom:8px; }
.card-tags { display:flex; flex-wrap:wrap; gap:4px; min-height:4px; margin-bottom:10px; }
.card-tags .tag { font-size:.66rem; padding:2px 7px; border-radius:5px; background:rgba(255,255,255,.07); color:#bbb; }
.card-launch { flex:1; border:none; border-radius:6px; background:var(--red); color:#fff; font-size:.78rem; font-weight:600;
  padding:6px 10px; cursor:pointer; transition:background .2s; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.card-launch:hover { background:var(--red-dark); }
a.card-icon-btn { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }

/* ─── Dashboard: drag-reorder + list view ────────────────────────────────── */
.site-card.dragging { opacity:.45; transform:scale(.97); }
.site-card[draggable=true] { }

/* ── Netflix-style horizontal rail for the dashboard "My Applications" ── */
.app-rail { position:relative; }
.app-scroll:not(.list-view) {
  display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
  padding:4px 2px 6px; scroll-snap-type:x proximity; scroll-behavior:smooth;
  scrollbar-width:none;                 /* Firefox — no scrollbar */
}
.app-scroll:not(.list-view) .site-card { flex:0 0 210px; scroll-snap-align:start; }
.app-scroll:not(.list-view)::-webkit-scrollbar { display:none; }   /* Chrome/Edge — no scrollbar */
.rail-arrow {
  position:absolute; top:calc(50% - 7px); transform:translateY(-50%); z-index:6;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--border);
  background:rgba(8,16,18,.55); color:#fff; cursor:pointer; opacity:0;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  transition:opacity .18s, background .15s, border-color .15s; backdrop-filter:blur(4px);
}
.app-rail:hover .rail-arrow { opacity:1; }
.rail-arrow:hover { background:var(--accent); border-color:var(--accent); }
.rail-left { left:-30px; } .rail-right { right:-30px; }
.app-rail:has(.list-view) .rail-arrow { display:none; }   /* no arrows in list view */
@media (max-width:600px) { .rail-arrow { display:none; } }

.sites-grid.list-view { display:flex; flex-direction:column; gap:6px; }
.sites-grid.list-view .site-card { display:flex; align-items:center; }
.sites-grid.list-view .card-thumb { width:64px; height:56px; flex-shrink:0; border-radius:6px 0 0 6px; }
.sites-grid.list-view .fav-btn { top:4px; right:4px; width:20px; height:20px; }
.sites-grid.list-view .card-body { display:flex; align-items:center; gap:14px; flex:1; padding:8px 14px; }
.sites-grid.list-view .card-name { margin:0; }
.sites-grid.list-view .card-cat { margin:0; }
.sites-grid.list-view .card-tags { display:none; }
.sites-grid.list-view .card-actions { margin-left:auto; }
.sites-grid.list-view .card-launch { flex:0 0 auto; padding:6px 14px; }
/* Shared-card action row (bell / edit / move): pin to the right, centred, in list view. */
.sites-grid.list-view .ov-actions { margin:0 0 0 auto; align-items:center; }
.recent-card .thumb img { width:38px; height:38px; object-fit:contain; border-radius:8px; background:#fff; padding:4px; }

/* ─── Collections: category sections (stitched from original) ─────────────── */
.cat-section { margin-bottom:8px; }
.cat-header { padding:28px 0 0; display:flex; align-items:center; gap:14px; }
.cat-icon { width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.cat-title-text { font-family:'Bebas Neue',sans-serif; font-size:1.5rem; letter-spacing:1px; }
.move-select { background:#0f1819; border:1px solid var(--border); color:#cfd8d9; font-size:.72rem; border-radius:5px; padding:3px 6px; max-width:130px; }

/* app_id / app_enc_key field + Generate button */
.gen-row { display:flex; gap:8px; align-items:stretch; }
.gen-row .form-control { flex:1; }
.btn-gen { white-space:nowrap; background:rgba(20,163,184,.15); border:1px solid var(--border);
  color:var(--accent-bright); border-radius:6px; padding:0 14px; font-size:.8rem; font-weight:600;
  cursor:pointer; display:flex; align-items:center; gap:6px; transition:.15s; }
.btn-gen:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-gen:disabled { opacity:.45; cursor:not-allowed; }

/* ─── Bootstrap component overrides → BMTC teal ──────────────────────────── */
.btn-danger { background-color: var(--red); border-color: var(--red); }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger:disabled { background-color: var(--red-dark); border-color: var(--red-dark); }
.btn-outline-danger { color: var(--red); border-color: var(--red); }
.btn-outline-danger:hover { background-color: var(--red); border-color: var(--red); color: #fff; }
.btn-check:checked + .btn-outline-light, .btn-outline-light:hover { color: var(--black); }
.form-check-input:checked { background-color: var(--red); border-color: var(--red); }
.form-check-input:focus { border-color: var(--red); box-shadow: 0 0 0 .2rem rgba(20,163,184,.25); }
a, .text-primary { color: var(--accent); }
.btn-link { color: var(--accent); }

/* ─── Calendar page (stitched from the original calendar.html) ───────────── */
.cal-page { padding-top:0; }
/* padding-top bakes in the 60px fixed-nav clearance (padding doesn't margin-collapse). */
.page-hero { padding:90px 4% 26px; background:linear-gradient(135deg,#06363d,#0b1416 60%,#04282e); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; top:-60px; right:-60px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(20,163,184,.12) 0%, transparent 70%); pointer-events:none; }
.page-hero > div { position:relative; z-index:1; }
.page-hero .add-btn, .page-hero a.btn { position:relative; z-index:1; }
.page-hero h1 { font-family:'Bebas Neue',sans-serif; font-size:clamp(2rem,4vw,3rem); letter-spacing:2px; }
.page-hero p { color:var(--muted); font-size:.88rem; margin-top:4px; }
.cal-layout { display:grid; grid-template-columns:1fr 340px; gap:0; min-height:calc(100vh - 60px - 140px); }
@media(max-width:900px){ .cal-layout{ grid-template-columns:1fr; } .sidebar{ border-left:none!important; border-top:1px solid var(--border); } }
.cal-wrap { padding:24px 4%; border-right:1px solid var(--border); }
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.cal-month { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; letter-spacing:2px; }
.cal-nav-btn { width:34px; height:34px; border-radius:6px; background:var(--card-bg); border:1px solid var(--border); color:#ccc; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; font-size:.8rem; text-decoration:none; }
.cal-nav-btn:hover { background:#26302f; color:var(--white); }
.cal-today-btn { padding:6px 14px; border-radius:6px; background:var(--red); border:none; color:#fff; font-size:.78rem; font-weight:600; cursor:pointer; text-decoration:none; }
.cal-grid-head { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.day-label { text-align:center; font-size:.72rem; color:var(--muted); font-weight:600; padding:6px 0; text-transform:uppercase; letter-spacing:.5px; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-day { min-height:80px; background:var(--card-bg); border:1px solid var(--border); border-radius:4px; padding:6px; cursor:pointer; transition:border-color .2s,background .2s; position:relative; }
.cal-day:hover { border-color:rgba(20,163,184,.4); background:#1d2a29; }
.cal-day.other-month { background:#0f1616; opacity:.5; cursor:default; }
.cal-day.today { border-color:var(--red)!important; background:#06363d; }
.cal-day.has-event { background:#0f2227; }
.day-num { font-size:.8rem; font-weight:600; color:#ccc; margin-bottom:4px; }
.cal-day.today .day-num { color:var(--accent-bright); font-weight:700; }
.day-events { display:flex; flex-direction:column; gap:2px; }
.day-event { font-size:.62rem; padding:2px 5px; border-radius:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; }
.more-events { font-size:.6rem; color:var(--muted); margin-top:2px; }
.sidebar { padding:20px; }
.sidebar-title { font-family:'Bebas Neue',sans-serif; font-size:1.3rem; letter-spacing:1px; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.sidebar-title i { color:var(--accent); font-size:1rem; }
.tab-row { display:flex; gap:4px; margin-bottom:14px; }
.tab-btn { flex:1; padding:7px; border:1px solid var(--border); background:transparent; color:#aaa; border-radius:4px; font-size:.78rem; font-weight:600; cursor:pointer; transition:all .2s; }
.tab-btn.active { background:var(--red); border-color:var(--red); color:#fff; }
.reminder-item { background:var(--card-bg); border:1px solid var(--border); border-radius:6px; padding:12px 14px; margin-bottom:6px; transition:border-color .2s; position:relative; }
.reminder-item:hover { border-color:rgba(20,163,184,.4); }
.r-header { display:flex; align-items:flex-start; gap:10px; }
.r-color-bar { width:3px; border-radius:2px; align-self:stretch; flex-shrink:0; }
.r-body { flex:1; min-width:0; }
.reminder-item .r-title { font-size:.85rem; font-weight:600; margin-bottom:3px; }
.reminder-item .r-time { font-size:.7rem; color:var(--muted); margin-bottom:3px; }
.reminder-item .r-site { font-size:.7rem; color:var(--blue); }
.r-actions { display:flex; gap:5px; margin-top:8px; }
.r-btn { padding:3px 9px; border-radius:3px; font-size:.68rem; font-weight:600; cursor:pointer; border:none; }
.r-btn-edit { background:rgba(255,255,255,.07); color:#ccc; }
.r-btn-edit:hover { background:rgba(255,255,255,.15); color:#fff; }
.r-btn-del { background:rgba(20,163,184,.12); color:var(--accent-bright); }
.r-btn-del:hover { background:rgba(20,163,184,.22); }
.empty-r { text-align:center; padding:32px 16px; color:var(--muted); }
.empty-r i { font-size:1.8rem; opacity:.3; margin-bottom:10px; }
.empty-r p { font-size:.82rem; }
.c-swatch { width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:all .2s; }
.c-swatch:hover { transform:scale(1.15); }
.c-swatch.sel { border-color:#fff; }
.r-btn-done { background:rgba(70,211,105,.15); color:var(--green); }
.r-btn-done:hover { background:rgba(70,211,105,.28); }
.reminder-item.done { opacity:.7; }
.c-swatch.sel { border-color:#fff; }

/* ─── Colour swatch selector (C2) — replaces native colour pickers ───────── */
.swatch-field, .color-row { display:flex; gap:10px; flex-wrap:wrap; }
.swatch { width:34px; height:34px; border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.8rem; transition:.15s; border:2px solid transparent; }
.swatch:hover { transform:translateY(-2px); }
.swatch .ck { opacity:0; transition:.1s; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.swatch.sel { border-color:rgba(255,255,255,.85); }
.swatch.sel .ck { opacity:1; }

/* ─── Custom select (D3, accent-left) — progressively replaces <select> ──── */
.cs { position:relative; user-select:none; width:100%; min-width:150px; }
.cs-btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer;
  background:linear-gradient(#13211f,#0f1a1a); border:1px solid var(--border); border-left:3px solid var(--accent);
  color:#e6edf3; padding:10px 14px; border-radius:8px; font-size:.86rem; transition:.15s; line-height:1.3; }
.cs-btn:hover { background:#16201f; }
.cs-btn .lbl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-btn .caret { color:var(--accent); transition:transform .15s; font-size:.7rem; flex-shrink:0; }
.cs.open .cs-btn { border-color:var(--accent); }
.cs.open .cs-btn .caret { transform:rotate(180deg); }
.cs-menu { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:1080; background:#10191a; border:1px solid var(--border);
  border-radius:10px; padding:6px; box-shadow:0 16px 40px rgba(0,0,0,.55); max-height:260px; overflow:auto; display:none; }
.cs.open .cs-menu { display:block; animation:csIn .12s ease; }
@keyframes csIn { from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.cs-opt { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:7px; cursor:pointer; font-size:.85rem; color:#cdd9da; white-space:nowrap; }
.cs-opt:hover { background:rgba(20,163,184,.14); color:#fff; }
.cs-opt.sel { color:#fff; }
.cs-opt .tick { margin-left:auto; color:var(--accent); opacity:0; font-size:.75rem; }
.cs-opt.sel .tick { opacity:1; }
.cs.disabled { opacity:.5; pointer-events:none; }
/* Compact custom-select inside app cards (e.g. collections "move category") */
.card-actions .cs { min-width:0; max-width:140px; }
.card-actions .cs-btn { padding:6px 10px; font-size:.74rem; }

/* ─── Icon selector (category icons) ─────────────────────────────────────── */
.icon-field { display:flex; gap:8px; flex-wrap:wrap; }
.icon-tile { width:38px; height:38px; border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  background:#0e1819; border:1px solid var(--border); color:#9fb0b2; font-size:.95rem; transition:.15s; }
.icon-tile:hover { color:#fff; border-color:#3a4a4d; transform:translateY(-2px); }
.icon-tile.sel { background:rgba(20,163,184,.16); border-color:var(--accent); color:var(--accent-bright); }

/* ─── Collections move-category dropdown: own row, escape card clip, stack on top ── */
.card-actions { flex-wrap:wrap; }
.card-actions form { flex:1 1 100%; margin-top:4px; }
.card-actions .cs { max-width:none; min-width:0; }
.site-card:has(.cs) { overflow:visible; }      /* let the dropdown menu spill out of the card */
.site-card:has(.cs.open) { z-index:1000; }     /* open card sits above its neighbours */

/* ─── Collections: view toggle, category description, list-view tweaks ────── */
.coll-toolbar { display:flex; justify-content:flex-end; margin-bottom:12px; }
.view-toggle { display:flex; gap:6px; }
.view-toggle .card-icon-btn.active { background:rgba(20,163,184,.2); color:var(--accent); }
.cat-desc { color:var(--muted); font-size:.85rem; margin-top:8px; display:flex; align-items:flex-start; gap:7px; line-height:1.5; max-width:760px; }
.cat-desc i { color:var(--accent); font-size:.78rem; margin-top:3px; flex-shrink:0; }
.coll-grid .card-thumb { height:96px; }
/* list view: move-category dropdown stays inline + compact (matches home list rows) */
.sites-grid.list-view .card-actions { flex-wrap:nowrap; margin-left:auto; }
.sites-grid.list-view .card-actions form { flex:0 0 auto; margin-top:0; }
.sites-grid.list-view .card-actions .cs { max-width:160px; min-width:120px; }
.sites-grid.list-view .card-cat { color:var(--muted); }
/* Category filter pill counts (Collections) */
.pill .pill-count { display:inline-block; min-width:16px; text-align:center; background:rgba(255,255,255,.14); font-size:.66rem; padding:1px 6px; border-radius:10px; margin-left:4px; font-weight:700; }
.pill.active .pill-count { background:rgba(0,0,0,.22); }

/* ─── Application add/edit form (styled from the original add.html, teal) ──── */
.app-form .form-section { background:var(--card-bg); border:1px solid var(--border); border-radius:10px; padding:20px; margin-bottom:16px; }
.app-form .form-section-title { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.app-form .form-section-title i { color:var(--accent); font-size:.85rem; }
.app-form .helper { font-size:.72rem; color:#6c8082; margin-top:5px; }
.preview-wrap { margin-bottom:22px; }
.preview-label { font-size:.74rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); font-weight:700; margin-bottom:10px; }
.preview-card { background:var(--card-bg); border:1px solid var(--border); border-radius:10px; overflow:hidden; width:220px; }
.preview-thumb { height:110px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.preview-thumb .bg { position:absolute; inset:0; filter:blur(30px); opacity:.30; }
.preview-logo-ph { width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:1.7rem; color:#fff; box-shadow:0 4px 16px rgba(0,0,0,.6); position:relative; z-index:1; overflow:hidden; }
.preview-logo-ph img { width:100%; height:100%; object-fit:contain; background:#fff; }
.preview-body { padding:10px 12px 4px; }
.preview-name { font-size:.9rem; font-weight:700; }
.preview-url { font-size:.7rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.preview-foot { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-top:1px solid rgba(255,255,255,.05); }
.preview-btn { font-size:.7rem; background:var(--accent); color:#fff; padding:3px 12px; border-radius:5px; font-weight:600; border:none; }
.preview-cat { font-size:.65rem; padding:2px 8px; border-radius:5px; font-weight:600; background:rgba(20,163,184,.18); color:var(--accent-bright); }
.submit-row { display:flex; justify-content:flex-end; gap:10px; margin-top:4px; }
/* Contained filter row (admin Applications page) */
.coll-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.coll-bar .filter-pills { flex:1; }
.coll-bar .view-toggle { margin-left:auto; display:flex; gap:6px; }

/* ─── Applications page cards: clickable, blurred-image bg, overlay icons ─── */
.app-card { cursor:pointer; position:relative; }
.app-card .card-thumb { position:relative; overflow:hidden; height:110px; display:flex; align-items:center; justify-content:center; }
.app-card .bg-blur { position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(22px) saturate(1.4); opacity:.45; transform:scale(1.35); }
.app-card .app-logo, .app-card .app-logo-ph { position:relative; z-index:1; width:56px; height:56px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.55); }
.app-card .app-logo { object-fit:contain; background:#fff; padding:7px; }
.app-card .app-logo-ph { display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:1.7rem; color:#fff; }
.app-card .ov-actions { display:flex; gap:8px; margin-top:10px; }
.ov-btn { width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.07); border:1px solid var(--border); color:#aebcbe; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.78rem; transition:.15s; text-decoration:none; }
.ov-btn:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.app-card.launching { opacity:.55; pointer-events:none; }

/* ─── Add/Edit Application: 2-column (form left, sticky preview right) ────── */
.app-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:26px; align-items:start; }
.app-preview-col { position:sticky; top:80px; }   /* stays in view while the form scrolls (80px clears the fixed nav) */
.app-preview-col .preview-wrap { margin-bottom:0; }
@media (max-width:820px){
  .app-layout { grid-template-columns:1fr; }
  .app-preview-col { position:static; order:-1; }   /* preview on top on small screens */
}

/* ─── Themed file/logo picker ────────────────────────────────────────────── */
.file-drop { display:flex; align-items:center; gap:14px; width:100%; padding:16px 18px; cursor:pointer;
  border:1.5px dashed var(--border); border-radius:10px; background:#0e1819; color:#9fb0b2; transition:.15s; }
.file-drop:hover { border-color:var(--accent); background:#0f1d1e; color:#cfe1e3; }
.file-drop.has-file { border-style:solid; border-color:var(--accent); color:#fff; }
.file-drop .fd-icon { font-size:1.35rem; color:var(--accent); flex-shrink:0; }
.file-drop .fd-text { font-size:.88rem; font-weight:500; line-height:1.3; }
.file-drop .fd-sub { display:block; font-size:.72rem; color:var(--muted); font-weight:400; margin-top:2px; }
.file-drop .fd-thumb { width:42px; height:42px; border-radius:8px; object-fit:contain; background:#fff; padding:4px; margin-left:auto; flex-shrink:0; }

/* preview tile: uploaded logo fills the centered placeholder */
#prev-ph img { width:100%; height:100%; object-fit:contain; border-radius:12px; }
/* dark dropdown menu (fixes white hover band on the profile menu) */
.dropdown-menu { background:var(--card-bg); border:1px solid var(--border); box-shadow:0 12px 32px rgba(0,0,0,.5); }
.dropdown-item { color:#cdd9da; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item:active { background:rgba(20,163,184,.16); color:#fff; }
.dropdown-divider { border-color:var(--border); }

/* ─── Toast (T1) animation ───────────────────────────────────────────────── */
@keyframes aiopToastIn { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:none} }

/* ─── P3 confirm popup (delete / suspend / generic) ──────────────────────── */
.aiop-pop-overlay { position:fixed; inset:0; background:rgba(2,8,9,.6); backdrop-filter:blur(3px); z-index:5000; display:none; align-items:center; justify-content:center; padding:24px; }
.aiop-pop-overlay.show { display:flex; }
.aiop-pop { background:var(--card-bg); border:1px solid var(--border); border-radius:14px; max-width:400px; width:100%; box-shadow:0 24px 70px rgba(0,0,0,.6); overflow:hidden; animation:aiopPopIn .15s ease; }
@keyframes aiopPopIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.aiop-pop .bar { height:5px; background:var(--accent); }
.aiop-pop.danger .bar { background:#e0414b; }
.aiop-pop.warn .bar { background:var(--gold); }
.aiop-pop .body { padding:24px; }
.aiop-pop .ico { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin:0 auto; }
.aiop-pop h5 { font-size:1.05rem; text-align:center; margin:14px 0 6px; }
.aiop-pop p { font-size:.85rem; color:var(--muted); text-align:center; line-height:1.5; margin:0; }
.aiop-pop .sso-ref { margin:14px 0 0; text-align:center; font-size:.74rem; color:var(--muted); cursor:pointer; }
.aiop-pop .sso-ref code { background:#0d1117; border:1px solid var(--border); border-radius:5px; padding:2px 7px; color:#79c0ff; font-size:.72rem; user-select:all; }
.aiop-pop .sso-ref:hover code { border-color:var(--accent); }
.aiop-pop .acts { display:flex; gap:10px; margin-top:20px; }
.aiop-pop .acts button { flex:1; padding:10px; border-radius:8px; font-size:.85rem; font-weight:600; cursor:pointer; border:1px solid var(--border); }
.aiop-pop .ac-cancel { background:transparent; color:#cfd8d9; }
.aiop-pop .ac-cancel:hover { background:rgba(255,255,255,.06); }
.aiop-pop .ac-danger { background:#e0414b; border-color:#e0414b; color:#fff; }
.aiop-pop .ac-warn { background:var(--gold); border-color:var(--gold); color:#1a1400; }
.aiop-pop .ac-accent { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ─── CB3 round-check checkboxes (applied to every checkbox) ──────────────── */
input[type=checkbox] { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  border:2px solid #3a4a4d; background:#0e1819; background-image:none; cursor:pointer; position:relative;
  vertical-align:middle; transition:.15s; flex-shrink:0; margin:0; }
input[type=checkbox]:hover { border-color:var(--accent); }
input[type=checkbox]:checked { background:var(--accent); border-color:var(--accent); }
input[type=checkbox]:checked::after { content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:.62rem; color:#fff; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
input[type=checkbox]:focus { outline:none; box-shadow:0 0 0 3px rgba(20,163,184,.25); }
.check-row { display:flex; align-items:center; gap:10px; font-size:.9rem; color:#dbe6e7; cursor:pointer; }

/* ─── Category multi-select chips (teal selected) ────────────────────────── */
.cat-chips { display:flex; flex-wrap:wrap; gap:8px; }
.cat-chip { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:.84rem; color:#cfd8d9; transition:.15s; }
.cat-chip:hover { border-color:#3a4a4d; }
.cat-chip:has(input:checked) { background:rgba(20,163,184,.16); border-color:var(--accent); color:#fff; }
.cat-chip.cat-all { font-weight:700; }
.cat-chip input[type=checkbox] { width:18px; height:18px; }
/* readonly fields stay dark + readable (not the light disabled look) */
.form-control[readonly] { opacity:.85; cursor:not-allowed; background:#0c1314; }