/* =========================================================
   PortalMine Panel Theme — Option 2 (Neon Blue / Cloud SaaS)
   Fix: single global background layer (no patchy blocks)
   + Replace old purple tokens across Tailwind + custom CSS
========================================================= */

/* ===== Palette ===== */
:root{
  --pm-bg:  #020617;
  --pm-bg2: #0b1220;

  --pm-blue:  #3b82f6;
  --pm-blue2: #2563eb;
  --pm-sky:   #0ea5e9;
  --pm-sky2:  #0284c7;

  --pm-accent:  #a78bfa;
  --pm-accent2: #8b5cf6;

  --pm-text:  #e5e7eb;
  --pm-muted: #cbd5e1;
  --pm-border: rgba(148,163,184,0.55);

  --pm-panel: rgba(15,23,42,0.90);
  --pm-surface: #0b1120;
}

/* ================== Reset & Base ================== */
*,
*::before,
*::after { box-sizing: border-box; }

/* =========================================================
   Form controls reset
   We ship a tiny Tailwind subset (tw-lite.css) WITHOUT the
   Tailwind preflight reset. On some browsers (especially
   mobile), <button> defaults to a light/grey native UI which
   breaks the dark theme (bottom nav, file manager rows, ...).
   ======================================================= */

/* Use :where() so utility classes (bg-*, px-*, etc.) keep working.
   tw-lite.css is loaded BEFORE this file, and :where() has zero
   specificity, so class-based styles will win in the cascade. */
:where(button,
input,
select,
textarea){
  font: inherit;
  color: inherit;
}

:where(button,
input[type="button"],
input[type="submit"],
input[type="reset"]){
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  line-height: inherit;
}

:where(button){ cursor: pointer; }
:where(button:disabled){ cursor: not-allowed; }

html,
body{
  height: 100%;
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden; 
  background: var(--pm-bg) !important; 
  color: var(--pm-text);
}

html{ scroll-behavior: smooth; }

body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  direction: ltr; /* dashboard.html is ltr */
}

/* ===== ONE GLOBAL BACKGROUND LAYER (NO PATCHES) ===== */
body::before{
  content:"";
  position: fixed;
  inset: -30vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1400px 1100px at 12% 55%, rgba(59,130,246,.28), transparent 62%),
    radial-gradient(1400px 1100px at 88% 55%, rgba(14,165,233,.26), transparent 62%),
    radial-gradient(1100px 900px  at 55% 18%, rgba(167,139,250,.14), transparent 64%),
    radial-gradient(900px 700px   at 50% 110%, rgba(2,132,199,.12), transparent 65%),
    linear-gradient(145deg, #020617 0%, #040a18 30%, #0b1220 70%, #020617 100%);
  transform: translateZ(0);
}


:focus-visible{
  outline: 2px solid var(--pm-sky) !important;
  outline-offset: 3px;
}

/* =========================================================
   GLOBAL OVERRIDES — force Option 2 across Tailwind classes
   (fixes: old purple styles on other pages/sections)
========================================================= */

