:root{
  --bg:#f6f8fa;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0f172a;
  --primary:#0b84ff;
  --primary-700:#0066d4;
  --danger:#e02424;
  --radius:10px;
  --max-width:1080px;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Basics */
*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg, var(--bg), #eef2f7 60%);
  color:var(--accent);
  padding:18px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.container{width:100%;max-width:var(--max-width)}

/* Card */
.card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:0 6px 18px rgba(15,23,42,0.06);margin-bottom:14px}

/* Header */
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.header h1{margin:0;font-size:20px}
.meta{font-size:14px;color:var(--muted)}

/* Form controls */
form label{display:block;margin-bottom:10px;font-weight:600}
input[type="text"], input[type="tel"], select, textarea{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid #e6e9ee;margin-top:8px;font-size:15px;background:#fff;outline:none;
}
input:focus, select:focus, textarea:focus{border-color:var(--primary);box-shadow:0 6px 18px rgba(11,132,255,0.08)}
input[disabled], textarea[disabled], select[disabled]{background:#f3f6fb;color:var(--muted);border-color:#e9eef8;cursor:not-allowed}

/* Buttons + rows */
.small{font-size:13px}
.muted{color:var(--muted)}
.row{display:flex;gap:12px;align-items:center;margin-top:14px}
.row.space{justify-content:flex-start}
.section-nav{margin-top:18px}
.btn{padding:10px 14px;border-radius:10px;border:1px solid rgba(15,23,42,0.06);background:#fff;cursor:pointer;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--primary),var(--primary-700));color:#fff;border:none}
.btn.danger{background:linear-gradient(90deg,var(--danger),#c11);color:#fff;border:none}
.btn[disabled]{opacity:.6;pointer-events:none;cursor:not-allowed}

/* Nav tabs */
.nav{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.nav-btn{padding:8px 12px;border-radius:10px;border:1px solid #e6e9ee;background:#fff;cursor:pointer}
.nav-btn.active{background:var(--primary);color:#fff;border:none}

/* Questions (Option A: vertical) */
.question-list{list-style:none;padding-left:0;margin:0}
.question-card-wrapper{border-radius:10px;border:1px solid #edf2f7;padding:16px;margin-bottom:14px;background:#fff}
.question-top{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.q-number{min-width:42px;height:42px;border-radius:8px;background:linear-gradient(180deg,#eef7ff,#f3fbff);display:flex;align-items:center;justify-content:center;font-weight:700;color:#0366d6;border:1px solid rgba(3,102,212,0.08)}
.q-text{font-size:15px;font-weight:700;color:var(--accent)}
.options-vertical{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.option-item{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:8px;background:#fbfdff;border:1px solid #f0f6fb;cursor:pointer}
.option-item label{cursor:pointer;margin:0;font-weight:600;color:#0f172a}
.option-item input{margin-top:3px;transform:scale(1.06)}

/* Coding question */
.question-card{padding:12px;background:#fbfbff;border:1px dashed #e8ecff;border-radius:10px}

/* corner box */
.corner-box{position:fixed;top:18px;right:18px;background:rgba(255,255,255,0.96);padding:10px 14px;border-radius:8px;box-shadow:0 6px 20px rgba(10,20,40,0.06);font-size:13px;z-index:9999;display:none;min-width:170px;border:1px solid rgba(15,23,42,0.04)}
.corner-box p{margin:4px 0;font-weight:700;color:var(--accent);font-size:13px}

/* utilities */
.small.card{padding:10px}
.active{display:block}
.hidden{display:none}
.muted.small{font-size:12px;color:var(--muted);margin-top:8px}

/* focus outlines */
:focus{outline:none}
button:focus,input:focus,textarea:focus,select:focus{box-shadow:0 6px 18px rgba(11,132,255,0.12);border-color:var(--primary)}

/* responsive tweaks */
@media (min-width:920px){.container{padding:22px}.header h1{font-size:22px}}
@media (max-width:720px){.row{flex-direction:column;align-items:stretch}.corner-box{right:10px;top:10px;min-width:140px;font-size:12px;padding:8px}}
@media print{.corner-box{display:none !important}}

.corner-timer {
  font-size: 24px;
  font-weight: bold;
  color: #ff1a1a; /* bright red */
  margin-top: 6px;
  border-top: 1px solid rgba(0,0,0,0.1);
  padding-top: 6px;
  text-align: center;
}