:root {
    --ss-blue: #2563eb;
    --ss-blue-dark: #1e3a8a;
    --ss-green: #16a34a;
    --ss-ink: #0f172a;
    --ss-muted: #64748b;
    --ss-line: #e2e8f0;
    --ss-soft: #f8fafc;
    --ss-white: #ffffff;
    --ss-yellow: #f59e0b;
    --ss-red: #dc2626;
    --ss-radius: 18px;
    --ss-shadow: 0 18px 50px rgba(15, 23, 42, .08);
}

.ss-section-heading { max-width: 760px; margin: 0 0 34px; }
.ss-section-heading h1, .ss-section-heading h2 { margin: 8px 0 12px; line-height: 1.1; color: var(--ss-ink); }
.ss-section-heading h1 { font-size: clamp(34px, 5vw, 54px); }
.ss-section-heading h2 { font-size: clamp(30px, 4vw, 42px); }
.ss-section-heading p { color: var(--ss-muted); font-size: 17px; }
.ss-kicker { color: var(--ss-blue); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ss-kicker-light { color: #bfdbfe; }
.ss-muted { color: var(--ss-muted); }
.ss-center { text-align: center; }
.ss-subheading { margin: 38px 0 18px; }

.ss-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 11px; border: 1px solid transparent; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.ss-btn:hover { transform: translateY(-1px); }
.ss-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ss-btn-primary { background: var(--ss-blue); color: var(--ss-white) !important; box-shadow: 0 8px 24px rgba(37, 99, 235, .2); }
.ss-btn-success { background: var(--ss-green); color: var(--ss-white) !important; }
.ss-btn-light { background: var(--ss-white); color: var(--ss-blue-dark) !important; }
.ss-btn-ghost { border-color: rgba(255,255,255,.4); color: var(--ss-white) !important; background: rgba(255,255,255,.08); }
.ss-btn-outline { border-color: var(--ss-blue); color: var(--ss-blue) !important; background: transparent; }
.ss-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ss-chip-link { display:inline-flex; align-items:center; padding:7px 11px; border-radius:999px; background:#ecfdf5; color:#15803d; text-decoration:none; font-weight:800; font-size:13px; }

.ss-panel { background: var(--ss-white); border: 1px solid var(--ss-line); border-radius: var(--ss-radius); padding: 28px; box-shadow: 0 8px 30px rgba(15,23,42,.04); }
.ss-panel-soft { background: var(--ss-soft); }
.ss-panel h2, .ss-panel h3 { margin-top: 7px; color: var(--ss-ink); }
.ss-alert { padding: 13px 15px; border-radius: 10px; margin: 14px 0; font-weight: 700; }
.ss-alert-success { background: #ecfdf5; color: #166534; border: 1px solid #bbf7d0; }
.ss-alert-danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.ss-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 35px auto; }
.ss-form, .ss-auth-grid form { display: grid; gap: 15px; }
.ss-form label, .ss-auth-grid form label { display: grid; gap: 7px; font-weight: 700; color: #334155; }
.ss-form input, .ss-auth-grid input[type="text"], .ss-auth-grid input[type="email"], .ss-auth-grid input[type="password"] { width: 100%; box-sizing: border-box; border: 1px solid var(--ss-line); background: white; border-radius: 10px; padding: 12px 13px; font: inherit; }
.ss-auth-grid input[type="submit"] { min-height: 46px; background: var(--ss-blue); color: white; border: 0; border-radius: 10px; font-weight: 800; cursor: pointer; }

.ss-course-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.ss-course-card { background:#fff; border:1px solid var(--ss-line); border-radius:18px; padding:24px; box-shadow:0 8px 30px rgba(15,23,42,.04); display:flex; flex-direction:column; min-height:280px; }
.ss-course-card:hover { border-color:#bfdbfe; box-shadow:var(--ss-shadow); }
.ss-course-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.ss-course-card h3 { margin:20px 0 10px; font-size:22px; line-height:1.25; }
.ss-course-card p { color:var(--ss-muted); flex:1; }
.ss-level-pill { display:inline-flex; padding:6px 10px; background:#eff6ff; color:#1d4ed8; border-radius:999px; font-size:12px; font-weight:900; letter-spacing:.04em; }
.ss-access-pill { display:inline-flex; padding:6px 10px; background:#ecfdf5; color:#166534; border-radius:999px; font-size:11px; font-weight:900; letter-spacing:.06em; }
.ss-card-link { color:var(--ss-blue); text-decoration:none; font-weight:900; margin-top:15px; display:inline-flex; gap:7px; align-items:center; }
.ss-mini-progress { height:8px; border-radius:999px; overflow:hidden; background:#e2e8f0; margin:14px 0 7px; }
.ss-mini-progress span { display:block; height:100%; background:linear-gradient(90deg,var(--ss-blue),var(--ss-green)); border-radius:inherit; }

.ss-dashboard-head { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:28px; }
.ss-dashboard-head h1 { margin:6px 0; font-size:clamp(34px,4vw,48px); }
.ss-dashboard-head p { margin:0; color:var(--ss-muted); }
.ss-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.ss-stat { background:#fff; border:1px solid var(--ss-line); border-radius:15px; padding:20px; }
.ss-stat strong { display:block; font-size:30px; color:var(--ss-ink); line-height:1.1; }
.ss-stat span { display:block; margin-top:6px; color:var(--ss-muted); font-size:13px; }
.ss-next-card { display:flex; justify-content:space-between; align-items:center; gap:25px; margin-top:20px; border-left:5px solid var(--ss-green); }
.ss-next-card h2 { margin:5px 0; }
.ss-dashboard-courses { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.ss-dashboard-course { background:#fff; border:1px solid var(--ss-line); border-radius:16px; padding:22px; }
.ss-dashboard-course h3 { margin:10px 0; }
.ss-progress-row { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; }
.ss-actions { margin-top:14px; }

.ss-lesson-intro { background:linear-gradient(135deg,#eff6ff,#f8fafc); border:1px solid #dbeafe; border-radius:16px; padding:22px; margin-bottom:30px; }
.ss-lesson-intro p { margin:7px 0 0; font-size:18px; font-weight:700; color:#1e3a8a; }
.ss-example-list { display:grid; gap:10px; margin:15px 0 25px; }
.ss-example-list p { position:relative; margin:0; padding:16px 80px 16px 17px; border:1px solid var(--ss-line); background:#f8fafc; border-radius:12px; }
.ss-listen-btn { position:absolute; right:10px; top:50%; transform:translateY(-50%); border:1px solid #bfdbfe; color:#1d4ed8; background:#eff6ff; border-radius:999px; padding:6px 10px; font-weight:800; cursor:pointer; }
.ss-vocab-table { border:1px solid var(--ss-line); border-radius:14px; overflow:hidden; margin:15px 0 25px; }
.ss-vocab-row { display:grid; grid-template-columns:160px 1fr; gap:15px; padding:13px 16px; border-top:1px solid var(--ss-line); }
.ss-vocab-row:first-child { border-top:0; }
.ss-vocab-head { background:#f8fafc; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ss-muted); font-weight:900; }
.ss-practice-callout { padding:18px; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; border-radius:14px; }
.ss-bangla-explanation { margin:22px 0; padding:22px; border-radius:16px; background:linear-gradient(135deg,#eef2ff,#f8fafc); border:1px solid #c7d2fe; }
.ss-bangla-explanation p { margin:8px 0 0; color:#312e81; font-size:17px; line-height:1.85; }
.ss-dialogue { display:grid; gap:9px; padding:20px; border:1px solid var(--ss-line); border-radius:15px; background:#f8fafc; }
.ss-dialogue p { position:relative; margin:0; padding:13px 78px 13px 15px; background:white; border:1px solid var(--ss-line); border-radius:10px; }
.ss-writing-task, .ss-homework { padding:18px 20px; border-radius:14px; border-left:5px solid var(--ss-blue); background:#eff6ff; color:#1e3a8a; }
.ss-homework { border-left-color:var(--ss-yellow); background:#fffbeb; color:#854d0e; }
.ss-quiz-card { margin-top:34px; }
.ss-quiz-head { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.ss-score-badge { background:#f1f5f9; color:#334155; border-radius:999px; padding:7px 11px; font-weight:900; font-size:13px; }
.ss-quiz-form { display:grid; gap:18px; }
.ss-question { border:0; padding:0; margin:0; display:grid; gap:9px; }
.ss-question legend { font-size:17px; font-weight:900; margin-bottom:8px; color:var(--ss-ink); }
.ss-question label { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--ss-line); border-radius:11px; padding:12px 13px; cursor:pointer; background:#fff; }
.ss-question label:hover { border-color:#93c5fd; background:#eff6ff; }
.ss-question input { margin-top:4px; }
.ss-complete-box { margin-top:18px; padding:20px 22px; background:#ecfdf5; border:1px solid #bbf7d0; border-radius:16px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.ss-complete-box strong, .ss-complete-box span { display:block; }
.ss-complete-box strong { color:#166534; font-size:18px; }
.ss-complete-box span { color:#15803d; margin-top:3px; }
.ss-complete-check { width:42px; height:42px; border-radius:50%; background:#16a34a; color:white !important; display:grid !important; place-items:center; font-size:24px; }
.ss-lock { border-left:5px solid var(--ss-yellow); }

.ss-test-shell { max-width:780px; margin:40px auto; }
.ss-test-intro, .ss-test-question, .ss-test-result { background:#fff; border:1px solid var(--ss-line); border-radius:22px; padding:clamp(28px,6vw,52px); box-shadow:var(--ss-shadow); }
.ss-test-intro h1, .ss-test-result h1 { font-size:clamp(34px,5vw,52px); line-height:1.05; margin:10px 0 18px; }
.ss-test-intro p, .ss-test-result p { color:var(--ss-muted); font-size:17px; }
.ss-test-meta { display:flex; justify-content:space-between; gap:10px; color:var(--ss-muted); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.ss-test-progress { height:9px; border-radius:999px; background:#e2e8f0; overflow:hidden; margin:12px 0 30px; }
.ss-test-progress span { display:block; height:100%; background:linear-gradient(90deg,var(--ss-blue),var(--ss-green)); transition:width .25s ease; }
.ss-test-question h2 { font-size:26px; line-height:1.35; }
.ss-test-options { display:grid; gap:11px; margin:22px 0; }
.ss-test-option { text-align:left; border:2px solid var(--ss-line); background:#fff; color:#334155; border-radius:12px; padding:15px 16px; font:inherit; font-weight:700; cursor:pointer; }
.ss-test-option:hover, .ss-test-option.is-selected { border-color:var(--ss-blue); background:#eff6ff; color:#1e3a8a; }

.ss-roadmap { display:grid; gap:15px; }
.ss-roadmap-step { display:grid; grid-template-columns:56px 1fr; gap:18px; align-items:start; background:#fff; border:1px solid var(--ss-line); border-radius:16px; padding:20px; }
.ss-roadmap-index { width:56px; height:56px; display:grid; place-items:center; border-radius:16px; background:var(--ss-ink); color:white; font-size:20px; font-weight:900; }
.ss-roadmap-step h3 { margin:9px 0 4px; }
.ss-roadmap-step p { margin:0; color:var(--ss-muted); }

.ss-hero { display:grid; grid-template-columns:1.25fr .75fr; gap:35px; align-items:center; background:linear-gradient(135deg,#0f172a,#1e3a8a 55%,#2563eb); color:#fff; border-radius:28px; padding:clamp(34px,7vw,78px); overflow:hidden; box-shadow:0 30px 80px rgba(15,23,42,.2); }
.ss-hero h1 { font-size:clamp(44px,7vw,74px); line-height:.98; letter-spacing:-.04em; margin:10px 0 22px; color:white; }
.ss-hero-copy>p { max-width:720px; color:#dbeafe; font-size:18px; }
.ss-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.ss-hero-card { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(12px); padding:26px; border-radius:20px; }
.ss-hero-card>span { font-size:11px; letter-spacing:.12em; font-weight:900; color:#bfdbfe; }
.ss-hero-card>strong { display:block; font-size:19px; line-height:1.5; margin:10px 0 18px; }
.ss-hero-card ul { margin:0; padding-left:20px; color:#dbeafe; }
.ss-home-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--ss-line); border:1px solid var(--ss-line); border-radius:18px; overflow:hidden; margin:28px 0 70px; }
.ss-home-stats div { background:white; padding:22px; text-align:center; }
.ss-home-stats strong { display:block; font-size:28px; }
.ss-home-stats span { color:var(--ss-muted); font-size:13px; }
.ss-home-section { margin:70px 0; }
.ss-feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.ss-feature-grid article { background:white; border:1px solid var(--ss-line); border-radius:16px; padding:22px; }
.ss-feature-grid article>span { color:var(--ss-blue); font-weight:900; font-size:12px; }
.ss-feature-grid h3 { margin:10px 0 7px; }
.ss-feature-grid p { margin:0; color:var(--ss-muted); }
.ss-practice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.ss-practice-grid .ss-speak-text { position:relative; padding-right:74px; }

.ss-certificate-wrap { text-align:center; padding:25px 0; }
.ss-certificate { max-width:900px; margin:0 auto 22px; border:14px solid #0f172a; outline:2px solid #d4a72c; outline-offset:-22px; background:#fffef8; padding:70px 55px; text-align:center; }
.ss-cert-brand { font-size:28px; font-weight:900; color:#1d4ed8; }
.ss-cert-rule { width:70px; height:3px; background:#d4a72c; margin:18px auto; }
.ss-certificate>span { font-size:12px; font-weight:900; letter-spacing:.18em; color:#64748b; }
.ss-certificate h1 { font-family:Georgia,serif; font-size:52px; margin:28px 0 8px; }
.ss-certificate h2 { font-size:28px; margin:8px 0; }
.ss-cert-level { color:#64748b; }
.ss-cert-footer { display:flex; justify-content:space-between; gap:30px; margin-top:60px; border-top:1px solid #cbd5e1; padding-top:20px; }
.ss-cert-footer span { font-weight:900; }
.ss-cert-footer small { display:block; color:#64748b; margin-top:5px; font-weight:500; }

.ss-access-card { display:flex; flex-direction:column; justify-content:center; gap:10px; color:white; }
.ss-access-card>span { color:#bfdbfe; font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.ss-access-card>strong { color:white; font-size:clamp(34px,5vw,50px); line-height:1.05; }
.ss-access-card>p { color:#dbeafe; margin:0 0 8px; }
.ss-access-free, .ss-access-enrolled { min-height:180px; }
.ss-muted-light { color:#cbd5e1; font-size:13px; }
.ss-paywall { text-align:center; margin:12px 0; padding:clamp(30px,6vw,58px); border:1px solid #c7d2fe; border-radius:20px; background:linear-gradient(135deg,#eef2ff,#f8fafc); }
.ss-paywall>span { color:#4f46e5; font-size:11px; font-weight:900; letter-spacing:.13em; }
.ss-paywall h2 { margin:8px 0 10px; color:var(--ss-ink); }
.ss-paywall p { max-width:620px; margin:0 auto 22px; color:var(--ss-muted); }
.ss-checkout-grid { display:grid; grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr); gap:24px; max-width:1050px; margin:20px auto; }
.ss-order-summary { background:linear-gradient(145deg,#0f172a,#1e3a8a); color:white; }
.ss-order-summary .ss-kicker { color:#93c5fd; }
.ss-order-summary h1 { margin:10px 0; color:white; font-size:clamp(30px,4vw,44px); line-height:1.08; }
.ss-order-summary>p { color:#bfdbfe; }
.ss-order-summary>strong { display:block; margin:16px 0; font-size:44px; color:white; }
.ss-order-summary ul { padding-left:20px; color:#dbeafe; }
.ss-payment-steps { margin:18px 0; padding:18px; border-radius:14px; background:#f8fafc; border:1px solid var(--ss-line); }
.ss-payment-steps ol { margin:0; padding-left:22px; }
.ss-payment-steps li { margin:8px 0; }
.ss-safety-check { display:flex !important; grid-template-columns:auto 1fr; align-items:flex-start; gap:10px !important; padding:13px; border-radius:10px; background:#fffbeb; color:#854d0e !important; }
.ss-safety-check input { width:auto !important; margin-top:5px; }
.ss-support-line { color:var(--ss-muted); font-size:13px; }
.ss-order-list { display:grid; gap:10px; }
.ss-order-row { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:16px 18px; border:1px solid var(--ss-line); border-radius:13px; background:white; }
.ss-order-row strong, .ss-order-row span { display:block; }
.ss-order-row div>span { color:var(--ss-muted); font-size:12px; margin-top:3px; }
.ss-order-status { padding:7px 11px; border-radius:999px; font-size:12px; font-weight:900; }
.ss-order-status.is-pending { background:#fffbeb; color:#92400e; }
.ss-order-status.is-approved { background:#ecfdf5; color:#166534; }
.ss-order-status.is-rejected, .ss-order-status.is-refunded { background:#fef2f2; color:#991b1b; }

@media (max-width: 960px) {
    .ss-course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ss-stat-grid, .ss-home-stats, .ss-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ss-hero { grid-template-columns:1fr; }
    .ss-checkout-grid { grid-template-columns:1fr; }
}

@media (max-width: 680px) {
    .ss-auth-grid, .ss-dashboard-courses, .ss-practice-grid, .ss-course-grid { grid-template-columns:1fr; }
    .ss-stat-grid { grid-template-columns:1fr 1fr; }
    .ss-dashboard-head, .ss-next-card, .ss-complete-box { align-items:stretch; flex-direction:column; }
    .ss-roadmap-step { grid-template-columns:42px 1fr; }
    .ss-roadmap-index { width:42px; height:42px; border-radius:12px; }
    .ss-vocab-row { grid-template-columns:110px 1fr; }
    .ss-home-stats, .ss-feature-grid { grid-template-columns:1fr; }
    .ss-hero { border-radius:20px; }
    .ss-cert-footer { flex-direction:column; }
    .ss-certificate { padding:45px 24px; }
    .ss-certificate h1 { font-size:38px; }
}

@media print {
    body * { visibility:hidden !important; }
    .ss-certificate, .ss-certificate * { visibility:visible !important; }
    .ss-certificate { position:absolute; left:0; top:0; width:100%; max-width:none; box-sizing:border-box; margin:0; }
    .ss-no-print { display:none !important; }
}