/* Dark surfaces that were white */
.bg-white,
.bg-\[\#f5f3ff\],
.bg-\[\#f9fafb\]{
  background-color: var(--pm-surface) !important;
}
.bg-white\/80{
  background-color: var(--pm-panel) !important;
}

/* Borders */
.border-\[\#e5e7eb\],
.border-slate-200,
.border-\[\#a855f7\],
.border-\[\#9333ea\],
.border-\[\#6366f1\]{
  border-color: var(--pm-border) !important;
}

/* Common text colors on dark */
.text-\[\#4b5563\],
.text-\[\#374151\],
.text-\[\#6b7280\],
.text-slate-500,
.text-slate-700{
  color: var(--pm-muted) !important;
}

/* Replace old purple tokens (text) */
.text-\[\#4c1d95\],
.text-\[\#6b21a8\],
.text-\[\#7c3aed\],
.text-\[\#8b5cf6\],
.text-\[\#a855f7\],
.text-purple-500,
.text-purple-600,
.text-purple-700{
  color: #93c5fd !important;
}

/* Replace purple backgrounds/buttons */
.bg-\[\#a855f7\],
.bg-\[\#9333ea\],
.bg-purple-400,
.bg-purple-500,
.bg-purple-600,
.bg-purple-700{
  background-color: var(--pm-blue) !important;
  color: #06121f !important;
}
.hover\:bg-purple-400:hover,
.hover\:bg-purple-500:hover,
.hover\:bg-purple-600:hover,
.hover\:bg-purple-700:hover{
  background-color: var(--pm-blue2) !important;
}

/* Tailwind focus rings */
.focus\:ring-purple-500:focus,
.focus\:ring-purple-400:focus,
.focus\:ring-purple-600:focus{
  --tw-ring-color: rgba(14,165,233,0.55) !important;
}
.focus\:border-purple-500:focus,
.focus\:border-purple-400:focus,
.focus\:border-purple-600:focus{
  border-color: rgba(14,165,233,0.55) !important;
}

/* Checkbox / radio accent */
.accent-purple-500{ accent-color: var(--pm-blue) !important; }

/* Tailwind gradient tokens (brand icon) */
.from-purple-500{ --tw-gradient-from: var(--pm-blue) !important; --tw-gradient-to: rgba(59,130,246,0) !important; }
.to-purple-500{ --tw-gradient-to: var(--pm-blue) !important; }
.to-purple-600{ --tw-gradient-to: var(--pm-blue2) !important; }

/* Tailwind shadow tint used in HTML */
.shadow-purple-500\/50{ --tw-shadow-color: rgba(59,130,246,0.50) !important; }
.shadow-purple-500\/40{ --tw-shadow-color: rgba(59,130,246,0.40) !important; }
.shadow-emerald-500\/40{ --tw-shadow-color: rgba(16,185,129,0.32) !important; }

/* =========================================================
   Components (kept from your dashboard.css, recolored)
========================================================= */


.card-glass{
  background-color: rgba(15, 23, 42, 0.96);
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.12);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.18),
    0 4px 6px -4px rgba(0, 0, 0, 0.18);
}


.header-glow{
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.18),
    0 1px 2px -1px rgba(0, 0, 0, 0.18),
    0 0 14px rgba(14, 165, 233, 0.16);
}


.stat-card{
  padding: 1rem;
  border-radius: 0.75rem;
  background-color: rgba(30, 41, 59, 0.70);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.16),
    0 2px 4px -2px rgba(0, 0, 0, 0.16);
}


.input-label{
  display:block;
  font-size:0.875rem;
  font-weight:500;
  color:#e5e7eb;
  margin-bottom:0.5rem;
}

.input-field{
  width:100%;
  padding:0.75rem 1rem;
  border-radius:0.75rem;
  background-color:#1e293b;
  border:1px solid #475569;
  color:#f8fafc;
  transition: all 0.2s;
}
.input-field:focus{
  border-color: rgba(14,165,233,0.65);
  box-shadow: 0 0 0 3px rgba(14,165,233,0.35);
  background-color:#0f172a;
}


.radio-label{
  display:flex;
  align-items:center;
  gap:0.5rem;
  padding:0.5rem 1rem;
  border-radius:0.5rem;
  background-color:#1e293b;
  border:1px solid #475569;
  cursor:pointer;
  transition: all 0.2s;
}
.radio-label:has(input:checked){
  background-color: rgba(59,130,246,0.22);
  border-color: rgba(59,130,246,0.45);
  color:#e0f2fe;
}
.radio-label input{
  appearance:none;
  -webkit-appearance:none;
  width:0;
  height:0;
  margin:0;
  padding:0;
}


.scrollbar-hide::-webkit-scrollbar{ display:none; }
.scrollbar-hide{ -ms-overflow-style:none; scrollbar-width:none; }


.loading-cursor{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.25rem 0.6rem;
  border-radius:9999px;
  font-size:11px;
  border:1px dashed rgba(248,250,252,0.35);
  color:#e5e7eb;
  background: radial-gradient(circle at top left, rgba(56,189,248,0.30), transparent 55%);
}


#server-status-card{
  grid-column: 1 / -1;
  width: 100%;
}
.server-top-row,
#top-row{
  display:grid;
  gap:1.5rem;
}
@media (min-width: 1024px){
  .server-top-row,
  #top-row{ grid-template-columns: minmax(0,1fr); }
}
#server-status-card.card-glass{ padding:1.5rem; }

#server-status-card .grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:1rem;
  width:100%;
}
#server-status-card .grid > div{
  background-color: rgba(30,41,59,0.70);
  border-radius:0.75rem;
  padding:0.75rem 1rem;
}
#server-status-card .grid > div span:first-child{
  display:block;
  font-size:0.8rem;
  color:#94a3b8;
  margin-bottom:0.25rem;
}
#server-status-card .grid > div span:last-child{
  display:block;
  font-size:0.9rem;
  color:#e5e7eb;
  font-weight:500;
}
#server-status-card > .flex{ display:flex; }

@media (max-width: 768px){
  #server-status-card{ width:100%; }
  #server-status-card .grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   PortalMine Server Card (New UI) — keep, recolor (Option 2)
========================================================= */
.pm-h { font-size: 1.05rem; font-weight: 800; color: rgba(248, 250, 252, 0.98); letter-spacing: 0.2px; }
.pm-sub { font-size: 0.8rem; color: rgba(203, 213, 225, 0.85); margin-top: 0.15rem; }
.pm-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.pm-empty-state{
  display:flex; gap:0.9rem; align-items:flex-start;
  padding: 1rem; border-radius: 1rem;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.12);
}
.pm-empty-state__icon{
  width:40px; height:40px; flex:0 0 auto;
  display:grid; place-items:center;
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.14);
  color: rgba(226, 232, 240, 0.9);
}
.pm-empty-state__icon svg{ width:22px; height:22px; }

.pm-server{
  border-radius: 1.25rem;
  padding: 1.1rem;
  background:
    radial-gradient(1200px 420px at 18% 12%, rgba(59, 130, 246, 0.18), transparent 55%),
    radial-gradient(900px 360px  at 82% 82%, rgba(14, 165, 233, 0.14), transparent 55%),
    rgba(2, 6, 23, 0.26);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.pm-server__header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
.pm-server__title{ min-width: 0; }

.pm-status{
  display:inline-flex; align-items:center; gap:0.5rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.55);
  color: rgba(226, 232, 240, 0.92);
  flex: 0 0 auto;
  user-select:none;
}
.pm-dot{ width:10px; height:10px; border-radius:999px; box-shadow: 0 0 0 3px rgba(2,6,23,0.35); }
.pm-dot--online{ background:#34d399; }
.pm-dot--starting{ background:#fbbf24; }
.pm-dot--offline{ background:#ef4444; }
.pm-dot--unknown{ background:#94a3b8; }

.pm-status--online{ background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.28); }
.pm-status--starting{ background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.28); }
.pm-status--offline{ background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.28); }
.pm-status--unknown{ background: rgba(148, 163, 184, 0.10); border-color: rgba(148, 163, 184, 0.22); }

.pm-ipbox{
  border-radius: 1rem;
  padding: 0.85rem 0.9rem;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.14);
  margin-bottom: 0.85rem;
}
.pm-ipbox__label{
  font-size: 0.78rem;
  color: rgba(203, 213, 225, 0.85);
  margin-bottom: 0.55rem;
}
.pm-ipbox__row{
  display:flex; align-items:center; justify-content:space-between; gap:0.6rem;
}
.pm-ipbox__row code{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding: 0.55rem 0.7rem;
  border-radius: 0.75rem;
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: rgba(186, 230, 253, 0.95);
  width: 100%;
}

.pm-icon-btn{
  width: 38px; height: 38px;
  display:grid; place-items:center;
  border-radius: 0.85rem;
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: rgba(226, 232, 240, 0.92);
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
  flex: 0 0 auto;
}
.pm-icon-btn:hover{ background: rgba(51, 65, 85, 0.60); border-color: rgba(148, 163, 184, 0.24); transform: translateY(-1px); }
.pm-icon-btn:active{ transform: translateY(0px) scale(0.98); }
.pm-icon-btn svg{ width: 18px; height: 18px; }

.pm-alert{
  border-radius: 1rem;
  padding: 0.8rem 0.9rem;
  background: rgba(127, 29, 29, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.22);
  color: rgba(254, 226, 226, 0.95);
  margin-bottom: 0.85rem;
}
.pm-alert__left{ display:flex; gap:0.75rem; align-items:flex-start; }
.pm-alert__left svg{ width: 22px; height: 22px; margin-top: 2px; }
.pm-alert__title{ font-weight: 800; font-size: 0.92rem; }
.pm-alert__desc{ font-size: 0.82rem; opacity: 0.9; margin-top: 0.2rem; }

.pm-metrics{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.95rem;
}
.pm-metric{
  border-radius: 1rem;
  padding: 0.75rem 0.85rem;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.12);
}
.pm-metric__label{ font-size: 0.78rem; color: rgba(148, 163, 184, 0.92); }
.pm-metric__value{ margin-top: 0.28rem; font-weight: 800; color: rgba(248, 250, 252, 0.96); }

/* ===== Level ring (Steam-like) ===== */
.pm-level-ring{
  --ring: rgba(16,185,129,0.95), rgba(34,197,94,0.95), rgba(16,185,129,0.95);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(var(--ring));
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}
.pm-level-ring::after{
  content:'';
  position:absolute;
  inset: 3px;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.18);
}
.pm-level-ring > span{
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  font-weight: 900;
  color: rgba(248,250,252,0.95);
  letter-spacing: -0.02em;
}
.pm-level-ring--1{ --ring: rgba(16,185,129,0.95), rgba(34,197,94,0.95), rgba(16,185,129,0.95); }
.pm-level-ring--2{ --ring: rgba(234,179,8,0.95), rgba(250,204,21,0.95), rgba(234,179,8,0.95); }
.pm-level-ring--3{ --ring: rgba(249,115,22,0.95), rgba(251,146,60,0.95), rgba(249,115,22,0.95); }
.pm-level-ring--4{ --ring: rgba(239,68,68,0.95), rgba(220,38,38,0.95), rgba(239,68,68,0.95); }

/* ===== Upgrade locks ===== */
.pm-lock{
  font-size: 14px;
  line-height: 1;
  transform: translateY(-1px);
  opacity: 0.95;
}
.pm-lock--closed{ filter: saturate(0.8); }
.pm-lock--open{ filter: saturate(1.1); }

.pm-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 0.55rem;
}
.pm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0.95rem;
  font-size: 0.9rem;
  font-weight: 800;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(30, 41, 59, 0.55);
  color: rgba(248, 250, 252, 0.95);
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, filter 120ms ease;
}

