/* =========================================================
   3DToolkits App Theme Bridge
   Shared across standalone apps
   ========================================================= */

/* ---- Theme tokens (from WP) ---- */
:root{
  /* Dark emerald shell */
  --bg:#08130f;

  /* Light text on dark shell */
  --text:#e9fff6;
  --muted:rgba(233,255,246,.72);

  /* Lines / borders */
  --line:rgba(255,255,255,.14);

  /* Brand greens */
  --brand:#22c55e;     /* emerald */
  --brand2:#16a34a;    /* forest */

  --ok:#34d399;
  --shadow:0 18px 60px rgba(0,0,0,.45);
  --radius:18px;
}

/* ---- Dark glass app shell ---- */
body{
  background:
    radial-gradient(900px 450px at 10% 0%, rgba(34,197,94,.22), transparent 60%),
    radial-gradient(900px 450px at 90% 10%, rgba(22,163,74,.18), transparent 55%),
    radial-gradient(1200px 600px at 50% 100%, rgba(16,185,129,.10), transparent 60%),
    var(--bg);
  color: var(--text);
}


/* =========================================================
   Top App Nav
   ========================================================= */

.app-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  margin-bottom:14px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:999px;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}

.app-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
}

.app-logo{
  width:34px;
  height:34px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  position:relative;
}
.app-logo::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:8px;
  border:2px solid rgba(255,255,255,.55);
  transform:rotate(8deg);
}

.app-nav-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* =========================================================
   Buttons
   ========================================================= */

button,
.btn-primary,
.btn-outline,
.btn-ghost{
  border-radius:999px;
  font-weight:600;
}

.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#071023;
  border:none;
}

.btn-outline{
  background:rgba(255,255,255,.04);
  color:var(--text);
  border:1px solid var(--line);
}

.btn-ghost{
  background:transparent;
  color:var(--muted);
  border:1px solid var(--line);
}

.btn-ghost:hover,
.btn-outline:hover{
  background:rgba(255,255,255,.08);
  color:var(--text);
}

/* =========================================================
   Nav pills – WP match
   ========================================================= */

.app-nav .btn-ghost{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(234,240,255,.78) !important;
  padding: 10px 14px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.app-nav .btn-ghost:hover{
  background: rgba(255,255,255,.12) !important;
  color: #eaf0ff !important;
}

.app-nav .btn-ghost:active{
  background: rgba(255,255,255,.16) !important;
}

/* =========================================================
   Panels – light interior card
   ========================================================= */

.panel,
#viewer{
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

/* Default labels outside panels (nav, modals, etc) */
label{ color:var(--muted); }

input,select,textarea{
  background:rgba(0,0,0,.25);
  color:var(--text);
  border:1px solid var(--line);
}

/* =========================================================
   Parameter text – QR app
   ========================================================= */

.section-title{
  color:#111 !important;
}

.panel label,
.panel input,
.panel select,
.panel textarea{
  color:#111 !important;
}

.panel input::placeholder,
.panel textarea::placeholder{
  color:#555 !important;
}

.panel .muted,
.panel .subtle,
.panel #status,
.panel pre{
  color:#333 !important;
}
/* ===== Fix: Help modal text unreadable on white card ===== */
.modal-card{
  color:#111;                 /* force dark text on white modal */
}

.modal-header,
.modal-body,
.modal-actions{
  color:#111;
}

.modal-body p{
  color:#111;
}

.modal-title{
  color:#111;
}

.modal-close{
  color:#111;
}

.modal-body code{
  color:#111;                 /* ensure inline code is readable */
}

/* Optional: ensure <summary>/<details> text inside modal is readable */
.modal-card summary,
.modal-card details{
  color:#111;
}