*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0b0b0d;color:#eaeaf1}
.container{max-width:980px;margin:40px auto;padding:0 20px;}
.logo-container{text-align:center;padding:30px 0 24px;}
.logo{height:46px;width:auto;max-width:290px;object-fit:contain;display:inline-block}
.main-heading{background:#141418;border:1px solid #242432;border-radius:14px;padding:24px 20px;margin-bottom:24px;text-align:center}
h1{margin:0 0 16px;font-size:32px;line-height:1.2;background:linear-gradient(135deg,#0CB5A9 0%,#0CB5A9 55%,#FFD447 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800;padding-bottom:12px;border-bottom:2px solid rgba(12,181,169,0.3)}
.sub{color:#a9a9b3;margin:0;line-height:1.4}
.score-display{margin-top:12px}
.total-score{font-size:48px;font-weight:700;color:#0CB5A9;line-height:1.2;margin-bottom:8px}
.readiness-label{font-size:16px;color:#a9a9b3;font-weight:500}
.suggestion-container{background:#0f0f13;border:1px solid #1f1f2a;border-radius:8px;padding:12px;margin-top:12px}
.suggestion-label{margin:0;font-size:14px;color:#eaeaf1;font-style:italic}
.card{background:#141418;border:1px solid #242432;border-radius:14px;padding:16px;margin:0 0 18px}
.form-field{margin-bottom:20px}
.form-field:last-child{margin-bottom:0}
label{display:block;margin:0 0 6px;font-weight:600;font-size:15px}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#FFD447;color:#0b0b0d;font-weight:700;letter-spacing:0.06em;font-variant:small-caps;font-size:11px;margin-right:8px;vertical-align:middle}
.tip{font-size:0.75rem;opacity:0.75;margin:0 0 8px;color:#b8b8c3;line-height:1.4;font-style:italic}
textarea{width:100%;min-height:88px;background:#0d0d11;border:1px solid #2c2c3a;border-radius:10px;color:#eaeaf1;padding:12px;font-family:inherit;font-size:14px;resize:vertical}
.char-counter{font-size:12px;color:#6b6b7a;text-align:right;margin-top:4px}
.btn{border:none;border-radius:10px;color:#fff;padding:14px 24px;font-weight:700;cursor:pointer;font-size:15px;transition:all 0.2s ease;text-decoration:none;display:inline-block;text-align:center}
.btn-primary{background:#0CB5A9}
.btn-primary:hover{filter:brightness(1.15);transform:scale(1.02)}
.btn-primary:active{transform:scale(0.98)}
.btn-primary:disabled{opacity:0.7;cursor:not-allowed}
.btn-secondary{background:#3a3a48;color:#e0e0e8}
.btn-secondary:hover{background:#4a4a58;transform:scale(1.02)}
.btn-secondary:active{transform:scale(0.98)}
.button-group{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.action-card{text-align:center;padding:20px;background:#16161c;border:1px solid #2c2c3a}
.action-card .toggle-container{justify-content:center;margin-bottom:16px}
.action-card .btn{margin:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.score{background:#1f1f2a;border:1px solid #2c2c3a;padding:4px 8px;border-radius:8px;color:#0CB5A9}
.pill{background:#1f1f2a;border:1px solid #2c2c3a;padding:3px 8px;border-radius:999px}
.input{color:#cfd0da}
.tips{padding-left:18px;line-height:1.5}
.link{color:#0CB5A9;text-decoration:none}
.link:hover{text-decoration:underline}
.toggle-container{display:flex;justify-content:flex-start;align-items:center;margin-top:16px;padding:8px 0;cursor:pointer;gap:12px}
.toggle-label{color:#cfd0da;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px}
.info-icon{position:relative;display:inline-flex;align-items:center;cursor:help;transition:opacity 0.2s}
.info-icon:hover{opacity:1}
.question-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1.5px solid #6b6b7a;color:#6b6b7a;font-size:12px;font-weight:600;font-family:system-ui,sans-serif;transition:all 0.2s}
.info-icon:hover .question-mark{border-color:#0CB5A9;color:#0CB5A9}
.tooltip{visibility:hidden;opacity:0;position:absolute;bottom:130%;left:50%;transform:translateX(-50%);background:#1f1f2a;color:#eaeaf1;padding:12px 16px;border-radius:8px;border:1px solid #0CB5A9;box-shadow:0 4px 12px rgba(0,0,0,0.4);width:280px;font-size:13px;line-height:1.5;font-weight:400;text-align:left;z-index:1000;transition:opacity 0.3s,visibility 0.3s;pointer-events:none}
.tooltip::after{content:'';position:absolute;top:100%;left:50%;margin-left:-6px;border-width:6px;border-style:solid;border-color:#0CB5A9 transparent transparent transparent}
.info-icon:hover .tooltip{visibility:visible;opacity:1}
.toggle-switch{position:relative;display:inline-block;width:52px;height:28px;margin:0;cursor:pointer}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#2c2c3a;transition:0.3s;border-radius:28px}
.toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background:#fff;transition:0.3s;border-radius:50%}
.toggle-switch input:checked+.toggle-slider{background:#0CB5A9}
.toggle-switch input:checked+.toggle-slider:before{transform:translateX(24px)}
.toggle-switch input:focus+.toggle-slider{box-shadow:0 0 0 2px rgba(12,181,169,0.2)}
.sub-container{background:#0f0f13;border:1px solid #1f1f2a;border-radius:8px;padding:12px;margin-top:12px}
.sub-container:first-of-type{margin-top:8px}
.sub-container-ai{background:#0e1418;border-color:#1a2a2f}
.section-label{font-weight:600;color:#eaeaf1;margin:0 0 6px;font-size:13px}
.sub-container .input{margin:0;color:#cfd0da}
.sub-container .tips{margin:0;padding-left:18px;line-height:1.5}
.sub-container .ai-note{margin:0;color:#9bdcfe;font-size:14px}
.overall-card{border:2px solid #0CB5A9;background:#0a2826;margin-bottom:24px}
.overall-card .card-head h3{color:#0CB5A9}
.overall-card .sub-container{background:#0d1f1e;border-color:#164240}
.overall-summary{font-size:15px;line-height:1.6;color:#eaeaf1;margin:0}
.tips-heading{margin-top:12px;margin-bottom:4px;color:#eaeaf1}
.footer{text-align:center;padding:40px 20px 20px;color:#6b6b7a;font-size:13px}
.footer a{color:#6b6b7a;text-decoration:none}
.footer a:hover{color:#0CB5A9;text-decoration:underline}