/* Ensure Tailwind's `.hidden` always wins, even when other component
   classes (like `.pm-btn`) set `display:` later in the cascade. */
.hidden{ display:none !important; }

/* tw-lite doesn't include every color utility we use in JS-rendered
   addon cards. Add the few missing ones so Install/Remove buttons
   look correct (green/red). */
.bg-emerald-600{ background-color: rgb(5 150 105 / 1) !important; }
.hover\:bg-emerald-500:hover{ background-color: rgb(16 185 129 / 1) !important; }
.bg-red-700{ background-color: rgb(185 28 28 / 1) !important; }
.hover\:bg-red-600:hover{ background-color: rgb(220 38 38 / 1) !important; }
.text-white{ color: #fff !important; }
.pm-btn svg{ width: 18px; height: 18px; }
.pm-btn:hover{ transform: translateY(-1px); border-color: rgba(148, 163, 184, 0.25); background: rgba(51, 65, 85, 0.55); }
.pm-btn:active{ transform: translateY(0px) scale(0.99); }

.pm-btn--success{ background: rgba(16, 185, 129, 0.22); border-color: rgba(16, 185, 129, 0.28); }
.pm-btn--success:hover{ background: rgba(16, 185, 129, 0.30); }

.pm-btn--danger{ background: rgba(239, 68, 68, 0.20); border-color: rgba(239, 68, 68, 0.28); }
.pm-btn--danger:hover{ background: rgba(239, 68, 68, 0.28); }

.pm-btn--neutral{ background: rgba(148, 163, 184, 0.14); border-color: rgba(148, 163, 184, 0.18); }

.pm-btn--primary{ background: rgba(56, 189, 248, 0.18); border-color: rgba(56, 189, 248, 0.24); }
.pm-btn--primary:hover{ background: rgba(56, 189, 248, 0.26); }

.pm-btn--purple{ background: rgba(59, 130, 246, 0.18); border-color: rgba(59, 130, 246, 0.24); }
.pm-btn--purple:hover{ background: rgba(59, 130, 246, 0.26); }

.pm-btn--outline{
  background: rgba(15, 23, 42, 0.35);
  border-color: rgba(148, 163, 184, 0.20);
}
.pm-btn--danger-outline{
  background: rgba(2, 6, 23, 0.15);
  border-color: rgba(239, 68, 68, 0.38);
  color: rgba(254, 202, 202, 0.98);
}
.pm-btn--danger-outline:hover{
  background: rgba(127, 29, 29, 0.20);
  border-color: rgba(239, 68, 68, 0.55);
}

/* Responsive */
@media (max-width: 1024px){
  .pm-metrics{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .pm-server{ padding: 0.95rem; }
  .pm-server__header{ flex-direction: column; align-items: flex-start; }
  .pm-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-btn{ width: 100%; justify-content: center; }
}

/* ================== Plugins Page (embedded, no overlay) ================== */
#plugins-modal{
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  background: transparent !important;
  padding: 0;
}
#plugins-modal.hidden{ display:none !important; }

#plugins-modal > div{
  width: 100%;
  max-height: none;
  overflow: visible;
  border-radius: 18px;
}

