:root{
  --bg:#0f1116;
  --panel:#141821;
  --panel-2:#0c0f14;
  --text:#e6e8ef;
  --muted:#8b93a6;
  --accent:#6ea8fe;
  --border:#232838;
  --good:#34d399;
  --warn:#fbbf24;
  --bad:#f87171;
  --git-add:#1f9d55;
  --git-mod:#3b82f6;
  --git-del:#ef4444;

  /* Sidebar sizes */
  --side-expanded: 280px;
  --side-collapsed: 12px; /* thin grip area */
  --side-width: var(--side-expanded);
}
.light{
  --bg:#f6f7fb; --panel:#ffffff; --panel-2:#f1f3f9; --text:#101321; --muted:#5a6275;
  --accent:#2563eb; --border:#e6e8ef; --good:#059669; --warn:#b45309; --bad:#dc2626;
  --git-add:#16a34a; --git-mod:#2563eb; --git-del:#dc2626;
}
/* Retro (CRT) */
.retro{
  --bg:#0a0d09; --panel:#0c120c; --panel-2:#081008; --text:#d7ffd7; --muted:#7bdc7b;
  --accent:#39ff14; --border:#133113; --good:#39ff14; --warn:#ffe14a; --bad:#ff5c5c;
  --git-add:#39ff14; --git-mod:#4ad1ff; --git-del:#ff5c5c;
  text-shadow:0 0 6px rgba(57,255,20,.3);
}
/* 1970s (warm oranges/browns) */
.seventies{
  --bg:#1b120b; --panel:#23170e; --panel-2:#1f140c; --text:#ffeedd; --muted:#d7bda8;
  --accent:#ff9d00; --border:#3a2616; --good:#9ad07f; --warn:#ffcf66; --bad:#ff6b6b;
  --git-add:#78c251; --git-mod:#ff9d00; --git-del:#ff6b6b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  display:flex; flex-direction:column; overflow:hidden;
}

/* TOPBAR */
.topbar{
  height:44px; display:flex; align-items:center; gap:8px; padding:0 10px;
  background:var(--panel); border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.2px}
