/* manager_default.css
   Ingresso Security Platform - Manager Portal + Resident Portal
   DEFAULT theme (2026-10-16): the Visitor Kiosk's Default look (kiosk_theme.py,
   rev 35/36 "Twilight, raised keys") carried over to the web portals.

   Loaded AFTER manager_arcade.css on every page. Every rule is scoped to
   html.th-default, so a page whose <html> lacks that class shows ARCADE FUN
   exactly as before. The html.th-default prefix also outranks the per-page
   <style> blocks (ManagerLogin.php, select_community.php, ResidentLogin.php).

   Sources of every value (kiosk_theme.py):
     sky             SKY  #1c1548 -> #121a3e -> #0b1430 at 160 deg
     raised keys     raised_slab(): face top -> bottom, darker lip under the
                     face, gloss band over the top 44 %, thin light top edge
     key palettes    KEYS call (cyan) / scan (lime), ATT_ON (violet)
     headlines       head(): plain white face, soft shadow, no extrude/glow
     name / welcome  KNAME #c9d3f5, WELCOME #aab3d6
*/

html.th-default {
  --sky-0: #1c1548; --sky-1: #121a3e; --sky-3: #0b1430;
  --rim: rgba(201,211,245,.16); --rim-soft: rgba(201,211,245,.08);
  --face: #ffffff; --cyan: #7fd4ea; --kname: #c9d3f5; --soft: #aab3d6;
  --muted: #9aa5c8; --muted-2: #8590b6;
  --border: rgba(201,211,245,.12); --border-2: rgba(201,211,245,.2);
  --panel: rgba(16,22,58,.72); --panel-2: rgba(11,18,46,.82);
  --well: rgba(6,10,30,.6); --well-rim: rgba(201,211,245,.16);
  --violet: #7c60dc;
  background: linear-gradient(160deg, #1c1548 0%, #121a3e 55%, #0b1430 100%) fixed #0b1430;
}

/* -- Background: one calm gradient ------------------------------------------ */
html.th-default body {
  color: #e6ebf8;
  background: linear-gradient(160deg, #1c1548 0%, #121a3e 55%, #0b1430 100%);
  background-attachment: fixed;
}

/* -- Raised key (raised_slab) ------------------------------------------------
   --f1 face top, --f2 face bottom, --lp lip. Default palette = slate. */
html.th-default .btn, html.th-default .exp-view, html.th-default .tech-tab,
html.th-default .side-search-btn {
  --f1: #7d8fb0; --f2: #56688a; --lp: #2b3750; --lip: 5px; --rad: 12px;
}
html.th-default .btn,
html.th-default .btn:hover, html.th-default .btn-primary:hover, html.th-default .btn-danger:hover,
html.th-default .btn-warn:hover, html.th-default .dash-btn-access:hover,
html.th-default .btn-act:hover:not(:disabled),
html.th-default .btn.ad-admit, html.th-default .btn.icp-answer,
html.th-default .btn.ad-admit:hover, html.th-default .btn.icp-answer:hover,
html.th-default .dc-btn-lock, html.th-default .dc-btn-upload,
html.th-default .exp-card-red .exp-view, html.th-default .exp-card-amber .exp-view,
html.th-default .tech-tab, html.th-default .tech-tab.active, html.th-default .side-search-btn,
html.th-default .side-search-btn:hover {
  color: #fff !important; border: 0 !important;
  -webkit-text-stroke: 0; text-shadow: 0 1px 2px rgba(0,0,0,.45);
  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.09) 26%, rgba(255,255,255,0) 44%),
    linear-gradient(180deg, var(--f1) 0%, var(--f2) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 var(--lip) 0 0 var(--lp),
    0 calc(var(--lip) + 6px) 14px rgba(0,0,0,.35);
}
html.th-default .btn { font-weight: 700; letter-spacing: 1.2px; }
html.th-default .btn::after { display: none; }
html.th-default .btn:hover, html.th-default .tech-tab:hover, html.th-default .exp-view:hover,
html.th-default .side-search-btn:hover { filter: brightness(1.07); }
html.th-default .btn:active, html.th-default .btn-act:active:not(:disabled),
html.th-default .exp-view:active, html.th-default .side-search-btn:active {
  transform: translateY(var(--lip));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 6px rgba(0,0,0,.35);
  background: linear-gradient(180deg, var(--f2) 0%, var(--f2) 100%) !important;
}
html.th-default .btn-sm { --lip: 4px; --rad: 10px; -webkit-text-stroke: 0; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
html.th-default .btn:disabled, html.th-default .btn[disabled] { filter: grayscale(.8) brightness(.8); opacity: .55; }

/* palettes: kiosk KEYS / ATT_ON, plus calm versions of the portal's others */
html.th-default .btn-primary, html.th-default .dc-btn-upload, html.th-default .btn-time,
html.th-default .side-search-btn, html.th-default .aplay-btn          { --f1: #22b0d2; --f2: #11779a; --lp: #08465d; } /* call  */
html.th-default .btn-go, html.th-default .dash-btn-access,
html.th-default .btn.ad-admit, html.th-default .btn.icp-answer        { --f1: #78c845; --f2: #46902a; --lp: #285415; } /* scan  */
html.th-default .btn-violet, html.th-default .dash-btn-arrivals,
html.th-default .exp-card-amber .exp-view                              { --f1: #7c60dc; --f2: #5236ad; --lp: #2e1b72; } /* attendant */
html.th-default .btn-blue, html.th-default .btn-test                  { --f1: #4a7fe0; --f2: #2d5bb5; --lp: #17336f; }
html.th-default .btn-amber, html.th-default .btn-warn,
html.th-default .dc-btn-lock, html.th-default .btn-provision          { --f1: #e0a23a; --f2: #b07818; --lp: #5e3d06; }
html.th-default .btn-pink                                              { --f1: #d0509e; --f2: #a0307a; --lp: #561443; }
html.th-default .btn-danger, html.th-default .btn-del,
html.th-default .exp-card-red .exp-view                                { --f1: #e0505e; --f2: #b02c3c; --lp: #5e0f1a; }
html.th-default .btn-editc                                             { --f1: #7d8fb0; --f2: #56688a; --lp: #2b3750; }

/* the chevron ball becomes a plain white chevron */
html.th-default .btn .chip { width: 14px; height: 14px; margin-right: -4px; background: none; box-shadow: none; }
html.th-default .btn .chip::before { left: 1px; top: 3px; border-color: #fff; }
html.th-default .btn .chip::after { display: none; }

/* -- Sidebar ------------------------------------------------------------------ */
html.th-default .sidebar {
  background: linear-gradient(180deg, rgba(20,18,62,.92) 0%, rgba(11,18,48,.95) 100%);
  border-right: 1px solid var(--rim); box-shadow: 6px 0 24px rgba(0,0,0,.35);
  scrollbar-color: #3a4370 transparent;
}
html.th-default .shell::before { display: none; }

/* brand: the wordmark on a violet raised key */
html.th-default .bk-cap {
  background:
    linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.08) 26%, rgba(255,255,255,0) 44%),
    linear-gradient(180deg, #7c60dc 0%, #5236ad 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 7px 0 #2e1b72, 0 14px 22px rgba(0,0,0,.4);
}
html.th-default .bk-cap::after { display: none; }
html.th-default .bk-cap img { filter: brightness(0) invert(1) drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
html.th-default .bk-sub { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 1px 2px rgba(0,0,0,.5); }

html.th-default .dealer-strip div:last-child { color: var(--kname); }

/* community switcher: a raised key in the site colour */
html.th-default .switcher, html.th-default .switcher:hover {
  border: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.06) 26%, rgba(255,255,255,0) 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--c) 92%, #fff) 0%, color-mix(in srgb, var(--c) 70%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 5px 0 color-mix(in srgb, var(--c) 40%, #000), 0 11px 16px rgba(0,0,0,.35);
}
html.th-default .switcher:hover { filter: brightness(1.06); }
html.th-default .switcher .sw-ico { background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.3); }
html.th-default .switcher .sw-name { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
html.th-default .switcher .sw-label, html.th-default .switcher .sw-role { color: rgba(255,255,255,.85); }
html.th-default .switcher .sw-caret { background: rgba(0,0,0,.22); color: #fff; box-shadow: none; }

/* search well */
html.th-default .side-search input { background: var(--well); border: 1px solid var(--well-rim); box-shadow: none; border-radius: 9px; }
html.th-default .side-search input:focus { border-color: #22b0d2; box-shadow: 0 0 0 3px rgba(34,176,210,.18); }
html.th-default .side-search input::placeholder, html.th-default .search::placeholder { color: #6c77a0; }
html.th-default .side-search-btn { --lip: 4px; }

/* group labels: quiet */
html.th-default .nav-group-label { color: var(--muted-2); text-shadow: none; }
html.th-default .nav-group-label::after { background: linear-gradient(90deg, rgba(201,211,245,.2), transparent); }

/* nav: plain rows, solid icon chip, violet active bar */
html.th-default .nav-item {
  min-height: 34px; margin: 0 0 3px; padding-left: 7px; border: 1px solid transparent; border-radius: 9px;
  color: #cfd6ee; background: transparent; box-shadow: none; text-shadow: none;
}
html.th-default .nav-item .ic {
  border-radius: 7px; color: #0b1430;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lit) 88%, #fff), color-mix(in srgb, var(--lit) 78%, #000));
  box-shadow: 0 2px 0 color-mix(in srgb, var(--lit) 40%, #000);
}
html.th-default .nav-item:hover { background: rgba(201,211,245,.07); border-color: transparent; color: #fff; }
html.th-default .nav-item:active { transform: none; box-shadow: none; }
html.th-default .nav-item.active {
  transform: none; color: #fff; text-shadow: none; padding-right: 10px;
  background: rgba(124,96,220,.26); border-color: rgba(124,96,220,.45);
  box-shadow: inset 3px 0 0 #9c84ee;
}
html.th-default .nav-item.active::after { display: none; }
/* the five icon colours, toned down from the arcade's lit keys */
html.th-default .k-num  { --lit: #e0b04a; }
html.th-default .k-char { --lit: #4ec3e0; }
html.th-default .k-sym  { --lit: #b98be8; }
html.th-default .k-mod  { --lit: #e57373; }
html.th-default .k-on   { --lit: #8bcf5a; }
html.th-default .nav-badge { background: #e0505e; color: #fff; }
html.th-default .nav-item.alarm-active { border-color: #e0505e; box-shadow: none; }

/* footer: kiosk-calls switch + user */
html.th-default .kc-toggle { background: var(--panel-2); border: 1px solid var(--rim); box-shadow: none; }
html.th-default .kc-toggle:hover { border-color: rgba(34,176,210,.6); }
html.th-default .kc-toggle.on { background: rgba(120,200,69,.12); border-color: rgba(120,200,69,.5); box-shadow: none; }
html.th-default .kc-toggle .kc-t { color: #fff; }
html.th-default .kc-toggle.on .kc-s { color: #9ed676; }
html.th-default .kc-sw { background: rgba(6,10,30,.8); border: 1px solid var(--well-rim); box-shadow: none; }
html.th-default .kc-sw::after { background: #8a93b8; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
html.th-default .kc-toggle.on .kc-sw { background: #46902a; }
html.th-default .kc-toggle.on .kc-sw::after { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
html.th-default .user-chip { background: var(--panel-2); border: 1px solid var(--rim); box-shadow: none; }
html.th-default .user-chip .avatar { color: #fff; -webkit-text-stroke: 0; background: linear-gradient(180deg, #7c60dc, #5236ad); box-shadow: 0 3px 0 #2e1b72; }
html.th-default .user-chip .u-name { color: #fff; }
html.th-default .user-chip .u-logout { color: var(--cyan); }

/* -- Headlines (head): white, soft shadow ------------------------------------- */
html.th-default .page-title, html.th-default .picker-title, html.th-default .screen .t {
  color: #fff; -webkit-text-stroke: 0; text-shadow: 0 3px 8px rgba(0,0,0,.45);
}
html.th-default .page-sub, html.th-default .picker-sub, html.th-default .screen .s { color: var(--soft); text-shadow: none; }
html.th-default .badge-role { color: #d9d0ff; border-color: rgba(124,96,220,.6); background: rgba(124,96,220,.18); box-shadow: none; }

/* -- Panels: calm cards -------------------------------------------------------- */
html.th-default .panel, html.th-default .rd-card, html.th-default .mini-card, html.th-default .filter-bar,
html.th-default .metric, html.th-default .dash-svc {
  background: var(--panel); border: 1px solid var(--rim); border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
html.th-default .panel-title, html.th-default .modal-head, html.th-default .mini-title, html.th-default .dc-title,
html.th-default .detail-title, html.th-default .pref-title, html.th-default .cs-title, html.th-default .rd-card-head,
html.th-default .dash-svc-name, html.th-default .toast-title { color: #fff; }
html.th-default .metric .m-value, html.th-default .dash-svc-phone, html.th-default .ba-cap-num { color: #fff; -webkit-text-stroke: 0; }
html.th-default .cap-banner { background: rgba(34,176,210,.1); border-color: rgba(34,176,210,.35); color: #9fdcec; }
html.th-default .coming-soon, html.th-default .ba-cap-cell, html.th-default .exp-card { background: var(--panel-2); border-color: var(--rim); }

/* -- Tables: plain text ------------------------------------------------------ */
html.th-default .tbl th { color: var(--muted-2); border-bottom-color: var(--rim); }
html.th-default .tbl td { color: #dde3f4; border-bottom-color: var(--rim-soft); }
html.th-default .tbl-hover tbody tr.addr-row:hover, html.th-default .link-row:hover,
html.th-default .tbl-hover tbody tr:hover { background: rgba(201,211,245,.05); }
html.th-default .cell-link { color: var(--cyan); }
html.th-default .dc-row.sel > td { background: rgba(34,176,210,.16) !important; }

/* -- Status pills: the existing pills, flat ---------------------------------- */
html.th-default .pill-granted { color: #fff; background: #46902a; box-shadow: none; }
html.th-default .pill-denied  { color: #fff; background: #b02c3c; box-shadow: none; }
html.th-default .pill-warn    { color: #2e1d00; background: #e0a23a; box-shadow: none; }

/* -- Fields -------------------------------------------------------------------- */
html.th-default .search,
html.th-default .form-field input[type=text], html.th-default .form-field input[type=number],
html.th-default .form-field input[type=password], html.th-default .form-field input[type=email],
html.th-default .form-field input[type=date], html.th-default .form-field select,
html.th-default .filter-field input, html.th-default .filter-field select,
html.th-default .dc-field > select, html.th-default .sched-grid input[type=time] {
  background: var(--well); border: 1px solid var(--well-rim); border-radius: 9px; box-shadow: none; color: #e6ebf8;
}
html.th-default .search:focus, html.th-default .form-field input:focus, html.th-default .form-field select:focus,
html.th-default .filter-field input:focus, html.th-default .filter-field select:focus,
html.th-default .dc-field > select:focus, html.th-default .sched-grid input[type=time]:focus {
  border-color: #22b0d2; background: rgba(6,10,30,.75); box-shadow: 0 0 0 3px rgba(34,176,210,.18);
}
html.th-default .form-field label, html.th-default .filter-field label, html.th-default .info-k,
html.th-default .rd-info .k { color: var(--muted); }
html.th-default .check-label input, html.th-default .main:has(.tech-tabs) input[type=checkbox] { accent-color: #22b0d2; }
html.th-default select option, html.th-default select optgroup { background-color: #141a40; }
html.th-default .main:has(.tech-tabs) input:focus { border-color: #22b0d2; box-shadow: 0 0 0 3px rgba(34,176,210,.18); }

/* -- Small keys, tabs ------------------------------------------------------- */
html.th-default .icon-btn { background: var(--panel-2); border: 1px solid var(--rim); color: var(--cyan); box-shadow: 0 2px 0 rgba(0,0,0,.4); }
html.th-default .icon-btn:hover { border-color: #22b0d2; color: #fff; background: var(--panel-2); }
html.th-default .aplay-btn { background: linear-gradient(180deg, #22b0d2, #11779a); color: #fff; box-shadow: 0 3px 0 #08465d; }
html.th-default .aplay-fill { background: #22b0d2; }
html.th-default .tab.active { color: #fff; border-bottom-color: #22b0d2; text-shadow: none; background: none; }
html.th-default .tab.active .tab-count { background: #22b0d2; color: #fff; }
html.th-default .tech-subtabs { background: var(--panel-2); border-color: var(--rim); }
html.th-default .tech-subtab.active { background: rgba(124,96,220,.3); color: #fff; box-shadow: inset 0 0 0 1px rgba(124,96,220,.6); }
html.th-default .tech-tab { filter: saturate(.75) brightness(.85); --lip: 4px; outline: 0; }
html.th-default .tech-tab:hover { filter: none; }
html.th-default .tech-tab.active { filter: none; transform: translateY(2px); outline: 2px solid rgba(255,255,255,.8); outline-offset: 3px; }
html.th-default .tech-tab:nth-child(8n+1) { --f1: #22b0d2; --f2: #11779a; --lp: #08465d; }
html.th-default .tech-tab:nth-child(8n+2) { --f1: #e0a23a; --f2: #b07818; --lp: #5e3d06; }
html.th-default .tech-tab:nth-child(8n+3) { --f1: #78c845; --f2: #46902a; --lp: #285415; }
html.th-default .tech-tab:nth-child(8n+4) { --f1: #4a7fe0; --f2: #2d5bb5; --lp: #17336f; }
html.th-default .tech-tab:nth-child(8n+5) { --f1: #7c60dc; --f2: #5236ad; --lp: #2e1b72; }
html.th-default .tech-tab:nth-child(8n+6) { --f1: #d0509e; --f2: #a0307a; --lp: #561443; }
html.th-default .tech-tab:nth-child(8n+7) { --f1: #e0505e; --f2: #b02c3c; --lp: #5e0f1a; }
html.th-default .tech-tab:nth-child(8n+8) { --f1: #7d8fb0; --f2: #56688a; --lp: #2b3750; }

/* -- Flash, modal, toast, loader ------------------------------------------- */
html.th-default .flash-success { background: rgba(120,200,69,.12); border-color: rgba(120,200,69,.45); color: #b5e396; }
html.th-default .flash-error   { background: rgba(224,80,94,.12); border-color: rgba(224,80,94,.5); color: #f19aa3; }
html.th-default .modal-overlay { background: rgba(11,20,48,.7); }
html.th-default .modal { background: linear-gradient(180deg, #1a1a52, #0f1638); border: 1px solid var(--rim); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
html.th-default .toast { background: #141a40; border: 1px solid var(--rim); border-left: 4px solid #e0505e; box-shadow: 0 10px 26px rgba(0,0,0,.5); }
html.th-default .route-loader { background: rgba(11,20,48,.55); }
html.th-default .route-loader .rl-ring { border-color: rgba(201,211,245,.15); border-top-color: #22b0d2; border-right-color: #7c60dc; box-shadow: none; }
html.th-default .route-loader .rl-text { color: var(--kname); }

/* -- Dashboard: count tiles as raised keys in their accent ------------------- */
html.th-default .dash-tile {
  border: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.05) 26%, rgba(255,255,255,0) 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff) 0%, color-mix(in srgb, var(--accent) 68%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 6px 0 color-mix(in srgb, var(--accent) 38%, #000), 0 14px 18px rgba(0,0,0,.32);
}
html.th-default .dash-num { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 2px 4px rgba(0,0,0,.4); }
html.th-default .dash-lbl, html.th-default .dash-sub { color: rgba(255,255,255,.92); }
html.th-default .dash-svc-status.on { color: #9ed676; }
html.th-default .dash-svc-status.on .dot { background: #78c845; box-shadow: none; }
html.th-default .dash-exp-red { border-color: rgba(224,80,94,.5); }
html.th-default .dash-exp-amber { border-color: rgba(224,162,58,.45); }
html.th-default .dash-exp-red .dash-exp-head, html.th-default .exp-card-red .exp-type, html.th-default .exp-card-red .exp-date { color: #f19aa3; }
html.th-default .dash-exp-amber .dash-exp-head, html.th-default .exp-card-amber .exp-date { color: #e9bd6c; }
html.th-default .exp-card-amber .exp-type { color: #b9a6f2; }
html.th-default .exp-view { -webkit-text-stroke: 0; }

/* -- misc -------------------------------------------------------------------- */
html.th-default .back-link, html.th-default .dc-editor-title, html.th-default .sort-ind { color: var(--cyan); }
html.th-default .detail-icon { background: var(--panel-2); border-color: var(--rim); }
html.th-default .detail-avatar { background: linear-gradient(180deg, #7c60dc, #5236ad); color: #fff; }

/* -- Sign-in pages (ManagerLogin.php / ResidentLogin.php) -------------------- */
html.th-default .deck {
  background: rgba(16,22,58,.82); border: 1px solid var(--rim);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
html.th-default .deck::before { display: none; }
html.th-default .screen { background: rgba(124,96,220,.18); border: 1px solid rgba(124,96,220,.4); box-shadow: none; }
html.th-default .card-desc { color: #cfd6ee; }
html.th-default .card-desc strong { color: #fff; }
html.th-default .fld { background: var(--well); border: 1px solid var(--well-rim); box-shadow: none; }
html.th-default .fld:focus-within { border-color: #22b0d2; box-shadow: 0 0 0 3px rgba(34,176,210,.2); }
html.th-default .fld.err { border-color: #e0505e; box-shadow: 0 0 0 3px rgba(224,80,94,.2); }
html.th-default .fld i.br { display: none; }
html.th-default .fld .ik {
  background: linear-gradient(180deg, color-mix(in srgb, var(--lit) 88%, #fff), color-mix(in srgb, var(--lit) 72%, #000));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--lit) 38%, #000);
}
html.th-default .fld .ik       { --lit: #22b0d2; }
html.th-default .fld .ik.amber { --lit: #e0a23a; }
html.th-default .fld .ik.lime  { --lit: #78c845; }
html.th-default .fld label { color: var(--muted); }
html.th-default .fld:focus-within label { color: #9fdcec; }
html.th-default .fld input { caret-color: #22b0d2; }
html.th-default .fld input::placeholder { color: #6c77a0; }
html.th-default .fld input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #0d1434 inset; }
html.th-default .alert { background: rgba(224,80,94,.12); border-color: rgba(224,80,94,.5); color: #f19aa3; }
html.th-default .btn.go { --lip: 6px; --rad: 14px; letter-spacing: 3px; }
html.th-default .hint { border: 1px solid rgba(201,211,245,.16); background: rgba(16,22,58,.55); }
html.th-default .hint .q { color: #fff; background: linear-gradient(180deg, #7c60dc, #5236ad); box-shadow: 0 2px 0 #2e1b72; }
html.th-default .hint .ht { color: #c9bdf6; }
html.th-default .hint .hd { color: #cfd6ee; }
html.th-default .footer { color: var(--muted); }
html.th-default .secure { color: #9ed676; }
html.th-default .secure i { background: #78c845; box-shadow: none; }
html.th-default a { color: var(--cyan); }
html.th-default .nav-item, html.th-default .btn { color: #fff; }
html.th-default .nav-item { color: #cfd6ee; }
html.th-default .nav-item.active, html.th-default .nav-item:hover { color: #fff; }

/* -- Select a Community: site tiles as raised keys --------------------------- */
html.th-default .site-tile {
  border: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.05) 26%, rgba(255,255,255,0) 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--c) 88%, #fff) 0%, color-mix(in srgb, var(--c) 66%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 7px 0 color-mix(in srgb, var(--c) 38%, #000), 0 16px 22px rgba(0,0,0,.35);
}
html.th-default a.site-tile:hover { border: 0; filter: brightness(1.07); }
html.th-default a.site-tile:active { transform: translateY(7px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 3px 8px rgba(0,0,0,.35); }
html.th-default .site-tile .st-name { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 2px 4px rgba(0,0,0,.45); }
html.th-default .site-tile .st-type { color: rgba(255,255,255,.9); }
html.th-default .site-tile .st-role { background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.3); }
html.th-default .site-tile .st-flag { color: #ffe2a6; }
html.th-default .pick-alert { background: rgba(224,80,94,.12); border-color: rgba(224,80,94,.5); color: #f19aa3; }


/* -- Theme picker (sidebar footer): a drop-down. Base rules are unscoped so
      it also looks right under ARCADE FUN; Default tones it down below. -- */
.theme-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 7px 8px 7px 11px; border-radius: 14px;
  background: linear-gradient(180deg, #0e1a2c, #04070e); border: 1px solid #2a3f5f; box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
.theme-pick .tp-l { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: #fff4dc; }
.theme-pick .tp-sel { margin-left: auto; min-width: 0; flex: 0 1 128px; height: 30px; padding: 0 28px 0 10px; border-radius: 9px; cursor: pointer;
  font-family: 'Source Sans 3', sans-serif; font-size: 14px; font-weight: 600; color: #e8eef7;
  -webkit-appearance: none; appearance: none; border: 1px solid #2a3f5f;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237fe7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center, linear-gradient(180deg, #04070e, #0e1a2c); }
.theme-pick .tp-sel:focus { outline: none; border-color: #5fe4ff; box-shadow: 0 0 0 3px rgba(95,228,255,.18); }
.theme-pick .tp-sel option { background: #10203c; color: #e8eef7; }
html.th-default .theme-pick { background: var(--panel-2); border: 1px solid var(--rim); box-shadow: none; }
html.th-default .theme-pick .tp-l { color: #fff; }
html.th-default .theme-pick .tp-sel { border-color: var(--well-rim);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23c9d3f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center, rgba(6,10,30,.6); }
html.th-default .theme-pick .tp-sel:focus { border-color: #22b0d2; box-shadow: 0 0 0 3px rgba(34,176,210,.18); }
html.th-default .theme-pick .tp-sel option { background: #141a40; }

/* -- Resident detail: Photo card keys (2026-10-16). The card is 240px wide
      (manager.css .rd-pair > .photo-card) and BROWSE / CAMERA / REMOVE need
      about 290px, so REMOVE ran off the right edge. The three keys now share
      the width equally. Unscoped: applies to Default and Arcade. ---------- */
.photo-actions { gap: 6px; padding: 12px 10px; }
.photo-actions .btn-sm { flex: 1 1 0; min-width: 0; padding: 0 4px; letter-spacing: .6px; }