#plugins-results{
  max-height: none;
  overflow: visible;
  padding-right: 0;
}



/* ================== Aternos-like Sidebar ================== */
.pm-layout { min-height: 0; }

.pm-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pm-nav-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(71,85,105,0.45); /* slate-600-ish */
  background: rgba(2,6,23,0.25);
  color: #e2e8f0;
  font-size: 16px;
  min-height: 60px;
  text-align: left;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.pm-nav-link:hover {
  background: rgba(15,23,42,0.6);
  transform: translateX(2px);
  border-color: rgba(148,163,184,0.35);
}

.pm-nav-link.is-active {
  background: rgba(30,41,59,0.7);
  border-color: rgba(56,189,248,0.55); /* sky-ish */
  box-shadow: 0 0 0 1px rgba(56,189,248,0.2);
}

.pm-nav-ico {
  width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.pm-page { min-width: 0; }


/* ===== Aternos-like layout helpers ===== */
.pm-page-inner{ max-width: 1200px; margin: 0 auto; padding: 18px 16px; }
.pm-page-head{ display:flex; gap:16px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; margin-bottom: 14px; }
.pm-page-title{ font-size: 18px; font-weight: 800; color: #fff; margin: 0; }
.pm-page-subtitle{ margin: 6px 0 0; font-size: 13px; color: rgba(203,213,225,0.9); line-height: 1.6; max-width: 70ch; }
.pm-page-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* Badge */
.pm-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(2,6,23,0.25);
  color: rgba(226,232,240,0.95);
  font-size: 12px;
  font-weight: 700;
}

/* Console */
.pm-console-wrap{ display:flex; flex-direction:column; gap:12px; }
.pm-console-log{
  height: 420px;
  overflow:auto;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(2,6,23,0.35);
  color: rgba(226,232,240,0.95);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.pm-console-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.pm-console-input{
  flex: 1;
  min-width: 240px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(2,6,23,0.25);
  color: rgba(226,232,240,0.95);
  outline: none;
}
.pm-console-input:focus{
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.pm-console-options{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:space-between; }
.pm-check{ display:flex; gap:8px; align-items:center; color: rgba(226,232,240,0.92); font-size: 13px; }
.pm-check input{ width:16px; height:16px; }
.pm-hint{
  font-size: 12px;
  color: rgba(148,163,184,0.95);
  padding-top: 4px;
}
.pm-hint code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Plugins docked */
.pm-plugins-dock{ margin-top: 14px; }
.pm-plugins-docked{
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
}
.pm-plugins-docked > div{
  width: 100% !important;
  max-width: none !important;
}
.pm-plugins-docked .border-b{ border-bottom: 1px solid rgba(148,163,184,0.18) !important; }


/* Plugins page panel (embedded, not modal) */
.pm-plugins-panel{ margin-top: 14px; }
.pm-plugins-panel > div{ width: 100% !important; max-width: none !important; }


/* ================== Responsive Mobile Sidebar ================== */

.pm-sidebar-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.pm-mobile-menu-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:14px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: rgba(226, 232, 240, 0.95);
  box-shadow: 0 8px 30px rgba(0,0,0,0.28);
}
.pm-mobile-menu-btn svg{ width:22px; height:22px; }

.pm-mobile-menu-close{
  display:none;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:14px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: rgba(226, 232, 240, 0.95);
}

.pm-mobile-overlay{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  z-index: 40;
}

@media (max-width: 900px){
  .pm-mobile-menu-btn{ display:inline-flex; }
  .pm-mobile-menu-close{ display:inline-flex; }
  .pm-layout{ display:block !important; }
  #pm-sidebar{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 340px);
    max-width: 340px;
    transform: translateX(-110%);
    transition: transform .22s ease;
    z-index: 50;
    background: rgba(2, 6, 23, 0.98) !important;
    border-right: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }
  body.pm-menu-open #pm-sidebar{ transform: translateX(0); }
  body.pm-menu-open .pm-mobile-overlay{ display:block; }
  /* prevent accidental horizontal scroll */
  html, body{ overflow-x:hidden; }
  /* Server page: make top row stack */
  #page-server .grid.md\:grid-cols-2{ grid-template-columns: 1fr !important; }
  #page-server .grid.md\:grid-cols-2 > *{ min-width:0; }
}

/* The header/menu square button is not needed because we ship a bottom
   navigation bar for mobile. Hide these controls everywhere. */
.pm-mobile-menu-btn,
.pm-mobile-menu-close{ display:none !important; }


/* === UI polish (responsive centered + icons) === */
.pm-layout{
  max-width: 1180px;
  margin: 18px auto 0;
  width: 100%;
  padding-left: 12px;
  padding-right: 12px;
}

.pm-nav-ico{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: .92;
}

.pm-nav-link.active .pm-nav-ico{
  opacity: 1;
}

@media (max-width: 900px){
  .pm-layout{
    margin-top: 12px;
  }
}


/* ================== Mobile-First Dashboard (v1) ================== */
.pm-bell-btn{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: rgba(226, 232, 240, 0.95);
  box-shadow: 0 8px 30px rgba(0,0,0,0.28);
}
.pm-bell-btn:active{ transform: scale(0.98); }

.pm-bottom-nav{
  display:none;
}

.pm-bottom-link{
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 3px;
  color: rgba(203, 213, 225, 0.88);
  font-size: 11px;
  padding: 8px 6px;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.pm-bottom-link span{ line-height: 1; }
.pm-bottom-ico{ width: 22px; height: 22px; opacity: 0.92; }
.pm-bottom-link.is-active{ color: rgba(248, 250, 252, 0.98); }
.pm-bottom-link.is-active .pm-bottom-ico{ opacity: 1; }

@media (max-width: 900px){
  /* Give room for bottom nav */
  main{ padding-bottom: calc(86px + env(safe-area-inset-bottom)); }

  .pm-bottom-nav{
    display:flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(78px + env(safe-area-inset-bottom));
    z-index: 60;
    background: rgba(2, 6, 23, 0.92);
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    backdrop-filter: blur(10px);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Larger touch targets on mobile */
  .pm-btn{ padding: 0.85rem 1.05rem; font-size: 0.98rem; border-radius: 1.1rem; min-height: 48px; }
  .pm-icon-btn{ width: 44px; height: 44px; border-radius: 1rem; }
  .pm-nav-link{ min-height: 48px; }

  /* Make action rows wrap nicely */
  .pm-actions{ gap: 0.75rem; }
}

/* Console swipe hint (small) */
.pm-swipe-hint{
  display:none;
  font-size: 12px;
  color: rgba(148,163,184,0.95);
  margin-top: 8px;
}
@media (max-width: 900px){
  .pm-swipe-hint{ display:block; }
}

.pm-bell-btn.is-on{ border-color: rgba(14,165,233,0.55); box-shadow: 0 8px 30px rgba(14,165,233,0.18); }


/* ===== Addons: Make Install green & Remove red without relying on full Tailwind ===== */
.addon-action-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border-radius: .65rem;
  padding: .35rem .75rem;
  font-weight: 800;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(30,41,59,0.55);
  color: rgba(248,250,252,0.95);
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, filter 120ms ease;
}
.addon-action-btn:hover{ filter: brightness(1.08); }
.addon-action-btn:active{ transform: translateY(1px); }
.addon-action-btn:disabled{ opacity:.55; cursor:not-allowed; }

.addon-action-btn:not([data-installed-name]){
  background: rgba(34,197,94,0.18);
  border-color: rgba(34,197,94,0.30);
}
.addon-action-btn:not([data-installed-name]):hover{
  background: rgba(34,197,94,0.26);
}

.addon-action-btn[data-installed-name]{
  background: rgba(239,68,68,0.16);
  border-color: rgba(239,68,68,0.26);
}
.addon-action-btn[data-installed-name]:hover{
  background: rgba(239,68,68,0.22);
}

/* ===== Console: colors + quick buttons ===== */
.pm-console-log .pm-logline{ display:block; }
.pm-console-log .pm-log--error{ color: rgba(248,113,113,0.95); }
.pm-console-log .pm-log--warn{ color: rgba(251,191,36,0.95); }
.pm-console-log .pm-log--info{ color: rgba(148,197,255,0.95); }
.pm-console-log .pm-log--ok{ color: rgba(74,222,128,0.95); }
.pm-console-log .pm-log--cmd{ color: rgba(226,232,240,0.95); opacity: .9; }
.pm-console-log .pm-log--chat{ color: rgba(196,181,253,0.95); }
.pm-console-log .pm-log--muted{ color: rgba(148,163,184,0.95); }

.pm-console-quick, .pm-console-presets{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.pm-console-presets{ margin-top: -2px; }

.pm-qbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .45rem .7rem;
  border-radius: .85rem;
  font-size: .78rem;
  font-weight: 900;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(15,23,42,0.30);
  color: rgba(248,250,252,0.95);
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, filter 120ms ease;
}
.pm-qbtn:hover{ background: rgba(15,23,42,0.45); }
.pm-qbtn:active{ transform: translateY(1px); }
.pm-qbtn--ghost{ background: transparent; border-color: rgba(148,163,184,0.14); }


/* Pro File Manager additions */
.pm-fm-drop{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(2,6,23,0.78);
  border: 1px dashed rgba(56,189,248,0.55);
  border-radius: 0.75rem;
  backdrop-filter: blur(2px);
}
.pm-fm-drop-inner{
  padding: 12px 16px;
  border-radius: 0.75rem;
  background: rgba(15,23,42,0.92);
  border: 1px solid rgba(148,163,184,0.25);
  color: #e5e7eb;
  font-size: 12px;
}

/* ================== Fix: File editor textarea ==================
   Some deployments use tw-lite.css without full Tailwind form styles.
   This ensures the editor is always visible and writable.
*/
#pm-file-editor-modal #pm-fe-text{
  background-color: rgba(2, 6, 23, 0.55) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  color: #e5e7eb !important;
  padding: 12px !important;
  border-radius: 14px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 12px !important;
  line-height: 20px !important;
  caret-color: #e5e7eb !important;
}
#pm-file-editor-modal #pm-fe-text::placeholder{
  color: rgba(148, 163, 184, 0.85) !important;
}


