:root,[data-theme="light"]{
		--bg:#fff;--surface:#fff;--surface-2:#f8fafc;--offset:#eef1f5;
		--divider:#e2e8f0;--border:#cbd5e1;
		--muted:#64748b;--faint:#94a3b8;
		--primary:#0369a1;--primary-h:#0284c7;--primary-bg:#e0f2fe;
		--success:#16a34a;--success-bg:#dcfce7;
		--warning:#d97706;--error:#dc2626;
		--shadow-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
		--shadow-md:0 4px 12px rgba(15,23,42,.08);
		--r-sm:.375rem;--r-md:.5rem;--r-lg:.75rem;--r-xl:1rem;--r-full:9999px;
		--tr:180ms cubic-bezier(.16,1,.3,1);
		--font:'Inter',-apple-system,sans-serif;
	    }
	    [data-theme="dark"]{
		--bg:#fff;--surface:#fff;--surface-2:#f8fafc;--offset:#eef1f5;
		--divider:#e2e8f0;--border:#cbd5e1;
		--text:#006aa5;--muted:#64748b;--faint:#94a3b8;
		--primary:#0369a1;--primary-h:#0284c7;--primary-bg:#e0f2fe;
		--success:#16a34a;--success-bg:#dcfce7;
		--shadow-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
		--shadow-md:0 4px 12px rgba(15,23,42,.08);
	    }
	    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
	    html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
	    
	    
	    input,textarea,select{font:inherit;color:inherit}
	    :focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--r-sm)}
	    
	    /* HEADER */
	    .site-header{
		background:var(--surface);border-bottom:1px solid var(--divider);
		padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;
		position:sticky;top:0;z-index:10;
	    }
	    .logo{display:flex;align-items:center;gap:.6rem}
	    .logo-icon{width:32px;height:32px;background:var(--primary);border-radius:var(--r-md);
		display:flex;align-items:center;justify-content:center;flex-shrink:0}
	    .logo-icon svg{color:#fff}
	    .logo-name{font-size:.9375rem;font-weight:600;line-height:1.2}
	    .logo-sub{font-size:.75rem;color:var(--muted)}
	    .theme-btn{width:36px;height:36px;border-radius:var(--r-md);display:flex;align-items:center;
		justify-content:center;color:var(--muted);transition:all var(--tr)}
	    .theme-btn:hover{background:var(--offset);color:var(--text)}
	    
	    /* PROGRESS */
	    .progress-bar{height:3px;background:var(--divider);position:sticky;z-index:9}
	    .progress-fill{height:100%;background:var(--primary);transition:width .4s ease;border-radius:0 2px 2px 0}
	    
	    /* MAIN */
	    main{max-width:680px;margin:0 auto;padding:2rem 1rem 4rem}
	    
	    /* INTRO CARD */
	    .intro-card{
		background:var(--surface);border-radius:var(--r-xl);
		border:1px solid var(--divider);padding:2rem;
		margin-bottom:2rem;box-shadow:var(--shadow-sm);
	    }
	    .intro-card h1{font-size:clamp(1.25rem,4vw,1.75rem);font-weight:700;margin-bottom:.5rem}
	    .intro-card p{color:var(--muted);font-size:.9375rem;line-height:1.65}
	    .intro-badge{
		display:inline-flex;align-items:center;gap:.4rem;
		background:var(--primary-bg);color:var(--primary);
		font-size:.75rem;font-weight:600;padding:.25rem .75rem;
		border-radius:var(--r-full);margin-bottom:1rem
	    }
	    
	    /* SECTION */
	    .section-card{
		background:var(--surface);border-radius:var(--r-xl);
		border:1px solid var(--divider);padding:1.5rem;
		margin-bottom:1.25rem;box-shadow:var(--shadow-sm);
		display:none;
	    }
	    .section-card.active{display:block}
	    .section-label{
		font-size:.6875rem;font-weight:700;letter-spacing:.07em;
		text-transform:uppercase;color:var(--primary);margin-bottom:.375rem
	    }
	    .section-title{font-size:1.0625rem;font-weight:600;margin-bottom:1.25rem;line-height:1.3}
	    
	    /* RADIO GROUP (for q1,2,3,21,23,24) */
	    .radio-group{display:flex;flex-direction:column;gap:.5rem}
	    .radio-option{
		display:flex;align-items:center;gap:.75rem;
		padding:.65rem .9rem;border-radius:var(--r-lg);
		border:1.5px solid var(--divider);cursor:pointer;
		transition:all var(--tr);user-select:none;
	    }
	    .radio-option:hover{border-color:var(--primary);background:var(--primary-bg)}
	    .radio-option input[type=radio]{
		width:18px;height:18px;accent-color:var(--primary);flex-shrink:0;cursor:pointer
	    }
	    .radio-option.selected{border-color:var(--primary);background:var(--primary-bg);font-weight:500}
	    .radio-option span{font-size:.9375rem}
	    
	    /* SCALE TABLE */
	    .scale-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
	    .scale-table{width:100%;border-collapse:collapse;min-width:480px}
	    .scale-table thead th{
		font-size:.75rem;font-weight:600;color:var(--muted);
		text-align:center;padding:.5rem .25rem;
		border-bottom:1px solid var(--divider)
	    }
	    .scale-table thead th:first-child{text-align:left;padding-left:0}
	    .scale-table tbody tr{border-bottom:1px solid var(--divider)}
	    .scale-table tbody tr:last-child{border-bottom:none}
	    .scale-table tbody tr:hover td{background:var(--offset)}
	    .scale-table td{padding:.75rem .25rem;vertical-align:middle}
	    .scale-table td:first-child{
		font-size:.875rem;color:var(--text);padding-left:0;
		padding-right:.75rem;line-height:1.35;width:55%
	    }
	    .scale-table td.score-cell{text-align:center}
	    .score-radio{
		width:36px;height:36px;border-radius:50%;border:2px solid var(--border);
		display:flex;align-items:center;justify-content:center;
		cursor:pointer;transition:all var(--tr);margin:0 auto;
		font-size:.8125rem;font-weight:600;color:var(--muted)
	    }
	    .score-radio:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-bg)}
	    .score-radio.selected{border-color:var(--primary);background:var(--primary);color:#fff}
	    .scale-hint{
		display:flex;justify-content:space-between;
		font-size:.75rem;color:var(--faint);margin-top:.5rem;padding:0 2px
	    }
	    
	    /* TEXTAREA */
	    .field-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;display:block}
	    .field-textarea{
		width:100%;min-height:90px;padding:.75rem;
		border:1.5px solid var(--border);border-radius:var(--r-lg);
		background:var(--surface-2);color:var(--text);
		font-size:.9375rem;line-height:1.5;resize:vertical;
		transition:border-color var(--tr)
	    }
	    .field-textarea:focus{border-color:var(--primary);outline:none}
	    .field-textarea::placeholder{color:var(--faint)}
	    
	    /* NAVIGATION */
	    .nav-row{
		display:flex;align-items:center;justify-content:space-between;
		margin-top:1.5rem;gap:1rem
	    }
	    .step-indicator{font-size:.8125rem;color:var(--muted);font-weight:500}
	    .btn{
		display:inline-flex;align-items:center;gap:.4rem;
		padding:.6rem 1.25rem;border-radius:var(--r-lg);
		font-size:.9375rem;font-weight:500;transition:all var(--tr);
		border:1.5px solid transparent;
	    }
	    .btn-ghost{border-color:var(--border);color:var(--muted); background: transparent;}
	    .btn-ghost:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-bg)}
	    .btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm)}
	    .btn-primary:hover{background:var(--primary-h)}
	    .btn:disabled{opacity:.45;cursor:not-allowed}
	    
	    /* ERROR STATE */
	    .field-error{
		font-size:.8125rem;color:var(--error);margin-top:.4rem;
		display:none;align-items:center;gap:.3rem
	    }
	    .has-error .field-error{display:flex}
	    .has-error .scale-table thead th{color:var(--error)}
	    .has-error .radio-option{border-color:rgba(220,38,38,.2)}
	    
	    /* SUCCESS SCREEN */
	    .success-screen{
		display:none;text-align:center;padding:3rem 1.5rem;
		background:var(--surface);border-radius:var(--r-xl);
		border:1px solid var(--divider);box-shadow:var(--shadow-md)
	    }
	    .success-screen.active{display:block}
	    .success-icon{
		width:64px;height:64px;background:var(--success-bg);
		border-radius:50%;display:flex;align-items:center;
		justify-content:center;margin:0 auto 1.25rem
	    }
	    .success-icon svg{color:var(--success)}
	    .success-screen h2{font-size:1.375rem;font-weight:700;margin-bottom:.5rem}
	    .success-screen p{color:var(--muted);max-width:42ch;margin:0 auto;font-size:.9375rem}
	    
	    /* MOBILE */
	    @media(max-width:480px){
		main{padding:1.25rem .75rem 3rem}
		.intro-card{padding:1.25rem}
		.section-card{padding:1.25rem}
		.nav-row{flex-wrap:wrap}
		.btn{flex:1;justify-content:center}
	    }