/* =========================================================================
   Dasvibes Digital — Control Panel Theme
   A clean, professional admin UI. Self-contained (no external fonts/assets).
   ========================================================================= */

:root{
  --brand:        #4f46e5;   /* indigo 600  */
  --brand-dark:   #4338ca;   /* indigo 700  */
  --brand-050:    #eef2ff;   /* indigo 50   */
  --brand-100:    #e0e7ff;

  --ink:          #0f172a;   /* slate 900   */
  --text:         #1e293b;   /* slate 800   */
  --muted:        #64748b;   /* slate 500   */
  --faint:        #94a3b8;   /* slate 400   */

  --bg:           #f1f5f9;   /* slate 100   */
  --panel:        #f8fafc;   /* slate 50    */
  --card:         #ffffff;
  --surface:      #ffffff;   /* recessed surfaces: form fields, striped rows, search */
  --line:         #e2e8f0;   /* slate 200   */
  --line-2:       #cbd5e1;   /* slate 300   */

  --ok:      #15803d;  --ok-bg:   #ecfdf5;  --ok-line:   #a7f3d0;
  --err:     #b91c1c;  --err-bg:  #fef2f2;  --err-line:  #fecaca;
  --info:    #0369a1;  --info-bg: #eff6ff;  --info-line: #bfdbfe;
  --warn:    #b45309;  --warn-bg: #fffbeb;  --warn-line: #fde68a;

  --radius:   12px;
  --radius-sm: 8px;
  --shadow-1: 0 1px 2px rgba(15,23,42,.04);
  --shadow-2: 0 4px 12px rgba(15,23,42,.06);
  --shadow:   var(--shadow-1), var(--shadow-2);
  --shadow-lg:0 10px 30px rgba(15,23,42,.12);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
          "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* ---------------------------------------------------------- dark theme overrides */
html[data-theme="dark"]{
  --brand:        #818cf8;   /* indigo 400 — lightened for contrast on dark bg */
  --brand-dark:   #a5b4fc;   /* indigo 300 — lighter still (existing :hover rules
                                 use --brand-dark as the "more emphasis" state) */
  --brand-050:    rgba(129,140,248,.12);
  --brand-100:    rgba(129,140,248,.22);

  --ink:          #f1f5f9;   /* slate 100   */
  --text:         #cbd5e1;   /* slate 300   */
  --muted:        #94a3b8;   /* slate 400   */
  --faint:        #64748b;   /* slate 500   */

  --bg:           #0f172a;   /* slate 900   */
  --panel:        #1e293b;   /* slate 800   */
  --card:         #1e293b;   /* slate 800   */
  --surface:      #0f172a;   /* slate 900   */
  --line:         #334155;   /* slate 700   */
  --line-2:       #475569;   /* slate 600   */

  --ok:      #4ade80;  --ok-bg:   rgba(74,222,128,.12);  --ok-line:   rgba(74,222,128,.35);
  --err:     #f87171;  --err-bg:  rgba(248,113,113,.12); --err-line:  rgba(248,113,113,.35);
  --info:    #38bdf8;  --info-bg: rgba(56,189,248,.12);  --info-line: rgba(56,189,248,.35);
  --warn:    #fbbf24;  --warn-bg: rgba(251,191,36,.12);  --warn-line: rgba(251,191,36,.35);

  --shadow-1:  0 1px 2px rgba(0,0,0,.4);
  --shadow-2:  0 4px 12px rgba(0,0,0,.35);
  --shadow:    var(--shadow-1), var(--shadow-2);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-dark); text-decoration:underline; }

img{ border:0; max-width:100%; }
h1,h2,h3{ color:var(--ink); margin:0 0 .5em; font-weight:700; line-height:1.25; }

/* ------------------------------------------------------------------ layout */
.contentWrapper{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px 40px;
}
.contentWrap{ padding-top:24px; }

.content{ width:100%; }

/* two-column pages (account / admin) */
.boxLeft{
  float:left; width:250px; margin-right:24px;
}
.boxRight{ overflow:hidden; }
@media (max-width:820px){
  .boxLeft{ float:none; width:auto; margin:0 0 20px; }
  .boxRight{ overflow:visible; }
}

.minHeight{ min-height:360px; }
.minHeightShadowbox{ min-height:200px; }
.clear{ clear:both; }
.bold{ font-weight:700; }
.pointer{ cursor:pointer; }
.large{ font-size:18px; }
.rounded{ border-radius:var(--radius); }
.noScroll{ overflow-x:hidden; overflow-y:hidden; }

/* --------------------------------------------------------------- top navbar */
.topNavBar{
  background:var(--card);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);
  position:sticky; top:0; z-index:50;
  margin-bottom:24px;
}
.topNavBarTable{ width:100%; max-width:1180px; margin:0 auto; padding:0 20px; }
.topNavBar td{ vertical-align:middle; padding:14px 0; }
.topNavBar td.logo{ text-align:left; }
.topNavBar td.logout{ text-align:right; }