/* ================== File Editor Modal: responsive & robust ==================
   Make the editor usable on mobile/tablet and independent of Tailwind utilities.
*/
#pm-file-editor-modal{
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0,0,0,0.60);
  padding: 16px;
  align-items: center;
  justify-content: center;
}
#pm-file-editor-modal.hidden{ display:none !important; }
#pm-file-editor-modal.flex{ display:flex !important; }
#pm-file-editor-modal .hidden{ display:none !important; }

@media (max-width: 640px){
  #pm-file-editor-modal{ padding: 10px; }
}

#pm-file-editor-modal .pm-fe-card{
  width: 100%;
  max-width: 980px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(15,23,42,0.96);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  overflow: hidden;
}

#pm-file-editor-modal .pm-fe-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148,163,184,0.22);
}
#pm-file-editor-modal .pm-fe-head-left{ min-width: 0; }
#pm-file-editor-modal .pm-fe-title{
  color: rgba(248,250,252,0.98);
  font-weight: 900;
  font-size: 15px;
}
#pm-file-editor-modal .pm-fe-path{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(148,163,184,0.95);
  word-break: break-all;
}
#pm-file-editor-modal .pm-fe-head-right{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:flex-end;
  gap: 8px;
}

#pm-file-editor-modal .pm-fe-pill{
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,0.26);
  background: rgba(2,6,23,0.35);
  color: rgba(226,232,240,0.95);
  font-size: 11px;
  font-weight: 800;
}
#pm-file-editor-modal .pm-fe-status{
  font-size: 12px;
  color: rgba(148,163,184,0.95);
}

