*{box-sizing:border-box}
html,body{margin:0;padding:0}
body {
    font-family: 'Calibri';
    background: url(../../background_fuabc.png);
    color: #111827;
    background-size: cover;
    height: 100vh;
    background-repeat: no-repeat;
    width: 100%;
    background-position: bottom left;
}
a{color:inherit;text-decoration:none}
:root{
    --bg:#f3f4f6;
    --surface:#ffffff;
    --surface-2:#f9fafb;
    --line:#e5e7eb;
    --text:#111827;
    --muted:#6b7280;
    --primary:#111827;
    --primary-soft:#eef2f7;
    --success:#15803d;
    --success-soft:#dcfce7;
    --danger:#b91c1c;
    --danger-soft:#fee2e2;
    --warning:#b45309;
    --warning-soft:#fef3c7;
    --shadow:0 12px 40px rgba(17,24,39,.08);
    --radius:18px;
}
.admin-body .topbar{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 28px
}

.brand{font-weight:800;letter-spacing:-.03em}
.topnav {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.topnav a{padding:10px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);color:#374151}
.topnav a:hover{background:#f8fafc}
.page-wrapper{max-width:1280px;margin:0 auto;padding:28px}
.public-wrapper{max-width:980px;min-height:100vh;display:flex;align-items:center;justify-content:center}
.card,.panel,.modal-content,.question-card,.summary-card,.login-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.login-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:stretch}
.login-hero{padding:34px;display:flex;flex-direction:column;justify-content:space-between;min-height:520px;background:linear-gradient(180deg,#ffffff,#f9fafb)}
.login-hero h1{margin:0 0 14px;font-size:40px;line-height:1.05;letter-spacing:-.04em}
.login-hero p{margin:0;color:var(--muted);font-size:16px;line-height:1.7}
.login-card{padding:30px}
.page-header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:26px}
.page-header h1{margin:0 0 8px;font-size:30px;letter-spacing:-.03em}
.page-header p{margin:0;color:var(--muted)}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card,.panel{padding:22px}
.stats-value{font-size:30px;font-weight:800;letter-spacing:-.04em}
.stats-label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.muted{color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-group label{font-size:14px;font-weight:600;color:#374151}
input,select,textarea{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:15px;color:var(--text);outline:none;transition:.18s}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:#cbd5e1;box-shadow:0 0 0 4px rgba(15,23,42,.05)}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;padding:14px 18px;border-radius:14px;background:var(--primary);color:#fff;font-weight:700;cursor:pointer;transition:.18s}
button:hover,.btn:hover{opacity:.94;transform:translateY(-1px)}
.btn-secondary{background:#fff;color:#111827;border:1px solid var(--line)}
.btn-success{background:var(--success)}
.btn-danger{background:var(--danger)}
.btn-link{background:transparent;color:#374151;border:1px dashed var(--line)}
.section-title{font-size:18px;font-weight:800;margin:0 0 16px}
.badge{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:700}
.badge-success{background:var(--success-soft);color:var(--success)}
.badge-danger{background:var(--danger-soft);color:var(--danger)}
.badge-warning{background:var(--warning-soft);color:var(--warning)}
.alert{padding:15px 16px;border-radius:14px;margin-bottom:18px;font-weight:600}
.alert-success{background:var(--success-soft);color:var(--success)}
.alert-error{background:var(--danger-soft);color:var(--danger)}
.alert-warning{background:var(--warning-soft);color:var(--warning)}
.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse}
th,td{padding:15px 16px;border-bottom:1px solid #eef2f7;text-align:left;font-size:14px;vertical-align:top}
th{background:#f9fafb;color:#4b5563;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
tr td{align-content: center;}
tr:hover td{background:#fcfcfd;}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.empty-state{padding:40px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:18px}
.dashboard-split{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.dashboard-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mini-card{padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff}
.mini-card h3{margin:0 0 10px;font-size:17px}
.mini-meta{display:grid;gap:8px}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.question-builder{display:grid;gap:22px}
.question-card{padding:20px}
.answer-choice div{
    display: inline-flex;
    gap: 10px;
}

.bank-source-row{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(220px,.9fr);
    gap:22px;
    align-items:start;
    margin-bottom:18px;
}

.bank-source-row .form-group{
    margin-bottom:0;
    display:flex;
    flex-direction:column;
}

.bank-source-row .form-group label{
    margin-bottom:8px;
    min-height:auto;
}

.bank-source-row .form-group input,
.bank-source-row .form-group select{
    width:100%;
}

.bank-help{
    min-height:20px;
    margin-top:6px;
    font-size:12px;
    color:#6b7280;
}

@media (max-width: 900px){
    .bank-source-row{
        grid-template-columns:1fr;
        gap:14px;
    }
}
.question-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.option-row{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;margin-bottom:10px}
.option-letter{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:#f3f4f6;border:1px solid var(--line);font-weight:700}
.option-correct{display:flex;align-items:center;gap:10px}
.result-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:18px}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.52);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}
.modal.is-open{display:flex}
.modal-content{width:min(960px,100%);max-height:90vh;overflow:auto;padding:24px;position:relative}
.modal-close{position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:12px;background:#fff;color:#111827;border:1px solid var(--line)}
.answer-item{padding:18px;border:1px solid var(--line);border-radius:16px;margin-bottom:14px;background:#fff}
.answer-item h4{margin:0 0 8px}
.answer-meta{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 0}
.public-shell{width:100%}
.public-card{padding:28px}
.assessment-header{margin-bottom:18px}
.assessment-header h1{margin:0 0 8px;font-size:34px;letter-spacing:-.04em}
.assessment-header p{margin:0;color:var(--muted);line-height:1.7}
.assessment-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.step-card{padding:28px;display:none}
.step-card.active{display:block;animation:fadeUp .22s ease}
.question-progress{display:flex;justify-content:space-between;gap:16px;margin-bottom:18px}
.question-title{font-size:24px;line-height:1.3;letter-spacing:-.03em;margin:0 0 22px}
.answer-choice{display:flex;align-items:flex-start;gap:14px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;margin-bottom:12px;cursor:pointer;transition:.18s}
.answer-choice:hover{border-color:#cbd5e1;background:#f9fafb}
.answer-choice input{width:18px;height:18px;margin-top:2px}
.timer-box{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;background:#f9fafb;border:1px solid var(--line);border-radius:16px;margin-bottom:20px}
.timer-item strong{display:block;font-size:24px;letter-spacing:-.03em}
.finish-screen{padding:36px;text-align:center}
.finish-screen h1{margin:0 0 12px;font-size:34px;letter-spacing:-.04em}
.finish-screen p{margin:0;color:var(--muted);line-height:1.7}
.score-box{margin-top:20px;padding:20px;border-radius:16px;font-size:20px;font-weight:800}
.score-box.success{background:var(--success-soft);color:var(--success)}
.score-box.danger{background:var(--danger-soft);color:var(--danger)}
.login-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.meta-inline{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.inline-form{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.inline-form > *{flex:1}
.small{font-size:12px}
.code-block{padding:12px 14px;background:#f8fafc;border:1px dashed var(--line);border-radius:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
@keyframes fadeUp{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
@media (max-width:1100px){
    .dashboard-split,.grid-4,.result-overview,.dashboard-cards,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
    .login-layout,.dashboard-split,.grid-2,.grid-3,.grid-4,.dashboard-cards,.form-grid,.form-grid-3,.result-overview{grid-template-columns:1fr}
    .topbar{padding:16px}
    .page-wrapper{padding:16px}
    .assessment-header h1,.login-hero h1,.finish-screen h1{font-size:28px}
    .question-title{font-size:21px}
}


.builder-header{margin-bottom:22px}
.question-builder-clean{gap:18px}
.question-card-clean{padding:26px;border-radius:22px;background:#fbfbfc}
.question-header-clean{align-items:flex-start;margin-bottom:20px}
.question-index{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:999px;background:#eef2f7;color:#374151;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.question-card-clean .section-title{font-size:24px;letter-spacing:-.03em;margin:0}
.question-text-wrap textarea{min-height:120px;background:#fff}
.question-options-list{display:grid;gap:14px;margin-top: 15px;}
.option-row-clean{display:grid;grid-template-columns: 45px 35px 120px minmax(0,1fr);gap:18px;align-items:center;margin:0}
.option-letter-clean{width: 38px;height: 38px;border-radius:16px;background:#eef0f3;border-color:#d8dde5;font-size: 20px;font-weight:800;color:#0f172a}
.option-check-col{display:flex;align-items:center;justify-content:center}
.option-check-col input[type="checkbox"]{width:18px;height:18px;cursor:pointer}
.option-correct-label{font-size:16px;line-height:1.45;color:#0f172a;cursor:pointer}
.option-input-col input{height:78px;border-radius:20px;background:#fff;font-size:16px;padding:0 22px}
.builder-actions{padding-top:6px}
@media (max-width:900px){
    .option-row-clean{grid-template-columns:56px 30px 1fr;gap:14px}
    .option-correct-label{grid-column:3;grid-row:1/2;font-size:15px}
    .option-input-col{grid-column:1/-1}
    .option-input-col input{height:auto;min-height:62px;padding:18px}
}
@media (max-width:640px){
    .question-card-clean{padding:18px}
    .option-row-clean{grid-template-columns:48px 28px 1fr;gap:12px}
    .option-letter-clean{width:46px;height:46px;border-radius:14px;font-size:28px}
    .option-correct-label{font-size:14px}
}