/* text wordmark (replaces the old logo image) */
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--ink);
}
.brand:hover{ text-decoration:none; color:var(--ink); }
.brand .brandMark{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--radius-sm); color:#fff; font-weight:800; font-size:16px;
  background:linear-gradient(135deg, var(--brand) 0%, #7c3aed 100%);
  box-shadow:0 2px 6px rgba(79,70,229,.35);
  flex:0 0 auto;
}
.brand .brandMark img.brandLogo{
  width:70%; height:70%; object-fit:contain; display:block;
}
.topRightLink{
  color:var(--muted); font-weight:600; font-size:13px; padding:6px 4px; white-space:nowrap;
}
.topRightLink:hover{ color:var(--brand); text-decoration:none; }

/* links in sortable table column headers */
a.tableSort{ color:var(--muted); text-decoration:none; }
a.tableSort:hover{ color:var(--brand); text-decoration:underline; }

/* ------------------------------------------------------------------- cards */
/* Ensure fieldsets and content boxes clip nested elements cleanly */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  background: transparent; /* Prevent background bleeding behind rounded card */
}

.contentBox {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden; /* Clips child header bands and content cleanly to radius */
  margin-bottom: 22px;
  /* Use standard box-shadow instead of filter: drop-shadow to avoid corner artifacts */
  box-shadow: var(--shadow-1), var(--shadow-2); 
}
/* Update this line in style.css */
.colorLightBg { 
  background: transparent; 
}
.colorDarkBg{ background:var(--panel); }

/* section header strip inside a card */
.contentBand,
.colorBandBg{
  background:var(--panel);
  color:var(--ink);
  font-weight:700;
  font-size:15px;
  letter-spacing:-.01em;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.contentBand::before{
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px;
  border-radius:0 3px 3px 0; background:var(--brand);
}

/* generic padded content area sits directly under a band */
.contentBox > div{ }

/* ------------------------------------------------------------------ labels/forms */
label{
  display:block;
  font-weight:600;
  font-size:12.5px;
  color:var(--muted);
  margin:16px 0 6px;
  text-transform:none;
}
label i{ font-weight:400; color:var(--faint); }

input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=search],
textarea,
select{
  width:100%;
  max-width:520px;
  padding:9px 12px;
  font:inherit;
  font-size:14px;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--radius-sm);
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
textarea{ max-width:100%; line-height:1.5; }
input:focus,
textarea:focus,
select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-100);
}
input[disabled], select[disabled], textarea[disabled]{
  background:var(--panel); color:var(--muted); cursor:not-allowed;
}
input[type=checkbox], input[type=radio]{ width:auto; margin-right:6px; vertical-align:middle; }

.pcheckbox{ margin:12px 0; font-size:13.5px; color:var(--text); }
.pcheckbox input{ margin-right:6px; }

/* --------------------------------------------------------------- buttons */
.buttonSubmit,
input[type=button].buttonSubmit,
input[type=submit],
button{
  display:inline-block;
  cursor:pointer;
  font:inherit; font-weight:600; font-size:14px;
  color:#fff;
  background:var(--brand);
  border:1px solid var(--brand);
  border-radius:var(--radius-sm);
  padding:9px 18px;
  transition:background .15s, box-shadow .15s, transform .02s;
  box-shadow:0 1px 2px rgba(15,23,42,.08);
}
.buttonSubmit:hover,
input[type=submit]:hover,
button:hover{ background:var(--brand-dark); border-color:var(--brand-dark); }
.buttonSubmit:active, button:active{ transform:translateY(1px); }

.buttonCancel{
  display:inline-block; cursor:pointer;
  font:inherit; font-weight:600; font-size:14px;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--radius-sm);
  padding:9px 18px;
}
.buttonCancel:hover{ background:var(--panel); border-color:var(--faint); }

.submit_working{ opacity:.6; pointer-events:none; }

/* --------------------------------------------------------------- messages */
.doneDiv, .errorDiv, .infoDiv, .welcomeDiv{
  padding:12px 16px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  margin:6px 0 14px;
  font-size:13.5px;
}
.doneDiv{  background:var(--ok-bg);  border-color:var(--ok-line);  color:var(--ok);  }
.errorDiv{ background:var(--err-bg); border-color:var(--err-line); color:var(--err); }
.infoDiv{  background:var(--info-bg);border-color:var(--info-line);color:var(--info); }
.welcomeDiv{ background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok); }
.doneDiv b, .errorDiv b, .infoDiv b, .welcomeDiv b{ color:inherit; }

/* --------------------------------------------------------------- data tables */
.appTable, table.data, .contentBox table{ width:100%; border-collapse:collapse; }
td, th{ text-align:left; }

td.tdSort{
  padding:10px 12px;
  border-bottom:2px solid var(--line);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--muted);
  white-space:nowrap;
}
td.tdSort a{ color:var(--muted); }
td.tdSort a:hover{ color:var(--brand); text-decoration:none; }

