/* --- APP GLOBAL --- */
.app-wrapper { padding: 40px 20px; flex: 1; display: flex; justify-content: center; }

.glass-container {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #1a6ac3;
    border-radius: 12px;
    padding: 30px;
    width: 100%;
    max-width: 850px;
    box-shadow: 0 10px 30px rgba(33, 56, 116, 0.15);
    margin-bottom: 30px;
}

/* --- TYPOGRAPHY --- */
h2 { color: #213874; margin-top: 0; }
h3 { color: #1a6ac3; border-bottom: 2px solid #f3ab1b; padding-bottom: 5px; margin-top: 30px; font-size: 1.1rem; }
label { display: block; margin: 15px 0 5px; font-weight: 600; color: #444; }
.hint { font-size: 0.85rem; color: #888; margin-top: -3px; }

/* --- INPUTS --- */
input[type="text"], input[type="email"], input[type="number"], select, textarea {
    width: 100%; padding: 12px;
    border: 1px solid #ccc; border-radius: 5px;
    box-sizing: border-box; font-family: inherit;
    background: #f9f9f9;
}
input:focus, textarea:focus { border-color: #1a6ac3; outline: none; background: #fff; }

/* --- BUTTONS --- */
.btn { width: 100%; padding: 12px; border:none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; margin-top: 15px; color: white; transition: 0.3s; }
.btn:hover { opacity: 0.9; }
.bg-blue { background: #1a6ac3; }
.bg-gold { background: #f3ab1b; color: #213874; }
.btn-small { padding: 5px 12px; font-size: 13px; border-radius: 20px; text-decoration: none; display:inline-block; margin-right: 5px; color: white; background: #888; }
.btn-small.active { background: #1a6ac3; }

/* --- TABS & NAV --- */
.nav-tabs { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.nav-link { text-decoration: none; color: #666; font-weight: bold; padding: 5px 10px; }
.nav-link.active { color: #1a6ac3; border-bottom: 3px solid #1a6ac3; }

/* --- GOOGLE FORMS ELEMENTS --- */

/* 1. Toggle Switch */
.switch { position: relative; display: inline-block; width: 40px; height: 24px; vertical-align: middle; margin-right: 10px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #1a6ac3; }
input:checked + .slider:before { transform: translateX(16px); }

/* 2. Checkbox Row */
.checkbox-row { display: flex; align-items: center; font-weight: normal; cursor: pointer; }
.checkbox-row input { width: auto; margin-right: 10px; }

/* 3. Linear Scale (Radio Horizontal) */
.scale-container { display: flex; justify-content: space-between; align-items: center; background: #f0f0f5; padding: 15px; border-radius: 8px; }
.scale-item { text-align: center; font-weight: normal; cursor: pointer; }
.scale-item input { margin-bottom: 5px; }

/* 4. Grid Table */
.grid-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.grid-table th, .grid-table td { border-bottom: 1px solid #ddd; padding: 10px; text-align: center; }
.grid-table th { background: #f4f4f9; font-size: 0.9rem; color: #213874; }
.grid-table td:first-child { text-align: left; font-weight: bold; background: #fff; }

/* 5. Summary Bars */
.summary-card { background: #fff; border: 1px solid #eee; padding: 15px; margin-bottom: 10px; border-radius: 8px; }
.bar-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #f9f9f9; font-size: 0.9rem; }