.orb{
  width:18px; height:18px; border-radius:50%;
  background: conic-gradient(from 0deg, var(--accent), #22d3ee, #a78bfa, var(--accent));
  box-shadow:0 0 10px rgba(110,168,254,.6);
  animation:spin 6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.btn{
  border:1px solid var(--border); background:var(--panel-2); color:var(--text);
  padding:6px 10px; border-radius:8px; cursor:pointer; transition:.15s; user-select:none;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,.15)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent}
.kbd{font:12px ui-monospace,Menlo,Consolas,monospace; color:var(--muted); margin-left:4px}
.spacer{flex:1}

/* LAYOUT — grid column width driven by --side-width */
.main{
  flex:1; display:grid; min-height:0;
  grid-template-columns: var(--side-width) 1fr;
  transition: grid-template-columns .18s ease;
}

/* Collapse states */
body.side-collapsed{ --side-width: var(--side-collapsed); }
body.side-expanded{ --side-width: var(--side-expanded); }
body.side-pinned{ --side-width: var(--side-expanded); }

/* SIDEBAR */
.sidebar{
  position:relative; border-right:1px solid var(--border);
  background:var(--panel-2); overflow:clip; /* clip the inner panel while sliding */
  width:var(--side-width); transition: width .18s ease, border-color .18s ease, background .18s ease;
}

/* Thin grip that is always visible and interactive */
.side-grip{
  position:absolute; inset:0 auto 0 0; width:var(--side-collapsed);
  cursor:ew-resize; background:transparent; z-index:3;
}
.side-grip::after{
  content:''; position:absolute; left:4px; top:50%; transform:translateY(-50%);
  width:4px; height:40px; border-radius:3px; background:var(--border); opacity:.6;
}
.sidebar:hover .side-grip::after{ opacity:.9 }

/* Actual sliding content */
.side-inner{
  position:absolute; inset:0 0 0 0; width:var(--side-expanded);
  transition: transform .18s ease;
  transform: translateX(calc(var(--side-width) - var(--side-expanded)));
}
body.side-collapsed .side-inner{ pointer-events:none } /* avoid accidental clicks when hidden */

/* Auto-hide Filter header (kept) */
.side-head{
  padding:10px; position:sticky; top:0; background:var(--panel-2); z-index:2;
  border-bottom:1px solid var(--border);
}
.search{width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--panel); color:var(--text)}
.tree{padding:8px}
.node{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer}
.node:hover{background:var(--panel)}
.node .chev{width:14px; text-align:center; color:var(--muted)}
.node .name{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.node.file .name{color:var(--text)}
.node.dir .name{color:var(--muted)}

/* EDITOR AREA */
.editor-wrap{display:flex; flex-direction:column; min-width:0}
.tabs{height:36px; display:flex; align-items:flex-end; gap:2px; padding:0 8px; background:var(--panel-2); border-bottom:1px solid var(--border); overflow:auto}
.tab{
  max-width:260px; display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-bottom:none;
  border-top-left-radius:8px; border-top-right-radius:8px; background:var(--panel); color:var(--muted); cursor:pointer;
}
.tab.active{color:var(--text); background:var(--panel)}
.tab .dirty{color:var(--warn)}
.tab .x{margin-left:4px; color:var(--muted)}
.tab .x:hover{color:var(--bad)}
.editor{position:relative; flex:1; min-height:0}
#monaco{position:absolute; inset:0}

/* Search panel */
.panel{
  position:absolute; right:8px; top:8px; width:min(520px, 40vw); height:60%;
  background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:0 20px 80px rgba(0,0,0,.35);
  display:flex; flex-direction:column; overflow:hidden; z-index:10;
}
.panel.hidden{display:none}
.panel-head{
  height:42px; display:flex; align-items:center; gap:10px; padding:0 10px; border-bottom:1px solid var(--border); background:var(--panel-2);
}
.panel-body{flex:1; overflow:auto; padding:6px}
.result{ padding:8px 10px; border-bottom:1px dashed var(--border); cursor:pointer; }
.result:hover{background:var(--panel-2)}
.result .meta{color:var(--muted); font:12px ui-monospace,Menlo,Consolas,monospace}

/* Status */
.status{height:28px; display:flex; align-items:center; gap:16px; padding:0 10px; background:var(--panel); border-top:1px solid var(--border); color:var(--muted)}
.status .pill{padding:3px 8px; border:1px solid var(--border); border-radius:999px; background:var(--panel-2)}

/* Overlays / palette */
.overlay{position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.45); z-index:9999}
.overlay.show{display:grid}
.palette{
  width:min(760px, 92vw); background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:0 20px 80px rgba(0,0,0,.35); overflow:hidden;
}
.palette .input{width:100%; padding:14px 14px; border:none; outline:none; background:var(--panel); color:var(--text); font:16px ui-sans-serif}
.palette .list{max-height:50vh; overflow:auto; border-top:1px solid var(--border)}
.palette .item{padding:10px 14px; display:flex; gap:10px; align-items:center; cursor:pointer}
.palette .item:hover, .palette .item.active{background:var(--panel-2)}
.mono{font:12px ui-monospace,Menlo,Consolas,monospace; color:var(--muted)}

/* Git-style gutter decorations */
.monaco-editor .git-added { border-left:3px solid var(--git-add) !important; margin-left:3px; }
.monaco-editor .git-modified { border-left:3px solid var(--git-mod) !important; margin-left:3px; }
.monaco-editor .git-removed { border-left:3px solid var(--git-del) !important; margin-left:3px; }

