:root{
  --radius:12px;
  --gap:14px;
  --max-width:1200px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* default (ATS) */
  --bg: #f7f9fb;
  --panel-bg: #ffffff;
  --muted: #6b7280;
  --text: #071125;
  --accent: #2b6cb0;
  --accent-2: #6ea4ff;
  --success: #16a34a;
  --danger: #d04444;
  --shadow-lg: 0 18px 40px rgba(2,6,23,0.06);

  transition: color 220ms ease, background 220ms ease;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Root layout */
.root{max-width:var(--max-width);margin:28px auto;padding:16px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:56px;height:56px;border-radius:10px;background:linear-gradient(180deg,var(--accent-2),var(--accent));display:flex;align-items:center;justify-content:center;color:white;font-weight:800;font-size:18px;box-shadow:var(--shadow-lg)}
.brand-text h1{margin:0;font-size:18px}
.lead{margin:0;color:var(--muted);font-size:13px}

/* Controls (theme etc) */
.controls{display:flex;align-items:center;gap:8px}
.theme-select{padding:8px;border-radius:8px;border:1px solid rgba(11,18,28,0.06)}
.icon-btn{background:transparent;border:none;padding:6px 8px;border-radius:8px;cursor:pointer;color:var(--muted)}
.btn{padding:8px 12px;border-radius:10px;border:none;cursor:pointer;font-weight:700}
.btn.ghost{background:transparent;border:1px solid rgba(11,18,28,0.06);color:var(--muted)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;box-shadow:0 8px 28px rgba(43,108,176,0.12)}

/* Layout */
.layout{display:grid;grid-template-columns:1fr 420px;gap:18px;align-items:start}
@media (max-width:980px){ .layout{grid-template-columns:1fr} }

/* Panel */
.panel{background:var(--panel-bg);border-radius:var(--radius);box-shadow:var(--shadow-lg);border:1px solid rgba(11,18,28,0.04);overflow:hidden;display:flex;flex-direction:column}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(11,18,28,0.03)}
.panel-body{padding:16px}
.panel-foot{padding:12px 16px;border-top:1px solid rgba(11,18,28,0.03)}

/* Input */
.file-row{display:flex;gap:10px;align-items:center}
textarea{width:100%;min-height:220px;padding:12px;border-radius:10px;border:1px solid rgba(11,18,28,0.06);resize:vertical;font-size:14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}
.actions{display:flex;gap:10px;margin-top:12px}
.chips{display:flex;gap:8px;margin-top:12px}
.chip{background:#f1f5ff;padding:6px 10px;border-radius:999px;font-size:13px;color:var(--muted);border:1px solid rgba(43,108,176,0.06)}

/* Report */
.report-body{min-height:320px}
.placeholder{color:var(--muted)}
.score{font-size:32px;font-weight:800;color:var(--accent)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tag{padding:6px 10px;border-radius:999px;background:#eef6ff;color:var(--accent);border:1px solid rgba(43,108,176,0.06);font-size:13px}
.tag.missing{background:#fff2f2;color:var(--danger);border:1px solid rgba(208,74,74,0.06)}
.tiny{font-size:12px;color:var(--muted)}
.sugg{padding-left:18px;margin-top:8px}

/* Footer */
.footer{margin-top:16px;text-align:center;color:var(--muted);font-size:13px}

/* Smooth transitions for theme swap (no flicker) */
:root, .panel, textarea, .logo, .btn, .tag { transition: background 260ms ease, color 260ms ease, border-color 260ms ease, box-shadow 260ms ease; }

/* ========== THEMES (CSS variables) ========== */
/* ATS (default) */
body[data-theme="ats"]{
  --bg: #f7f9fb;
  --panel-bg: #fff;
  --muted: #6b7280;
  --text: #071125;
  --accent: #2b6cb0;
  --accent-2: #6ea4ff;
  background: var(--bg);
}

/* Modern Glass */
body[data-theme="glass"]{
  --bg: linear-gradient(180deg,#071227,#08122b);
  --panel-bg: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --muted: #b7c0d9;
  --text: #e6eef8;
  --accent: #6ea4ff;
  --accent-2: #9b7bff;
  background: var(--bg);
}

/* Dashboard */
body[data-theme="dashboard"]{
  --bg: linear-gradient(180deg,#f3f6ff,#eef4ff);
  --panel-bg: #ffffff;
  --muted: #55607a;
  --text: #071125;
  --accent: #7c3aed;
  --accent-2: #3b82f6;
  background: var(--bg);
}

/* Cyber Dark */
body[data-theme="cyber"]{
  --bg: #070712;
  --panel-bg: #071225;
  --muted: #9fe7e7;
  --text: #dffcff;
  --accent: #00ffd1;
  --accent-2: #5bffea;
  background: var(--bg);
}

/* Mint Green */
body[data-theme="mint"]{
  --bg: linear-gradient(180deg,#f7fff7,#f0fff4);
  --panel-bg: #ffffff;
  --muted: #2f6f54;
  --text: #052012;
  --accent: #0f9d58;
  --accent-2: #32c48d;
  background: var(--bg);
}

/* Dashboard style tweak (sidebar look) when theme-dashboard is active */
body[data-theme="dashboard"] .layout{
  grid-template-columns: 360px 1fr;
}
@media (max-width:980px){
  body[data-theme="dashboard"] .layout{ grid-template-columns: 1fr; }
}

/* small responsive tweaks */
@media (max-width:640px){
  .logo{width:44px;height:44px;font-size:16px}
  .brand-text h1{font-size:16px}
  .layout{gap:12px}
  textarea{min-height:160px}
  .panel-head{padding:12px}
  .panel-body{padding:12px}
}