.frhz-wrap { width:95%;margin:0 auto;padding:26px 0 46px;font-family:Arial, Helvetica, sans-serif;color:#1e293b;line-height:1.68;background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);} .frhz-wrap * { box-sizing:border-box;} .frhz-hero { position:relative;display:grid;grid-template-columns:1.55fr 0.85fr;gap:26px;align-items:stretch;padding:38px;border-radius:34px;background:radial-gradient(circle at top left, rgba(219, 234, 254, 0.95), transparent 34%), linear-gradient(135deg, #ffffff 0%, #f8fafc 42%, #fff7ed 100%);border:1px solid rgba(226, 232, 240, 0.9);box-shadow:0 24px 60px rgba(15, 23, 42, 0.08);overflow:hidden;} .frhz-hero::after { content:"";position:absolute;width:260px;height:260px;right:-90px;top:-90px;border-radius:50%;background:rgba(248, 113, 113, 0.12);} .frhz-hero-text, .frhz-hero-card { position:relative;z-index:2;} .frhz-kicker { display:inline-flex;margin:0 0 16px;padding:8px 14px;border-radius:999px;background:#eef6ff;color:#2563eb;font-weight:900;font-size:0.86rem;letter-spacing:0.05em;text-transform:uppercase;border:1px solid #dbeafe;} .frhz-hero h1 { margin:0;font-size:clamp(2.15rem, 4.5vw, 4.4rem);line-height:1.02;color:#0f172a;letter-spacing:-0.05em;} .frhz-hero h2 { margin:16px 0 18px;font-size:clamp(1.16rem, 2vw, 1.75rem);color:#dc2626;line-height:1.25;} .frhz-hero p { font-size:1.08rem;max-width:890px;color:#334155;} .frhz-hero-actions { display:flex;flex-wrap:wrap;gap:13px;margin-top:24px;} .frhz-btn { display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;border-radius:999px;background:linear-gradient(135deg, #ef4444, #f97316);color:#ffffff !important;text-decoration:none;font-weight:900;box-shadow:0 14px 28px rgba(239, 68, 68, 0.2);transition:transform 0.2s ease, box-shadow 0.2s ease;} .frhz-btn:hover { transform:translateY(-2px);box-shadow:0 18px 34px rgba(239, 68, 68, 0.26);} .frhz-btn-light { background:rgba(255, 255, 255, 0.9);color:#b91c1c !important;border:1px solid #fecaca;box-shadow:0 12px 24px rgba(15, 23, 42, 0.06);} .frhz-hero-card { padding:26px;border-radius:28px;background:rgba(255, 255, 255, 0.82);border:1px solid rgba(226, 232, 240, 0.95);box-shadow:0 18px 42px rgba(15, 23, 42, 0.08);backdrop-filter:blur(10px);} .frhz-card-label { display:inline-flex;margin:0 0 10px;padding:6px 10px;border-radius:999px;background:#ecfdf5;color:#047857 !important;font-size:0.82rem !important;font-weight:900;text-transform:uppercase;letter-spacing:0.05em;} .frhz-hero-card h3 { margin:0 0 15px;color:#0f172a;font-size:1.45rem;} .frhz-hero-card ul { margin:0;padding-left:0;list-style:none;} .frhz-hero-card li { margin:10px 0;padding:12px 12px;border-radius:16px;background:#f8fafc;border:1px solid #e2e8f0;} .frhz-hero-card strong { color:#dc2626;} .frhz-alert { margin:24px 0;padding:20px 22px;border-radius:24px;background:linear-gradient(135deg, #fff7ed, #ffffff);color:#7c2d12;font-size:1rem;border:1px solid #fed7aa;box-shadow:0 12px 30px rgba(124, 45, 18, 0.06);} .frhz-alert strong { color:#9a3412;} .frhz-progress-box { margin:24px 0;padding:20px;border-radius:24px;background:#ffffff;border:1px solid #e2e8f0;box-shadow:0 16px 38px rgba(15, 23, 42, 0.06);} .frhz-progress-top { display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;color:#334155;font-weight:900;} .frhz-progress-bar { height:15px;overflow:hidden;border-radius:999px;background:#eef2f7;border:1px solid #e2e8f0;} .frhz-progress-fill { display:block;width:0%;height:100%;border-radius:999px;background:linear-gradient(90deg, #38bdf8, #22c55e);transition:width 0.25s ease;} .frhz-content { display:grid;gap:24px;} .frhz-card { position:relative;padding:30px;border-radius:30px;background:rgba(255, 255, 255, 0.96);border:1px solid #e5edf6;box-shadow:0 18px 44px rgba(15, 23, 42, 0.065);overflow:hidden;} .frhz-card::before { content:"";position:absolute;width:130px;height:130px;right:-55px;top:-55px;border-radius:50%;background:rgba(219, 234, 254, 0.6);} .frhz-card > * { position:relative;z-index:2;} .frhz-section-head { display:flex;gap:18px;align-items:flex-start;margin-bottom:16px;} .frhz-num { flex:0 0 auto;display:inline-flex;width:50px;height:50px;align-items:center;justify-content:center;border-radius:18px;background:linear-gradient(135deg, #dbeafe, #fee2e2);color:#b91c1c;font-weight:1000;font-size:1.15rem;border:1px solid #fecaca;box-shadow:0 10px 20px rgba(185, 28, 28, 0.08);} .frhz-card h2 { margin:0 0 8px;color:#0f172a;font-size:clamp(1.5rem, 2.5vw, 2.24rem);line-height:1.15;letter-spacing:-0.025em;} .frhz-card h3 { margin:0 0 8px;color:#0f172a;} .frhz-card p { color:#334155;} .frhz-mini { margin:0;color:#64748b !important;font-weight:800;} .frhz-callout, .frhz-example, .frhz-list-card { margin:20px 0;padding:20px;border-radius:22px;background:linear-gradient(135deg, #eff6ff, #ffffff);border:1px solid #bfdbfe;box-shadow:0 10px 26px rgba(37, 99, 235, 0.06);} .frhz-callout strong, .frhz-example strong, .frhz-list-card strong { color:#1d4ed8;} .frhz-callout-soft { background:linear-gradient(135deg, #ecfdf5, #ffffff);border-color:#bbf7d0;box-shadow:0 10px 26px rgba(22, 163, 74, 0.06);} .frhz-grid-two { display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0;} .frhz-note { padding:20px;border-radius:22px;background:linear-gradient(135deg, #ecfdf5, #ffffff);border:1px solid #bbf7d0;box-shadow:0 10px 26px rgba(22, 163, 74, 0.06);} .frhz-note-warn { background:linear-gradient(135deg, #fff7ed, #ffffff);border-color:#fed7aa;box-shadow:0 10px 26px rgba(249, 115, 22, 0.06);} .frhz-list-card ul { margin:10px 0 0;padding-left:20px;} .frhz-list-card li { margin:9px 0;color:#334155;} .frhz-checklist { display:grid;gap:13px;margin:20px 0;} .frhz-checklist label { display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:18px;background:#f8fafc;border:1px solid #e2e8f0;cursor:pointer;transition:transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;} .frhz-checklist label:hover { transform:translateY(-1px);border-color:#bfdbfe;background:#eff6ff;} .frhz-checklist input { margin-top:5px;transform:scale(1.18);accent-color:#2563eb;} .frhz-mark { margin-top:10px;padding:13px 18px;border:0;border-radius:999px;background:#e0f2fe;color:#075985;font-weight:900;cursor:pointer;box-shadow:0 10px 20px rgba(14, 165, 233, 0.08);transition:transform 0.2s ease, background 0.2s ease;} .frhz-mark:hover { transform:translateY(-1px);background:#bae6fd;} .frhz-mark.is-done { background:#dcfce7;color:#166534;} .frhz-interactive { background:linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);} .frhz-options, .frhz-quiz { display:grid;gap:13px;margin-top:18px;} .frhz-options button, .frhz-quiz button { width:100%;padding:15px;border:1px solid #dbe5f1;border-radius:18px;background:#ffffff;color:#1e293b;font-weight:900;text-align:left;cursor:pointer;box-shadow:0 8px 18px rgba(15, 23, 42, 0.04);transition:transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;} .frhz-options button:hover, .frhz-quiz button:hover { transform:translateY(-1px);border-color:#93c5fd;background:#eff6ff;} .frhz-feedback { min-height:28px;margin:17px 0 0;font-weight:900;} .frhz-feedback.is-right { color:#15803d;} .frhz-feedback.is-wrong { color:#b91c1c;} .frhz-refresh { background:linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);border-color:#fed7aa;} .frhz-refresh ol { margin:14px 0 0;padding-left:23px;} .frhz-refresh li { margin:11px 0;color:#334155;} .frhz-next { padding:24px;border-radius:28px;background:linear-gradient(135deg, #0f172a, #1e293b);color:#ffffff;box-shadow:0 18px 44px rgba(15, 23, 42, 0.16);} .frhz-next p { margin:0;color:#ffffff;} @media (max-width:900px) { .frhz-hero { grid-template-columns:1fr;padding:28px;} .frhz-grid-two { grid-template-columns:1fr;} } @media (max-width:640px) { .frhz-wrap { width:94%;padding-top:16px;} .frhz-hero { border-radius:26px;padding:22px;} .frhz-card { padding:22px;border-radius:24px;} .frhz-section-head { gap:13px;} .frhz-num { width:42px;height:42px;border-radius:15px;} .frhz-progress-top { flex-direction:column;} .frhz-hero-actions { flex-direction:column;} .frhz-btn { width:100%;} }