/* Retro extras */
.retro .topbar{ background:linear-gradient(180deg,#091209,#050b05); border-color:#133113 }
.retro .tabs,.retro .sidebar,.retro .status{ background:#0b130b; border-color:#133113 }
.retro .btn{ border-color:#133113 }
.retro .orb{ box-shadow:0 0 18px rgba(57,255,20,.5); }
.retro .panel{ background:#0b130b }

/* 1970s extras */
.seventies .topbar{ background:linear-gradient(180deg,#2a1c10,#1f140c); border-color:#3a2616 }
.seventies .tabs,.seventies .sidebar,.seventies .status{ background:#21160d; border-color:#3a2616 }
.seventies .btn{ border-color:#3a2616 }
.seventies .orb{ box-shadow:0 0 18px rgba(255,157,0,.45); }
.seventies .panel{ background:#23170e }

/* ========================================
   NEW THEMES
   ======================================== */

/* Walmart Theme - Blue & Yellow */
.walmart{
  --bg:#004c91; --panel:#003366; --panel-2:#002244; --text:#ffffff; --muted:#ffc220;
  --accent:#ffc220; --border:#005599; --good:#76c043; --warn:#ffc220; --bad:#ff6b6b;
  --git-add:#76c043; --git-mod:#ffc220; --git-del:#ff6b6b;
}
.walmart .topbar{ background:linear-gradient(180deg,#004c91,#003366); border-color:#005599 }
.walmart .tabs,.walmart .sidebar,.walmart .status{ background:#003366; border-color:#005599 }
.walmart .btn{ border-color:#005599; color:#ffc220 }
.walmart .btn:hover{ background:#005599 }
.walmart .orb{ background:linear-gradient(135deg,#ffc220,#ff9900); box-shadow:0 0 18px rgba(255,194,32,.5); }
.walmart .panel{ background:#003366 }

/* 1950s Theme - Pastel retro diner */
.fifties{
  --bg:#2d4a3e; --panel:#3d5a4e; --panel-2:#1d3a2e; --text:#f5e6d3; --muted:#c4b5a2;
  --accent:#e8927c; --border:#4a6a5e; --good:#7cb987; --warn:#e8c547; --bad:#d35f5f;
  --git-add:#7cb987; --git-mod:#e8927c; --git-del:#d35f5f;
}
.fifties .topbar{ background:linear-gradient(180deg,#3d5a4e,#2d4a3e); border-color:#4a6a5e }
.fifties .tabs,.fifties .sidebar,.fifties .status{ background:#3d5a4e; border-color:#4a6a5e }
.fifties .btn{ border-color:#4a6a5e; color:#e8927c }
.fifties .orb{ background:linear-gradient(135deg,#e8927c,#e8c547); box-shadow:0 0 18px rgba(232,146,124,.4); }
.fifties .panel{ background:#3d5a4e }

/* 1990s Theme - Bright bold colors */
.nineties{
  --bg:#1a0a2e; --panel:#2d1b4e; --panel-2:#0f0520; --text:#00ff00; --muted:#ff00ff;
  --accent:#00ffff; --border:#4a2d6e; --good:#00ff00; --warn:#ffff00; --bad:#ff0000;
  --git-add:#00ff00; --git-mod:#00ffff; --git-del:#ff0000;
}
.nineties .topbar{ background:linear-gradient(180deg,#2d1b4e,#1a0a2e); border-color:#4a2d6e }
.nineties .tabs,.nineties .sidebar,.nineties .status{ background:#2d1b4e; border-color:#4a2d6e }
.nineties .btn{ border-color:#4a2d6e; color:#00ffff }
.nineties .btn:hover{ background:#4a2d6e; color:#ff00ff }
.nineties .orb{ background:linear-gradient(135deg,#ff00ff,#00ffff); box-shadow:0 0 18px rgba(255,0,255,.5); }
.nineties .panel{ background:#2d1b4e }

/* Neon Lights Theme - Vibrant neon on dark */
.neon{
  --bg:#0a0a0f; --panel:#12121a; --panel-2:#08080c; --text:#f0f0ff; --muted:#888899;
  --accent:#ff00aa; --border:#2a2a3a; --good:#00ff88; --warn:#ffaa00; --bad:#ff3366;
  --git-add:#00ff88; --git-mod:#ff00aa; --git-del:#ff3366;
}
.neon .topbar{ background:linear-gradient(180deg,#12121a,#0a0a0f); border-color:#ff00aa44 }
.neon .tabs,.neon .sidebar,.neon .status{ background:#12121a; border-color:#2a2a3a }
.neon .btn{ border-color:#ff00aa66; color:#ff00aa; text-shadow:0 0 8px rgba(255,0,170,.5) }
.neon .btn:hover{ background:#ff00aa22; box-shadow:0 0 15px rgba(255,0,170,.3) }
.neon .orb{ background:linear-gradient(135deg,#ff00aa,#00ffff); box-shadow:0 0 25px rgba(255,0,170,.6), 0 0 50px rgba(0,255,255,.3); }
.neon .panel{ background:#12121a }
.neon .brand span{ text-shadow:0 0 10px rgba(255,0,170,.5) }

/* Winter Chill Theme - Cool blues and whites */
.winterchill{
  --bg:#0d1b2a; --panel:#1b2838; --panel-2:#0a1520; --text:#e0f4ff; --muted:#7fb3d5;
  --accent:#4fc3f7; --border:#2a4a6a; --good:#81c784; --warn:#ffcc80; --bad:#ef9a9a;
  --git-add:#81c784; --git-mod:#4fc3f7; --git-del:#ef9a9a;
}
.winterchill .topbar{ background:linear-gradient(180deg,#1b2838,#0d1b2a); border-color:#2a4a6a }
.winterchill .tabs,.winterchill .sidebar,.winterchill .status{ background:#1b2838; border-color:#2a4a6a }
.winterchill .btn{ border-color:#2a4a6a; color:#4fc3f7 }
.winterchill .orb{ background:linear-gradient(135deg,#4fc3f7,#b3e5fc); box-shadow:0 0 18px rgba(79,195,247,.4); }
.winterchill .panel{ background:#1b2838 }

/* ========================================
   APP MENU STYLES
   ======================================== */
.brand{
  cursor:pointer;
  user-select:none;
  position:relative;
}
.brand:hover{
  opacity:0.9;
}
.dropdown-arrow{
  font-size:8px;
  margin-left:6px;
  opacity:0.6;
}
.app-menu{
  display:none;
  position:absolute;
  top:44px;
  left:10px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  min-width:200px;
  box-shadow:0 10px 40px rgba(0,0,0,.4);
  z-index:1000;
  overflow:hidden;
}
.app-menu.show{
  display:block;
}
.menu-item{
  padding:10px 14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  font-size:13px;
}
.menu-item:hover{
  background:var(--panel-2);
}
.menu-item i{
  width:16px;
  color:var(--accent);
}
.menu-shortcut{
  margin-left:auto;
  font-size:11px;
  color:var(--muted);
  opacity:0.7;
}
.submenu-arrow{
  margin-left:auto;
  font-size:10px;
  opacity:0.5;
}
.menu-divider{
  height:1px;
  background:var(--border);
  margin:4px 0;
}
.themes-menu{
  left:210px;
  top:44px;
}
.file-menu{
  left:210px;
  top:44px;
}
.theme-item{
  padding:10px 14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  font-size:13px;
}
.theme-item:hover{
  background:var(--panel-2);
}
.theme-item i{
  width:16px;
  color:var(--accent);
}

/* Example code notification */
.example-notification{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 24px;
  background:linear-gradient(135deg, rgba(110,168,254,0.95), rgba(167,139,250,0.95));
  border:1px solid var(--accent);
  border-radius:12px;
  color:#fff;
  font-size:14px;
  font-weight:600;
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  white-space:nowrap;
  z-index:9999;
  box-shadow:0 10px 40px rgba(0,0,0,0.4), 0 0 60px rgba(110,168,254,0.3);
  animation:popIn 0.4s ease-out;
}
.example-notification i{
  color:#fff;
  font-size:18px;
}
.example-notification.fade-out{
  animation:popOut 0.5s ease-out forwards;
}
@keyframes popIn{
  from{ opacity:0; transform:translate(-50%, -50%) scale(0.8); }
  to{ opacity:1; transform:translate(-50%, -50%) scale(1); }
}
@keyframes popOut{
  from{ opacity:1; transform:translate(-50%, -50%) scale(1); }
  to{ opacity:0; transform:translate(-50%, -50%) scale(0.8); }
}

/* Share modal */
.share-modal{
  max-width:400px;
}
.share-options{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:20px 0;
}
.share-option{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  transition:all 0.2s;
}
.share-option:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 5px 20px rgba(0,0,0,0.2);
}
.share-option i{
  font-size:20px;
  color:var(--accent);
  width:28px;
  text-align:center;
}
.share-option-text{
  flex:1;
}
.share-option-title{
  font-weight:600;
  margin-bottom:2px;
}
.share-option-desc{
  font-size:12px;
  color:var(--muted);
}
.share-url{
  display:flex;
  gap:8px;
  margin-top:16px;
}
.share-url input{
  flex:1;
  padding:10px 14px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  font-size:13px;
}
.share-url button{
  padding:10px 16px;
  background:var(--accent);
  border:none;
  border-radius:8px;
  color:#000;
  font-weight:600;
  cursor:pointer;
}
.share-url button:hover{
  filter:brightness(1.1);
}

/* Button variants */
.btn.accent{
  background:var(--accent);
  color:#000;
  border-color:var(--accent);
}
.btn.accent:hover{
  filter:brightness(1.1);
}
.btn.warn{
  background:var(--warn);
  color:#000;
  border-color:var(--warn);
}
.btn.warn:hover{
  filter:brightness(1.1);
}
.btn.small{
  padding:4px 8px;
  font-size:12px;
}

/* ========================================
   LIVE PREVIEW PANEL
   ======================================== */
.live-preview-panel{
  position:fixed;
  right:0;
  top:44px;
  width:45%;
  height:calc(100vh - 44px);
  background:var(--panel);
  border-left:1px solid var(--border);
  display:flex;
  flex-direction:column;
  z-index:100;
  box-shadow:-5px 0 30px rgba(0,0,0,.3);
}
.live-preview-panel.hidden{
  display:none;
}
.preview-header{
  height:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  background:var(--panel-2);
  border-bottom:1px solid var(--border);
  font-size:13px;
  font-weight:600;
  color:var(--accent);
}
.preview-header i{
  margin-right:6px;
}
.preview-controls{
  display:flex;
  gap:4px;
}
#previewFrame{
  flex:1;
  border:none;
  background:#fff;
}
/* When preview is open, shrink the main area */
body.preview-open .main{
  width:55%;
}
body.preview-open .live-preview-panel{
  display:flex;
}

/* ========================================
   CODE INTELLIGENCE MODALS
   ======================================== */
.intel-modal{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  width:min(520px, 92vw);
  max-height:85vh;
  overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn{
  0%{ opacity:0; transform:translateY(-20px) scale(0.95); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
.intel-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:20px 24px;
  background:var(--panel-2);
  border-bottom:1px solid var(--border);
  border-radius:12px 12px 0 0;
}
.intel-header i{
  font-size:24px;
  color:var(--accent);
}
.intel-header h2{
  margin:0;
  font-size:18px;
  font-weight:600;
  color:var(--text);
}
.intel-body{
  padding:24px;
}
.intel-body p{
  margin:0 0 16px;
  color:var(--text);
  line-height:1.6;
}
.intel-sub{
  color:var(--muted) !important;
  font-size:14px;
}
.intel-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  padding:16px 24px;
  background:var(--panel-2);
  border-top:1px solid var(--border);
  border-radius:0 0 12px 12px;
}

/* Filetype comparison */
.intel-comparison{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin:24px 0 8px;
  padding:20px;
  background:var(--bg);
  border-radius:8px;
}
.intel-comparison > i{
  color:var(--accent);
  font-size:18px;
}
.intel-current, .intel-suggested{
  text-align:center;
}
.intel-label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
  margin-bottom:8px;
}
.intel-filename{
  display:inline-block;
  padding:8px 16px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:6px;
  font-family:monospace;
  font-size:14px;
}
.intel-current .intel-filename{
  color:var(--muted);
}
.intel-suggested .intel-filename{
  color:var(--accent);
  border-color:var(--accent);
}

/* Issues Modal */
.issues-modal{
  width:min(600px, 94vw);
}
.issues-header{
  background:linear-gradient(135deg, #8b0000 0%, #cc0000 100%);
  border-color:#8b0000;
}
.issues-header i, .issues-header h2{
  color:#fff !important;
}
.issue-counter{
  margin-left:auto;
  padding:4px 12px;
  background:rgba(255,255,255,0.2);
  border-radius:20px;
  font-size:13px;
  color:#fff;
}
.issue-summary{
  padding:16px;
  background:rgba(255,100,100,0.1);
  border:1px solid rgba(255,100,100,0.3);
  border-radius:8px;
  margin-bottom:20px;
}
.issue-summary p{
  margin:0;
}
.issue-detail{
  background:var(--bg);
  border-radius:8px;
  padding:16px;
}
.issue-type{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.issue-badge{
  padding:4px 10px;
  border-radius:4px;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.issue-badge.error{
  background:#ff4444;
  color:#fff;
}
.issue-badge.warning{
  background:#ffaa00;
  color:#000;
}
.issue-badge.info{
  background:#4488ff;
  color:#fff;
}
.issue-location{
  font-size:13px;
  color:var(--muted);
  font-family:monospace;
}
.issue-message{
  font-size:15px;
  font-weight:600;
  color:var(--text);
  margin-bottom:12px;
}
.issue-suggestion{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--accent);
  margin-bottom:16px;
}
.issue-suggestion i{
  color:#ffaa00;
}
.issue-code-preview{
  background:#1e1e1e;
  border-radius:6px;
  padding:12px 16px;
  overflow-x:auto;
}
.issue-code-preview pre{
  margin:0;
  font-family:'Consolas', 'Monaco', monospace;
  font-size:13px;
  color:#d4d4d4;
  white-space:pre-wrap;
  word-break:break-all;
}
.issue-progress{
  height:4px;
  background:var(--panel);
}
.issue-progress-bar{
  height:100%;
  background:linear-gradient(90deg, var(--accent), var(--good));
  transition:width 0.3s ease;
}

/* PHP Modal */
.php-header{
  background:linear-gradient(135deg, #4F5B93 0%, #777BB3 100%);
  border-color:#4F5B93;
}
.php-header i, .php-header h2{
  color:#fff !important;
}
.php-info, .php-alternatives{
  padding:16px;
  background:var(--bg);
  border-radius:8px;
  margin-bottom:16px;
}
.php-info h4, .php-alternatives h4{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
  font-size:14px;
  color:var(--accent);
}
.php-info p, .php-alternatives p{
  margin:0;
  font-size:14px;
}
.php-alternatives ul{
  margin:8px 0 0;
  padding-left:20px;
}
.php-alternatives li{
  font-size:14px;
  color:var(--text);
  margin-bottom:4px;
}

/* Ready Modal */
.ready-header{
  background:linear-gradient(135deg, #0a5f0a 0%, #0c8c0c 100%);
  border-color:#0a5f0a;
}
.ready-header i, .ready-header h2{
  color:#fff !important;
}
.ready-stats{
  display:flex;
  gap:24px;
  justify-content:center;
  margin-top:20px;
}
.ready-stats .stat{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  background:var(--bg);
  border-radius:8px;
  font-size:14px;
  color:var(--text);
}
.ready-stats .stat i{
  color:var(--accent);
}

/* Security Modal */
.security-header{
  background:linear-gradient(135deg, #1a5f7a 0%, #2d8bba 100%);
  border-color:#1a5f7a;
}
.security-header i, .security-header h2{
  color:#fff !important;
}
.security-list{
  margin:16px 0;
}
.security-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  border-radius:6px;
  margin-bottom:8px;
  font-size:14px;
}
.security-item.good{
  background:rgba(0,200,100,0.1);
  color:var(--good);
}
.security-item.good i{
  color:var(--good);
}
.security-item.warning{
  background:rgba(255,170,0,0.1);
  color:var(--warn);
}
.security-item.warning i{
  color:var(--warn);
}
.security-note{
  font-size:13px;
  color:var(--muted);
  font-style:italic;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border);
}

/* Editor issue highlighting */
.issue-highlight{
  background:rgba(255,100,100,0.2) !important;
  border-left:3px solid #ff4444 !important;
}
.issue-glyph{
  background:#ff4444;
  border-radius:50%;
  margin-left:3px;
}

/* About Modal */
.about-modal{
  width: min(580px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 80px rgba(0,0,0,.35);
}
.about-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--border);
}
.about-logo{
  display: flex;
  align-items: center;
  gap: 14px;
}
.about-logo h1{
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.orb.large{
  width: 42px;
  height: 42px;
}
.version{
  font-size: 13px;
  color: var(--muted);
  background: var(--panel-2);
  padding: 4px 10px;
  border-radius: 12px;
}
.about-tagline{
  text-align: center;
  font-size: 15px;
  color: var(--muted);
  padding: 16px 28px;
  font-style: italic;
}
.about-content{
  padding: 8px 28px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.about-section{
  background: var(--panel-2);
  border-radius: 10px;
  padding: 16px;
  border: 1px solid var(--border);
}
.about-section.highlight{
  background: linear-gradient(135deg, rgba(110,168,254,0.15) 0%, rgba(167,139,250,0.1) 100%);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(110,168,254,0.1);
}
.about-section.highlight h3{
  color: var(--accent);
}
.about-section h3{
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
}
.about-section h3 i{
  font-size: 14px;
  opacity: 0.85;
}
.about-section p{
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.about-section.highlight p{
  color: var(--text);
}
.about-footer{
  padding: 20px 28px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.about-creator{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.about-creator span{
  color: var(--muted);
  font-size: 13px;
}
.about-creator strong{
  font-size: 16px;
  background: linear-gradient(135deg, #6ea8fe, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.about-philosophy{
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  opacity: 0.8;
}
.about-modal > .btn{
  display: block;
  width: calc(100% - 56px);
  margin: 0 28px 24px;
  text-align: center;
}

/* ========================================
   FUTURISTIC ABOUT INTRO ANIMATION
   ======================================== */
.about-intro{
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Background grid - uses theme accent */
.intro-grid{
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(var(--accent-20, rgba(110,168,254,0.1)) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-20, rgba(110,168,254,0.1)) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridFadeIn 0.5s ease-out forwards, gridMove 20s linear infinite;
  opacity: 0;
}
@keyframes gridMove{
  0%{ background-position: 0 0; }
  100%{ background-position: 50px 50px; }
}
@keyframes gridFadeIn{
  0%{ opacity: 0; }
  100%{ opacity: 1; }
}

/* Scanline effect - uses theme accent */
.intro-scanline{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-alt, #a78bfa), var(--accent), transparent);
  box-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent-alt, #a78bfa);
  animation: scanDown 2s ease-in-out forwards;
  opacity: 0.8;
}
@keyframes scanDown{
  0%{ top: 0; opacity: 0.8; }
  50%{ opacity: 1; }
  100%{ top: 100%; opacity: 0; }
}

/* Floating particles */
.intro-particles{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.particle{
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent);
  animation: particleFloat 4s ease-out forwards;
}
@keyframes particleFloat{
  0%{ transform: translateY(0) scale(0); opacity: 0; }
  20%{ transform: translateY(-20px) scale(1); opacity: 1; }
  100%{ transform: translateY(-300px) scale(0); opacity: 0; }
}

/* Logo container */
.intro-logo-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  z-index: 10;
}

/* Hexagon rings - use theme colors */
.intro-hexagon{
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hex-ring{
  position: absolute;
  border: 2px solid transparent;
  border-radius: 50%;
  animation: hexSpin 4s ease-out forwards;
}
.hex-ring-1{
  width: 150px;
  height: 150px;
  border-color: var(--accent);
  box-shadow: 0 0 15px var(--accent), inset 0 0 15px var(--accent-20, rgba(110,168,254,0.2));
  animation-delay: 0s;
}
.hex-ring-2{
  width: 120px;
  height: 120px;
  border-color: var(--accent-alt, #a78bfa);
  box-shadow: 0 0 15px var(--accent-alt, #a78bfa), inset 0 0 15px rgba(167,139,250,0.2);
  animation-delay: 0.2s;
  animation-direction: reverse;
}
.hex-ring-3{
  width: 90px;
  height: 90px;
  border-color: var(--accent-tri, #22d3ee);
  box-shadow: 0 0 15px var(--accent-tri, #22d3ee), inset 0 0 15px rgba(34,211,238,0.2);
  animation-delay: 0.4s;
}
@keyframes hexSpin{
  0%{ transform: rotate(0deg) scale(0); opacity: 0; }
  30%{ transform: rotate(180deg) scale(1.2); opacity: 1; }
  100%{ transform: rotate(360deg) scale(1); opacity: 1; }
}

/* Central orb - uses theme colors */
.intro-orb{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-tri, #22d3ee), var(--accent-alt, #a78bfa), var(--accent));
  box-shadow: 0 0 30px var(--accent-glow, rgba(110,168,254,0.8)), 0 0 60px var(--accent-alt-glow, rgba(167,139,250,0.5));
  animation: orbPulse 2s ease-in-out infinite, orbAppear 0.5s ease-out forwards;
}
@keyframes orbAppear{
  0%{ transform: scale(0); }
  60%{ transform: scale(1.3); }
  100%{ transform: scale(1); }
}
@keyframes orbPulse{
  0%, 100%{ box-shadow: 0 0 30px var(--accent-glow, rgba(110,168,254,0.8)), 0 0 60px var(--accent-alt-glow, rgba(167,139,250,0.5)); transform: scale(1); }
  50%{ box-shadow: 0 0 50px var(--accent), 0 0 100px var(--accent-alt, #a78bfa); transform: scale(1.05); }
}

/* Text reveal */
.intro-text{
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 4px;
  display: flex;
  overflow: hidden;
}
.intro-v{
  background: linear-gradient(135deg, var(--accent), var(--accent-alt, #a78bfa));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: letterSlide 0.6s ease-out forwards;
  transform: translateY(60px);
  opacity: 0;
}
.intro-rest{
  background: linear-gradient(135deg, var(--text), var(--muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: letterSlide 0.6s ease-out 0.3s forwards;
  transform: translateY(60px);
  opacity: 0;
}
@keyframes letterSlide{
  0%{ transform: translateY(60px); opacity: 0; }
  100%{ transform: translateY(0); opacity: 1; }
}

/* Tagline */
.intro-tagline{
  font-size: 14px;
  letter-spacing: 8px;
  color: var(--accent);
  text-transform: uppercase;
  animation: taglineFade 1s ease-out 0.8s forwards, taglineBlink 0.5s step-end 4 1s;
  opacity: 0;
}
@keyframes taglineFade{
  0%{ opacity: 0; letter-spacing: 20px; }
  100%{ opacity: 1; letter-spacing: 8px; }
}
@keyframes taglineBlink{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.3; }
}

/* Loading bars */
.intro-bars{
  display: flex;
  gap: 8px;
  margin-top: 40px;
}
.intro-bar{
  width: 80px;
  height: 4px;
  background: var(--panel-2);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.intro-bar::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-alt, #a78bfa));
  box-shadow: 0 0 10px var(--accent);
  animation: barFill 3.5s ease-out forwards;
}
.intro-bar:nth-child(1)::after{ animation-delay: 0.2s; }
.intro-bar:nth-child(2)::after{ animation-delay: 0.6s; }
.intro-bar:nth-child(3)::after{ animation-delay: 1s; }
@keyframes barFill{
  0%{ width: 0%; }
  100%{ width: 100%; }
}

/* Version badge in intro */
.intro-version{
  margin-top: 20px;
  padding: 6px 16px;
  background: var(--panel-2);
  border: 1px solid var(--accent);
  border-radius: 20px;
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 2px;
  animation: versionPop 0.4s ease-out 2.5s forwards;
  opacity: 0;
  transform: scale(0.8);
}
@keyframes versionPop{
  0%{ opacity: 0; transform: scale(0.8); }
  60%{ transform: scale(1.1); }
  100%{ opacity: 1; transform: scale(1); }
}

/* Final flash transition */
.about-intro.fade-out{
  animation: introFlash 0.8s ease-out forwards;
}
@keyframes introFlash{
  0%{ opacity: 1; transform: scale(1); }
  40%{ opacity: 1; transform: scale(1.02); filter: brightness(1.5); }
  70%{ opacity: 0.8; transform: scale(1.05); filter: brightness(2); }
  100%{ opacity: 0; transform: scale(1.1); pointer-events: none; }
}

/* About content fade in with staggered elements */
.about-modal.fade-in{
  animation: contentFadeIn 0.6s ease-out forwards;
}
@keyframes contentFadeIn{
  0%{ opacity: 0; transform: scale(0.95) translateY(20px); }
  100%{ opacity: 1; transform: scale(1) translateY(0); }
}

/* Staggered animation for about sections */
.about-modal.fade-in .about-header{
  animation: sectionSlideIn 0.4s ease-out 0.1s both;
}
.about-modal.fade-in .about-tagline{
  animation: sectionSlideIn 0.4s ease-out 0.2s both;
}
.about-modal.fade-in .about-section:nth-child(1){ animation: sectionSlideIn 0.4s ease-out 0.25s both; }
.about-modal.fade-in .about-section:nth-child(2){ animation: sectionSlideIn 0.4s ease-out 0.3s both; }
.about-modal.fade-in .about-section:nth-child(3){ animation: sectionSlideIn 0.4s ease-out 0.35s both; }
.about-modal.fade-in .about-section:nth-child(4){ animation: sectionSlideIn 0.4s ease-out 0.4s both; }
.about-modal.fade-in .about-section:nth-child(5){ animation: sectionSlideIn 0.4s ease-out 0.45s both; }
.about-modal.fade-in .about-section:nth-child(6){ animation: sectionSlideIn 0.4s ease-out 0.5s both; }
.about-modal.fade-in .about-footer{
  animation: sectionSlideIn 0.4s ease-out 0.55s both;
}
.about-modal.fade-in #btnCloseAbout{
  animation: sectionSlideIn 0.4s ease-out 0.6s both;
}
@keyframes sectionSlideIn{
  0%{ opacity: 0; transform: translateY(15px); }
  100%{ opacity: 1; transform: translateY(0); }
}

/* Theme-specific accent colors for intro */
:root{
  --accent-20: rgba(110,168,254,0.1);
  --accent-alt: #a78bfa;
  --accent-tri: #22d3ee;
  --accent-glow: rgba(110,168,254,0.8);
  --accent-alt-glow: rgba(167,139,250,0.5);
}
.walmart{ --accent-alt: #76c043; --accent-tri: #ffc220; }
.fifties{ --accent-alt: #7cb987; --accent-tri: #e8c547; }
.nineties{ --accent-alt: #00ffff; --accent-tri: #ffff00; }
.neon{ --accent-alt: #00ffff; --accent-tri: #00ff88; }
.winterchill{ --accent-alt: #81c784; --accent-tri: #b3e5fc; }
.retro{ --accent-alt: #4ad1ff; --accent-tri: #39ff14; }
.seventies{ --accent-alt: #ffcf66; --accent-tri: #ffc277; }