#pm-file-editor-modal .pm-fe-btn{
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(30,41,59,0.55);
  color: rgba(248,250,252,0.95);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
#pm-file-editor-modal .pm-fe-btn:hover{ background: rgba(30,41,59,0.75); }
#pm-file-editor-modal .pm-fe-btn:active{ transform: translateY(1px); }

#pm-file-editor-modal .pm-fe-body{
  padding: 14px 16px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  flex: 1;
  min-height: 0; /* allow textarea to shrink */
}

#pm-file-editor-modal .pm-fe-text,
#pm-file-editor-modal #pm-fe-text{
  width: 100%;
  flex: 1;
  min-height: 320px;
  height: auto !important;
  resize: vertical;
  overflow: auto;
  outline: none;
  pointer-events: auto;
  -webkit-text-size-adjust: 100%;
}
@media (max-width: 640px){
  #pm-file-editor-modal .pm-fe-text,
  #pm-file-editor-modal #pm-fe-text{
    min-height: 45vh;
  }
}

#pm-file-editor-modal .pm-fe-lint{
  margin-top: 2px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.18);
  padding: 8px 10px;
  font-size: 11px;
}

#pm-file-editor-modal .pm-fe-hist{
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(2,6,23,0.28);
  padding: 10px;
}
#pm-file-editor-modal .pm-fe-hist-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
#pm-file-editor-modal .pm-fe-hist-title{
  font-size: 12px;
  color: rgba(226,232,240,0.95);
  font-weight: 900;
}
#pm-file-editor-modal .pm-fe-hist-list{ margin-top: 8px; display:flex; flex-direction:column; gap: 8px; }
#pm-file-editor-modal .pm-fe-hist-note{ margin-top: 8px; font-size: 11px; color: rgba(148,163,184,0.85); }

#pm-file-editor-modal .pm-fe-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
#pm-file-editor-modal .pm-fe-hint{
  font-size: 11px;
  color: rgba(148,163,184,0.95);
}
#pm-file-editor-modal .pm-fe-save{
  padding: 9px 14px;
  border-radius: 14px;
  border: 1px solid rgba(16,185,129,0.45);
  background: rgba(16,185,129,0.85);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
#pm-file-editor-modal .pm-fe-save:hover{ background: rgba(16,185,129,0.95); }
#pm-file-editor-modal .pm-fe-save:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

/* Keep the original textarea-visibility fix (for older markup) */
#pm-file-editor-modal #pm-fe-text{
  background-color: rgba(2, 6, 23, 0.55) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  color: #e5e7eb !important;
  padding: 12px !important;
  border-radius: 14px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 12px !important;
  line-height: 20px !important;
  caret-color: #e5e7eb !important;
}
#pm-file-editor-modal #pm-fe-text::placeholder{
  color: rgba(148, 163, 184, 0.85) !important;
}