:root{--max-width:1100px;--container-padding:20px;--card-radius:12px;--muted:#6b7280;--accent:#2b6cb0;--bg:#f8fafc;--surface:#ffffff;--elev:0 6px 18px rgba(16,24,40,0.08)}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#0f172a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.45;padding:30px 12px}
.app-container{max-width:var(--max-width);margin:0 auto;padding:var(--container-padding)}
.app-header{display:flex;align-items:center;gap:18px;background:linear-gradient(90deg,rgba(255,255,255,.6),rgba(255,255,255,.4));padding:14px;border-radius:14px;box-shadow:var(--elev);margin-bottom:22px}
.app-header img.logo{height:48px;width:auto;display:block;border-radius:8px;background:transparent}
.app-header .title{font-size:20px;font-weight:700;letter-spacing:.2px}
.app-header .subtitle{font-size:13px;color:var(--muted)}
.row{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}.col{flex:1 1 0;min-width:260px}
.card{background:var(--surface);padding:18px;border-radius:12px;box-shadow:var(--elev);margin-bottom:18px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #e6e9ef;background:#fff;font-size:14px;margin-bottom:12px}
textarea{min-height:90px;resize:vertical}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:10px 8px;border-bottom:1px solid #f1f5f9;text-align:left;font-size:14px}.table thead th{font-weight:700}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:none;cursor:pointer;font-weight:600}
.btn-primary{background:#2563eb;color:#fff;box-shadow:0 4px 8px rgba(37,99,235,.25)}
.btn-primary:hover{background:#1d4ed8}
.btn-danger{background:#dc2626;color:#fff;box-shadow:0 4px 8px rgba(220,38,38,.25)}
.btn-danger:hover{background:#b91c1c}
.btn-ghost{background:transparent;color:#374151;border:1px solid #d1d5db}
@media(max-width:720px){.app-header{flex-direction:row;gap:12px;padding:12px}body{padding:16px 8px}}
/* nav */
.app-nav{display:flex;gap:20px;margin-left:auto}
.app-nav a{text-decoration:none;color:var(--muted);font-weight:500;font-size:14px;transition:color .2s}
.app-nav a:hover{color:var(--accent)}



/* ===== Modern Elegant Additions (r3) ===== */
:root{ --radius: 14px; --ring: 0 0 0 4px rgba(43,108,176,.18); }
.card{ border-radius: var(--radius); transition:transform .12s ease, box-shadow .12s ease; }
.card:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(16,24,40,.12); }
.card-header{ font-weight:700; font-size:13px; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.metric{ font-size:28px; font-weight:800; }
input, select, textarea{ transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus{ outline:none; border-color: var(--accent); box-shadow: var(--ring); }
.btn{ transition: transform .08s ease, box-shadow .12s ease; }
.btn:hover{ transform: translateY(-1px); }
.app-nav a{ padding:6px 10px; border-radius:10px }
.app-nav a:hover{ background: rgba(43,108,176,.08) }
.login-wrap{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; }
.login-card{ max-width:420px; width:100%; background:var(--surface); border-radius:20px; box-shadow: 0 16px 36px rgba(16,24,40,.16); padding:28px; }
.login-logo{ display:block; margin:0 auto 12px auto; height:56px; width:auto; }


/* ===== r4 Mobile Optimizations & Chips ===== */
:root{ --chip-radius: 9999px; }

/* Chips */
.chip{ display:inline-block; padding:4px 10px; border-radius:var(--chip-radius); font-size:12px; font-weight:600; }
.chip-success{ background:#dcfce7; color:#166534; }
.chip-warn{ background:#fef9c3; color:#854d0e; }
.chip-info{ background:#e0f2fe; color:#075985; }

/* Better mobile spacing */
@media (max-width: 960px){
  .app-container{ padding: 16px; }
  .row{ gap: 12px; }
  .card{ padding: 14px; }
  .app-header{ gap: 12px; padding: 10px; }
  .app-nav{ display:none; } /* hide wide nav on small screens to keep header clean */
}

/* Compact table on small screens: allow horizontal scroll */
.table-wrap{ width:100%; overflow:auto; }
.table{ min-width: 640px; }

/* Login centering */
.login-wrap{ min-height: 100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card{ width:100%; max-width: 420px; margin: 0 auto; }

/* Touch targets */
.btn, .app-nav a{ padding: 10px 14px; }

/* r5 table tweaks: no visible lines, subtle row hover */
.table tbody tr{ transition: background .12s ease }
.table tbody tr:hover{ background: rgba(2,6,23,0.03) }
/* Hide ID column only for question bank */
.table.qbank th:first-child, .table.qbank td:first-child{ display:none; }

/* r6: bulk actions + checkboxes */
.bulk-bar{position:sticky;bottom:16px;left:0;right:0;margin:16px auto;max-width:var(--max-width);display:flex;gap:10px;justify-content:flex-start;background:var(--surface);border-radius:12px;box-shadow:0 10px 24px rgba(16,24,40,.12);padding:12px 14px}
input[type=checkbox]{width:16px;height:16px;border:1px solid #cbd5e1;border-radius:4px;vertical-align:middle}
th .cb, td .cb{display:flex;align-items:center;justify-content:center}

/* r7: Mobile hamburger & drawer */
.hamburger{ display:none; margin-left:auto; width:38px; height:34px; border:0; background:transparent; padding:6px; border-radius:10px; }
.hamburger span{ display:block; height:2px; margin:6px 0; background:#334155; border-radius:2px; transition:transform .2s ease, opacity .2s ease }
@media (max-width: 960px){
  .hamburger{ display:block; }
  .app-nav{ display:none; }
}
.drawer{ position:fixed; inset:0; background:rgba(15,23,42,.35); backdrop-filter: blur(2px); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index: 50; }
.drawer.open{ opacity:1; pointer-events:auto; }
.drawer .drawer-content{ position:absolute; top:0; left:0; height:100%; width:78%; max-width: 320px; background:#fff; padding:18px; box-shadow: 10px 0 24px rgba(0,0,0,.12); transform:translateX(-102%); transition: transform .22s ease; }
.drawer.open .drawer-content{ transform:translateX(0); }
.drawer .drawer-content a{ display:block; padding:12px 10px; border-radius:10px; text-decoration:none; color:#111827; font-weight:600; }
.drawer .drawer-content a:hover{ background:#f3f4f6; }
.no-scroll{ overflow:hidden; }


/* r8 fixes */
.question-text, .question, .q-text, .prompt, .form-label, label span, label strong { color: #0f172a !important; }
label { margin-bottom: 8px; display:block; }
label + input, label + select, label + textarea { margin-top: 6px; }
.login-card label { margin-top: 10px; }
.login-card input, .login-card select, .login-card textarea { margin-top: 6px; margin-bottom: 12px; }


/* r9: lock-in centered login layout and prevent theme conflicts */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px !important; }
.login-card{ width:100%; max-width:420px; margin:0 auto; background:#fff; border-radius:16px; box-shadow:0 16px 36px rgba(16,24,40,.16); padding:24px; position:relative; }
.login-card form{ display:block; }
.login-card .btn{ width:100%; }
.login-card img.login-logo{ display:block; margin:0 auto 16px auto; height:56px; width:auto; }
body.login-page{ padding:0 !important; background: var(--bg); }


/* r11 footer: 5cm space block with credit */
.app-footer{margin-top:40px; height:5cm; display:flex; align-items:flex-end; background:transparent;}
.app-footer .footer-inner{width:100%; padding:12px 0; color:#64748b; font-size:14px; display:flex; gap:10px; align-items:center; border-top:1px solid #e5e7eb;}
.app-footer .app-name{font-weight:700; color:#0f172a}
.app-footer .sep{opacity:.4}