td.data, td.d{
  padding:11px 12px;
  border-bottom:1px solid var(--line);
  color:var(--text);
  vertical-align:middle;
}
td.h{
  padding:10px 12px; font-weight:700; color:var(--ink);
  background:var(--panel); border-bottom:1px solid var(--line);
}
tr.rowNormal{ background:var(--surface); }
tr.rowAlt{ background:var(--panel); }
tr.rowNormal:hover, tr.rowAlt:hover{ background:var(--brand-050); }

/* --------------------------------------------------------- left nav / cp links */
.cpLeft, #leftNavLinkBox{ font-size:13.5px; }
#leftNavLinkBox > div{ margin:2px 0; }
#leftNavLinkBox a{
  display:block; padding:8px 10px; border-radius:var(--radius-sm);
  color:var(--text); font-weight:500;
}
#leftNavLinkBox a:hover{ background:var(--brand-050); color:var(--brand-dark); text-decoration:none; }
#leftNavLinkBox img{ vertical-align:middle; margin-right:6px; }

/* app control panel breadcrumb/tab bar ("Application Home | App Icon | Core | ...") —
   a horizontal strip, not a stacked list, so its links stay inline (unlike
   #leftNavLinkBox above) with the raw "|" separators de-emphasized via the
   container's muted text color. */
.cpNav{
  display:flex; flex-wrap:wrap; align-items:center; gap:2px 2px;
  font-size:13px; color:var(--faint);
  padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--line);
}
.cpNav a{
  display:inline-block; padding:5px 10px; border-radius:var(--radius-sm);
  color:var(--text); font-weight:500; white-space:nowrap;
}
.cpNav a:hover{ background:var(--brand-050); color:var(--brand-dark); text-decoration:none; }
.cpNav img{ vertical-align:middle; margin-right:6px; }

.cpExpandoBox{ padding:10px 0; }

/* ------------------------------------------------------------------ search */
.searchDiv{ margin:8px 0 4px; }
.searchBox{
  padding:9px 12px 9px 34px;
  border:1px solid var(--line-2); border-radius:999px; background:var(--surface);
  min-width:220px;
}

/* ------------------------------------------------------------- list-page toolbar */
.cpTableToolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 12px; }
.cpTableToolbarLeft{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cpTableToolbarRight{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cpTableToolbar .searchDiv{ margin:0; }

/* ---------------------------------------------------------------- plugins/apps */
.appDiv, .pluginBox{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); box-shadow:var(--shadow); padding:14px; margin:0 0 16px;
}
.appDiv:hover, .pluginBox:hover{ box-shadow:var(--shadow-lg); }
.pluginNickname{ font-weight:700; color:var(--ink); }
.pluginIcon, .iconImage, .screenImg{ border-radius:10px; }
.iconOuter, .iconOverlay{ display:inline-block; }
.instructions{ color:var(--muted); font-size:13px; }
.pageHeader{ font-size:20px; font-weight:800; color:var(--ink); padding:10px 0; }

/* --------------------------------------------------------------- login page */
.loginContent{ max-width:440px; margin:6vh auto 0; position:relative; z-index:1; }
.loginContent .contentBand{ text-align:center; font-size:16px; }
.loginContent .contentBand::before{ display:none; }
.loginContent input[type=text],
.loginContent input[type=password]{ max-width:100%; }
.loginContent .buttonSubmit{ width:100%; text-align:center; padding:11px; }

/* ------------------------------------------------------------- shooting stars */
/* Theme-aware: subtle ink-tinted specks in light mode (the original minimal
   treatment, just with more variety), full glowing multi-color meteors plus a
   starfield/nebula backdrop in dark mode (see the html[data-theme="dark"]
   overrides below). A literal dark-space background would be unreadable
   against the light admin theme, so only the starfield wash is dark-mode-
   exclusive -- the meteors themselves render in both, just re-colored. */

.stars,
.stars::before,
.stars::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  display:none; /* dark mode only, see override below */
}

.shooting-stars{
  position:fixed; inset:0; overflow:hidden;
  pointer-events:none; z-index:0;
}
.shooting-stars .star{
  position:absolute;
  top:var(--star-top, 10%); left:var(--star-left, 80%);
  width:calc(2px * var(--star-size, 1)); height:calc(2px * var(--star-size, 1));
  border-radius:50%;
  background:var(--ink);
  box-shadow:0 0 0 1px rgba(15,23,42,.05);
  opacity:0;
  animation:shooting-star var(--star-duration, 6s) linear var(--star-delay, 0s) infinite;
}
.shooting-stars .star::before{
  content:""; position:absolute; top:50%; right:0;
  width:calc(80px * var(--star-size, 1)); height:1px; transform:translateY(-50%);
  background:linear-gradient(90deg, var(--ink), transparent);
}
@keyframes shooting-star{
  0%{   transform:translate3d(0,0,0) rotate(var(--star-angle, 215deg)) scale(.6); opacity:0; }
  3%{   opacity:1; }
  12%{  transform:translate3d(var(--star-tx, -28vw), var(--star-ty, 20vh), 0) rotate(var(--star-angle, 215deg)) scale(1); opacity:0; }
  100%{ transform:translate3d(var(--star-tx, -28vw), var(--star-ty, 20vh), 0) rotate(var(--star-angle, 215deg)) scale(1); opacity:0; }
}

/* --star-tx/--star-ty are viewport-relative (vw/vh) rather than fixed pixels so
   travel distance scales sensibly on any screen size, from phones to TVs.
   --star-angle/--star-size/--star-glow vary per star for a less mechanical,
   more organic field of meteors instead of identical clones on a timer. */
.shooting-stars .star:nth-child(1){  --star-top:5%;  --star-left:95%;  --star-duration:9s;    --star-delay:0s;   --star-angle:215deg; --star-tx:-38vw; --star-ty:24vh; --star-size:1;    --star-glow:#b8dfff; }
.shooting-stars .star:nth-child(2){  --star-top:15%; --star-left:70%;  --star-duration:11s;   --star-delay:5s;   --star-angle:205deg; --star-tx:-30vw; --star-ty:18vh; --star-size:.8;   --star-glow:#ffffff; }
.shooting-stars .star:nth-child(3){  --star-top:28%; --star-left:110%; --star-duration:8s;    --star-delay:10s;  --star-angle:225deg; --star-tx:-42vw; --star-ty:28vh; --star-size:1.3;  --star-glow:#d9baff; }
.shooting-stars .star:nth-child(4){  --star-top:10%; --star-left:45%;  --star-duration:13s;   --star-delay:15s;  --star-angle:210deg; --star-tx:-28vw; --star-ty:20vh; --star-size:.7;   --star-glow:#b8dfff; }
.shooting-stars .star:nth-child(5){  --star-top:35%; --star-left:90%;  --star-duration:10s;   --star-delay:20s;  --star-angle:230deg; --star-tx:-40vw; --star-ty:32vh; --star-size:1.1;  --star-glow:#ffe9c7; }
.shooting-stars .star:nth-child(6){  --star-top:20%; --star-left:60%;  --star-duration:12s;   --star-delay:27s;  --star-angle:200deg; --star-tx:-26vw; --star-ty:16vh; --star-size:.9;   --star-glow:#ffffff; }
.shooting-stars .star:nth-child(7){  --star-top:8%;  --star-left:105%; --star-duration:14s;   --star-delay:35s;  --star-angle:220deg; --star-tx:-40vw; --star-ty:27vh; --star-size:1.2;  --star-glow:#b8dfff; }
.shooting-stars .star:nth-child(8){  --star-top:45%; --star-left:75%;  --star-duration:9.5s;  --star-delay:6s;   --star-angle:215deg; --star-tx:-32vw; --star-ty:21vh; --star-size:.85;  --star-glow:#d9baff; }
.shooting-stars .star:nth-child(9){  --star-top:2%;  --star-left:55%;  --star-duration:10.5s; --star-delay:18s;  --star-angle:235deg; --star-tx:-44vw; --star-ty:34vh; --star-size:1.4;  --star-glow:#ffffff; }
.shooting-stars .star:nth-child(10){ --star-top:32%; --star-left:40%;  --star-duration:11.5s; --star-delay:24s;  --star-angle:195deg; --star-tx:-24vw; --star-ty:14vh; --star-size:.65;  --star-glow:#ffe9c7; }
.shooting-stars .star:nth-child(11){ --star-top:18%; --star-left:120%; --star-duration:8.5s;  --star-delay:12s;  --star-angle:222deg; --star-tx:-39vw; --star-ty:26vh; --star-size:1;    --star-glow:#b8dfff; }
.shooting-stars .star:nth-child(12){ --star-top:50%; --star-left:100%; --star-duration:13.5s; --star-delay:30s;  --star-angle:208deg; --star-tx:-29vw; --star-ty:19vh; --star-size:.75;  --star-glow:#ffffff; }
.shooting-stars .star:nth-child(13){ --star-top:12%; --star-left:30%;  --star-duration:9.2s;  --star-delay:22s;  --star-angle:218deg; --star-tx:-35vw; --star-ty:23vh; --star-size:1.15; --star-glow:#d9baff; }
.shooting-stars .star:nth-child(14){ --star-top:40%; --star-left:15%;  --star-duration:12.8s; --star-delay:8s;   --star-angle:228deg; --star-tx:-41vw; --star-ty:29vh; --star-size:.95;  --star-glow:#ffe9c7; }

@media (prefers-reduced-motion: reduce){
  .stars, .stars::before,
  .shooting-stars .star{ animation:none; opacity:0; }
}

/* ----------------------------------------------------- dark theme: cinematic space */
html[data-theme="dark"] .shooting-stars{
  background:
      radial-gradient(circle at 20% 15%, rgba(90,120,255,.12), transparent 28%),
      radial-gradient(circle at 80% 25%, rgba(180,80,255,.08), transparent 35%),
      radial-gradient(circle at 50% 80%, rgba(40,80,180,.12), transparent 45%),
      radial-gradient(circle at center, #07111f 0%, #03060d 55%, #000 100%);
}
html[data-theme="dark"] .shooting-stars .star{
  background:#fff;
  box-shadow:
      0 0 calc(8px * var(--star-size, 1)) #fff,
      0 0 calc(20px * var(--star-size, 1)) var(--star-glow, #b8dfff),
      0 0 calc(45px * var(--star-size, 1)) var(--star-glow, #b8dfff);
}
html[data-theme="dark"] .shooting-stars .star::before{
  width:calc(220px * var(--star-size, 1)); height:2px;
  border-radius:50px;
  background:linear-gradient(90deg, #fff, var(--star-glow, #b8dfff) 45%, transparent);
  filter:blur(1px);
}
html[data-theme="dark"] .shooting-stars .star::after{
  content:"";
  position:absolute; inset:-5px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.8), transparent 70%);
}

html[data-theme="dark"] .stars,
html[data-theme="dark"] .stars::before,
html[data-theme="dark"] .stars::after{
  display:block;
}
html[data-theme="dark"] .stars{
  z-index:-3;
  background-image:
      radial-gradient(1px 1px at 15px 30px,#fff,transparent),
      radial-gradient(1px 1px at 80px 120px,#fff,transparent),
      radial-gradient(1.5px 1.5px at 160px 50px,#fff,transparent),
      radial-gradient(1px 1px at 240px 170px,#fff,transparent),
      radial-gradient(2px 2px at 300px 80px,#fff,transparent);
  background-repeat:repeat;
  background-size:320px 320px;
  opacity:.9;
  animation:star-drift 220s linear infinite, star-twinkle 7s ease-in-out infinite;
}
html[data-theme="dark"] .stars::before{
  background-image:
      radial-gradient(2px 2px,#ffffff,transparent),
      radial-gradient(1.5px 1.5px,#d8e8ff,transparent);
  background-repeat:repeat;
  background-size:520px 520px;
  opacity:.55;
  animation:star-drift 320s linear infinite;
}
html[data-theme="dark"] .stars::after{
  background:radial-gradient(ellipse at center,
      rgba(255,255,255,.08) 0%,
      rgba(180,210,255,.05) 18%,
      rgba(255,255,255,0) 55%);
  transform:rotate(-18deg) scale(1.5);
  opacity:.35;
}

@keyframes star-drift{
  from{ transform:translateY(0); }
  to{   transform:translateY(-320px); }
}
@keyframes star-twinkle{
  0%,100%{ opacity:.85; }
  50%{     opacity:1; }
}

/* smaller tiles keep star density consistent on narrow screens instead of
   looking sparse when the same fixed-px tile only repeats once or twice */
@media (max-width:600px){
  html[data-theme="dark"] .stars{ background-size:200px 200px; }
  html[data-theme="dark"] .stars::before{ background-size:340px 340px; }
}

/* the html[data-theme="dark"] rules above are more specific than the plain
   .stars selectors in the earlier prefers-reduced-motion block, so without
   this they'd win the cascade and keep drifting under reduced motion */
@media (prefers-reduced-motion: reduce){
  html[data-theme="dark"] .stars,
  html[data-theme="dark"] .stars::before{ animation:none; }
}

/* ------------------------------------------------------------------- footer */
.bottomNavBar{
  margin-top:28px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--faint); font-size:12.5px;
}
.bottomNavBarLeft{ float:left; }
.bottomNavBarRight{ float:right; }
.bottomNavBar a{ color:var(--muted); }

.am-admin-footer{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  margin-top:28px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--faint); font-size:12.5px;
}
.am-footer-credit{ display:inline-flex; align-items:center; gap:5px; }
.am-footer-credit a{ color:var(--muted); font-weight:600; }
.am-footer-credit a:hover{ color:var(--brand); }
.am-heart{ color:#e11d48; }
.am-footer-social{ display:inline-flex; align-items:center; gap:10px; }
.am-social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:999px;
  color:var(--muted); background:var(--panel); border:1px solid var(--line);
  transition:background .15s, color .15s, border-color .15s;
}
.am-social-link:hover{ color:#fff; border-color:transparent; text-decoration:none; }
.am-social-link.am-social-fb:hover{ background:#1877f2; }
.am-social-link.am-social-x:hover{ background:#000; }
.am-social-link.am-social-wa:hover{ background:#25d366; }
.am-social-link.am-social-yt:hover{ background:#ff0000; }
.am-social-link.am-social-tt:hover{ background:#000; }
.am-social-link.am-social-ig:hover{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }

.screen-reader-text{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ------------------------------------------------------------------ helpers */
.file, .fakefile, .fileinputs{ position:relative; }
hr{ border:0; border-top:1px solid var(--line); margin:18px 0; }

/* =========================================================================
   Coverage for the remaining control-panel classes the app renders
   (parity with the original stylesheet, styled in this theme's language).
   ========================================================================= */

/* success message (app uses .okDiv as well as .doneDiv) */
.okDiv{
  padding:12px 16px; border-radius:var(--radius-sm);
  border:1px solid var(--ok-line); background:var(--ok-bg); color:var(--ok);
  margin:6px 0 14px; font-size:13.5px;
}

/* clickable A–Z filter bar in searchable lists */
.alphabetOff, .alphabetOn{
  display:inline-block; min-width:17px; height:19px; line-height:18px; padding:0 4px;
  margin:1px; font-size:11px; font-weight:600; text-align:center; vertical-align:middle;
  cursor:pointer; border:1px solid var(--line-2); border-radius:5px;
}
.alphabetOff{ color:var(--muted); background:var(--surface); }
.alphabetOff:hover{ background:var(--brand-050); color:var(--brand-dark); }
.alphabetOn{ color:#fff; background:var(--brand); border-color:var(--brand); }

/* table utilities */
td.dataTop{ padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; }

/* generic utilities */
.contentCenter{ margin:24px auto 0; }
.clearBoth{ clear:both; }
.submit_done{ color:var(--ok); margin:5px; display:inline-block; }

/* collapsible admin sections (Settings / Maintenance / Plugins) */
.cpExpandoBox{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  margin:12px 0; padding:14px 16px; box-shadow:var(--shadow);
}
.cpExpandoBox > a:first-child{ font-weight:600; color:var(--ink); }
.cpExpandoBox > a:first-child:hover{ text-decoration:none; color:var(--brand); }
.cpExpandoBox img{ vertical-align:middle; }
.cpRight{ padding-top:16px; }

/* app icon tiles (icon + hover overlay), 72px */
.appDiv{ float:left; width:280px; margin:0 16px 16px 0; }
.appTable{ width:100%; }
.iconOuter{ height:72px; width:72px; display:inline-block; float:left; margin:0; position:relative; }
.iconImage{ height:72px; width:72px; overflow:hidden; border-radius:14px; display:block; background-size:cover; }
.iconImagePlaceholder{ display:flex; align-items:center; justify-content:center; background:var(--panel); }
.iconOverlay{ height:72px; width:72px; position:relative; left:0; top:-72px; z-index:2; border-radius:14px; }

/* file-manager upload widget (transparent real input over a styled fake one) */
div.fileinputs{ position:relative; display:inline-block; width:175px; }
div.fakefile{ position:absolute; top:0; left:0; z-index:1; width:175px; }
input.file{ position:relative; z-index:2; width:175px; opacity:0; cursor:pointer; }

/* plugin detail pages */
.pluginNav{ padding-top:10px; border-top:1px solid var(--line); }
.pluginContent{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  margin:10px 0 20px; background:var(--card);
  filter:drop-shadow(var(--shadow-1)) drop-shadow(var(--shadow-2));
}
.pluginLeft{ padding:16px; margin-right:150px; }
.pluginRight{
  float:right; width:130px; padding:16px; min-height:120px;
  border-left:1px solid var(--line); background:var(--panel);
}
.pluginInfo{ padding:0; margin:0; }

/* -------------------------------------------------------------- theme toggle */
.am-theme-toggle{
  display:inline-flex; align-items:center; gap:6px;
  vertical-align:middle; margin-right:12px;
}
.am-theme-icon{ font-size:14px; line-height:1; color:var(--faint); transition:color .18s; }
.am-theme-icon-sun{ color:#f59e0b; }
html[data-theme="dark"] .am-theme-icon-sun{ color:var(--faint); }
html[data-theme="dark"] .am-theme-icon-moon{ color:#cbd5e1; }
.am-theme-switch{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center;
  width:42px; height:23px; padding:2px;
  background:var(--line-2); border:1px solid var(--line-2); border-radius:999px;
  cursor:pointer; position:relative; flex:0 0 auto;
  transition:background .18s, border-color .18s;
}
.am-theme-switch:hover{ border-color:var(--faint); }
.am-theme-switch:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.am-theme-switch .am-theme-thumb{
  width:17px; height:17px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25);
  transform:translateX(0); transition:transform .18s;
}
html[data-theme="dark"] .am-theme-switch{ background:var(--brand); border-color:var(--brand); }
html[data-theme="dark"] .am-theme-switch .am-theme-thumb{
  transform:translateX(19px); background:#0f172a;
}

/* -------------------------------------------------------------- loading spinner (theme-aware, replaces gif-loading*.gif) */
@keyframes am-spin{ to{ transform:rotate(360deg); } }
.spinner, .spinner-sm{
  display:inline-block; border-radius:50%;
  border:3px solid var(--line-2); border-top-color:var(--brand);
  animation:am-spin .7s linear infinite;
  vertical-align:middle;
}
.spinner{ width:40px; height:40px; border-width:4px; }
.spinner-sm{ width:20px; height:20px; border-width:3px; }

/* -------------------------------------------------------------- form-group / field-row (consistent field alignment) */
.form-group{ margin:0 0 16px; }
.form-group > label{ margin:0 0 6px; }
.field-row{ display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; }
.field-row > .form-group{ margin-bottom:16px; flex:0 0 auto; }
.w-sm{ max-width:225px; }
.w-md{ max-width:350px; }
.w-lg{ max-width:475px; }
.w-full{ max-width:100%; }

/* -------------------------------------------------------------- platform icons (iOS / Android) */
.icon-ios, .icon-android{
  display:inline-block; width:21px; height:21px; vertical-align:middle;
  margin-right:8px; fill:var(--text);
}
.icon-ios.icon-inline, .icon-android.icon-inline{ width:14px; height:14px; margin-right:4px; }
.deviceCountRow{ display:flex; align-items:center; gap:8px; padding:6px 0; }
.deviceCountRow .deviceCountLabel{ width:90px; display:inline-flex; align-items:center; }
.deviceCountRow .deviceCountValue{ font-weight:700; }
.deviceCountInline{ display:inline-flex; align-items:center; gap:2px; font-size:9pt; color:var(--muted); margin-top:4px; }

/* =========================================================================
   App Control Panel — overview hero, metric cards, guidance cards, callout
   ========================================================================= */

/* -------------------------------------------------------------- hero / overview card */
.cpHero{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 22px; margin-bottom:18px;
  background:linear-gradient(160deg, var(--card) 0%, var(--panel) 100%);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.cpHeroMain{ display:flex; align-items:center; gap:16px; min-width:0; }
.cpHeroIcon{
  flex:0 0 auto; width:56px; height:56px; border-radius:16px;
  background-color:var(--panel); background-size:cover; background-position:50% 50%; background-repeat:no-repeat;
  border:1px solid var(--line); box-shadow:var(--shadow-1);
}
.cpHeroIcon img{ display:block; width:100%; height:100%; opacity:0; }
.cpHeroTitleRow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cpHeroTitle h1{
  font-size:22px; font-weight:800; letter-spacing:-.01em; color:var(--ink); margin:0;
}
.cpHeroSubtitle{ font-size:12.5px; color:var(--faint); margin-top:4px; }
.cpHeroActions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

.cpPillRow{ display:flex; flex-wrap:wrap; gap:8px; }
.cpPill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; letter-spacing:.01em;
  padding:4px 10px; border-radius:999px; border:1px solid transparent; white-space:nowrap;
}
.cpPillBrand{ color:var(--brand); background:var(--brand-050); border-color:var(--brand-100); }
.cpPillOk{ color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line); }
.cpPillWarn{ color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line); }

.cpDot{ width:7px; height:7px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.cpDotOk{ background:var(--ok); box-shadow:0 0 0 3px var(--ok-bg); }
.cpDotWarn{ background:var(--warn); box-shadow:0 0 0 3px var(--warn-bg); animation:cp-pulse 1.8s ease-in-out infinite; }
@keyframes cp-pulse{
  0%,100%{ box-shadow:0 0 0 3px var(--warn-bg); }
  50%{     box-shadow:0 0 0 6px var(--warn-bg); }
}
@media (prefers-reduced-motion: reduce){ .cpDotWarn{ animation:none; } }

.cpKV{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:12px; padding:2px 0; }
.cpKV span{ color:var(--muted); }
.cpKV b{ color:var(--ink); font-weight:600; }

/* -------------------------------------------------------------- metric cards */
.cpMetricsGrid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:18px;
}
@media (max-width:900px){ .cpMetricsGrid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px){ .cpMetricsGrid{ grid-template-columns:1fr; } }

.cpMetricCard{
  padding:16px; border-radius:var(--radius); background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow-1);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.cpMetricCard:hover{ border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-1px); }
.cpMetricTop{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cpMetricLabel{
  display:inline-flex; align-items:center; font-size:12.5px; font-weight:600; color:var(--muted);
}
.cpMetricLabel .icon-ios, .cpMetricLabel .icon-android{ width:16px; height:16px; margin-right:7px; color:var(--brand); }
.cpMetricIcon{ width:15px; height:15px; margin-right:7px; color:var(--info); vertical-align:-3px; }
.cpMetricValue{ font-size:26px; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.1; }
.cpMetricSub{ font-size:11.5px; color:var(--faint); margin-top:4px; }

/* 4th metric-grid slot: compact timestamp stack instead of a big number */
.cpMetricCardStamps{ display:flex; flex-direction:column; justify-content:center; gap:2px; }

/* -------------------------------------------------------------- guidance / info cards */
.cpInfoGrid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:18px;
}
@media (max-width:900px){ .cpInfoGrid{ grid-template-columns:1fr; } }

.cpInfoCard{
  padding:18px; border-radius:var(--radius); background:var(--card);
  border:1px solid var(--line); box-shadow:var(--shadow-1);
}
.cpInfoIcon{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; margin-bottom:10px;
}
.cpInfoIcon svg{ width:19px; height:19px; }
.cpInfoIconBrand{ color:var(--brand); background:var(--brand-050); border:1px solid var(--brand-100); }
.cpInfoIconOk{ color:var(--ok); background:var(--ok-bg); border:1px solid var(--ok-line); }
.cpInfoIconInfo{ color:var(--info); background:var(--info-bg); border:1px solid var(--info-line); }
.cpInfoCard h3{ font-size:14px; font-weight:700; color:var(--ink); margin:0 0 6px; }
.cpInfoCard p{ font-size:12.5px; color:var(--muted); line-height:1.55; margin:0; }

/* -------------------------------------------------------------- publish status callout */
.cpCallout{
  display:flex; align-items:flex-start; gap:14px;
  padding:18px 20px; border-radius:var(--radius); border:1px solid; margin-bottom:4px;
}
.cpCalloutInfo{ background:var(--info-bg); border-color:var(--info-line); }
.cpCalloutWarn{ background:var(--warn-bg); border-color:var(--warn-line); }
.cpCalloutIcon{ width:20px; height:20px; flex:0 0 auto; margin-top:2px; }
.cpCalloutInfo .cpCalloutIcon{ color:var(--info); }
.cpCalloutWarn .cpCalloutIcon{ color:var(--warn); }
.cpCalloutBody{ flex:1 1 auto; min-width:0; }
.cpCalloutTitle{ font-size:14px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.cpCalloutBody p{ font-size:12.5px; color:var(--text); line-height:1.55; margin:0; }
.cpCalloutLink{ font-weight:700; text-decoration:underline; }
.cpPublishBtn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color:#fff;
  background:var(--brand); border:1px solid var(--brand);
  padding:9px 16px; border-radius:var(--radius-sm);
  box-shadow:0 1px 2px rgba(15,23,42,.08);
  transition:background .15s, border-color .15s;
}
.cpPublishBtn:hover{ background:var(--brand-dark); border-color:var(--brand-dark); text-decoration:none; color:#fff; }

/* ---------------------------------------------------------- two-step verification (MFA) */
.mfaOption{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:16px 18px; margin:0 0 14px 0; }
.mfaOptionTitle{ margin:0 0 6px 0; font-size:15px; font-weight:700; color:var(--ink); }
.mfaOption p{ margin:0 0 10px 0; color:var(--text); }
.mfaBadge{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:600; background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-line); vertical-align:2px; }
.mfaSteps{ margin:0 0 10px 18px; padding:0; color:var(--text); }
.mfaSteps li{ margin:2px 0; }
.mfaQrRow{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin:6px 0 12px 0; }
.mfaQr{ width:180px; height:180px; background:#fff; border-radius:var(--radius-sm); border:1px solid var(--line); padding:6px; box-sizing:border-box; }
.mfaQr svg{ width:100%; height:100%; display:block; }
.mfaKeyBox{ min-width:0; }
.mfaKey{ display:block; font-size:15px; letter-spacing:.06em; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; margin:4px 0; word-break:break-all; }
.mfaRecoveryCodes{ list-style:none; margin:8px 0 12px 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; max-width:360px; }
.mfaRecoveryCodes code{ display:block; text-align:center; font-size:14px; letter-spacing:.08em; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:6px; }
.mfaPasskeyTable{ width:100%; border-collapse:collapse; margin:0 0 12px 0; font-size:13px; }
.mfaPasskeyTable th{ text-align:left; font-weight:600; color:var(--muted); border-bottom:1px solid var(--line); padding:6px 4px; }
.mfaPasskeyTable td{ border-bottom:1px solid var(--line); padding:8px 4px; color:var(--text); }
.mfaEnrolContent .contentBox{ max-width:640px; margin-left:auto; margin-right:auto; }
.cpMetricValueText{ font-size:17px; font-weight:700; color:var(--ink); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cpMetricsHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 8px 2px; }
.cpMetricsHead h3{ margin:0; font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }

/* passkey sign-in button: dark, with the passkey icon (fnGetPasskeyIcon) */
button.btnPasskey{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  color:#fff; background:#141414; border:1px solid #141414;
  border-radius:var(--radius-sm); padding:10px 18px; font-weight:600;
}
button.btnPasskey:hover{ background:#2a2a2a; border-color:#2a2a2a; }
button.btnPasskey:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--brand-100); }
.loginContent button.btnPasskey{ width:100%; padding:11px; margin-top:8px; }
.btnPasskey .icon-passkey{ width:20px; height:20px; flex:none; }
html[data-theme="dark"] button.btnPasskey{ color:#0f172a; background:#f1f5f9; border-color:#f1f5f9; }
html[data-theme="dark"] button.btnPasskey:hover{ background:#ffffff; border-color:#ffffff; }