/* ===== app.css — extracted from index.html (block 1: main styles) ===== */
* { font-family: 'Gotu', sans-serif !important; }
body { background-color: #fff0e4; margin: 0; padding: 0; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
/* ⭐ Premium Header Design ⭐ */
.app-header { background: radial-gradient(circle at 28% -16%, rgba(99, 102, 241, 0.48), transparent 36%), radial-gradient(circle at 92% 92%, rgba(245, 158, 11, 0.18), transparent 28%), linear-gradient(135deg, #071b34 0%, #11194d 54%, #070b24 100%); color: white; padding: max(9px, env(safe-area-inset-top)) 12px 10px; position: sticky; top: 0; z-index: 50; box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.72); display: flex; justify-content: space-between; align-items: center; border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; margin-bottom: 0px !important; overflow: hidden; gap: 8px; transform: translateY(0); transition: transform 0.28s ease, box-shadow 0.22s ease, padding 0.22s ease; will-change: transform; }
.app-header::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,0.28) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(245, 197, 66, 0.16) 0 1px, transparent 1.7px); background-size: 16px 16px, 28px 28px; background-position: 0 0, 10px 13px; opacity: 0.34; }
.app-header > * { position: relative; z-index: 1; }
.app-header.header-hidden { transform: translateY(calc(-100% - 16px)); box-shadow: none; }
.app-header.header-is-scrolled { box-shadow: 0 10px 22px -14px rgba(15, 23, 42, 0.78); }
body.quiz-active .app-header { display: none !important; }
body.quiz-active,
body.quiz-active #quiz-screen {
background: #ffffff !important;
}
body.quiz-active #quiz-screen {
min-height: 100dvh;
box-sizing: border-box;
}
body.info-modal-open .app-header { visibility: hidden; pointer-events: none; }
.app-brand { min-width: 0; overflow: hidden; }
.app-brand-logo { width: 60px; height: 60px; }
.app-brand-copy { min-width: 0; overflow: hidden; }
.app-brand-title { min-width: 0; white-space: nowrap; overflow: hidden; }
.app-actions { min-width: 0; max-width: 132px; }
.app-auth-row { min-width: 0; max-width: 100%; }
#nav-timer { max-width: 128px; overflow: hidden; }
.app-timer-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⭐ Test Gateway Modal - premium decision UI ⭐ */
.gateway-modal {
background:
radial-gradient(circle at 14% 16%, rgba(245, 158, 11, 0.22), transparent 26%),
radial-gradient(circle at 88% 88%, rgba(16, 185, 129, 0.18), transparent 28%),
linear-gradient(135deg, rgba(7, 18, 63, 0.78), rgba(15, 23, 42, 0.82));
padding-bottom: 96px !important;
box-sizing: border-box;
backdrop-filter: blur(12px) saturate(1.04);
-webkit-backdrop-filter: blur(12px) saturate(1.04);
}
.gateway-panel {
position: relative;
overflow: hidden;
border: 2px solid rgba(214, 168, 31, 0.38);
background:
radial-gradient(circle at 92% 6%, rgba(251, 191, 36, 0.18), transparent 28%),
linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
box-shadow:
0 34px 80px -36px rgba(2, 6, 23, 0.92),
0 0 0 8px rgba(255, 255, 255, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
.gateway-panel::before {
content: "";
position: absolute;
inset: 10px;
border-radius: 26px;
border: 1px solid rgba(218, 165, 76, 0.20);
pointer-events: none;
z-index: 0;
}
.gateway-panel > * {
position: relative;
z-index: 1;
}
.gateway-close-btn {
position: absolute;
top: 16px;
right: 16px;
z-index: 4;
width: 42px;
height: 42px;
border-radius: 999px;
background: #ffffff;
color: #334155;
border: 2px solid rgba(203, 213, 225, 0.95);
box-shadow: 0 14px 26px -20px rgba(15, 23, 42, 0.78);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.16s ease, color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.gateway-close-btn:active {
transform: scale(0.94);
}
.gateway-close-btn:hover {
color: #ef4444;
background: #fff1f2;
border-color: #fecdd3;
}
.gateway-hero {
margin: -4px -4px 16px;
padding: 16px 18px 15px;
border-radius: 28px;
color: #ffffff;
text-align: center;
background:
linear-gradient(90deg, rgba(255,255,255,0.13), transparent 24%, rgba(255,255,255,0.10) 76%, transparent),
radial-gradient(circle at 15% 20%, rgba(245, 197, 66, 0.34), transparent 28%),
radial-gradient(circle at 86% 18%, rgba(45, 212, 191, 0.20), transparent 30%),
linear-gradient(135deg, #07123f 0%, #11194d 48%, #0b1536 100%);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.20),
0 18px 32px -26px rgba(7, 18, 63, 0.96);
}
.gateway-hero-icon {
width: 56px;
height: 56px;
margin: 0 auto 12px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #4b3218;
background:
linear-gradient(145deg, #fff7d6 0%, #f6c84f 58%, #b98743 100%);
border: 2px solid rgba(255,255,255,0.44);
box-shadow:
0 16px 30px -18px rgba(0,0,0,0.70),
inset 0 2px 0 rgba(255,255,255,0.72);
}
.gateway-kicker {
display: inline-flex;
align-items: center;
gap: 7px;
margin-bottom: 8px;
padding: 6px 10px;
border-radius: 999px;
color: #fde68a;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(253, 230, 138, 0.28);
font-size: 9px;
font-weight: 900;
letter-spacing: 0.8px;
text-transform: uppercase;
}
.gateway-kicker::before {
content: "";
width: 7px;
height: 7px;
border-radius: 999px;
background: #34d399;
box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.16);
}
.gateway-title {
color: #ffffff;
font-size: 1.86rem;
font-weight: 900;
line-height: 1.1;
margin: 0;
text-shadow: 0 2px 8px rgba(0,0,0,0.28);
}
.gateway-subtitle {
color: #dbeafe;
font-size: 0.82rem;
font-weight: 800;
line-height: 1.35;
margin-top: 8px;
}
.gateway-choice {
width: 100%;
position: relative;
overflow: hidden;
display: flex;
align-items: stretch;
gap: 12px;
padding: 12px 14px;
border-radius: 26px;
border: 2px solid rgba(226, 232, 240, 0.96);
text-align: left;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.gateway-choice::after {
content: "";
position: absolute;
top: -55px;
right: -44px;
width: 126px;
height: 126px;
border-radius: 999px;
opacity: 0.38;
pointer-events: none;
}
.gateway-choice:active {
transform: scale(0.985);
}
.gateway-choice:hover {
transform: translateY(-2px);
box-shadow: 0 22px 38px -26px rgba(30, 41, 59, 0.82);
}
.gateway-choice-icon {
width: 58px;
min-height: 66px;
border-radius: 22px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 29px;
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow:
0 14px 24px -18px rgba(15, 23, 42, 0.86),
inset 0 1px 0 rgba(255,255,255,0.76);
}
.gateway-choice-copy {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 5px;
}
.gateway-choice-chip {
width: fit-content;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: 999px;
font-size: 8.5px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.7px;
line-height: 1;
}
.gateway-choice-title {
color: #0f172a;
font-size: 15px;
font-weight: 900;
line-height: 1.24;
}
.gateway-choice-desc {
color: #334155;
font-size: 11px;
font-weight: 800;
line-height: 1.36;
}
.gateway-feature-row {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 2px;
}
.gateway-feature {
display: inline-flex;
align-items: center;
min-height: 21px;
padding: 4px 8px;
border-radius: 999px;
color: #334155;
background: rgba(255,255,255,0.72);
border: 1px solid rgba(226, 232, 240, 0.82);
font-size: 8.4px;
font-weight: 900;
line-height: 1;
}
.gateway-choice-arrow {
align-self: center;
width: 31px;
height: 31px;
border-radius: 999px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 25px;
font-weight: 900;
color: #ffffff;
background: #11194d;
box-shadow: 0 10px 18px -13px rgba(15,23,42,0.88);
line-height: 1;
transition: transform 0.2s ease, color 0.2s ease;
}
.gateway-choice:hover .gateway-choice-arrow {
transform: translateX(2px);
}
.gateway-choice-theory {
background:
linear-gradient(90deg, rgba(37, 99, 235, 0.08), transparent 42%),
linear-gradient(145deg, #ffffff 0%, #eff6ff 100%);
border-color: rgba(147, 197, 253, 0.92);
box-shadow: inset 5px 0 0 #d6a81f;
}
.gateway-choice-theory::after {
background: #bfdbfe;
}
.gateway-choice-theory .gateway-choice-icon {
background: linear-gradient(145deg, #eef2ff, #bfdbfe);
}
.gateway-choice-theory .gateway-choice-chip {
color: #1e3a8a;
border: 1px solid #93c5fd;
background: #dbeafe;
}
.gateway-choice-theory:hover {
border-color: #3b82f6;
background:
linear-gradient(90deg, rgba(37, 99, 235, 0.13), transparent 42%),
linear-gradient(145deg, #f8fbff 0%, #dbeafe 100%);
}
.gateway-choice-theory:hover .gateway-choice-title {
color: #1e3a8a;
}
.gateway-choice-theory:hover .gateway-choice-desc,
.gateway-choice-theory:hover .gateway-choice-arrow {
color: #334155;
}
.gateway-choice-theory:hover .gateway-choice-arrow {
color: #ffffff;
background: #2563eb;
}
.gateway-choice-quiz {
background:
linear-gradient(90deg, rgba(5, 150, 105, 0.09), transparent 42%),
linear-gradient(145deg, #ffffff 0%, #ecfdf5 100%);
border-color: rgba(110, 231, 183, 0.95);
box-shadow: inset 5px 0 0 #10b981;
}
.gateway-choice-quiz::after {
background: #bbf7d0;
}
.gateway-choice-quiz .gateway-choice-icon {
background: linear-gradient(145deg, #f0fdf4, #bbf7d0);
}
.gateway-choice-quiz .gateway-choice-chip {
color: #065f46;
border: 1px solid #99f6e4;
background: #ecfdf5;
}
.gateway-choice-quiz:hover {
border-color: #34d399;
background: linear-gradient(140deg, #ecfdf5, #d1fae5);
}
.gateway-choice-quiz:hover .gateway-choice-title {
color: #065f46;
}
.gateway-choice-quiz:hover .gateway-choice-desc,
.gateway-choice-quiz:hover .gateway-choice-arrow {
color: #1f2937;
}
.gateway-choice-quiz:hover .gateway-choice-arrow {
color: #ffffff;
background: #059669;
}
.gateway-tip {
margin-top: 12px;
text-align: center;
color: #70450d;
font-size: 10px;
font-weight: 900;
line-height: 1.45;
padding: 9px 12px;
border-radius: 18px;
border: 1px solid rgba(218, 165, 76, 0.40);
background:
linear-gradient(135deg, rgba(255, 247, 229, 0.98), rgba(255, 251, 235, 0.80));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.86);
}
/* ⭐ Premium CTA button — हर card के अंदर साफ़ action */
.gateway-choice-cta {
display: inline-flex;
align-items: center;
gap: 6px;
width: fit-content;
margin-top: 10px;
padding: 8px 16px;
border-radius: 999px;
color: #ffffff;
font-size: 11.5px;
font-weight: 900;
letter-spacing: 0.2px;
line-height: 1;
box-shadow: 0 14px 24px -15px rgba(15, 23, 42, 0.75), inset 0 1px 0 rgba(255,255,255,0.28);
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.gateway-choice-cta .cta-arrow {
font-size: 14px;
transition: transform 0.18s ease;
}
.gateway-choice:hover .gateway-choice-cta {
filter: brightness(1.06);
}
.gateway-choice:hover .gateway-choice-cta .cta-arrow {
transform: translateX(3px);
}
.gateway-choice:active .gateway-choice-cta {
transform: scale(0.97);
}
.gateway-choice-theory .gateway-choice-cta {
background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
}
.gateway-choice-quiz .gateway-choice-cta {
background: linear-gradient(135deg, #10b981 0%, #047857 100%);
}
/* ⭐ Recommended card — premium hierarchy (golden glow + badge) */
.gateway-choice-recommended {
border-color: rgba(214, 168, 31, 0.85) !important;
box-shadow:
inset 5px 0 0 #d6a81f,
0 0 0 2px rgba(214, 168, 31, 0.30),
0 26px 50px -30px rgba(37, 99, 235, 0.60);
animation: gatewayRecommendedGlow 3s ease-in-out infinite;
}
@keyframes gatewayRecommendedGlow {
0%, 100% {
box-shadow:
inset 5px 0 0 #d6a81f,
0 0 0 2px rgba(214, 168, 31, 0.26),
0 22px 44px -30px rgba(37, 99, 235, 0.50);
}
50% {
box-shadow:
inset 5px 0 0 #d6a81f,
0 0 0 3px rgba(214, 168, 31, 0.52),
0 30px 56px -28px rgba(37, 99, 235, 0.72);
}
}
.gateway-choice-recommended .gateway-choice-chip {
color: #5b3c0a !important;
background: linear-gradient(135deg, #fde68a, #f6c84f) !important;
border: 1px solid rgba(180, 130, 30, 0.55) !important;
box-shadow: 0 6px 14px -8px rgba(180, 130, 30, 0.8);
}
/* ✨ Recommended card पर premium shine sweep */
.gateway-choice-recommended .gateway-choice-copy,
.gateway-choice-recommended .gateway-choice-icon {
position: relative;
z-index: 2;
}
.gateway-choice-recommended::before {
content: "";
position: absolute;
top: 0;
left: -65%;
width: 42%;
height: 100%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
transform: skewX(-18deg);
pointer-events: none;
z-index: 1;
animation: gatewayShine 4.6s ease-in-out infinite;
}
@keyframes gatewayShine {
0% { left: -65%; }
58%, 100% { left: 135%; }
}
/* ✨ CTA button — चलता हुआ gradient shimmer */
.gateway-choice-cta {
background-size: 220% 100%;
animation: gatewayCtaShimmer 3.6s linear infinite;
}
.gateway-choice-theory .gateway-choice-cta {
background-image: linear-gradient(110deg, #1e3a8a 0%, #3b82f6 50%, #1e3a8a 100%);
}
.gateway-choice-quiz .gateway-choice-cta {
background-image: linear-gradient(110deg, #047857 0%, #10b981 50%, #047857 100%);
}
@keyframes gatewayCtaShimmer {
0% { background-position: 0% 0; }
100% { background-position: 220% 0; }
}
/* ✨ Feature chips — refined glassy look */
.gateway-feature {
background: linear-gradient(180deg, #ffffff, #f1f5f9);
box-shadow: 0 2px 5px -3px rgba(15, 23, 42, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.gateway-choice-recommended .gateway-feature {
color: #6b4a12;
border-color: rgba(214, 168, 31, 0.42);
background: linear-gradient(180deg, #fffdf5, #fef3c7);
}
/* ✨ Hero icon के चारों ओर pulsing halo */
.gateway-hero-icon {
position: relative;
}
.gateway-hero-icon::after {
content: "";
position: absolute;
inset: -6px;
border-radius: inherit;
border: 2px solid rgba(246, 200, 79, 0.55);
pointer-events: none;
animation: gatewayIconPulse 2.6s ease-out infinite;
}
@keyframes gatewayIconPulse {
0% { transform: scale(1); opacity: 0.75; }
100% { transform: scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.gateway-choice-recommended,
.gateway-choice-recommended::before,
.gateway-choice-cta,
.gateway-hero-icon::after {
animation: none;
}
}
@media (max-width: 640px) {
.gateway-panel {
max-height: calc(100dvh - 118px);
overflow-y: auto;
border-radius: 29px !important;
padding: 15px 13px !important;
}
.gateway-hero {
margin: -2px -2px 12px;
padding: 16px 12px 14px;
border-radius: 24px;
}
.gateway-hero-icon {
width: 54px;
height: 54px;
border-radius: 18px;
font-size: 26px;
margin-bottom: 9px;
}
.gateway-title {
font-size: 1.62rem;
}
.gateway-subtitle {
font-size: 0.73rem;
}
.gateway-choice {
padding: 11px 12px;
border-radius: 22px;
gap: 9px;
}
.gateway-choice-icon {
width: 48px;
min-height: 70px;
border-radius: 17px;
font-size: 22px;
}
.gateway-choice-title {
font-size: 12.8px;
}
.gateway-choice-desc {
font-size: 10.4px;
}
.gateway-feature-row {
gap: 5px;
}
.gateway-feature {
min-height: 21px;
padding: 4px 7px;
font-size: 8px;
}
.gateway-choice-arrow {
width: 27px;
height: 27px;
font-size: 21px;
}
.gateway-tip {
font-size: 9.4px;
padding: 9px 10px;
}
.gateway-choice-cta {
font-size: 10.5px;
padding: 7px 13px;
margin-top: 9px;
}
.gateway-choice-cta .cta-arrow {
font-size: 13px;
}
}
/* ⭐ Mandatory Smart Revision Reminder ⭐ */
.revision-premium-shell {
isolation: isolate;
border: 1.8px solid rgba(254, 202, 202, 0.72);
background:
radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.24), transparent 30%),
radial-gradient(circle at 88% 8%, rgba(254, 226, 226, 0.36), transparent 34%),
linear-gradient(145deg, rgba(248, 82, 82, 0.88) 0%, rgba(255, 109, 87, 0.84) 48%, rgba(255, 203, 158, 0.76) 118%);
box-shadow:
0 30px 58px -30px rgba(185, 28, 28, 0.64),
0 0 0 5px rgba(254, 226, 226, 0.30),
inset 0 0 0 1px rgba(255,255,255,0.42),
inset 0 -18px 40px rgba(185, 28, 28, 0.14);
}
.revision-premium-shell::before {
content: '';
position: absolute;
inset: 9px;
z-index: 0;
border-radius: 28px;
border: 1px solid rgba(254, 226, 226, 0.36);
background:
radial-gradient(circle at 10% 16%, rgba(255,255,255,0.16), transparent 24%),
linear-gradient(135deg, rgba(255,255,255,0.16), transparent 40%, rgba(255,228,228,0.24));
pointer-events: none;
}
.revision-premium-shell::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.34;
background-image:
repeating-linear-gradient(135deg, rgba(255,255,255,0.13) 0 1px, transparent 1px 13px),
radial-gradient(circle, rgba(255,255,255,0.50) 0 1px, transparent 1.5px),
linear-gradient(180deg, transparent 0 66%, rgba(255, 245, 245, 0.24) 100%);
background-size: 100% 100%, 16px 16px, 100% 100%;
background-position: 0 0, 0 0, 0 0;
}
.revision-schedule-panel {
background:
linear-gradient(180deg, rgba(255,255,255,0.22), transparent 48%),
linear-gradient(135deg, rgba(127, 29, 29, 0.96) 0%, rgba(220, 38, 38, 0.94) 46%, rgba(251, 113, 133, 0.86) 88%, rgba(249, 115, 22, 0.82) 140%);
border: 1.5px solid rgba(254, 226, 226, 0.58);
box-shadow:
0 20px 30px -21px rgba(127, 29, 29, 0.86),
inset 0 1px 0 rgba(255,255,255,0.34),
inset 0 -10px 24px rgba(127, 29, 29, 0.16);
}
.revision-title-kicker {
display: block;
color: #ffe4e6;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.8px;
text-transform: uppercase;
line-height: 1;
margin-bottom: 4px;
text-shadow: 0 2px 7px rgba(127, 29, 29, 0.38);
}
.revision-schedule-title {
color: #ffffff;
font-size: clamp(11px, 3.1vw, 14px);
font-weight: 900;
line-height: 1.18;
letter-spacing: 0.2px;
text-align: center;
text-shadow: 0 2px 8px rgba(69, 10, 10, 0.32);
}
.revision-mandatory-badge {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 7px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.52);
background: rgba(255, 255, 255, 0.20);
color: #ffffff;
font-size: 8px;
font-weight: 900;
letter-spacing: 0.9px;
line-height: 1;
text-transform: uppercase;
box-shadow:
0 8px 16px -12px rgba(69, 10, 10, 0.78),
inset 0 1px 0 rgba(255,255,255,0.36);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.revision-card-premium {
--revision-accent: #dc2626;
--revision-accent-strong: #7f1d1d;
--revision-accent-soft: rgba(248, 113, 113, 0.14);
--revision-border: rgba(248, 113, 113, 0.38);
--revision-chip-bg: rgba(255, 241, 242, 0.96);
--revision-shadow: rgba(127, 29, 29, 0.78);
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 12px;
padding: 16px;
border-radius: 28px;
border: 1.5px solid var(--revision-border);
background:
radial-gradient(circle at 96% 0%, rgba(254, 202, 202, 0.34), transparent 28%),
linear-gradient(135deg, rgba(255,255,255,0.94) 0%, rgba(255,241,242,0.92) 58%, rgba(255,229,220,0.80) 100%);
box-shadow:
0 18px 32px -24px rgba(127, 29, 29, 0.58),
inset 0 1px 0 rgba(255,255,255,0.68);
}
.revision-card-premium.revision-theme-1 {
--revision-accent: #ef4444;
--revision-accent-strong: #7f1d1d;
--revision-accent-soft: rgba(239, 68, 68, 0.15);
--revision-border: rgba(248, 113, 113, 0.38);
--revision-chip-bg: rgba(255, 241, 242, 0.96);
--revision-shadow: rgba(127, 29, 29, 0.78);
}
.revision-card-premium.revision-theme-2 {
--revision-accent: #dc2626;
--revision-accent-strong: #7f1d1d;
--revision-accent-soft: rgba(220, 38, 38, 0.14);
--revision-border: rgba(248, 113, 113, 0.38);
--revision-chip-bg: rgba(255, 241, 242, 0.96);
--revision-shadow: rgba(127, 29, 29, 0.78);
}
.revision-card-premium.revision-theme-3 {
--revision-accent: #be123c;
--revision-accent-strong: #7f1d1d;
--revision-accent-soft: rgba(244, 63, 94, 0.15);
--revision-border: rgba(248, 113, 113, 0.38);
--revision-chip-bg: rgba(255, 241, 242, 0.96);
--revision-shadow: rgba(127, 29, 29, 0.78);
}
.revision-card-premium.revision-theme-4 {
--revision-accent: #fb7185;
--revision-accent-strong: #881337;
--revision-accent-soft: rgba(251, 113, 133, 0.15);
--revision-border: rgba(248, 113, 113, 0.38);
--revision-chip-bg: rgba(255, 241, 242, 0.96);
--revision-shadow: rgba(127, 29, 29, 0.78);
}
.revision-card-copy {
width: 100%;
min-width: 0;
}
.revision-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.revision-stage-chip {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid rgba(248, 113, 113, 0.36);
background: var(--revision-chip-bg);
color: var(--revision-accent-strong);
font-size: 8px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1;
}
.revision-card-title {
color: #1f1f2f;
font-size: clamp(14px, 4vw, 16px);
font-weight: 900;
line-height: 1.38;
letter-spacing: 0;
overflow-wrap: anywhere;
}
.revision-card-actions {
display: flex;
align-items: center;
justify-content: stretch;
gap: 8px;
width: 100%;
}
.revision-delete-btn {
position: static;
flex: 0 0 auto;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
color: #b7c0cc;
background: rgba(255,255,255,0.70);
border: 1px solid rgba(226, 232, 240, 0.95);
transition: transform 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.revision-delete-btn:active {
transform: scale(0.94);
color: #ef4444;
border-color: rgba(248, 113, 113, 0.45);
}
.revision-start-btn {
width: 100%;
min-height: 48px;
min-width: 0;
padding: 11px 18px;
border-radius: 18px;
color: white;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.8px;
line-height: 1.2;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
background: linear-gradient(135deg, var(--revision-accent-strong) 0%, var(--revision-accent) 68%, #fb923c 150%);
box-shadow: 0 14px 24px -14px var(--revision-shadow);
transition: transform 0.16s ease;
}
.revision-start-btn.is-unlocked {
color: #065f46;
letter-spacing: 0.5px;
background: linear-gradient(135deg, #ecfdf5 0%, #bbf7d0 55%, #86efac 100%);
border: 1px solid rgba(16, 185, 129, 0.45);
box-shadow: 0 14px 24px -16px rgba(16, 185, 129, 0.6), inset 0 1px 0 rgba(255,255,255,0.8);
}
.revision-start-btn:active {
transform: scale(0.96);
}
@media (max-width: 420px) {
.revision-card-premium {
padding: 15px;
gap: 10px;
}
.revision-card-actions {
justify-content: stretch;
}
.revision-delete-btn {
width: 26px;
height: 26px;
border-radius: 9px;
}
.revision-start-btn {
padding: 10px 13px;
border-radius: 16px;
}
}
/* ⭐ Smart Revision Info Popup ⭐ */
.smart-revision-modal {
position: fixed;
inset: 0;
z-index: 5000;
display: flex;
align-items: center;
justify-content: center;
padding: max(18px, calc(env(safe-area-inset-top) + 18px)) 18px max(96px, calc(env(safe-area-inset-bottom) + 84px));
overflow-y: auto;
background: rgba(15, 23, 42, 0.78);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.smart-revision-modal.hidden { display: none !important; }
.smart-revision-box {
width: min(440px, 100%);
max-height: min(88vh, calc(100dvh - 132px));
overflow-y: auto;
overscroll-behavior: contain;
background:
radial-gradient(circle at 10% 0%, rgba(79, 70, 229, 0.16), transparent 30%),
linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid #e0e7ff;
border-radius: 34px;
box-shadow: 0 30px 80px -35px rgba(0, 0, 0, 0.65);
padding: 22px;
position: relative;
}
.smart-revision-close {
position: absolute;
top: 14px;
right: 14px;
z-index: 12;
width: 34px;
height: 34px;
border-radius: 999px;
background: #f1f5f9;
color: #64748b;
font-size: 18px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e2e8f0;
cursor: pointer;
}
.smart-revision-label {
display: inline-flex;
align-items: center;
gap: 7px;
color: #4f46e5;
background: #eef2ff;
border: 1px solid #e0e7ff;
border-radius: 999px;
padding: 7px 11px;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
}
.smart-revision-title {
margin: 14px 0 8px;
color: #0f172a;
font-size: 24px;
line-height: 1.15;
font-weight: 900;
}
.smart-revision-text {
color: #475569;
font-size: 13px;
line-height: 1.65;
font-weight: 700;
}
.smart-revision-timeline {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
margin: 18px 0;
}
.smart-revision-day {
text-align: center;
padding: 10px 4px;
border-radius: 16px;
background: #ffffff;
border: 1px solid #e2e8f0;
color: #1e40af;
font-size: 10px;
font-weight: 900;
box-shadow: 0 10px 20px -18px rgba(15, 23, 42, 0.55);
}
.smart-revision-list {
display: grid;
gap: 10px;
margin-top: 16px;
}
.smart-revision-point {
display: flex;
gap: 10px;
padding: 12px;
border-radius: 18px;
background: #ffffff;
border: 1px solid #edf2f7;
}
.smart-revision-check {
width: 24px;
height: 24px;
border-radius: 10px;
background: #ecfdf5;
color: #059669;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
flex-shrink: 0;
}
.smart-revision-point strong {
display: block;
color: #0f172a;
font-size: 12px;
font-weight: 900;
margin-bottom: 3px;
}
.smart-revision-point span {
display: block;
color: #64748b;
font-size: 11px;
line-height: 1.45;
font-weight: 700;
}
.theory-podcast-box {
background:
radial-gradient(circle at 10% 0%, rgba(245, 158, 11, 0.16), transparent 30%),
radial-gradient(circle at 92% 0%, rgba(17, 25, 77, 0.10), transparent 28%),
linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border-color: rgba(222, 199, 151, 0.72);
}
.theory-podcast-label {
color: #8a5a16;
background: #fff7e6;
border-color: rgba(222, 199, 151, 0.64);
}
.theory-podcast-check {
background: linear-gradient(145deg, #fff0bf, #d6a85a 58%, #8a5b22);
color: #4d3214;
border: 1px solid rgba(255, 235, 180, 0.74);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
@media (max-width: 640px) {
.smart-revision-modal {
align-items: center;
padding: max(68px, calc(env(safe-area-inset-top) + 60px)) 10px max(24px, calc(env(safe-area-inset-bottom) + 12px));
}
.smart-revision-box {
width: min(94vw, 440px);
max-height: calc(100dvh - 92px);
border-radius: 28px;
padding: 18px 14px;
}
.smart-revision-close {
top: 10px;
right: 10px;
width: 38px;
height: 38px;
font-size: 20px;
}
.smart-revision-label {
max-width: calc(100% - 48px);
line-height: 1.2;
}
}
.revision-lock-modal {
position: fixed;
inset: 0;
z-index: 280;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background:
radial-gradient(circle at 50% 18%, rgba(245, 197, 66, 0.16), transparent 28%),
radial-gradient(circle at 16% 86%, rgba(79, 70, 229, 0.30), transparent 34%),
linear-gradient(135deg, rgba(5, 12, 42, 0.92), rgba(17, 25, 77, 0.84));
backdrop-filter: blur(22px) saturate(1.15);
-webkit-backdrop-filter: blur(22px) saturate(1.15);
}
.revision-lock-modal.hidden { display: none !important; }
.revision-lock-card {
width: min(500px, 100%);
position: relative;
overflow: hidden;
padding: 26px;
border-radius: 36px;
border: 2px solid rgba(245, 197, 66, 0.72);
background:
linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,250,240,0.96) 48%, rgba(239,246,255,0.98)),
radial-gradient(circle at 18% -12%, rgba(245, 197, 66, 0.26), transparent 38%);
box-shadow:
0 38px 100px -42px rgba(0, 0, 0, 0.82),
0 0 0 1px rgba(255, 255, 255, 0.50) inset,
0 0 40px rgba(245, 197, 66, 0.10);
}
.revision-lock-card::before {
content: "";
position: absolute;
left: 28px;
right: 28px;
top: 0;
height: 7px;
border-radius: 0 0 999px 999px;
background: linear-gradient(90deg, #11194d 0%, #4f46e5 48%, #f5c542 100%);
box-shadow: 0 8px 22px rgba(245, 197, 66, 0.28);
}
.revision-lock-card::after {
content: "";
position: absolute;
inset: 10px;
border-radius: 28px;
border: 1px solid rgba(17, 25, 77, 0.08);
pointer-events: none;
}
.revision-lock-head {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.revision-lock-mark {
width: 60px;
height: 60px;
flex: 0 0 60px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 22px;
color: #11194d;
background:
linear-gradient(145deg, #fff7cf 0%, #f5c542 58%, #9b6818 100%);
border: 2px solid rgba(255, 255, 255, 0.76);
box-shadow:
0 18px 32px -22px rgba(77, 50, 20, 0.95),
inset 0 1px 0 rgba(255,255,255,0.76);
}
.revision-lock-mark svg {
width: 32px;
height: 32px;
filter: drop-shadow(0 1px 0 rgba(255,255,255,0.42));
}
.revision-lock-kicker {
display: block;
margin-top: 6px;
color: #64748b;
font-size: 10px;
line-height: 1.2;
font-weight: 900;
letter-spacing: 0.9px;
text-transform: uppercase;
}
.revision-lock-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border-radius: 999px;
border: 1px solid rgba(245, 197, 66, 0.45);
background: rgba(255, 247, 223, 0.92);
color: #8a5a16;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.2px;
text-transform: uppercase;
box-shadow: 0 10px 18px -16px rgba(138, 90, 22, 0.7);
}
.revision-lock-badge::before {
content: "";
width: 7px;
height: 7px;
border-radius: 999px;
background: #ef4444;
box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.13);
}
.revision-lock-title {
position: relative;
z-index: 1;
margin: 0 0 10px;
color: #11194d;
font-size: clamp(25px, 5.8vw, 34px);
line-height: 1.08;
font-weight: 900;
letter-spacing: 0;
text-wrap: balance;
}
.revision-lock-text {
position: relative;
z-index: 1;
margin: 0;
padding: 14px 15px;
color: #334155;
font-size: 13.5px;
line-height: 1.7;
font-weight: 800;
border-radius: 20px;
border: 1px solid rgba(226, 232, 240, 0.9);
background: rgba(255, 255, 255, 0.72);
}
.revision-lock-benefits {
position: relative;
z-index: 1;
display: grid;
gap: 11px;
margin: 18px 0 22px;
}
.revision-lock-benefit {
display: flex;
align-items: center;
gap: 12px;
padding: 13px;
border-radius: 21px;
border: 1px solid rgba(226, 232, 240, 0.92);
background:
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.96));
box-shadow:
0 16px 30px -26px rgba(15, 23, 42, 0.62),
inset 0 1px 0 rgba(255,255,255,0.92);
}
.revision-lock-check {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 15px;
color: #4d3214;
background: linear-gradient(145deg, #fff0bf, #d6a85a 58%, #8a5b22);
font-size: 14px;
font-weight: 900;
border: 1px solid rgba(255, 235, 180, 0.72);
box-shadow:
0 10px 20px -16px rgba(77, 50, 20, 0.9),
inset 0 1px 0 rgba(255,255,255,0.62);
}
.revision-lock-benefit strong {
display: block;
margin-bottom: 4px;
color: #0f172a;
font-size: 13px;
font-weight: 900;
}
.revision-lock-benefit span {
display: block;
color: #64748b;
font-size: 11.5px;
line-height: 1.48;
font-weight: 800;
}
.revision-lock-action {
position: relative;
z-index: 1;
width: 100%;
min-height: 58px;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
border-radius: 21px;
color: #ffffff;
background:
linear-gradient(180deg, rgba(255,255,255,0.13), transparent 32%),
linear-gradient(135deg, #11194d 0%, #4f46e5 70%, #f5c542 145%);
border: 2px solid rgba(255, 255, 255, 0.82);
box-shadow:
0 20px 38px -24px rgba(79, 70, 229, 0.98),
inset 0 1px 0 rgba(255,255,255,0.22);
font-size: 14px;
font-weight: 900;
letter-spacing: 0;
transition: transform 0.16s ease;
}
.revision-lock-action::after {
content: "→";
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: #11194d;
background: #f5c542;
font-size: 16px;
line-height: 1;
}
.revision-lock-action:active { transform: scale(0.97); }
@media (max-width: 520px) {
.revision-lock-card {
padding: 20px;
border-radius: 30px;
}
.revision-lock-head {
gap: 11px;
margin-bottom: 14px;
}
.revision-lock-mark {
width: 52px;
height: 52px;
flex-basis: 52px;
border-radius: 18px;
}
.revision-lock-mark svg {
width: 28px;
height: 28px;
}
.revision-lock-title {
font-size: 25px;
}
.revision-lock-text {
font-size: 12.5px;
padding: 12px;
}
.revision-lock-benefit {
padding: 11px;
gap: 10px;
}
.revision-lock-check {
width: 34px;
height: 34px;
flex-basis: 34px;
border-radius: 13px;
}
.revision-lock-action {
min-height: 54px;
font-size: 13px;
}
}
.podcast-seek-line {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 7px;
border-radius: 999px;
background: linear-gradient(to right, #ffffff 0%, #ffffff var(--progress, 0%), rgba(255,255,255,0.28) var(--progress, 0%), rgba(255,255,255,0.28) 100%);
outline: none;
cursor: pointer;
box-shadow: inset 0 1px 4px rgba(15, 23, 42, 0.18);
}
.podcast-seek-line::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 999px;
background: #ffffff;
border: 3px solid #c7d2fe;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.28);
}
.podcast-seek-line::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 999px;
background: #ffffff;
border: 3px solid #c7d2fe;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.28);
}
/* ⭐ The Bada Book - New Worker App Style Category Design (Centered) ⭐ */
#folders-container {
position: relative;
isolation: isolate;
margin-top: 20px;
padding: clamp(17px, 2.9vw, 26px);
gap: clamp(14px, 2.6vw, 22px) !important;
align-items: stretch;
border-radius: 38px;
overflow: hidden;
border: 1.5px solid rgba(255, 255, 255, 0.58);
background:
radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.24), transparent 30%),
radial-gradient(circle at 92% 12%, rgba(255, 242, 184, 0.28), transparent 34%),
linear-gradient(145deg, rgba(255, 115, 61, 0.88) 0%, rgba(255, 139, 48, 0.84) 48%, rgba(255, 224, 142, 0.72) 118%);
box-shadow:
0 28px 54px -30px rgba(177, 65, 24, 0.66),
0 0 0 5px rgba(255, 255, 255, 0.13),
inset 0 0 0 1px rgba(255,255,255,0.42),
inset 0 -18px 40px rgba(177, 65, 24, 0.12);
}
#folders-container::before,
#folders-container::after {
content: '';
display: block !important;
position: absolute;
pointer-events: none;
z-index: 0;
}
#folders-container::before {
inset: 9px;
border-radius: 29px;
border: 1px solid rgba(255, 255, 255, 0.24);
background:
radial-gradient(circle at 10% 16%, rgba(255,255,255,0.14), transparent 24%),
linear-gradient(135deg, rgba(255,255,255,0.14), transparent 40%, rgba(255,247,229,0.18));
}
#folders-container::after {
inset: 0;
border-radius: inherit;
background-image:
radial-gradient(circle, rgba(255,255,255,0.56) 0 1px, transparent 1.5px),
radial-gradient(circle, rgba(255,247,227,0.38) 0 1px, transparent 1.8px),
linear-gradient(180deg, transparent 0 66%, rgba(255, 255, 245, 0.22) 100%);
background-size: 16px 16px, 28px 28px, 100% 100%;
background-position: 0 0, 10px 13px, 0 0;
opacity: 0.36;
}
#folders-container > * {
position: relative;
z-index: 1;
}
.folder-section-heading {
grid-column: 1 / -1;
position: relative;
isolation: isolate;
padding: clamp(18px, 3vw, 24px);
border-radius: 29px;
border: 1.5px solid rgba(255, 255, 255, 0.34);
background:
linear-gradient(180deg, rgba(255,255,255,0.20), transparent 50%),
linear-gradient(135deg, rgba(255, 105, 65, 0.94) 0%, rgba(255, 126, 46, 0.92) 58%, rgba(255, 197, 111, 0.88) 140%);
box-shadow:
0 18px 28px -22px rgba(165, 59, 20, 0.82),
inset 0 1px 0 rgba(255,255,255,0.36),
inset 0 -10px 22px rgba(165, 59, 20, 0.10);
text-align: center;
overflow: hidden;
}
.folder-section-heading::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.26;
background-image:
radial-gradient(circle, rgba(255,255,255,0.48) 0 1px, transparent 1.5px),
radial-gradient(circle, rgba(255,247,227,0.34) 0 1px, transparent 1.8px);
background-size: 16px 16px, 28px 28px;
background-position: 0 0, 10px 13px;
}
.folder-section-heading::after {
content: "";
position: absolute;
inset: 9px;
z-index: 0;
pointer-events: none;
border-radius: 22px;
border: 1px solid rgba(255,255,255,0.20);
background:
linear-gradient(115deg, rgba(255,255,255,0.16), transparent 34%, rgba(255,247,229,0.15));
}
.folder-section-heading > * {
position: relative;
z-index: 1;
}
.folder-section-heading .revision-title-kicker {
color: #fff7ed;
text-shadow: 0 2px 7px rgba(165, 59, 20, 0.34);
}
.folder-section-title {
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
max-width: 100%;
margin: 2px auto 0;
padding: 10px clamp(22px, 5vw, 42px);
border-radius: 999px;
border: 1.5px solid rgba(245, 197, 66, 0.72);
font-size: clamp(16px, 4vw, 24px);
color: #fff7d6;
text-transform: uppercase;
letter-spacing: 1.1px;
text-shadow:
0 1px 0 rgba(122, 77, 31, 0.7),
0 8px 18px rgba(7, 11, 36, 0.28);
background:
linear-gradient(180deg, rgba(255, 248, 220, 0.24), transparent 45%),
linear-gradient(135deg, #071b34 0%, #11194d 48%, #3a2c83 100%);
box-shadow:
0 18px 32px -20px rgba(7, 11, 36, 0.86),
0 0 0 4px rgba(245, 197, 66, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.30),
inset 0 -1px 0 rgba(122, 77, 31, 0.34);
}
.folder-section-title::before,
.folder-section-title::after {
content: '';
position: absolute;
top: 50%;
width: clamp(18px, 4vw, 34px);
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, #f5c542, transparent);
transform: translateY(-50%);
opacity: 0.92;
z-index: -1;
}
.folder-section-title::before {
right: calc(100% + 8px);
}
.folder-section-title::after {
left: calc(100% + 8px);
}
.folder-section-title .folder-title-word {
background: linear-gradient(180deg, #ffffff 0%, #fff0b8 45%, #f5c542 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@media (max-width: 520px) {
#folders-container {
margin-top: 14px;
padding: 13px;
gap: 12px !important;
border-radius: 28px;
}
#folders-container::after {
border-radius: inherit;
}
.folder-section-heading {
padding: 16px 12px;
border-radius: 22px;
}
.folder-section-title {
padding: 9px 14px;
font-size: clamp(13px, 4.2vw, 16px);
letter-spacing: 0.5px;
}
.folder-section-title::before,
.folder-section-title::after {
display: none;
}
}
.folder-card {
border-radius: 26px;
padding: 20px 12px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.16s ease, filter 0.16s ease;
text-align: center; /* 👈 सब कुछ बीच में कर दिया */
display: flex;
flex-direction: column;
justify-content: center; /* 👈 ऊपर-नीचे से बीच में */
align-items: center; /* 👈 दाएँ-बाएँ से बीच में */
min-height: 0;
height: clamp(152px, 38vw, 204px);
max-height: 204px;
border: 2px solid rgba(222, 199, 151, 0.78);
box-shadow:
0 18px 34px -18px rgba(7, 11, 36, 0.62),
0 0 0 1px rgba(17, 25, 77, 0.18),
inset 0 0 0 1px rgba(255, 255, 255, 0.24);
z-index: 1;
}
.folder-card:active { transform: translateY(3px) scale(0.962); }
/* 1. टेक्स्ट की स्टाइलिंग (सब सेंटर में) */
.folder-text-area {
z-index: 5;
position: absolute;
inset: 20px 10px;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
align-items: center; /* 👈 बैज और टेक्स्ट को सेंटर में रखेगा */
justify-content: center;
justify-items: center;
width: calc(100% - 20px);
height: calc(100% - 40px);
min-height: 0;
gap: 10px;
padding: 0 2px;
box-sizing: border-box;
}
.folder-title-new {
grid-row: 2;
align-self: center;
justify-self: center;
font-weight: 900;
font-size: clamp(1rem, 4.55vw, 1.42rem); /* 👈 इमोजी हटने से जगह बची है, इसलिए साइज थोड़ा बड़ा कर दिया */
margin-bottom: 0;
color: #ffffff;
line-height: 1.26;
letter-spacing: 0;
text-shadow: 0 2px 5px rgba(0,0,0,0.15);
font-family: 'Nunito', sans-serif !important;
max-width: 100%;
min-height: 1.28em;
max-height: calc(3.78em + 8px);
padding: 4px 2px;
overflow: hidden;
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-align: center;
}
/* 2. नीचे का 'टेस्ट' बैज */
.folder-badge-new {
grid-row: 3;
align-self: center;
justify-self: center;
font-size: 11px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
letter-spacing: 1px;
background: rgba(255, 255, 255, 0.25);
color: #ffffff;
padding: 5px 16px;
border-radius: 50px;
width: fit-content;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
margin-inline: auto;
}
/* 3. कार्ड के अंदर एब्सट्रैक्ट गोले (Premium Overlapping Circles) */
.folder-blob {
position: absolute;
width: 140px;
height: 140px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
bottom: -50px;
right: -50px;
z-index: -1;
}
.folder-blob::after {
content: '';
position: absolute;
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
top: -20px;
left: -30px;
}
/* 🎨 प्रोफेशनल मॉडर्न ग्रेडिएंट्स 🎨 */
.bg-modern-1 { background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%); }
.bg-modern-2 { background: linear-gradient(135deg, #ff9a44 0%, #fc6076 100%); }
.bg-modern-3 { background: linear-gradient(135deg, #00B09B, #96C93D); }
.bg-modern-4 { background: linear-gradient(135deg, #8A2387, #E94057, #F27121); }
.bg-modern-5 { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.bg-modern-6 { background: linear-gradient(135deg, #6a11cb, #2575fc); }
/* यहाँ से आपका पुराना .test-card वाला डिज़ाइन शुरू रहेगा... */
.test-card { background: white; padding: 20px; border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; }
.test-card:active { transform: scale(0.98); border-color: #3b82f6; }
.quiz-question-card {
position: relative;
margin-top: 6px;
padding: 17px 16px 18px;
overflow: hidden;
border-radius: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
border: 1.5px solid rgba(226, 232, 240, 0.95);
box-shadow:
0 22px 44px -34px rgba(15, 23, 42, 0.95),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.quiz-question-card::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 5px;
background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 36%, #f59e0b 72%, #ef4444 100%);
}
.quiz-question-kicker {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 11px;
}
.quiz-question-kicker-label {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 12px;
border-radius: 999px;
color: #312e81;
background: #eef2ff;
border: 1px solid #c7d2fe;
font-size: 11px;
font-weight: 900;
line-height: 1;
}
.quiz-question-kicker-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 70px;
min-height: 34px;
padding: 0 12px;
border-radius: 999px;
color: #7c2d12;
background: #fff7ed;
border: 1px solid #fed7aa;
font-size: 12px;
font-weight: 900;
line-height: 1;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
#question-text {
font-weight: 900 !important;
-webkit-text-stroke: 0 !important;
letter-spacing: 0;
font-size: 1.16rem;
line-height: 1.48;
color: #0f172a;
}
#question-text strong {
color: #dc2626 !important;
font-weight: 900 !important;
-webkit-text-stroke: 0 !important;
}
#options-container {
display: grid;
gap: 12px;
margin-top: 16px !important;
}
.option-btn {
width: 100%;
min-height: 68px;
text-align: left;
display: grid;
grid-template-columns: 42px 1fr;
align-items: center;
gap: 13px;
background:
linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border: 1.5px solid #e2e8f0;
padding: 12px 14px;
border-radius: 18px;
margin-bottom: 0;
font-size: 1rem;
font-weight: 800 !important;
color: #1f2937 !important;
-webkit-text-stroke: 0 !important;
cursor: pointer;
transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
box-shadow:
0 12px 28px -24px rgba(15, 23, 42, 0.72),
inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
.option-btn:hover {
transform: translateY(-1px);
border-color: #818cf8;
box-shadow:
0 18px 34px -26px rgba(79, 70, 229, 0.78),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.option-btn:active {
transform: scale(0.99);
}
.option-number {
width: 42px;
height: 42px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #ffffff;
background:
linear-gradient(135deg, #312e81 0%, #4f46e5 50%, #06b6d4 100%);
border: 2px solid rgba(255, 255, 255, 0.86);
font-size: 18px;
font-weight: 900;
line-height: 1;
box-shadow:
0 10px 20px -14px rgba(49, 46, 129, 0.88),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.option-copy {
display: block;
min-width: 0;
overflow-wrap: anywhere;
line-height: 1.42;
}
.option-line {
display: block;
}
.option-line .katex {
font-size: 1.04em;
white-space: nowrap;
}
.option-line .katex-display {
margin: 0;
text-align: left;
}
.option-spacer {
display: block;
height: 4px;
}
.option-line.hidden,
.option-spacer.hidden {
display: none !important;
}
.option-btn.correct {
background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
border-color: #10b981;
color: #065f46 !important;
font-weight: 900 !important;
-webkit-text-stroke: 0 !important;
box-shadow: 0 18px 34px -24px rgba(16, 185, 129, 0.72);
}
.option-btn.correct .option-number {
background: linear-gradient(135deg, #047857 0%, #10b981 100%);
}
.option-btn.wrong {
background: linear-gradient(180deg, #fff1f2 0%, #fee2e2 100%);
border-color: #ef4444;
color: #991b1b !important;
font-weight: 900 !important;
-webkit-text-stroke: 0 !important;
box-shadow: 0 18px 34px -24px rgba(239, 68, 68, 0.72);
}
.option-btn.wrong .option-number {
background: linear-gradient(135deg, #991b1b 0%, #ef4444 100%);
}
.option-btn.disabled { pointer-events: none; opacity: 0.9; }
@media (max-width: 520px) {
.quiz-question-card {
margin-top: 6px;
padding: 15px 13px 16px;
border-radius: 20px;
}
.quiz-question-kicker-label {
min-height: 28px;
padding: 0 10px;
font-size: 10px;
}
.quiz-question-kicker-count {
min-width: 62px;
min-height: 30px;
padding: 0 10px;
font-size: 11px;
}
#question-text {
font-size: 1.05rem;
line-height: 1.5;
}
#options-container {
gap: 10px;
margin-top: 14px !important;
}
.option-btn {
min-height: 62px;
grid-template-columns: 38px 1fr;
gap: 11px;
padding: 11px 12px;
border-radius: 16px;
font-size: 0.96rem;
}
.option-number {
width: 38px;
height: 38px;
font-size: 16px;
}
}
.explanation-box { display: none; background-color: #f8fafc; border-left: 5px solid #3b82f6; padding: 18px; border-radius: 12px; margin-top: 20px; border: 1px solid #e2e8f0; }
#explanation-text { font-size: 1rem; line-height: 1.7; color: #334155; font-weight: 600 !important; }
#explanation-text strong, #explanation-text b { font-weight: 900 !important; color: #ef4444 !important; -webkit-text-stroke: 0.7px #ef4444; background: none !important; }
#explanation-text h3 { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); color: white !important; padding: 15px; border-radius: 12px; font-size: 1.15rem; font-weight: 800; text-align: center; margin-bottom: 25px; box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3); }
#explanation-text h4 { color: #0f449a; font-size: 1.05rem; font-weight: 700; margin-top: 20px; margin-bottom: 15px; background: #eff6ff; padding: 10px 15px; border-left: 6px solid #ef4444; border-radius: 4px 12px 12px 4px; display: flex; align-items: center; }
/* ----------------------------------------------------------- */
/* ⭐ विशेष स्टाइल: अन्य विकल्पों के लिए पक्का बॉक्स डिज़ाइन ⭐ */
/* ----------------------------------------------------------- */
/* पोस्टमार्टम सेक्शन के अंदर आने वाले सभी strong (Tab डिज़ाइन) */
#explanation-text h4 ~ strong.postmortem-option-heading,
#explanation-text h4 ~ b.postmortem-option-heading {
display: inline-block !important;
background: #fee2e2 !important;
color: #ef4444 !important;
font-weight: 900 !important;
padding: 6px 16px !important;
border-radius: 12px 12px 0 0 !important;
border: 1px solid #fecaca !important;
border-bottom: none !important;
margin-top: 25px !important;
-webkit-text-stroke: 0.5px #ef4444;
position: relative;
z-index: 2;
margin-bottom: -1px !important;
font-size: 1.15rem !important;
}
#explanation-text p strong,
#explanation-text p b,
#explanation-text li strong,
#explanation-text li b {
display: inline !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
color: #ef4444 !important;
font-weight: 900 !important;
font-size: inherit !important;
line-height: inherit !important;
-webkit-text-stroke: 0.7px #ef4444 !important;
}
/* पोस्टमार्टम सेक्शन के अंदर आने वाली सभी लिस्ट (Box डिज़ाइन) */
#explanation-text h4 ~ ul,
#explanation-text h4 ~ p + ul,
#explanation-text h4 ~ strong + ul {
background: #ffffff !important;
border: 1px solid #fecaca !important;
padding: 15px 15px 5px 25px !important; /* 👈 बॉक्स की लेफ्ट पैडिंग */
border-radius: 0 15px 15px 15px !important;
margin-bottom: 25px !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
position: relative;
z-index: 1;
display: block !important;
}
#explanation-text ul { list-style: none !important; padding: 0 !important; margin: 10px 0 !important; }
/* सामान्य लिस्ट आइटम */
#explanation-text li { position: relative; padding-left: 30px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px dashed #e2e8f0; display: block; }
/* ⭐ बॉक्स के अंदर वाले li की दूरी कम करने के लिए (Overriding 30px to 8px) ⭐ */
#explanation-text h4 ~ ul li,
#explanation-text h4 ~ p + ul li,
#explanation-text h4 ~ strong + ul li {
padding-left: 8px !important; /* 👈 शब्द को बुलेट के करीब लाया गया */
}
/* बुलेट्स की सेटिंग */
#explanation-text li::before { content: "•"; position: absolute; left: 1px; color: #f69000; font-size: 3.8rem; line-height: 1; top: -8px; }
/* बॉक्स के अंदर वाली बुलेट्स की पोजीशन */
#explanation-text h4 ~ ul li::before,
#explanation-text h4 ~ p + ul li::before,
#explanation-text h4 ~ strong + ul li::before {
color: #eb9101 !important;
left: -20px !important; /* 👈 बुलेट को थोड़ा और लेफ्ट खिसकाया */
}
#explanation-text li:last-child { border-bottom: none; margin-bottom: 0; }
.section-divider { border: 0; height: 2px; background: linear-gradient(to right, transparent, #4500c6, transparent); margin: 30px 0; opacity: 0.6; }
.option-divider { display: none; }
#explanation-text blockquote { background: #fffbeb; border: 2px dashed #f59e0b; border-left: 10px solid #f59e0b; padding: 20px; margin: 30px 0; border-radius: 16px; font-weight: 700; color: #92400e; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
#explanation-text blockquote > :first-child { margin-top: 0 !important; }
#explanation-text blockquote > :last-child { margin-bottom: 0 !important; }
#explanation-text blockquote p { margin: 10px 0 0 !important; color: inherit; }
#explanation-text blockquote ul,
#explanation-text blockquote ol { margin-top: 10px !important; }
.bottom-bar { position: fixed; bottom: 0; left: 0; width: 100%; padding: 15px; background: white; box-shadow: 0 -4px 10px rgba(0,0,0,0.05); display: none; }
#explanation-text h4 ~ p { margin-bottom: 0 !important; }
#explanation-text .latex-inline-frac {
display: inline-grid;
grid-template-rows: auto auto;
align-items: center;
justify-items: center;
vertical-align: middle;
margin: 0 0.12em;
line-height: 1.05;
font-weight: 800;
transform: translateY(-0.06em);
}
#explanation-text .latex-inline-frac .frac-num {
display: block;
width: 100%;
padding: 0 0.18em 0.08em;
border-bottom: 1.5px solid currentColor;
text-align: center;
}
#explanation-text .latex-inline-frac .frac-den {
display: block;
width: 100%;
padding: 0.08em 0.18em 0;
text-align: center;
}
#explanation-text sub {
font-size: 0.72em;
line-height: 0;
vertical-align: sub;
}
#explanation-text sup {
font-size: 0.72em;
line-height: 0;
vertical-align: super;
}
/* ⭐ अल्ट्रा अट्रैक्टिव बैक बटन स्टाइल ⭐ */
.back-btn {
display: flex;
align-items: center;
gap: 10px;
background: #ffffff; /* साफ़ सफ़ेद बैकग्राउंड */
color: #4f46e5; /* इंडिगो रंग का टेक्स्ट */
padding: 10px 18px;
border-radius: 14px;
font-weight: 800;
font-size: 0.95rem;
border: 1px solid #e0e7ff;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
margin-bottom: 10px;
width: fit-content;
}
.back-btn:active {
transform: scale(0.92); /* दबाने पर छोटा होगा (Real Button Feel) */
background: #f5f7ff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.back-btn svg {
width: 20px;
height: 20px;
transition: transform 0.2s;
}
.back-btn:hover svg {
transform: translateX(-4px); /* होवर पर तीर पीछे खिसकेगा */
}
/* ⭐ रिपोर्ट बटन स्टाइल ⭐ */
.report-btn {
display: flex;
align-items: center;
gap: 6px;
background: #fff7ed; /* हल्का पीला */
color: #c2410c; /* गहरा नारंगी */
padding: 8px 14px;
border-radius: 12px;
font-weight: 800;
font-size: 0.85rem;
border: 1px solid #ffedd5;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.report-btn:active { transform: scale(0.95); background: #ffedd5; }
.quiz-topbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
gap: 10px;
margin: 0 0 8px;
padding: 0 2px;
}
.quiz-utility-actions,
.quiz-route-actions {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.quiz-route-actions {
flex-shrink: 0;
}
.quiz-utility-actions {
margin-left: auto;
justify-content: flex-end;
flex: 1 1 auto;
flex-wrap: nowrap;
}
.quiz-edit-action,
.quiz-report-action {
flex-shrink: 0;
}
#pod-btn-placeholder {
display: flex;
align-items: center;
min-width: 0;
flex: 0 1 auto;
}
.quiz-podcast-action {
height: 42px;
min-width: 0;
max-width: 154px;
flex: 0 1 auto;
}
.quiz-podcast-copy {
min-width: 0;
}
.quiz-step-back-btn {
min-width: 112px;
height: 42px;
padding: 0 13px 0 9px;
border-radius: 15px;
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #ffffff;
background:
radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.34), transparent 30%),
linear-gradient(135deg, #11194d 0%, #4f46e5 68%, #f5b82e 145%);
border: 1.5px solid rgba(245, 197, 66, 0.72);
font-size: 13px;
font-weight: 900;
line-height: 1;
box-shadow:
0 14px 26px -14px rgba(17, 25, 77, 0.78),
inset 0 1px 0 rgba(255, 255, 255, 0.28),
inset 0 -2px 8px rgba(0, 0, 0, 0.26);
transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.quiz-step-back-btn::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.22) 44%, transparent 72%);
transform: translateX(-120%);
transition: transform 0.45s ease;
pointer-events: none;
}
.quiz-step-back-btn:hover::after {
transform: translateX(120%);
}
.quiz-step-back-btn:active {
transform: scale(0.95);
filter: brightness(1.04);
box-shadow:
0 8px 18px -12px rgba(17, 25, 77, 0.84),
inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.quiz-back-icon {
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.32);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
}
.quiz-back-icon svg {
width: 16px;
height: 16px;
stroke-width: 3;
}
.quiz-back-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
position: relative;
z-index: 1;
}
.quiz-back-label {
font-size: 12px;
font-weight: 900;
letter-spacing: 0;
line-height: 1;
}
.quiz-back-hint {
font-size: 7px;
font-weight: 900;
letter-spacing: 0.9px;
text-transform: uppercase;
color: rgba(255, 247, 219, 0.86);
line-height: 1;
}
.quiz-mini-action {
height: 42px !important;
min-width: 78px;
padding: 0 13px !important;
border-radius: 15px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
font-size: 10.5px !important;
font-weight: 900 !important;
line-height: 1 !important;
border-width: 1px !important;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}
.quiz-edit-action {
color: #9a5a08 !important;
background: linear-gradient(135deg, #fff8e6 0%, #fffbeb 100%) !important;
border-color: #f8df9a !important;
}
.quiz-report-action {
color: #be123c !important;
background: linear-gradient(135deg, #fff1f2 0%, #fff7f7 100%) !important;
border-color: #fecdd3 !important;
}
.score-marking-note {
display: block;
font-size: 8px;
font-weight: 900;
line-height: 1;
letter-spacing: 0;
color: rgba(113, 63, 18, 0.72);
margin-top: -2px;
}
.result-marking-note {
margin-top: 10px;
padding: 9px 11px;
border-radius: 14px;
background: #fff7ed;
border: 1px solid #fed7aa;
color: #9a3412;
font-size: 10px;
font-weight: 900;
text-align: center;
}
@media (max-width: 520px) {
.quiz-topbar {
align-items: center;
gap: 6px;
margin-top: 2px;
margin-bottom: 8px;
}
.quiz-utility-actions {
gap: 5px;
}
.quiz-route-actions {
gap: 4px;
}
.quiz-step-back-btn {
min-width: 88px;
height: 40px;
padding: 0 9px 0 7px;
border-radius: 14px;
gap: 6px;
}
.quiz-back-icon {
width: 24px;
height: 24px;
}
.quiz-back-label {
font-size: 11.5px;
}
.quiz-back-hint {
font-size: 6.8px;
letter-spacing: 0.7px;
}
.quiz-mini-action {
height: 40px !important;
min-width: 60px;
padding: 0 7px !important;
border-radius: 14px !important;
gap: 4px !important;
font-size: 9.5px !important;
}
.quiz-podcast-action {
width: 40px;
min-width: 40px;
max-width: 40px;
height: 40px;
padding: 0 !important;
justify-content: center;
border-radius: 14px !important;
}
.quiz-podcast-copy {
display: none !important;
}
.quiz-podcast-action .live-dot {
position: absolute;
top: 7px;
right: 5px;
margin: 0;
}
}
@media (max-width: 380px) {
.quiz-topbar {
gap: 4px;
}
.quiz-route-actions {
flex: 0 0 auto;
}
.quiz-step-back-btn {
min-width: 76px;
width: 76px;
padding: 0 7px;
gap: 4px;
}
.quiz-utility-actions {
width: auto;
gap: 3px;
}
.quiz-back-icon {
width: 22px;
height: 22px;
}
.quiz-back-label {
font-size: 10px;
}
.quiz-mini-action {
min-width: 52px;
padding: 0 5px !important;
font-size: 8.5px !important;
}
.quiz-podcast-action {
width: 38px;
min-width: 38px;
max-width: 38px;
}
}
/* रेडियो बटन और टेक्स्ट एरिया की स्टाइल */
.report-option {
display: flex;
align-items: center;
gap: 10px;
background: #f8fafc;
padding: 12px;
border-radius: 12px;
margin-bottom: 8px;
border: 1px solid #e2e8f0;
cursor: pointer;
font-weight: 600;
font-size: 0.9rem;
}
.report-option input { width: 18px; height: 18px; accent-color: #e11d48; }
/* ⭐ उभरे हुए ग्रे फुटर बटन्स ⭐ */
.footer-btn {
background: linear-gradient(145deg, #ffffff, #f1f5f9); /* हल्का ग्रे ग्रेडियंट */
color: #64748b; /* प्रोफेशनल स्लेट ग्रे रंग */
text-decoration: none;
padding: 8px 16px;
border-radius: 12px;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
border: 1px solid #e2e8f0;
/* 3D शैडो इफ़ेक्ट */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.footer-btn:active {
transform: scale(0.95); /* दबाने पर अंदर दबेगा */
box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); /* इनर शैडो */
background: #f8fafc;
}
.footer-btn:hover {
color: #4f46e5; /* होवर पर नीला रंग */
border-color: #cbd5e1;
}
/* ⭐ लोडर के लिए विशेष एनीमेशन ⭐ */
@keyframes flipPage {
0% { transform: rotateY(0deg); opacity: 0; }
20% { opacity: 1; }
90% { opacity: 1; }
100% { transform: rotateY(-160deg); opacity: 0; }
}
.animate-page {
transform-origin: 25% 50%;
animation: flipPage 1.5s infinite ease-in-out;
fill: white;
}
@keyframes wiggleRibbon {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
.animate-ribbon-loading {
animation: wiggleRibbon 2s infinite ease-in-out;
}
@keyframes loaderShine {
0% { left: -100%; }
100% { left: 200%; }
}
.shine-layer {
position: absolute; top: 0; width: 60%; height: 100%;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
transform: skewX(-25deg);
animation: loaderShine 1s infinite;
}
/* ⭐ Spaced Repetition Section Styles ⭐ */
.revision-section { background: white; border-radius: 24px; padding: 20px; margin-top: 25px; border: 2px solid #e0e7ff; box-shadow: 0 10px 20px rgba(0,0,0,0.02); }
.revision-card { display: flex; align-items: center; justify-content: space-between; background: #f8fafc; padding: 12px 16px; border-radius: 16px; margin-bottom: 10px; border: 1px solid #edf2f7; }
.rev-info { flex-grow: 1; }
.rev-tag { font-size: 9px; font-weight: 900; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; }
.rev-due { background: #fee2e2; color: #ef4444; border: 1px solid #fecaca; }
.rev-pending { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.btn-rev-start { background: #4f46e5; color: white; font-size: 11px; font-weight: 800; padding: 8px 16px; border-radius: 10px; box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2); }
.revision-add-module {
width: 100%;
max-width: 520px;
margin: 0 auto 18px auto;
}
.revision-add-btn {
width: 100%;
min-height: 68px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 14px;
border-radius: 22px;
border: 2px solid #ffffff;
border-bottom: 4px solid #d6a81f;
color: #ffffff;
background: linear-gradient(135deg, #07123f 0%, #1d4ed8 54%, #f5c542 145%);
box-shadow: 0 24px 55px -28px rgba(15, 23, 42, 0.95), 0 0 0 1px rgba(245, 197, 66, 0.22);
cursor: pointer;
transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.revision-add-btn::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.18) 42%, transparent 72%);
transform: translateX(-100%);
transition: transform 0.55s ease;
}
.revision-add-btn:hover::after {
transform: translateX(100%);
}
.revision-add-btn:hover {
filter: saturate(1.08);
box-shadow: 0 30px 62px -30px rgba(29, 78, 216, 0.95), 0 0 0 1px rgba(245, 197, 66, 0.34);
}
.revision-add-btn:active {
transform: translateY(2px) scale(0.99);
}
.revision-add-left {
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
position: relative;
z-index: 1;
text-align: left;
}
.revision-add-icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.32);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
font-size: 19px;
}
.revision-add-kicker {
display: block;
margin-bottom: 3px;
color: #f7d46a;
font-size: 8.5px;
font-weight: 900;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.revision-add-title {
display: block;
color: #ffffff;
font-size: clamp(15px, 2.1vw, 18px);
font-weight: 900;
line-height: 1.15;
letter-spacing: 0;
}
.revision-add-subtitle {
display: block;
margin-top: 4px;
color: rgba(255, 255, 255, 0.75);
font-size: 9.5px;
font-weight: 800;
}
.revision-add-arrow {
width: 34px;
height: 34px;
flex: 0 0 34px;
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: #07123f;
background: #f5c542;
font-size: 18px;
font-weight: 900;
box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.75);
}
.revision-info-card-shell {
width: 100%;
max-width: 640px;
margin: 0 auto 48px auto;
}
.revision-info-panel {
position: relative;
overflow: hidden;
padding: 22px;
border-radius: 34px;
border: 2px solid rgba(214, 168, 31, 0.52);
background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
box-shadow: 0 28px 70px -46px rgba(7, 18, 63, 0.85);
}
.revision-info-panel::before {
content: "";
position: absolute;
left: 18px;
right: 18px;
top: 0;
height: 5px;
border-radius: 0 0 999px 999px;
background: linear-gradient(90deg, #07123f, #1d4ed8, #f5c542);
}
.revision-info-heading {
margin: 4px 0 18px 0;
text-align: center;
}
.revision-info-kicker {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #1d4ed8;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.7px;
text-transform: uppercase;
}
.revision-info-title {
margin-top: 6px;
color: #07123f;
font-size: 20px;
font-weight: 900;
line-height: 1.25;
}
.revision-benefit-grid {
display: grid;
gap: 12px;
margin-bottom: 22px;
}
.revision-benefit-card {
display: grid;
grid-template-columns: 44px 1fr;
align-items: center;
gap: 13px;
padding: 14px;
border-radius: 22px;
border: 1px solid #dbeafe;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 16px 30px -28px rgba(15, 23, 42, 0.8);
}
.revision-benefit-icon {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
color: #07123f;
background: linear-gradient(135deg, #fef3c7 0%, #f5c542 100%);
border: 1px solid rgba(214, 168, 31, 0.45);
font-size: 20px;
}
.revision-benefit-title {
margin: 0 0 3px 0;
color: #1d4ed8;
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
}
.revision-benefit-text {
margin: 0;
color: #526078;
font-size: 11px;
font-weight: 800;
line-height: 1.45;
}
.revision-timeline-box {
padding: 16px 14px 14px;
margin-bottom: 16px;
border-radius: 24px;
border: 1px solid #dbeafe;
background: rgba(255, 255, 255, 0.74);
}
.revision-timeline-title {
margin: 0 0 14px 0;
color: #07123f;
font-size: 11px;
font-weight: 900;
letter-spacing: 1.2px;
text-transform: uppercase;
text-align: center;
}
.revision-timeline-row {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.revision-timeline-row::before {
content: "";
position: absolute;
left: 22px;
right: 22px;
top: 18px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, #1d4ed8, #818cf8, #f5c542);
}
.revision-step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.revision-step-dot {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: #ffffff;
background: #1d4ed8;
border: 3px solid #ffffff;
box-shadow: 0 12px 22px -16px rgba(15, 23, 42, 0.9);
font-size: 12px;
font-weight: 900;
}
.revision-step.is-final .revision-step-dot {
color: #07123f;
background: #f5c542;
}
.revision-step-label {
color: #64748b;
font-size: 8px;
font-weight: 900;
text-transform: uppercase;
}
.revision-rule-box {
padding: 14px;
border-radius: 22px;
border: 2px dashed rgba(29, 78, 216, 0.34);
background: #ffffff;
color: #1e3a8a;
text-align: center;
font-size: 11px;
font-weight: 900;
line-height: 1.55;
}
@media (max-width: 640px) {
.revision-add-btn {
min-height: 64px;
padding: 10px 12px;
gap: 8px;
}
.revision-add-icon {
width: 38px;
height: 38px;
flex-basis: 38px;
}
.revision-add-arrow {
width: 30px;
height: 30px;
flex-basis: 30px;
}
.revision-info-panel {
padding: 18px;
}
}
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animate-spin-slow {
animation: spin-slow 8s linear infinite;
}
@keyframes priority-blink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.92); }
}
.animate-priority-blink {
animation: priority-blink 1.5s infinite ease-in-out;
}
/* ⭐ ZenFocus Ultra Premium Styles (Glassmorphism) ⭐ */
/* मुख्य स्क्रीन की सेटिंग */
#pomodoro-screen {
font-family: 'Plus Jakarta Sans', 'Nunito', sans-serif !important;
color: white !important;
}
/* एनिमेटेड बैकग्राउंड (Night Sky / Aurora Effect) */
.zen-animated-bg {
background: linear-gradient(-45deg, #0f172a, #312e81, #1e1b4b, #0f172a);
background-size: 400% 400%;
animation: gradientBG 12s ease infinite;
min-height: 100vh;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* 3D ग्लास कार्ड */
.zen-ultra-glass {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 40px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
/* ग्लोइंग टाइमर सर्कल */
.zen-glowing-circle {
width: 280px;
height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.05) 100%);
border: 6px solid rgba(99, 102, 241, 0.4);
box-shadow: 0 0 50px rgba(99, 102, 241, 0.3), inset 0 0 30px rgba(99, 102, 241, 0.2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
transition: all 0.5s ease-in-out;
}
/* टाइमर चालू होने पर पल्स एनीमेशन (सांस लेने जैसा) */
.timer-active-pulse {
animation: pulseGlow 3s infinite alternate;
}
@keyframes pulseGlow {
0% { transform: scale(1); box-shadow: 0 0 40px rgba(239, 68, 68, 0.4), inset 0 0 30px rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.6); }
100% { transform: scale(1.03); box-shadow: 0 0 80px rgba(239, 68, 68, 0.8), inset 0 0 50px rgba(239, 68, 68, 0.4); border-color: rgba(239, 68, 68, 1); }
}
/* रेस्ट मोड (ब्रेक) का पल्स एनीमेशन */
.timer-rest-pulse {
animation: restGlow 4s infinite alternate;
}
@keyframes restGlow {
0% { transform: scale(1); box-shadow: 0 0 40px rgba(16, 185, 129, 0.3), inset 0 0 30px rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.5); }
100% { transform: scale(1.02); box-shadow: 0 0 70px rgba(16, 185, 129, 0.6), inset 0 0 40px rgba(16, 185, 129, 0.4); border-color: rgba(16, 185, 129, 0.9); }
}
/* मॉडर्न इनपुट फील्ड */
.zen-modern-input {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 18px 24px;
color: white;
text-align: center;
font-weight: 700;
font-size: 1.1rem;
width: 100%;
outline: none;
transition: all 0.3s;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.zen-modern-input:focus {
background: rgba(0, 0, 0, 0.4);
border-color: rgba(99, 102, 241, 0.8);
box-shadow: 0 0 20px rgba(99, 102, 241, 0.3), inset 0 2px 4px rgba(0,0,0,0.3);
}
/* एनिमेटेड ग्रैडिएंट बटन */
.zen-premium-btn {
background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
background-size: 200% 200%;
animation: btnGradient 3s ease infinite;
color: white;
padding: 20px 40px;
border-radius: 50px;
font-weight: 900;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 2px;
box-shadow: 0 10px 30px rgba(168, 85, 247, 0.4);
transition: all 0.2s ease;
width: 100%;
max-width: 300px;
border: 1px solid rgba(255,255,255,0.2);
}
.zen-premium-btn:active { transform: scale(0.94); box-shadow: 0 5px 15px rgba(168, 85, 247, 0.4); }
@keyframes btnGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.pomo-panel {
position: relative;
overflow: hidden;
padding: 18px;
border-radius: 28px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 18px 34px -28px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.pomo-panel::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,0.10), transparent 36%, rgba(34,211,238,0.05));
}
.pomo-panel > * {
position: relative;
z-index: 1;
}
.pomo-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.pomo-kicker {
margin: 0 0 5px 0;
color: rgba(199, 210, 254, 0.86);
font-size: 9px;
font-weight: 900;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.pomo-panel-title {
margin: 0;
color: #ffffff;
font-size: 19px;
font-weight: 950;
line-height: 1.08;
}
.pomo-soft-label {
color: rgba(255, 255, 255, 0.55);
font-size: 9px;
font-weight: 900;
letter-spacing: 0.8px;
text-transform: uppercase;
}
.pomo-goal-ring {
width: 58px;
height: 58px;
flex: 0 0 58px;
border-radius: 20px;
display: grid;
place-items: center;
color: #ffffff;
font-size: 15px;
font-weight: 950;
background: conic-gradient(#34d399 0deg, rgba(255,255,255,0.16) 0deg);
box-shadow: inset 0 0 0 7px rgba(15, 23, 42, 0.62), 0 16px 28px -24px rgba(52, 211, 153, 0.8);
}
.pomo-goal-track {
height: 11px;
margin: 17px 0 13px;
border-radius: 999px;
overflow: hidden;
background: rgba(15, 23, 42, 0.42);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.pomo-goal-fill {
height: 100%;
width: 0%;
min-width: 0;
border-radius: inherit;
background: linear-gradient(90deg, #22c55e, #67e8f9, #facc15);
transition: width 0.35s ease;
}
.pomo-goal-controls {
display: grid;
grid-template-columns: 1fr 92px 1fr;
gap: 8px;
}
.pomo-mini-btn,
.pomo-tab-btn {
min-height: 38px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.09);
color: rgba(255, 255, 255, 0.86);
font-size: 10px;
font-weight: 950;
letter-spacing: 0.6px;
text-transform: uppercase;
transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.pomo-mini-btn:active,
.pomo-tab-btn:active {
transform: scale(0.96);
}
.pomo-tab-btn.is-active {
color: #07123f;
border-color: rgba(255, 255, 255, 0.36);
background: linear-gradient(135deg, #67e8f9, #bef264);
box-shadow: 0 14px 24px -22px rgba(103, 232, 249, 0.9);
}
.pomo-goal-input {
width: 100%;
min-height: 38px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.14);
outline: none;
background: rgba(15, 23, 42, 0.48);
color: #ffffff;
text-align: center;
font-size: 13px;
font-weight: 950;
}
.pomo-score-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 9px;
margin-top: 15px;
}
.pomo-score-chip {
min-height: 76px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(15, 23, 42, 0.24);
text-align: center;
}
.pomo-score-chip strong {
color: #ffffff;
font-size: 20px;
font-weight: 950;
line-height: 1;
}
.pomo-score-chip span {
color: rgba(255, 255, 255, 0.55);
font-size: 8px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.pomo-leaderboard-tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
margin: 15px 0 13px;
}
.pomo-leaderboard-list {
display: flex;
flex-direction: column;
gap: 9px;
}
.pomo-leaderboard-row {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 10px;
border-radius: 18px;
background: rgba(15, 23, 42, 0.26);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.pomo-leaderboard-row.is-me {
border-color: rgba(250, 204, 21, 0.58);
background: rgba(250, 204, 21, 0.10);
}
.pomo-rank-pill {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 13px;
color: #07123f;
background: linear-gradient(135deg, #fef3c7, #facc15);
font-size: 12px;
font-weight: 950;
}
.pomo-avatar {
width: 34px;
height: 34px;
flex: 0 0 34px;
border-radius: 13px;
overflow: hidden;
display: grid;
place-items: center;
color: #07123f;
background: linear-gradient(135deg, #e0f2fe, #c4b5fd);
font-size: 13px;
font-weight: 950;
}
.pomo-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pomo-leader-name {
color: #ffffff;
font-size: 12px;
font-weight: 950;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pomo-leader-meta {
margin-top: 3px;
color: rgba(255, 255, 255, 0.5);
font-size: 8px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pomo-leader-time {
color: #86efac;
font-size: 12px;
font-weight: 950;
white-space: nowrap;
}
.pomo-task-list,
.pomo-badge-grid {
display: flex;
flex-direction: column;
gap: 9px;
margin-top: 14px;
}
.pomo-task-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
}
.pomo-task-name {
color: #ffffff;
font-size: 12px;
font-weight: 950;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.pomo-task-bar {
height: 7px;
margin-top: 7px;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.10);
}
.pomo-task-bar span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #fb7185, #facc15, #22c55e);
}
.pomo-calendar-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
margin-top: 14px;
}
.pomo-calendar-day {
aspect-ratio: 1;
min-width: 0;
border-radius: 13px;
display: grid;
place-items: center;
color: rgba(255, 255, 255, 0.72);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 9px;
font-weight: 950;
}
.pomo-calendar-day[data-level="1"] { background: rgba(34, 197, 94, 0.20); color: #bbf7d0; }
.pomo-calendar-day[data-level="2"] { background: rgba(34, 197, 94, 0.38); color: #ffffff; }
.pomo-calendar-day[data-level="3"] { background: rgba(250, 204, 21, 0.44); color: #07123f; }
.pomo-calendar-day[data-level="4"] { background: linear-gradient(135deg, #facc15, #fb7185); color: #ffffff; }
.pomo-badge-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.pomo-badge-chip {
min-height: 58px;
display: flex;
align-items: center;
gap: 9px;
padding: 10px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.09);
background: rgba(15, 23, 42, 0.24);
}
.pomo-badge-chip.is-locked {
opacity: 0.45;
filter: grayscale(0.7);
}
.pomo-badge-icon {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: grid;
place-items: center;
border-radius: 13px;
background: rgba(255, 255, 255, 0.10);
font-size: 17px;
}
.pomo-badge-name {
color: #ffffff;
font-size: 10px;
font-weight: 950;
line-height: 1.1;
}
.pomo-badge-state {
margin-top: 3px;
color: rgba(255, 255, 255, 0.48);
font-size: 8px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pomo-live-strip {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 14px;
}
.pomo-live-metric {
min-height: var(--sticky-banner-reserved-space);
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: 12px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(15, 23, 42, 0.24);
}
.pomo-live-metric strong {
color: #ffffff;
font-size: 22px;
font-weight: 950;
line-height: 1;
}
.pomo-empty-state {
padding: 13px;
border-radius: 18px;
border: 1px dashed rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.50);
background: rgba(15, 23, 42, 0.22);
font-size: 10px;
font-weight: 900;
text-align: center;
}
@media (max-width: 380px) {
.pomo-score-grid,
.pomo-live-strip {
gap: 7px;
}
.pomo-panel {
padding: 16px;
border-radius: 24px;
}
.pomo-panel-title {
font-size: 17px;
}
.pomo-goal-controls {
grid-template-columns: 1fr 82px 1fr;
}
}
/* ========================================================
THE BADA BOOK - HYPER-PREMIUM UI (ED-TECH LEADER STYLE)
======================================================== */
.pro-text-system-bada {
display: flex;
flex-direction: column;
justify-content: center;
user-select: none;
margin-left: 2px;
min-width: 0;
}
/* 1. "The" - (चमकता हुआ प्लेटिनम इफ़ेक्ट) */
.elite-text-thebada {
font-size: 1.75rem;
font-weight: 800;
font-family: Georgia, 'Times New Roman', serif !important;
letter-spacing: 0;
margin: 0;
margin-right: 7px;
line-height: 1;
background: linear-gradient(180deg, #fff8d6 0%, #d8b469 45%, #8a5b25 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 0 rgba(74, 45, 13, 0.8)) drop-shadow(0 5px 7px rgba(0,0,0,0.5));
}
/* 2. "BADA BOOK" - (असली 3D 'Apple/iOS' कैप्सूल/बटन) */
.elite-text-book {
display: inline-flex;
align-items: center;
gap: 6px;
background:
linear-gradient(180deg, rgba(255,255,255,0.28), transparent 26%, rgba(255,255,255,0.10)),
linear-gradient(180deg, rgba(255, 231, 165, 0.48), rgba(113, 78, 31, 0.18)),
linear-gradient(135deg, rgba(13, 22, 48, 0.98), rgba(10, 19, 45, 0.94));
color: #f6d27a;
-webkit-text-fill-color: #f6d27a;
font-size: 16px;
font-weight: 900;
font-family: 'Nunito', sans-serif !important;
letter-spacing: 3px;
padding: 7px 12px 7px 18px;
border-radius: 999px;
box-shadow:
0 8px 18px rgba(0, 0, 0, 0.36),
inset 0 0 0 2px rgba(231, 189, 102, 0.70),
inset 0 2px 0 rgba(255,255,255,0.24),
inset 0 -3px 8px rgba(0,0,0,0.50);
border: 2px solid rgba(231, 189, 102, 0.56);
text-shadow: 0 1px 0 rgba(255,255,255,0.28), 0 3px 6px rgba(0,0,0,0.65);
white-space: nowrap;
}
/* 3. अंदर का वेरीफाइड (टिक) पॉप इफ़ेक्ट */
.elite-text-book svg {
width: 22px;
height: 22px;
background: linear-gradient(145deg, #fff6ce, #d4a256 55%, #7a4d1f);
border-radius: 50%;
color: #3b250c;
padding: 4px;
box-shadow: 0 3px 6px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.62);
position: relative;
top: -0.5px;
flex-shrink: 0;
}
/* 4. मॉडर्न स्लोगन / टैगलाइन */
.elite-tagline-bada {
font-size: 9.5px;
font-weight: 900;
font-family: 'Nunito', sans-serif !important;
color: rgba(255, 255, 255, 0.96);
letter-spacing: 2.5px;
text-transform: uppercase;
display: flex;
align-items: center;
margin-top: 5px;
white-space: nowrap;
text-shadow: 0 3px 8px rgba(0,0,0,0.75);
line-height: 1;
}
/* शाइन एंड लेज़र एनीमेशन */
@keyframes premiumSweep {
to { background-position: 200% center; }
}
/* सिर्फ ग्लो (चमक) को एनीमेट किया गया है, आकार को नहीं! */
@keyframes pulseLaser {
0% { opacity: 0.3; box-shadow: 0 0 0px rgba(255, 61, 0, 0); }
100% { opacity: 1; box-shadow: 0 0 12px rgba(255, 61, 0, 0.9); }
}
@media (max-width: 640px) {
.app-header {
padding: max(8px, env(safe-area-inset-top)) 10px 8px;
gap: 8px;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
}
.app-brand-logo {
width: 50px !important;
height: 50px !important;
border-radius: 13px !important;
}
.app-brand-copy {
max-width: calc(100vw - 174px);
}
.app-actions {
max-width: 106px;
gap: 4px !important;
}
.app-auth-row {
gap: 4px !important;
}
#user-pill-photo {
width: 29px !important;
height: 29px !important;
}
#auth-ui button {
padding: 5px 9px !important;
font-size: 9px !important;
line-height: 1 !important;
}
#nav-timer {
height: 29px !important;
max-width: 106px;
padding: 0 7px !important;
border-radius: 11px !important;
gap: 4px !important;
}
#pomo-nav-icon svg {
width: 18px !important;
height: 18px !important;
}
#pomo-nav-circle {
width: 20px !important;
height: 20px !important;
}
#pomo-nav-time {
font-size: 7px !important;
}
.app-timer-label {
font-size: 8.2px !important;
letter-spacing: 0 !important;
}
.elite-text-thebada {
font-size: 1.34rem;
margin-right: 5px;
}
.elite-text-book {
font-size: 11.5px;
letter-spacing: 0;
padding: 5px 8px 5px 10px;
max-width: 124px;
overflow: hidden;
}
.elite-text-book svg {
width: 16px;
height: 16px;
padding: 3px;
}
.elite-tagline-bada {
font-size: 6.4px;
letter-spacing: 0;
margin-top: 5px;
}
.laser-hr-bada {
width: 16px;
height: 4px;
margin-left: 6px;
}
}
@media (max-width: 430px) {
.app-header {
padding: max(7px, env(safe-area-inset-top)) 8px 7px;
gap: 6px;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}
.app-brand {
gap: 7px !important;
}
.app-brand-logo {
width: 44px !important;
height: 44px !important;
border-radius: 12px !important;
}
.app-brand-logo svg {
width: 42px !important;
height: 42px !important;
}
.app-brand-copy {
max-width: calc(100vw - 144px);
}
.elite-text-thebada {
font-size: 1.08rem;
margin-right: 4px;
}
.elite-text-book {
max-width: 102px;
font-size: 9.8px;
letter-spacing: 0;
padding: 5px 7px 5px 9px;
gap: 4px;
}
.elite-text-book svg {
width: 14px;
height: 14px;
padding: 2px;
}
.elite-tagline-bada {
display: none;
}
.app-actions {
max-width: 86px;
}
#auth-ui button {
padding: 4px 7px !important;
font-size: 8.5px !important;
}
#nav-timer {
height: 27px !important;
max-width: 86px;
padding: 0 6px !important;
}
#pomo-nav-icon svg {
width: 17px !important;
height: 17px !important;
}
.app-timer-label {
font-size: 0 !important;
}
.app-timer-label::after {
content: "POMO";
font-size: 8px;
font-weight: 900;
letter-spacing: 0;
line-height: 1;
}
}
@media (max-width: 360px) {
.app-brand-copy {
max-width: calc(100vw - 126px);
}
.elite-text-thebada {
display: none;
}
.elite-text-book {
max-width: 94px;
font-size: 9.2px;
padding: 5px 6px 5px 8px;
}
.app-actions {
max-width: 78px;
}
#user-pill-photo {
width: 26px !important;
height: 26px !important;
}
#auth-ui button {
padding: 4px 6px !important;
font-size: 8px !important;
}
#nav-timer {
max-width: 78px;
padding: 0 5px !important;
}
.app-timer-label::after {
content: "PMO";
font-size: 7.5px;
}
}
/* Mobile par bhi header ko desktop jaisa prominent rakhen */
@media (max-width: 640px) {
.app-header {
padding: max(10px, env(safe-area-inset-top)) 10px 10px;
gap: 8px;
align-items: center;
border-bottom-left-radius: 22px;
border-bottom-right-radius: 22px;
}
.app-brand {
min-width: 0;
gap: 8px !important;
}
.app-brand-logo {
width: clamp(54px, 15vw, 64px) !important;
height: clamp(54px, 15vw, 64px) !important;
border-radius: 14px !important;
}
.app-brand-logo svg {
width: 100% !important;
height: 100% !important;
}
.app-brand-copy {
flex: 1 1 auto;
max-width: none;
min-width: 0;
}
.app-brand-title {
max-width: 100%;
overflow: hidden;
}
.elite-text-thebada {
display: inline-block;
font-size: clamp(1.3rem, 6.2vw, 1.75rem);
margin-right: 6px;
flex-shrink: 0;
}
.elite-text-book {
max-width: none;
min-width: 0;
font-size: clamp(11.8px, 3.3vw, 16px);
letter-spacing: clamp(0.5px, 0.8vw, 2.2px);
padding: 6px clamp(8px, 2.5vw, 12px) 6px clamp(10px, 3vw, 18px);
gap: 5px;
overflow: hidden;
text-overflow: clip;
}
.elite-text-book svg {
width: clamp(17px, 4.8vw, 22px);
height: clamp(17px, 4.8vw, 22px);
padding: 3px;
}
.elite-tagline-bada {
display: flex;
max-width: 100%;
font-size: clamp(6.7px, 2vw, 9.5px);
letter-spacing: clamp(0.5px, 0.75vw, 2.2px);
margin-top: 5px;
overflow: hidden;
text-overflow: clip;
}
.laser-hr-bada {
width: 16px;
height: 4px;
margin-left: 6px;
flex-shrink: 0;
}
.app-actions {
max-width: 108px;
gap: 5px !important;
}
.app-auth-row {
gap: 5px !important;
}
#user-pill-photo {
width: 34px !important;
height: 34px !important;
}
#auth-ui button {
padding: 6px 11px !important;
font-size: 9.5px !important;
line-height: 1 !important;
}
#nav-timer {
height: 32px !important;
max-width: 108px;
padding: 0 8px !important;
border-radius: 12px !important;
gap: 5px !important;
}
#pomo-nav-icon svg {
width: 20px !important;
height: 20px !important;
}
#pomo-nav-circle {
width: 22px !important;
height: 22px !important;
}
#pomo-nav-time {
font-size: 8px !important;
}
.app-timer-label {
display: inline-block;
font-size: 8.8px !important;
letter-spacing: 0 !important;
}
.app-timer-label::after {
content: none !important;
}
}
@media (max-width: 380px) {
.app-header {
padding-left: 8px;
padding-right: 8px;
}
.app-brand {
gap: 7px !important;
}
.app-actions {
max-width: 102px;
}
#nav-timer {
max-width: 102px;
padding: 0 7px !important;
}
.app-timer-label {
font-size: 8.2px !important;
}
}
@media (max-width: 340px) {
.app-header {
flex-direction: column;
align-items: stretch;
gap: 7px;
}
.app-brand {
width: 100%;
}
.app-brand-title,
.elite-text-book,
.elite-tagline-bada {
overflow: visible;
}
.app-actions {
width: 100%;
max-width: none;
flex-direction: row !important;
align-items: center;
justify-content: flex-end;
gap: 7px !important;
}
.app-auth-row {
order: 2;
}
#nav-timer {
order: 1;
max-width: 104px;
}
}
/* =========================================================================
🏆 MASTER THEORY DESIGN - 100% MATCHING MR JAY AI (BOOK BOX LOOK)
========================================================================= */
/* 1. बेस फ़ॉन्ट और स्ट्रक्चर */
#theory-screen-content {
font-family: 'Gotu', sans-serif !important;
color: #1f2937;
line-height: 1.8;
}
#theory-screen {
padding-top: 14px !important;
}
.theory-top-actions {
margin-bottom: 14px !important;
}
#theory-master-shell {
padding-top: 14px !important;
}
#theory-screen-title {
position: relative;
isolation: isolate;
display: block;
width: 100%;
max-width: 100%;
margin: 0 0 22px !important;
padding: 42px 22px 20px 24px !important;
border: 2px solid rgba(214, 168, 31, 0.36) !important;
border-left: 8px solid #d6a81f !important;
border-radius: 26px !important;
color: #fff7d6 !important;
background:
radial-gradient(circle at 12% -8%, rgba(245, 197, 66, 0.36), transparent 30%),
radial-gradient(circle at 98% 6%, rgba(56, 189, 248, 0.16), transparent 28%),
linear-gradient(135deg, #07123f 0%, #11194d 56%, #070b24 100%);
box-shadow:
0 22px 44px -30px rgba(7, 18, 63, 0.88),
inset 0 1px 0 rgba(255, 255, 255, 0.20),
inset 0 -1px 0 rgba(214, 168, 31, 0.18);
font-size: clamp(1.35rem, 3vw, 2.25rem) !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
text-wrap: balance;
overflow-wrap: anywhere;
text-shadow:
0 1px 0 rgba(122, 77, 31, 0.65),
0 10px 22px rgba(0, 0, 0, 0.22);
}
#theory-screen-title::before {
content: "SMART THEORY";
position: absolute;
left: 22px;
top: 13px;
display: inline-flex;
align-items: center;
min-height: 21px;
padding: 4px 10px 3px;
border-radius: 999px;
color: #11194d;
background: linear-gradient(135deg, #fff8d9 0%, #f5c542 58%, #d6a81f 100%);
border: 1px solid rgba(255, 255, 255, 0.50);
box-shadow: 0 10px 18px -14px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255,255,255,0.68);
font-size: 9px;
font-weight: 900;
line-height: 1;
letter-spacing: 1.2px;
text-shadow: none;
}
#theory-screen-title::after {
content: "";
position: absolute;
left: 24px;
right: auto;
bottom: 12px;
width: min(230px, 52%);
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, #f5c542, rgba(255, 247, 214, 0.62), transparent);
opacity: 0.72;
z-index: -1;
}
#theory-screen-title.is-handwritten-title {
border-color: rgba(245, 158, 11, 0.36) !important;
border-left-color: #b45309 !important;
color: #fff7ed !important;
background:
radial-gradient(circle at 12% -8%, rgba(250, 204, 21, 0.30), transparent 30%),
radial-gradient(circle at 98% 6%, rgba(14, 165, 233, 0.12), transparent 28%),
linear-gradient(135deg, #3f2c1c 0%, #7c2d12 56%, #1f2937 100%) !important;
}
#theory-screen-title.is-handwritten-title::before {
content: "TOPPER NOTES";
color: #7c2d12;
background: linear-gradient(135deg, #fff7ed 0%, #facc15 56%, #f59e0b 100%);
}
@media (max-width: 640px) {
#theory-screen {
padding-top: 10px !important;
}
.theory-top-actions {
margin-bottom: 12px !important;
}
#theory-master-shell {
padding-top: 12px !important;
}
#theory-screen-title {
margin-bottom: 14px !important;
padding: 36px 14px 16px 16px !important;
border-left-width: 6px !important;
border-radius: 20px !important;
font-size: clamp(1.18rem, 5vw, 1.58rem) !important;
line-height: 1.3 !important;
}
#theory-screen-title::before {
left: 16px;
top: 10px;
min-height: 19px;
padding: 4px 9px 3px;
font-size: 8px;
letter-spacing: 1px;
}
#theory-screen-title::after {
left: 16px;
bottom: 9px;
width: min(170px, 50%);
height: 3px;
}
}
.theory-mode-switch {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 10px;
margin: 0 0 18px 0;
border: 2px solid #dbe5f3;
border-radius: 28px;
background: linear-gradient(135deg, #f8fafc 0%, #eef4ff 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 18px 42px -34px rgba(15, 23, 42, 0.7);
}
.theory-mode-btn {
min-height: 78px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 11px 14px;
border: 2px solid #e2e8f0;
border-bottom-width: 5px;
border-bottom-color: #cbd5e1;
border-radius: 22px;
color: #334155;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
box-shadow: 0 12px 26px -24px rgba(15, 23, 42, 0.9);
cursor: pointer;
text-align: left;
transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.theory-recall-btn {
min-height: 78px;
}
.theory-handwritten-btn {
grid-column: 1 / -1;
min-height: 84px;
border-color: #f7c948;
border-bottom-color: #b45309;
background:
radial-gradient(circle at 12% 18%, rgba(250, 204, 21, 0.22), transparent 30%),
linear-gradient(180deg, #fffef7 0%, #fff7ed 100%);
}
.theory-mindmap-btn .theory-mode-icon {
background: #dcfce7;
color: #15803d;
}
.theory-handwritten-btn .theory-mode-icon {
background: #ffedd5;
color: #c2410c;
}
.theory-mode-btn.is-active {
color: #ffffff;
border-color: #93c5fd;
border-bottom-color: #0f172a;
background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
box-shadow: 0 22px 42px -28px rgba(29, 78, 216, 0.9);
transform: translateY(-2px);
}
.theory-mode-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.theory-mode-btn:not(:disabled):hover {
border-color: #93c5fd;
box-shadow: 0 20px 36px -30px rgba(37, 99, 235, 0.8);
}
.theory-mode-btn:not(:disabled):active {
transform: translateY(1px) scale(0.99);
}
.theory-mode-icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: #e0f2fe;
color: #1d4ed8;
font-size: 19px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.theory-mode-btn.is-active .theory-mode-icon {
background: rgba(255, 255, 255, 0.16);
color: #ffffff;
}
.theory-mode-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.1;
}
.theory-mode-title {
display: block;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.8px;
}
.theory-mode-subtitle {
display: block;
margin-top: 5px;
font-size: 10px;
font-weight: 900;
color: #64748b;
}
.theory-mode-btn.is-active .theory-mode-subtitle {
color: rgba(255, 255, 255, 0.78);
}
.handwritten-toolbar.hidden {
display: none !important;
}
.handwritten-toolbar {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 12px;
margin: -12px 0 18px;
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.36);
border-radius: 18px;
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
box-shadow: 0 16px 34px -30px rgba(15, 23, 42, 0.78);
}
.handwritten-tool-group {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 8px;
border-radius: 14px;
background: rgba(248, 250, 252, 0.86);
border: 1px solid rgba(226, 232, 240, 0.92);
}
.handwritten-tool-label {
flex: 0 0 auto;
color: #64748b;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.8px;
text-transform: uppercase;
}
.handwritten-tool-btn {
min-height: 34px;
padding: 7px 11px;
border: 1px solid #dbe5f3;
border-radius: 11px;
background: #ffffff;
color: #334155;
font-size: 11px;
font-weight: 900;
transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.handwritten-tool-btn.is-selected {
border-color: #b45309;
background: #fff7ed;
color: #9a3412;
}
.handwritten-ink-group {
flex: 0 0 auto;
}
.handwritten-ink-dot {
width: 34px;
height: 34px;
border-radius: 50%;
border: 3px solid #ffffff;
box-shadow: 0 0 0 1px #cbd5e1, 0 10px 20px -15px rgba(15, 23, 42, 0.9);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.handwritten-ink-dot.is-selected {
transform: translateY(-1px) scale(1.08);
box-shadow: 0 0 0 3px #f59e0b, 0 14px 24px -18px rgba(15, 23, 42, 0.95);
}
.ink-blue-dot {
background: #1d4ed8;
}
.ink-black-dot {
background: #111827;
}
@media (max-width: 640px) {
.theory-mode-switch {
gap: 8px;
padding: 8px;
}
.theory-mode-btn {
min-height: 70px;
gap: 8px;
padding: 10px;
}
.theory-mode-icon {
width: 34px;
height: 34px;
flex-basis: 34px;
border-radius: 13px;
font-size: 16px;
}
.theory-mode-title {
font-size: 11px;
}
.theory-mode-subtitle {
font-size: 9px;
}
.theory-handwritten-btn {
min-height: 76px;
}
.handwritten-toolbar {
flex-direction: column;
gap: 9px;
margin-top: -16px;
padding: 10px;
}
.handwritten-tool-group {
justify-content: space-between;
overflow-x: auto;
}
.handwritten-tool-btn {
min-width: 66px;
padding-inline: 9px;
}
}
.mind-map-shell {
margin: 0 0 28px 0;
padding: 14px;
border: 2px solid rgba(96, 165, 250, 0.32);
border-radius: 30px;
background:
radial-gradient(circle at 50% 10%, rgba(37, 99, 235, 0.14), transparent 34%),
linear-gradient(180deg, #050b18 0%, #030712 100%);
box-shadow: 0 28px 62px -42px rgba(15, 23, 42, 0.92);
}
.mind-map-shell,
.mind-map-shell * {
font-family: 'Poppins', 'Gotu', sans-serif !important;
}
body.mind-map-fullscreen-active {
overflow: hidden;
}
body.mind-map-fullscreen-active .mind-map-shell.is-fullscreen {
position: fixed;
inset: 0 0 var(--mind-map-sticky-space, 86px) 0;
z-index: 2100;
margin: 0;
padding: max(12px, env(safe-area-inset-top)) 12px 12px;
border: 0;
border-radius: 0;
background: #030712;
box-shadow: none;
}
body.mind-map-fullscreen-active .mind-map-shell.is-fullscreen .mind-map-toolbar {
padding: 4px 2px 10px;
}
body.mind-map-fullscreen-active .mind-map-shell.is-fullscreen .mind-map-toolbar-title {
border-color: rgba(96, 165, 250, 0.32);
color: #eff6ff;
background: rgba(15, 23, 42, 0.9);
box-shadow: 0 14px 28px -20px rgba(96, 165, 250, 0.9);
}
body.mind-map-fullscreen-active .mind-map-shell.is-fullscreen .mind-map-control-btn {
border-color: rgba(96, 165, 250, 0.32);
color: #dbeafe;
background: rgba(15, 23, 42, 0.9);
box-shadow: 0 12px 24px -18px rgba(96, 165, 250, 0.9);
}
body.mind-map-fullscreen-active .mind-map-shell.is-fullscreen .mind-map-viewport {
height: calc(100% - 58px) !important;
max-height: none;
min-height: 0;
border-color: rgba(96, 165, 250, 0.25);
background:
radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.12), transparent 36%),
#030712;
box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.12);
}
.mind-map-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 5px 5px 14px;
}
.mind-map-toolbar-title {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
width: fit-content;
padding: 8px 12px;
border: 1px solid rgba(96, 165, 250, 0.32);
border-radius: 999px;
color: #eff6ff;
background: rgba(15, 23, 42, 0.9);
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
box-shadow: 0 14px 28px -20px rgba(96, 165, 250, 0.9);
}
.mind-map-toolbar-title span:last-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mind-map-controls {
display: flex;
align-items: center;
gap: 7px;
flex: 0 0 auto;
}
.mind-map-control-btn {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(96, 165, 250, 0.32);
border-bottom-width: 3px;
border-radius: 14px;
background: rgba(15, 23, 42, 0.9);
color: #dbeafe;
font-size: 14px;
font-weight: 900;
box-shadow: 0 12px 24px -18px rgba(96, 165, 250, 0.9);
transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.mind-map-control-btn:active {
transform: translateY(1px) scale(0.96);
}
.mind-map-fullscreen-btn.is-active {
color: #fef3c7;
border-color: rgba(251, 191, 36, 0.42);
}
.mind-map-viewport {
position: relative;
width: 100%;
height: calc(100dvh - 310px);
min-height: 430px;
max-height: 660px;
overflow: hidden;
border: 1px solid rgba(96, 165, 250, 0.25);
border-radius: 24px;
background:
radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.12), transparent 36%),
#030712;
box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.12);
touch-action: none;
cursor: grab;
}
body.ads-sticky-active .mind-map-viewport {
height: calc(100dvh - 350px);
}
.mind-map-viewport.is-dragging {
cursor: grabbing;
}
.mind-map-transform {
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
}
.mind-map-links {
position: absolute;
left: 0;
top: 0;
overflow: visible;
pointer-events: none;
shape-rendering: geometricPrecision;
}
.mind-map-node {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 7px 14px;
border-radius: 11px;
color: #ffffff;
background: var(--node-color, #2f9ee8);
border: 1px solid color-mix(in srgb, var(--node-color, #2f9ee8) 54%, white);
box-shadow: 0 13px 24px -18px var(--node-color, #2f9ee8), inset 0 1px 0 rgba(255, 255, 255, 0.28);
font-size: 18px;
font-weight: 600;
line-height: 27px;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.34);
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
overflow-wrap: anywhere;
word-break: break-word;
box-sizing: border-box;
}
.mind-map-node-center {
width: 340px;
min-height: 88px;
padding: 16px 24px;
border-radius: 12px;
color: #020617;
background: #ffffff;
font-size: 30px;
font-weight: 800;
line-height: 38px;
text-shadow: none;
border: 3px solid #38bdf8;
box-shadow: 0 18px 34px -22px rgba(56, 189, 248, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.mind-map-node-branch {
width: 300px;
min-height: 64px;
font-size: 20px;
font-weight: 700;
line-height: 30px;
}
.mind-map-node-group {
width: 300px;
min-height: 64px;
font-size: 20px;
font-weight: 700;
line-height: 30px;
background: var(--node-color, #2f9ee8);
}
.mind-map-node-leaf {
width: 370px;
min-height: 56px;
padding: 9px 16px;
font-size: 18px;
font-weight: 600;
line-height: 27px;
background: var(--node-color, #2f9ee8);
}
.mind-map-placeholder {
padding: 54px 18px;
border: 2px dashed #dbeafe;
border-radius: 24px;
color: #94a3b8;
text-align: center;
font-size: 12px;
font-weight: 900;
}
@media (max-width: 640px) {
.mind-map-shell {
padding: 9px;
border-radius: 24px;
}
.mind-map-toolbar {
gap: 8px;
}
.mind-map-toolbar-title {
font-size: 12px;
}
.mind-map-control-btn {
width: 31px;
height: 31px;
border-radius: 11px;
}
.mind-map-viewport {
height: calc(100dvh - 335px);
min-height: 390px;
max-height: 560px;
border-radius: 19px;
}
body.ads-sticky-active .mind-map-viewport {
height: calc(100dvh - 370px);
}
}
.short-notes-intro {
margin: 0 0 26px 0;
padding: 18px 20px;
border: 2px solid #a7f3d0;
border-left: 8px solid #10b981;
border-radius: 18px;
background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 56%, #eef2ff 100%);
box-shadow: 0 18px 35px -28px rgba(15, 23, 42, 0.45);
}
.short-notes-intro-kicker {
font-size: 10px;
font-weight: 900;
letter-spacing: 1.6px;
color: #047857;
text-transform: uppercase;
margin-bottom: 6px;
}
.short-notes-intro-title {
margin: 0 0 8px 0;
color: #0f172a;
font-size: 1rem;
font-weight: 900;
line-height: 1.55;
}
.short-notes-intro-text {
margin: 0;
color: #475569;
font-size: 0.9rem;
font-weight: 800;
line-height: 1.75;
}
.active-recall-intro {
border-color: #fde68a;
border-left-color: #f59e0b;
background: linear-gradient(135deg, #fffbeb 0%, #ffffff 55%, #eef6ff 100%);
}
.active-recall-intro .short-notes-intro-kicker {
color: #b45309;
}
#theory-screen-content h4.active-recall-theory-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
#theory-screen-content .active-recall-heading-text {
position: relative;
z-index: 1;
flex: 1 1 auto;
min-width: 0;
}
#theory-screen-content .active-recall-theory-btn {
position: relative;
z-index: 2;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 34px;
padding: 8px 13px;
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 999px;
background: linear-gradient(145deg, #fff7d6 0%, #f7c948 48%, #d69b1f 100%);
color: #10204f;
font-family: inherit;
font-size: 0.72rem;
font-weight: 900;
line-height: 1;
letter-spacing: 0.5px;
text-transform: uppercase;
text-shadow: none;
box-shadow:
0 12px 24px -16px rgba(0, 0, 0, 0.85),
inset 0 1px 0 rgba(255,255,255,0.88);
cursor: pointer;
transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
#theory-screen-content .active-recall-theory-btn:hover,
#theory-screen-content .active-recall-theory-btn:focus-visible {
transform: translateY(-1px);
filter: brightness(1.04);
box-shadow:
0 16px 28px -16px rgba(0, 0, 0, 0.9),
0 0 0 3px rgba(246, 200, 79, 0.24),
inset 0 1px 0 rgba(255,255,255,0.9);
outline: none;
}
#theory-screen-content .active-recall-theory-btn.is-open {
background: linear-gradient(145deg, #dbeafe 0%, #93c5fd 52%, #2563eb 100%);
color: #07123f;
}
#theory-screen-content .active-recall-theory-btn svg {
width: 15px;
height: 15px;
stroke-width: 2.5;
}
#theory-screen-content .active-recall-theory-panel {
margin: -5px 0 18px 0;
padding: 15px;
border: 2px solid rgba(37, 99, 235, 0.26);
border-radius: 18px;
background:
radial-gradient(circle at 8% 0%, rgba(37, 99, 235, 0.12), transparent 34%),
linear-gradient(135deg, #eff6ff 0%, #ffffff 55%, #fff8e1 100%);
box-shadow:
0 20px 42px -34px rgba(15, 23, 42, 0.72),
inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
#theory-screen-content .active-recall-theory-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px dashed rgba(37, 99, 235, 0.22);
}
#theory-screen-content .active-recall-theory-panel-kicker {
color: #1d4ed8;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 1.1px;
text-transform: uppercase;
}
#theory-screen-content .active-recall-theory-panel-title {
color: #92400e;
font-size: 0.78rem;
font-weight: 900;
text-align: right;
}
#theory-screen-content .active-recall-theory-panel-body > *:last-child {
margin-bottom: 0 !important;
}
#theory-screen-content ul.active-recall-list {
display: grid !important;
gap: 18px !important;
margin: 18px 0 28px 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#theory-screen-content li.active-recall-card {
position: relative !important;
margin: 0 !important;
padding: 18px 18px 20px !important;
border: 1px solid rgba(217, 119, 6, 0.18) !important;
border-radius: 24px !important;
background:
radial-gradient(circle at 8% 0%, rgba(245, 158, 11, 0.14), transparent 30%),
linear-gradient(135deg, #fffdf8 0%, #ffffff 52%, #f1f7ff 100%) !important;
box-shadow:
0 24px 48px -34px rgba(15, 23, 42, 0.72),
inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
overflow-wrap: anywhere;
overflow: hidden;
isolation: isolate;
}
#theory-screen-content li.active-recall-card::before {
content: 'Q' !important;
position: absolute !important;
left: 31px !important;
top: 32px !important;
z-index: 2;
width: 35px !important;
height: 35px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 14px !important;
background:
radial-gradient(circle at 30% 20%, #fff7d6 0%, #f7c948 48%, #c17b11 100%) !important;
color: #60390a !important;
font-size: 15px !important;
font-weight: 900 !important;
box-shadow:
0 12px 22px -14px rgba(120, 68, 9, 0.95),
inset 0 1px 0 rgba(255,255,255,0.8);
}
#theory-screen-content li.active-recall-card::after {
content: "" !important;
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: 100%;
height: 6px;
background: linear-gradient(90deg, #f59e0b 0%, #2563eb 52%, rgba(37, 99, 235, 0.08) 100%);
}
#theory-screen-content .active-recall-question {
position: relative;
z-index: 1;
min-height: 62px;
margin: 0 !important;
padding: 15px 18px 15px 64px !important;
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 20px;
background:
linear-gradient(135deg, rgba(255, 251, 235, 0.96) 0%, rgba(255,255,255,0.98) 54%, rgba(239, 246, 255, 0.98) 100%);
color: #0f172a !important;
font-size: 1.03rem !important;
font-weight: 900 !important;
line-height: 1.62 !important;
box-shadow:
0 14px 30px -26px rgba(15, 23, 42, 0.84),
inset 0 1px 0 rgba(255, 255, 255, 1);
}
#theory-screen-content .active-recall-answer {
width: calc(100% - 64px);
margin-top: 14px;
margin-left: 64px;
padding: 14px 16px;
border: 1px dashed rgba(217, 119, 6, 0.76);
border-radius: 16px;
background:
linear-gradient(135deg, #fff9e8 0%, #fffdf6 100%);
color: #334155;
text-align: left;
cursor: pointer;
font-family: inherit;
font-weight: 900;
line-height: 1.7;
}
#theory-screen-content .active-recall-answer-label {
display: block;
margin-bottom: 6px;
color: #a16207;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.8px;
text-transform: uppercase;
}
#theory-screen-content .active-recall-answer-text {
display: block;
filter: blur(5px);
opacity: 0.62;
user-select: none;
transition: filter 0.18s ease, opacity 0.18s ease;
}
#theory-screen-content .active-recall-answer.is-revealed .active-recall-answer-text {
filter: blur(0);
opacity: 1;
user-select: text;
}
#theory-screen-content .active-recall-answer.is-revealed .active-recall-answer-label {
color: #047857;
}
@media (max-width: 640px) {
#theory-screen-content ul.active-recall-list,
#theory-screen-content .theory-subsection-box > ul.active-recall-list {
width: calc(100% - 10px) !important;
margin-left: auto !important;
margin-right: auto !important;
transform: translateX(-8px);
box-sizing: border-box;
}
#theory-screen-content li.active-recall-card {
width: 100% !important;
box-sizing: border-box;
padding: 14px 12px 16px !important;
border-radius: 20px !important;
}
#theory-screen-content li.active-recall-card::before {
left: 22px !important;
top: 27px !important;
width: 30px !important;
height: 30px !important;
border-radius: 12px !important;
font-size: 13px !important;
}
#theory-screen-content .active-recall-question {
min-height: 54px;
padding: 13px 14px 13px 50px !important;
border-radius: 17px;
font-size: 0.96rem !important;
}
#theory-screen-content .active-recall-answer {
width: 100%;
margin-left: 0;
padding: 13px 14px;
}
#theory-screen-content h4.active-recall-theory-heading {
gap: 9px;
align-items: flex-start;
}
#theory-screen-content .active-recall-heading-text {
flex-basis: 0;
}
#theory-screen-content .active-recall-theory-btn {
min-height: 31px;
padding: 7px 10px;
font-size: 0.66rem;
}
#theory-screen-content .active-recall-theory-panel {
padding: 12px;
border-radius: 15px;
}
#theory-screen-content .active-recall-theory-panel-header {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
#theory-screen-content .active-recall-theory-panel-title {
text-align: left;
}
}
/* 2. मुख्य टॉपिक टाइटल (Topic Analysis Style) */
#theory-screen-content h2 {
font-size: 1.6rem;
font-weight: 900;
margin: 30px 0 20px 0;
color: #1e40af;
border-bottom: 4px solid #3b82f6;
padding-bottom: 12px;
}
/* 3. बड़े चैप्टर हेडर्स (नीले चमकते डिब्बे) */
#theory-screen-content h3 {
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
color: white !important;
padding: 16px 22px !important;
border-radius: 14px !important;
font-size: 1.1rem !important;
font-weight: 800 !important;
margin: 40px 0 25px 0 !important;
text-align: center;
box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4);
display: block !important;
}
/* 4. सब-सेक्शन्स जैसे परिचय, घटक (लाल बॉर्डर वाली पट्टी) */
#theory-screen-content h4 {
position: relative;
isolation: isolate;
overflow: hidden;
color: #ffffff;
font-size: 1.08rem;
font-weight: 900;
line-height: 1.48;
letter-spacing: 0;
margin-top: 35px;
margin-bottom: 20px;
padding: 17px 22px 17px 66px;
border: 1px solid rgba(214, 168, 31, 0.45);
border-bottom: 2px solid rgba(214, 168, 31, 0.65);
border-radius: 22px;
background:
radial-gradient(circle at 18% -30%, rgba(245, 197, 66, 0.34), transparent 34%),
linear-gradient(135deg, #07123f 0%, #123b86 58%, #0b1536 100%);
box-shadow:
inset 8px 0 0 #d6a81f,
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 18px 34px -28px rgba(7, 18, 63, 0.95);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
}
#theory-screen-content h4::before {
content: "";
position: absolute;
left: 24px;
top: 50%;
z-index: 0;
width: 27px;
height: 27px;
border-radius: 10px;
transform: translateY(-50%) rotate(45deg);
background: linear-gradient(145deg, #fff4c7 0%, #f6c84f 56%, #9a6414 100%);
box-shadow:
0 10px 18px -12px rgba(0, 0, 0, 0.78),
inset 0 1px 0 rgba(255,255,255,0.72);
pointer-events: none;
}
#theory-screen-content h4::after {
content: "";
position: absolute;
left: 66px;
right: 22px;
bottom: 10px;
z-index: 0;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(246, 200, 79, 0.95), rgba(246, 200, 79, 0.18), transparent);
pointer-events: none;
}
/* 🚩 5. ये है असली "SUNAHRA BOX" (The Golden Box) 🚩 */
/* यहाँ UL को हमने असली बॉर्डर डिज़ाइन दिया है */
#theory-screen-content ul {
margin-left: 0px !important;
list-style: none !important;
margin-bottom: 25px !important;
padding: 18px 18px 5px 35px !important; /* बॉक्स के अंदरूनी मार्जिन */
border: 3px solid #f3be11 !important; /* Mr Jay की खास पीली बॉर्डर */
border-radius: 12px !important;
background-color: #ffffff !important;
box-shadow: inset 0 0 10px rgba(243, 190, 17, 0.03);
display: block !important;
position: relative;
}
/* 6. डिब्बे के अंदर की लिखाई और ✨ स्पार्कल बुलेट्स */
#theory-screen-content li {
position: relative !important;
padding-left: 1px !important;
margin-bottom: 12px !important;
font-size: 0.95rem !important;
font-weight: 700 !important; /* स्क्रीनशॉट जैसी मोटाई */
border-bottom: 1px dashed #f1f5f9;
padding-bottom: 8px;
display: block !important;
}
/* ✨ बुलेट्स — बड़ा, चमकीला gold sparkle, text की पहली line के बीचों-बीच align */
#theory-screen-content li::before {
content: '' !important;
position: absolute !important;
left: -27px !important;
top: 0.15em !important; /* padding रहित li के लिए पहली line के center पर */
width: 24px !important;
height: 24px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='g' cx='0.4' cy='0.36' r='0.7'%3E%3Cstop offset='0' stop-color='%23fff7d6'/%3E%3Cstop offset='0.55' stop-color='%23fbbf24'/%3E%3Cstop offset='1' stop-color='%23ec9b0e'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M12 2.4c.7 7 2.6 8.9 9.6 9.6-7 .7-8.9 2.6-9.6 9.6-.7-7-2.6-8.9-9.6-9.6 7-.7 8.9-2.6 9.6-9.6z'/%3E%3Cpath fill='%23fffbeb' d='M19 14.2c.2 1.6.7 2.1 2.3 2.3-1.6.2-2.1.7-2.3 2.3-.2-1.6-.7-2.1-2.3-2.3 1.6-.2 2.1-.7 2.3-2.3z'/%3E%3C/svg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
filter: drop-shadow(0 1.5px 2px rgba(217, 119, 6, 0.32)) !important;
}
/* 7. डिब्बे के अंदर "Nested" डिब्बा (Inner Blue/Grey box) */
#theory-screen-content li ul {
margin: 12px 0 12px -20px !important;
padding: 12px 15px 5px 28px !important;
border: 2px solid #e2e8f0 !important;
background-color: #f9fafb !important;
border-radius: 10px !important;
}
/* 8. लाल बोल्ड टेक्स्ट (Master Highlighting) */
#theory-screen-content strong,
#theory-screen-content b {
color: #d32c2c !important;
font-weight: 900 !important;
background: transparent !important;
-webkit-text-stroke: 0.5px #ef4444;
font-size: 1.05em;
}
/* 9. जादुई तथ्य - Highlight Card */
#theory-screen-content blockquote {
background: #fffdf2 !important;
border: 3px dashed #f59e0b !important;
border-left: 15px solid #f59e0b !important;
padding: 25px !important;
margin: 35px 0 !important;
border-radius: 20px !important;
font-weight: 800;
color: #92400e;
}
/* 10. H4 subheading aur uske facts ko ek premium yellow section box me band karna */
#theory-screen-content .theory-subsection-box {
margin: 32px 0 !important;
padding: 18px 18px 20px !important;
border: 3px solid #f3be11 !important;
border-radius: 24px !important;
background:
linear-gradient(180deg, #fffdf7 0%, #ffffff 52%, #f8fbff 100%) !important;
box-shadow:
0 22px 45px -34px rgba(15, 23, 42, 0.58),
inset 0 0 16px rgba(243, 190, 17, 0.04) !important;
overflow: hidden;
}
#theory-screen-content .theory-subsection-box > h4 {
margin: -18px -18px 18px !important;
padding: 18px 22px 18px 66px !important;
border-color: rgba(214, 168, 31, 0.52) !important;
border-bottom: 2px solid rgba(214, 168, 31, 0.62) !important;
border-radius: 20px 20px 0 0 !important;
}
#theory-screen-content .theory-subsection-box > ul {
margin-bottom: 0 !important;
}
#theory-screen-content .theory-subsection-box > ul:not(.theory-card-list) {
margin: 0 !important;
padding: 4px 4px 0 32px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#theory-screen-content .theory-subsection-box > ul.theory-card-list {
margin: 0 !important;
}
#theory-screen-content .theory-subsection-box > ul.active-recall-list {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#theory-screen-content .theory-subsection-box > p:not(.theory-colon-card) {
margin: 0 0 12px !important;
padding: 12px 14px !important;
border: 1px dashed #e2e8f0 !important;
border-radius: 14px !important;
background: #ffffff !important;
font-weight: 700 !important;
}
#theory-screen-content .theory-subsection-box > *:last-child {
margin-bottom: 0 !important;
}
/* 11. Colon-heading theory lines ko alag premium cards me dikhana */
#theory-screen-content ul.theory-card-list {
display: grid !important;
gap: 15px !important;
margin: 18px 0 28px 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#theory-screen-content .theory-colon-card {
position: relative !important;
display: block !important;
margin: 0 0 15px 0 !important;
padding: 17px 20px 17px 54px !important;
border: 2px solid rgba(214, 168, 31, 0.34) !important;
border-left: 8px solid #d6a81f !important;
border-radius: 20px !important;
background:
linear-gradient(135deg, #fffdf5 0%, #ffffff 54%, #eff6ff 100%) !important;
box-shadow:
0 18px 35px -28px rgba(15, 23, 42, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
font-size: 0.98rem !important;
font-weight: 800 !important;
line-height: 1.85 !important;
overflow-wrap: anywhere;
}
#theory-screen-content li.theory-colon-card {
border-bottom: 2px solid rgba(214, 168, 31, 0.34) !important;
padding-bottom: 17px !important;
}
#theory-screen-content ul.theory-card-list > li.theory-colon-card {
margin-bottom: 0 !important;
}
#theory-screen-content ul.theory-card-list > li:not(.theory-colon-card) {
margin-bottom: 0 !important;
padding: 12px 14px 12px 34px !important;
border: 1px dashed #e2e8f0 !important;
border-radius: 14px !important;
background: #ffffff !important;
}
#theory-screen-content ul.theory-card-list > li:not(.theory-colon-card)::before {
/* star को थोड़ा बाएँ रखो ताकि text से न चिपके */
left: 6px !important;
/* card के 12px top-padding की वजह से star को नीचे लाकर पहली line के center पर रखो */
top: 14px !important;
}
#theory-screen-content .theory-colon-card::before {
content: '' !important; /* ✦ star अब SVG — हर फ़ोन पर एक जैसा */
position: absolute !important;
left: 17px !important;
top: 18px !important;
width: 25px !important;
height: 25px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2370460b' d='M12 2c.6 5.4 2.6 7.4 8 8-5.4.6-7.4 2.6-8 8-.6-5.4-2.6-7.4-8-8 5.4-.6 7.4-2.6 8-8z'/%3E%3C/svg%3E") center / 13px 13px no-repeat,
linear-gradient(145deg, #fff4c7 0%, #f6c84f 58%, #c08a18 100%) !important;
box-shadow: 0 8px 18px -12px rgba(120, 68, 9, 0.9), inset 0 1px 0 rgba(255,255,255,0.72);
}
#theory-screen-content .theory-colon-card strong:first-child,
#theory-screen-content .theory-colon-card b:first-child {
display: inline !important;
color: #dc2626 !important;
font-size: 1.06em !important;
}
@media (max-width: 640px) {
#theory-screen-content .theory-subsection-box {
margin: 24px 0 !important;
padding: 14px 8px 14px !important;
border-radius: 19px !important;
}
#theory-screen-content .theory-subsection-box > h4 {
margin: -14px -8px 14px !important;
padding: 15px 14px 15px 54px !important;
border-radius: 16px 16px 0 0 !important;
}
#theory-screen-content h4 {
font-size: 0.98rem;
line-height: 1.45;
padding: 15px 14px 15px 54px;
border-radius: 18px;
box-shadow:
inset 6px 0 0 #d6a81f,
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 16px 28px -24px rgba(7, 18, 63, 0.92);
}
#theory-screen-content h4::before {
left: 18px;
width: 22px;
height: 22px;
border-radius: 8px;
}
#theory-screen-content h4::after {
left: 54px;
right: 14px;
bottom: 8px;
}
#theory-screen-content .theory-subsection-box > ul:not(.theory-card-list) {
padding-left: 22px !important;
}
#theory-screen-content ul.theory-card-list {
gap: 12px !important;
margin: 14px 0 22px 0 !important;
}
#theory-screen-content .theory-colon-card {
padding: 14px 10px 14px 38px !important;
border-left-width: 6px !important;
border-radius: 16px !important;
font-size: 0.92rem !important;
line-height: 1.78 !important;
}
#theory-screen-content .theory-subsection-box .theory-colon-card {
margin-left: -3px !important;
margin-right: -3px !important;
}
#theory-screen-content .theory-colon-card > ul,
#theory-screen-content .theory-colon-card > ol {
margin-left: -32px !important;
margin-right: -6px !important;
padding: 12px 9px 5px 24px !important;
}
#theory-screen-content .theory-colon-card::before {
left: 9px !important;
top: 15px !important;
width: 21px !important;
height: 21px !important;
font-size: 11px !important;
}
}
/* एक्स्ट्रा खाली जगह हटाओ */
.explanation-body, .container { padding: 0 !important; max-width: 100% !important; }
/* ========================================================================= */
/* ----------------------------------------------------------- */
/* ----------------------------------------------------------- */
/* 🛡️ THE BADA BOOK: ZERO-STRUCTURE-CHANGE PLAY TAGS */
/* ----------------------------------------------------------- */
/* पैराग्राफ या लाइन को हम सिर्फ़ 'बटन की पोजीशन' तय करने के लिए इस्तेमाल करेंगे,
उनकी बनावट (Display/Padding) के साथ कोई छेड़छाड़ नहीं होगी */
#theory-screen-content [data-time] {
position: relative !important;
cursor: pointer !important;
/* दाईं तरफ थोड़ी सुरक्षित जगह ताकि टेक्स्ट बटन के नीचे न दबे */
padding-right: 20px !important;
}
/* 🚩 आकर्षक प्ले टैग - लुक वही पुराना (प्रीमियम), पोजीशन नयी (सेफ) */
#theory-screen-content [data-time]::after {
content: "▶ " attr(data-display-time);
position: absolute;
/* 🚩 दाईं ओर किनारे से एकदम बाहर */
right: 3px !important;
top: 9px !important;
/* आकर्षक लुक्स: ग्रेडिएंट बिल्कुल वैसा ही रहेगा जैसा आप चाहते हैं */
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
color: #ffffff !important;
font-size: 11px !important;
font-weight: 900 !important;
padding: 5px 12px !important;
border-radius: 50px !important;
/* ग्लो और परछाई */
box-shadow: 0 10px 20px -5px rgba(79, 70, 229, 0.5);
border: 2px solid rgba(255, 255, 255, 0.4);
z-index: 50 !important;
letter-spacing: 0.5px !important;
opacity: 0.95;
white-space: nowrap;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
/* टच होने पर एनीमेशन (साइज़ और चमक बढ़ेगी, स्ट्रक्चर नहीं हिलेगा) */
#theory-screen-content [data-time]:hover::after {
background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
transform: scale(1.08) rotate(-1deg);
box-shadow: 0 12px 25px -5px rgba(124, 58, 237, 0.6);
opacity: 1;
}
#theory-screen-content [data-time]:active {
scale: 0.98;
}
/* पैराग्राफ छूने पर बहुत ही हल्का सा एहसास (Selection feedback) */
#theory-screen-content [data-time]:hover {
background: rgba(79, 70, 229, 0.02);
}
/* 🖊️ SMART FULL-LINE HIGHLIGHTER */
.theory-line-focus {
position: relative;
border-radius: 8px;
transition: background-color 0.16s ease, box-shadow 0.16s ease;
}
#theory-screen-content p.theory-line-focus:hover,
#theory-screen-content li.theory-line-focus:hover,
#theory-screen-content blockquote.theory-line-focus:hover {
background: #ffec3d !important;
box-shadow: 0 3px 14px rgba(245, 158, 11, 0.32);
}
#theory-screen-content .theory-subsection-box > p.theory-line-focus:hover,
#theory-screen-content .theory-subsection-box li.theory-line-focus:hover,
#theory-screen-content .theory-colon-card.theory-line-focus:hover {
background: #ffec3d !important;
}
/* ✍️ सिर्फ़ Handwritten short notes में: पीले highlight की जगह pen से बना
hand-drawn circle/rectangle (touch करने या cursor ले जाने पर content के चारों ओर).
::after overlay इस्तेमाल किया है ताकि border/padding से text हिले नहीं. */
#theory-screen-content.handwritten-notebook p.theory-line-focus:hover,
#theory-screen-content.handwritten-notebook li.theory-line-focus:hover,
#theory-screen-content.handwritten-notebook blockquote.theory-line-focus:hover,
#theory-screen-content.handwritten-notebook .theory-subsection-box > p.theory-line-focus:hover,
#theory-screen-content.handwritten-notebook .theory-subsection-box li.theory-line-focus:hover,
#theory-screen-content.handwritten-notebook .theory-colon-card.theory-line-focus:hover {
background: transparent !important;
box-shadow: none !important;
}
#theory-screen-content.handwritten-notebook .theory-line-focus::after {
content: "";
position: absolute;
inset: -3px -9px -5px -9px;
border: 2.5px solid var(--section-red, var(--notebook-red, #be123c));
border-radius: 3px 7px 4px 6px / 6px 4px 7px 3px;
box-shadow: 1.5px 2.5px 0 -1px var(--section-line, rgba(190, 18, 60, 0.5));
transform: rotate(-0.6deg);
opacity: 0;
transition: opacity 0.16s ease;
pointer-events: none;
z-index: 1;
}
/* list items में ➔ bullet arrow भी rectangle के अंदर आए (arrow left:-12px पर है) */
#theory-screen-content.handwritten-notebook li.theory-line-focus::after,
#theory-screen-content.handwritten-notebook .theory-colon-card.theory-line-focus::after {
left: -28px;
}
#theory-screen-content.handwritten-notebook .theory-line-focus:hover::after {
opacity: 1;
}
/* =========================================================================
✍️ TOPPER'S INTERACTIVE NOTEBOOK - SHORT NOTES HANDWRITTEN VIEW
========================================================================= */
#theory-screen-content.handwritten-notebook {
--notebook-ink: #174ea6;
--notebook-soft-ink: rgba(23, 78, 166, 0.14);
--notebook-red: #be123c;
--notebook-paper-shadow: rgba(15, 23, 42, 0.16);
width: 100%;
box-sizing: border-box;
position: relative;
isolation: isolate;
margin-top: 4px;
padding: 34px 36px 42px 30px !important;
border: 1px solid rgba(148, 163, 184, 0.42);
border-radius: 8px;
color: var(--notebook-ink) !important;
font-family: 'Kalam', 'Caveat', 'Gotu', sans-serif !important;
font-size: 1.52rem !important;
font-weight: 400 !important;
line-height: 2.02 !important;
letter-spacing: 0 !important;
counter-reset: hwpoint;
overflow: visible;
box-shadow:
0 30px 65px -48px rgba(15, 23, 42, 0.88),
0 1px 0 rgba(255, 255, 255, 0.98) inset;
}
/* 📒 बाईं तरफ़ पतली spiral binding — असली notebook जैसा coil (slanted overlapping rings) */
#theory-screen-content.handwritten-notebook::before {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 2px;
width: 18px;
border-radius: 0;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cg transform='rotate(-24 10 7)'%3E%3Cellipse cx='10' cy='7.6' rx='8.4' ry='4.5' fill='none' stroke='%237b828c' stroke-width='3.2'/%3E%3Cellipse cx='10' cy='6.4' rx='8.4' ry='4.5' fill='none' stroke='%23f3f5f7' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 18px 12px repeat-y;
opacity: 1;
pointer-events: none;
z-index: 2;
}
#theory-screen-content.handwritten-notebook::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
/* 🔴 लाल वर्टिकल मार्जिन लाइन — हर handwritten note में (paper style चाहे कोई भी हो) */
linear-gradient(90deg, transparent 0 16px, rgba(239, 68, 68, 0.28) 16px 18px, transparent 18px),
radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.52), transparent 24%),
radial-gradient(circle at 88% 8%, rgba(245, 158, 11, 0.08), transparent 22%),
linear-gradient(90deg, rgba(15, 23, 42, 0.035), transparent 8%, transparent 92%, rgba(15, 23, 42, 0.026));
pointer-events: none;
z-index: 0;
}
#theory-screen-content.handwritten-notebook > * {
position: relative;
z-index: 1;
}
#theory-screen-content.handwritten-notebook * {
font-family: 'Kalam', 'Caveat', 'Gotu', sans-serif !important;
letter-spacing: 0 !important;
}
#theory-screen-content.handwritten-notebook.ink-blue {
--notebook-ink: #174ea6;
--notebook-soft-ink: rgba(23, 78, 166, 0.15);
}
#theory-screen-content.handwritten-notebook.ink-black {
--notebook-ink: #1f2937;
--notebook-soft-ink: rgba(31, 41, 55, 0.14);
}
#theory-screen-content.handwritten-notebook.paper-ruled {
padding-left: 30px !important;
background-color: #fffef8;
/* लाल मार्जिन लाइन अब ::after से सभी notes पर आती है; यहाँ सिर्फ नीली रूल्ड लाइनें */
background-image:
repeating-linear-gradient(0deg, transparent 0 35px, rgba(59, 130, 246, 0.20) 35px 37px),
radial-gradient(circle at 16% 20%, rgba(250, 204, 21, 0.10), transparent 26%),
linear-gradient(180deg, #fffefc 0%, #fffdf4 100%);
background-size: auto, auto, auto;
}
#theory-screen-content.handwritten-notebook.paper-grid {
background-color: #fffefb;
background-image:
linear-gradient(rgba(37, 99, 235, 0.11) 1px, transparent 1px),
linear-gradient(90deg, rgba(37, 99, 235, 0.11) 1px, transparent 1px),
radial-gradient(circle at 82% 12%, rgba(250, 204, 21, 0.09), transparent 25%);
background-size: 28px 28px, 28px 28px, auto;
}
#theory-screen-content.handwritten-notebook.paper-classic {
background-color: #fffefa;
background-image:
radial-gradient(circle at 12% 18%, rgba(15, 23, 42, 0.035) 0 1px, transparent 1.5px),
radial-gradient(circle at 86% 72%, rgba(250, 204, 21, 0.12), transparent 25%),
linear-gradient(180deg, #ffffff 0%, #fffdf7 100%);
background-size: 18px 18px, auto, auto;
}
#theory-screen-content.handwritten-notebook h2,
#theory-screen-content.handwritten-notebook h3,
#theory-screen-content.handwritten-notebook h4 {
display: block !important;
position: relative !important;
overflow: visible !important;
margin: 26px 0 15px !important;
padding: 0 2px 4px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--notebook-red) !important;
font-family: 'Caveat', 'Kalam', 'Gotu', sans-serif !important;
font-size: 2rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
text-align: left !important;
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: rgba(220, 38, 38, 0.66);
text-decoration-thickness: 1.25px;
text-underline-offset: 7px;
text-shadow: 0 0.6px 0 rgba(190, 18, 60, 0.12) !important;
}
#theory-screen-content.handwritten-notebook h2 {
font-size: 2.12rem !important;
}
#theory-screen-content.handwritten-notebook h3 {
font-size: 2.04rem !important;
}
#theory-screen-content.handwritten-notebook h4 {
font-size: 1.9rem !important;
}
#theory-screen-content.handwritten-notebook h4::after,
#theory-screen-content.handwritten-notebook .theory-colon-card::before {
content: none !important;
display: none !important;
}
/* =========================================================================
✍️ Direction-3 headings: h2/h3 = double underline (solid+wavy) + ✶ margin doodle
h4 = single marker underline + ➜ arrow bullet
========================================================================= */
/* h2/h3 (टॉपिक heading) — wavy underline तो पहले से है, उसके नीचे एक solid रूल्ड line जोड़ो */
#theory-screen-content.handwritten-notebook h2,
#theory-screen-content.handwritten-notebook h3 {
padding-bottom: 9px !important;
border-bottom: 2px solid rgba(190, 18, 60, 0.5) !important;
}
/* बाएँ margin में हाथ से बना ✶ doodle (पहली line के साथ) */
#theory-screen-content.handwritten-notebook h2::before,
#theory-screen-content.handwritten-notebook h3::before {
content: '\2736' !important; /* ✶ six-pointed star */
position: absolute !important;
left: -30px !important;
top: 0.06em !important;
font-size: 0.82em !important;
line-height: 1 !important;
color: var(--notebook-red) !important;
transform: rotate(-10deg) !important;
opacity: 0.9 !important;
pointer-events: none !important;
}
/* h4 (sub-section heading) — चारों ओर pen से बना hand-drawn rounded rectangle/circle */
#theory-screen-content.handwritten-notebook h4 {
display: inline-block !important;
padding: 5px 18px 7px !important;
text-decoration: none !important;
color: var(--notebook-red) !important;
border: 2.5px solid var(--notebook-red) !important;
/* irregular border-radius = हाथ से बना hua look */
border-radius: 255px 16px 235px 18px / 20px 230px 16px 255px !important;
/* हल्का दूसरा stroke = pen का double-pass feel */
box-shadow: 2px 2.5px 0 -1px rgba(190, 18, 60, 0.28) !important;
transform: rotate(-0.7deg) !important;
}
/* ➜ arrow हटा दिया — अब box ही bullet का काम करता है */
#theory-screen-content.handwritten-notebook h4::before {
content: none !important;
display: none !important;
}
#theory-screen-content.handwritten-notebook p {
margin: 0 0 16px !important;
color: var(--notebook-ink) !important;
font-size: 1em !important;
font-weight: 400 !important;
line-height: inherit !important;
text-shadow: 0 0.5px 0 rgba(23, 78, 166, 0.10);
}
#theory-screen-content.handwritten-notebook ul,
#theory-screen-content.handwritten-notebook ol,
#theory-screen-content.handwritten-notebook .theory-subsection-box > ul:not(.theory-card-list),
#theory-screen-content.handwritten-notebook ul.theory-card-list {
display: block !important;
margin: 10px 0 22px !important;
padding: 0 0 0 18px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#theory-screen-content.handwritten-notebook li,
#theory-screen-content.handwritten-notebook ul.theory-card-list > li:not(.theory-colon-card),
#theory-screen-content.handwritten-notebook .theory-colon-card {
position: relative !important;
display: block !important;
margin: 0 0 13px !important;
padding: 0 0 8px 18px !important;
border: 0 !important;
border-bottom: 1px dashed rgba(59, 130, 246, 0.14) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--notebook-ink) !important;
font-size: 1em !important;
font-weight: 400 !important;
line-height: inherit !important;
text-shadow: 0 0.5px 0 rgba(23, 78, 166, 0.10);
}
/* हर h4-section में points को 1..N number दो — pen से बना hand-drawn circle + अंदर number.
counter हर .theory-subsection-box (= एक h4 section) पर reset होता है */
#theory-screen-content.handwritten-notebook .theory-subsection-box {
counter-reset: hwpoint;
}
#theory-screen-content.handwritten-notebook li::before,
#theory-screen-content.handwritten-notebook ul.theory-card-list > li:not(.theory-colon-card)::before {
counter-increment: hwpoint !important;
content: counter(hwpoint) !important;
position: absolute !important;
left: -32px !important;
top: 0.72em !important;
width: 30px !important;
height: 30px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
color: var(--section-red, var(--notebook-red)) !important;
border: 2px solid var(--section-red, var(--notebook-red)) !important;
/* irregular radius = हाथ से बना wobbly pen circle */
border-radius: 78% 88% 84% 92% / 90% 80% 94% 82% !important;
font-family: 'Caveat', 'Kalam', sans-serif !important;
font-size: 1em !important;
font-weight: 700 !important;
line-height: 1 !important;
/* हल्का दूसरा stroke = pen का double-pass feel */
box-shadow: 1.5px 2px 0 -1px rgba(190, 18, 60, 0.3) !important;
transform: rotate(-4deg) !important;
}
#theory-screen-content.handwritten-notebook li ul,
#theory-screen-content.handwritten-notebook li ol,
#theory-screen-content.handwritten-notebook .theory-colon-card > ul,
#theory-screen-content.handwritten-notebook .theory-colon-card > ol {
margin: 10px 0 8px !important;
padding: 0 0 0 22px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#theory-screen-content.handwritten-notebook strong,
#theory-screen-content.handwritten-notebook b,
#theory-screen-content.handwritten-notebook .theory-colon-card strong:first-child,
#theory-screen-content.handwritten-notebook .theory-colon-card b:first-child {
color: inherit !important;
font-size: 1em !important;
font-weight: 700 !important;
-webkit-text-stroke: 0 transparent !important;
padding: 0 3px !important;
border-radius: 3px 6px 4px 5px;
background:
linear-gradient(180deg, transparent 0 42%, rgba(250, 204, 21, 0.56) 42% 86%, transparent 86% 100%) !important;
box-shadow: 0 5px 0 -3px rgba(245, 158, 11, 0.18);
}
#theory-screen-content.handwritten-notebook blockquote {
position: relative !important;
margin: 26px 4px 30px !important;
padding: 24px 24px 22px !important;
border: 0 !important;
border-radius: 5px !important;
background: #fff2a8 !important;
color: #6b3f09 !important;
font-size: 1.02em !important;
font-weight: 400 !important;
line-height: 1.82 !important;
box-shadow: 0 18px 24px -20px rgba(92, 64, 17, 0.74), 0 1px 0 rgba(255, 255, 255, 0.82) inset !important;
transform: rotate(-1.5deg);
}
#theory-screen-content.handwritten-notebook blockquote::before {
content: '📌';
position: absolute;
left: 14px;
top: -16px;
font-size: 1.25rem;
transform: rotate(12deg);
}
#theory-screen-content.handwritten-notebook .theory-subsection-box {
--section-ink: var(--notebook-ink);
--section-red: var(--notebook-red);
--section-line: rgba(190, 18, 60, 0.54);
--section-highlight: rgba(250, 204, 21, 0.56);
margin: 24px 0 30px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
#theory-screen-content.handwritten-notebook .theory-subsection-box.handwritten-pen-blue {
--section-ink: #174ea6;
--section-red: #be123c;
--section-line: rgba(225, 29, 72, 0.58);
--section-highlight: rgba(250, 204, 21, 0.58);
}
#theory-screen-content.handwritten-notebook .theory-subsection-box.handwritten-pen-green {
--section-ink: #047857;
--section-red: #0f766e;
--section-line: rgba(15, 118, 110, 0.52);
--section-highlight: rgba(134, 239, 172, 0.48);
}
#theory-screen-content.handwritten-notebook .theory-subsection-box.handwritten-pen-purple {
--section-ink: #5b21b6;
--section-red: #7c3aed;
--section-line: rgba(124, 58, 237, 0.52);
--section-highlight: rgba(216, 180, 254, 0.50);
}
#theory-screen-content.handwritten-notebook .theory-subsection-box.handwritten-pen-brown {
--section-ink: #8a4b13;
--section-red: #b45309;
--section-line: rgba(180, 83, 9, 0.54);
--section-highlight: rgba(253, 186, 116, 0.48);
}
#theory-screen-content.handwritten-notebook .theory-subsection-box.handwritten-pen-teal {
--section-ink: #0e7490;
--section-red: #0369a1;
--section-line: rgba(14, 116, 144, 0.52);
--section-highlight: rgba(125, 211, 252, 0.42);
}
#theory-screen-content.handwritten-notebook .theory-subsection-box.handwritten-has-divider::before {
content: "";
display: block;
width: min(92%, 560px);
height: 34px;
margin: 8px auto 24px;
background:
radial-gradient(circle at 50% 50%, var(--section-red) 0 5px, transparent 5.8px),
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96) 0 9px, transparent 9.8px),
linear-gradient(135deg, transparent 45%, var(--section-red) 45% 55%, transparent 55%) 50% 50% / 24px 24px no-repeat,
linear-gradient(45deg, transparent 45%, var(--section-red) 45% 55%, transparent 55%) 50% 50% / 24px 24px no-repeat,
linear-gradient(90deg, transparent 0 8%, var(--section-line) 8% 42%, transparent 42% 58%, var(--section-line) 58% 92%, transparent 92%),
linear-gradient(90deg, transparent 0 11%, var(--section-line) 11% 40%, transparent 40% 60%, var(--section-line) 60% 89%, transparent 89%),
linear-gradient(180deg, transparent 0 36%, var(--section-highlight) 36% 67%, transparent 67%);
background-position:
center,
center,
center,
center,
center 43%,
center 58%,
center;
background-size:
20px 20px,
28px 28px,
24px 24px,
24px 24px,
100% 3px,
100% 2px,
74% 100%;
background-repeat: no-repeat;
opacity: 0.9;
transform: rotate(-0.35deg);
filter: drop-shadow(0 5px 3px rgba(15, 23, 42, 0.05));
}
#theory-screen-content.handwritten-notebook .theory-subsection-box > h4 {
margin: 26px 0 16px !important;
/* pen से बना hand-drawn rounded rectangle/circle heading के चारों ओर */
display: inline-block !important;
padding: 5px 18px 7px !important;
text-decoration: none !important;
color: var(--section-red) !important;
border: 2.5px solid var(--section-red) !important;
border-radius: 255px 16px 235px 18px / 20px 230px 16px 255px !important;
box-shadow: 2px 2.5px 0 -1px var(--section-line) !important;
transform: rotate(-0.7deg) !important;
}
#theory-screen-content.handwritten-notebook .theory-subsection-box > p:not(.theory-colon-card) {
margin: 0 0 16px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--section-ink) !important;
font-weight: 400 !important;
}
#theory-screen-content.handwritten-notebook .theory-subsection-box p,
#theory-screen-content.handwritten-notebook .theory-subsection-box li,
#theory-screen-content.handwritten-notebook .theory-subsection-box .theory-colon-card {
color: var(--section-ink) !important;
}
#theory-screen-content.handwritten-notebook .theory-subsection-box li::before,
#theory-screen-content.handwritten-notebook .theory-subsection-box ul.theory-card-list > li:not(.theory-colon-card)::before {
color: var(--section-red) !important;
}
#theory-screen-content.handwritten-notebook .theory-subsection-box strong,
#theory-screen-content.handwritten-notebook .theory-subsection-box b,
#theory-screen-content.handwritten-notebook .theory-subsection-box .theory-colon-card strong:first-child,
#theory-screen-content.handwritten-notebook .theory-subsection-box .theory-colon-card b:first-child {
background:
linear-gradient(180deg, transparent 0 42%, var(--section-highlight) 42% 86%, transparent 86% 100%) !important;
}
#theory-screen-content.handwritten-notebook table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
color: var(--notebook-ink);
font-size: 0.9em;
}
#theory-screen-content.handwritten-notebook th,
#theory-screen-content.handwritten-notebook td {
border: 1.5px solid var(--notebook-soft-ink);
padding: 8px 10px;
vertical-align: top;
}
#theory-screen-content.handwritten-notebook .topper-page {
position: relative;
min-height: 68vh;
}
#theory-screen-content.handwritten-notebook .topper-rail {
position: absolute;
left: -68px;
top: 30px;
width: 54px;
display: flex;
flex-direction: column;
align-items: center;
gap: 42px;
pointer-events: none;
}
#theory-screen-content.handwritten-notebook .topper-rail::before {
content: "";
position: absolute;
left: 50%;
top: -38px;
bottom: -60px;
width: 1px;
background: rgba(239, 68, 68, 0.22);
transform: translateX(-50%);
}
#theory-screen-content.handwritten-notebook .topper-tag {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 22px;
padding: 3px 7px;
border-radius: 5px;
color: #ffffff;
font-family: 'Kalam', 'Caveat', sans-serif !important;
font-size: 0.64rem;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
box-shadow: 0 10px 15px -14px rgba(15, 23, 42, 0.8);
transform: rotate(-2deg);
}
#theory-screen-content.handwritten-notebook .tag-red { background: #e11d48; }
#theory-screen-content.handwritten-notebook .tag-yellow { background: #facc15; color: #713f12; }
#theory-screen-content.handwritten-notebook .tag-green { background: #059669; }
#theory-screen-content.handwritten-notebook .tag-blue { background: #2563eb; }
#theory-screen-content.handwritten-notebook .tag-purple { background: #7c3aed; }
#theory-screen-content.handwritten-notebook .topper-cover {
margin: 0 0 32px !important;
padding: 4px 0 16px !important;
border-bottom: 3px double rgba(153, 27, 27, 0.78);
text-align: center;
}
#theory-screen-content.handwritten-notebook .topper-title {
margin: 0 0 6px !important;
padding: 0 !important;
border: 0 !important;
color: var(--notebook-red) !important;
font-family: 'Caveat', 'Kalam', sans-serif !important;
font-size: clamp(2rem, 5vw, 3.2rem) !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
text-decoration: none !important;
text-transform: uppercase;
}
#theory-screen-content.handwritten-notebook .topper-subtitle {
margin: 0 !important;
color: rgba(153, 27, 27, 0.86) !important;
font-family: 'Caveat', 'Kalam', sans-serif !important;
font-size: 1.3rem !important;
font-weight: 700 !important;
line-height: 1.25 !important;
text-align: center;
text-transform: uppercase;
}
#theory-screen-content.handwritten-notebook .topper-section {
position: relative;
margin: 28px 0 34px !important;
}
#theory-screen-content.handwritten-notebook .topper-section-title {
display: flex !important;
align-items: center;
gap: 10px;
margin: 0 0 16px !important;
padding-bottom: 8px !important;
border-bottom: 2px solid rgba(153, 27, 27, 0.56) !important;
color: var(--notebook-red) !important;
font-size: clamp(1.58rem, 3.8vw, 2.15rem) !important;
text-decoration: none !important;
text-transform: uppercase;
}
#theory-screen-content.handwritten-notebook .topper-section-number {
width: 35px;
height: 35px;
flex: 0 0 35px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid currentColor;
border-radius: 50%;
font-size: 1.35rem;
line-height: 1;
}
#theory-screen-content.handwritten-notebook .topper-body,
#theory-screen-content.handwritten-notebook .topper-note-line {
color: var(--notebook-ink) !important;
font-size: 1em !important;
}
#theory-screen-content.handwritten-notebook .topper-highlight {
padding: 0 7px 1px;
border-radius: 7px;
background: linear-gradient(180deg, transparent 8%, rgba(250, 224, 87, 0.78) 8% 86%, transparent 86%);
}
#theory-screen-content.handwritten-notebook .topper-red {
color: var(--notebook-red) !important;
font-weight: 700 !important;
}
#theory-screen-content.handwritten-notebook .topper-green {
color: #047857 !important;
font-weight: 700 !important;
}
#theory-screen-content.handwritten-notebook .topper-muted {
color: #64748b !important;
}
#theory-screen-content.handwritten-notebook .topper-divider {
height: 2px;
margin: 24px 0;
background: linear-gradient(90deg, rgba(153, 27, 27, 0.44), rgba(153, 27, 27, 0.08));
}
#theory-screen-content.handwritten-notebook .topper-table-card,
#theory-screen-content.handwritten-notebook .topper-card,
#theory-screen-content.handwritten-notebook .topper-side-note {
position: relative;
margin: 18px 0 24px !important;
padding: 16px 18px !important;
border: 2px dashed rgba(100, 116, 139, 0.34) !important;
border-radius: 10px !important;
background: rgba(255, 254, 248, 0.74) !important;
box-shadow: 0 12px 22px -24px rgba(15, 23, 42, 0.62) !important;
}
#theory-screen-content.handwritten-notebook .topper-table-title,
#theory-screen-content.handwritten-notebook .topper-card-title {
margin: 0 0 8px !important;
color: #334155 !important;
font-size: 1.18rem !important;
font-weight: 700 !important;
line-height: 1.25 !important;
text-decoration: none !important;
}
#theory-screen-content.handwritten-notebook .topper-table {
width: 100%;
margin: 8px 0 0 !important;
border-collapse: collapse;
font-size: 0.9em !important;
}
#theory-screen-content.handwritten-notebook .topper-table th,
#theory-screen-content.handwritten-notebook .topper-table td {
border: 0 !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.28) !important;
padding: 8px 10px !important;
color: #334155 !important;
font-size: 0.92rem !important;
line-height: 1.45 !important;
}
#theory-screen-content.handwritten-notebook .topper-table th {
color: #1f2937 !important;
font-weight: 700 !important;
text-align: left;
}
#theory-screen-content.handwritten-notebook .topper-table td strong {
color: var(--notebook-red) !important;
}
#theory-screen-content.handwritten-notebook .topper-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin: 20px 0 26px;
}
#theory-screen-content.handwritten-notebook .topper-card {
margin: 0 !important;
border-style: solid !important;
border-color: rgba(148, 163, 184, 0.28) !important;
}
#theory-screen-content.handwritten-notebook .topper-card-body {
margin: 0 !important;
color: var(--notebook-ink) !important;
font-size: 0.95em !important;
line-height: 1.75 !important;
}
#theory-screen-content.handwritten-notebook .topper-warning {
margin: 18px 0 24px !important;
padding: 16px 18px !important;
border: 2px dashed rgba(190, 18, 60, 0.52) !important;
border-radius: 14px !important;
background: rgba(254, 226, 226, 0.72) !important;
color: #7f1d1d !important;
box-shadow: none !important;
}
#theory-screen-content.handwritten-notebook .topper-side-note {
border-color: rgba(153, 27, 27, 0.62) !important;
border-style: solid !important;
background: rgba(255, 251, 235, 0.58) !important;
}
#theory-screen-content.handwritten-notebook .topper-evidence-list {
margin: 12px 0 24px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
#theory-screen-content.handwritten-notebook .topper-evidence-item {
display: grid !important;
grid-template-columns: 26px 1fr;
gap: 9px;
margin: 0 0 13px !important;
padding: 0 0 9px !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
}
#theory-screen-content.handwritten-notebook .topper-evidence-item::before {
content: none !important;
}
#theory-screen-content.handwritten-notebook .topper-evidence-icon {
color: var(--notebook-red);
font-size: 1.05em;
}
#theory-screen-content.handwritten-notebook .topper-pill-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 12px 0 20px;
}
#theory-screen-content.handwritten-notebook .topper-pill {
display: inline-flex;
min-height: 28px;
align-items: center;
justify-content: center;
padding: 4px 14px;
border: 1px solid rgba(148, 163, 184, 0.38);
border-radius: 5px;
background: rgba(255, 255, 255, 0.70);
color: #334155;
font-size: 0.84rem;
line-height: 1.2;
}
#theory-screen-content.handwritten-notebook .topper-mini-label {
color: var(--notebook-red) !important;
font-weight: 700 !important;
}
#theory-screen-content.handwritten-notebook p.theory-line-focus:hover,
#theory-screen-content.handwritten-notebook li.theory-line-focus:hover,
#theory-screen-content.handwritten-notebook blockquote.theory-line-focus:hover,
#theory-screen-content.handwritten-notebook .theory-subsection-box > p.theory-line-focus:hover,
#theory-screen-content.handwritten-notebook .theory-subsection-box li.theory-line-focus:hover,
#theory-screen-content.handwritten-notebook .theory-colon-card.theory-line-focus:hover {
background: rgba(250, 204, 21, 0.26) !important;
box-shadow: none !important;
}
@media (max-width: 640px) {
#theory-screen-content.handwritten-notebook {
width: calc(100% + 12px);
margin-left: -10px;
padding: 24px 12px 34px 18px !important;
font-size: 1.18rem !important;
line-height: 1.74 !important;
border-left-color: rgba(148, 163, 184, 0.24);
border-right-color: rgba(148, 163, 184, 0.18);
box-shadow:
0 22px 48px -42px rgba(15, 23, 42, 0.86),
0 1px 0 rgba(255, 255, 255, 0.98) inset;
}
#theory-screen-content.handwritten-notebook::before {
left: 9px;
top: 14px;
bottom: 14px;
width: 6px;
background:
radial-gradient(circle, rgba(15, 23, 42, 0.12) 0 1.6px, transparent 2.2px) 0 0 / 6px 48px repeat-y;
}
#theory-screen-content.handwritten-notebook.paper-ruled {
padding-left: 26px !important;
padding-right: 10px !important;
/* लाल मार्जिन लाइन अब ::after से सभी notes पर आती है (एक ही line) */
background-image:
repeating-linear-gradient(0deg, transparent 0 29px, rgba(59, 130, 246, 0.18) 29px 31px),
radial-gradient(circle at 14% 20%, rgba(250, 204, 21, 0.09), transparent 24%),
linear-gradient(180deg, #fffefc 0%, #fffdf4 100%);
}
#theory-screen-content.handwritten-notebook h2,
#theory-screen-content.handwritten-notebook h3 {
margin: 22px 0 14px !important;
padding-bottom: 7px !important;
font-size: 1.52rem !important;
line-height: 1.18 !important;
text-underline-offset: 5px;
text-decoration-thickness: 1.1px;
}
/* मोबाइल: ✶ doodle थोड़ा पास + छोटा */
#theory-screen-content.handwritten-notebook h2::before,
#theory-screen-content.handwritten-notebook h3::before {
left: -22px !important;
font-size: 0.78em !important;
}
/* मोबाइल: pen-box थोड़ा compact */
#theory-screen-content.handwritten-notebook h4,
#theory-screen-content.handwritten-notebook .theory-subsection-box > h4 {
margin: 20px 0 13px !important;
font-size: 1.42rem !important;
line-height: 1.25 !important;
padding: 4px 14px 6px !important;
border-width: 2px !important;
}
/* मोबाइल: ad थोड़ी सी चौड़ी (किनारों तक flush नहीं) — height वही */
#theory-screen-content.handwritten-notebook .theory-inline-ad-slot {
width: calc(100% + 20px);
margin-left: -14px;
margin-right: -6px;
}
#theory-screen-content.handwritten-notebook p {
margin-bottom: 12px !important;
}
#theory-screen-content.handwritten-notebook ul,
#theory-screen-content.handwritten-notebook ol,
#theory-screen-content.handwritten-notebook .theory-subsection-box > ul:not(.theory-card-list),
#theory-screen-content.handwritten-notebook ul.theory-card-list {
width: calc(100% + 16px);
margin: 8px 0 18px -16px !important;
padding-left: 12px !important;
box-sizing: border-box;
}
#theory-screen-content.handwritten-notebook li,
#theory-screen-content.handwritten-notebook ul.theory-card-list > li:not(.theory-colon-card),
#theory-screen-content.handwritten-notebook .theory-colon-card {
margin-bottom: 10px !important;
padding-left: 24px !important;
padding-bottom: 7px !important;
}
#theory-screen-content.handwritten-notebook li::before,
#theory-screen-content.handwritten-notebook ul.theory-card-list > li:not(.theory-colon-card)::before {
left: -22px !important;
top: 3px !important;
font-size: 1.08em !important;
}
#theory-screen-content.handwritten-notebook .topper-rail {
left: -39px;
width: 32px;
gap: 30px;
}
#theory-screen-content.handwritten-notebook .topper-tag {
min-width: 31px;
min-height: 18px;
padding: 3px 5px;
font-size: 0.48rem;
}
#theory-screen-content.handwritten-notebook .topper-grid {
grid-template-columns: 1fr;
gap: 14px;
}
#theory-screen-content.handwritten-notebook .topper-table-card,
#theory-screen-content.handwritten-notebook .topper-card,
#theory-screen-content.handwritten-notebook .topper-side-note,
#theory-screen-content.handwritten-notebook .topper-warning {
padding: 13px 12px !important;
}
#theory-screen-content.handwritten-notebook .topper-title {
font-size: 1.68rem !important;
line-height: 1.06 !important;
}
#theory-screen-content.handwritten-notebook .topper-subtitle {
font-size: 0.92rem !important;
}
#theory-screen-content.handwritten-notebook .topper-section-title {
font-size: 1.36rem !important;
gap: 8px;
}
#theory-screen-content.handwritten-notebook .topper-section-number {
width: 28px;
height: 28px;
flex-basis: 28px;
font-size: 1.05rem;
}
#theory-screen-content.handwritten-notebook .theory-subsection-box.handwritten-has-divider::before {
width: 88%;
height: 26px;
margin: 2px auto 17px;
background:
radial-gradient(circle at 50% 50%, var(--section-red) 0 3.8px, transparent 4.5px),
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96) 0 7px, transparent 7.8px),
linear-gradient(135deg, transparent 45%, var(--section-red) 45% 55%, transparent 55%) 50% 50% / 18px 18px no-repeat,
linear-gradient(45deg, transparent 45%, var(--section-red) 45% 55%, transparent 55%) 50% 50% / 18px 18px no-repeat,
linear-gradient(90deg, transparent 0 7%, var(--section-line) 7% 41%, transparent 41% 59%, var(--section-line) 59% 93%, transparent 93%),
linear-gradient(90deg, transparent 0 10%, rgba(190, 18, 60, 0.28) 10% 39%, transparent 39% 61%, rgba(190, 18, 60, 0.28) 61% 90%, transparent 90%),
linear-gradient(180deg, transparent 0 36%, var(--section-highlight) 36% 67%, transparent 67%);
background-position:
center,
center,
center,
center,
center 43%,
center 58%,
center;
background-size:
15px 15px,
22px 22px,
18px 18px,
18px 18px,
100% 2px,
100% 1.5px,
76% 100%;
background-repeat: no-repeat;
}
}
/* प्रो पॉडकास्ट बटन का स्पेशल ग्लो एनीमेशन */
@keyframes pod-glow {
0% { box-shadow: 0 0 5px rgba(79, 70, 229, 0.4), 0 0 10px rgba(79, 70, 229, 0.2); }
50% { box-shadow: 0 0 20px rgba(79, 70, 229, 0.7), 0 0 30px rgba(124, 58, 237, 0.4); border-color: #818cf8; }
100% { box-shadow: 0 0 5px rgba(79, 70, 229, 0.4), 0 0 10px rgba(79, 70, 229, 0.2); }
}
/* धड़कता हुआ लाल बिन्दु (Live Heartbeat) */
@keyframes pod-pulse-dot {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1); }
}
.pod-premium-btn {
animation: pod-glow 3s infinite ease-in-out;
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.pod-premium-btn:active {
transform: scale(0.92);
}
.theory-mini-podcast-btn {
background: rgba(255, 255, 255, 0.34);
color: #312e81;
border: 1px solid rgba(99, 102, 241, 0.22);
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.theory-mini-podcast-btn:active {
transform: scale(0.94);
}
#theory-audio-pill {
position: static !important;
top: auto !important;
z-index: auto !important;
margin: 10px 0 22px !important;
}
#theory-audio-pill:not(.hidden) + #theory-master-shell {
padding-top: inherit !important;
}
.guru-podcast-card {
position: relative;
overflow: hidden;
border: 4px solid rgba(255, 255, 255, 0.94);
background:
radial-gradient(circle at 16% 8%, rgba(254, 240, 138, 0.48), transparent 24%),
radial-gradient(circle at 90% 0%, rgba(56, 189, 248, 0.28), transparent 26%),
linear-gradient(135deg, #312e81 0%, #4f46e5 48%, #be185d 100%);
box-shadow:
0 22px 42px -24px rgba(49, 46, 129, 0.92),
0 0 0 6px rgba(245, 197, 66, 0.18),
0 0 0 12px rgba(79, 70, 229, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.28),
inset 0 -10px 24px rgba(15, 23, 42, 0.18);
animation: guruPodcastGlow 2.8s ease-in-out infinite;
}
.guru-podcast-card::before {
content: "";
position: absolute;
inset: 7px;
border: 1.5px dashed rgba(254, 240, 138, 0.82);
border-radius: 32px;
pointer-events: none;
}
.guru-podcast-card::after {
content: "";
position: absolute;
top: -24%;
bottom: -24%;
width: 42%;
left: 0;
background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.24) 45%, transparent 72%);
transform: translateX(-150%) rotate(9deg);
animation: guruPodcastShine 3.4s ease-in-out infinite;
pointer-events: none;
}
.guru-podcast-card > * {
position: relative;
z-index: 1;
}
.guru-podcast-card #p-play-circle {
background: rgba(255, 255, 255, 0.22);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.36),
0 0 0 6px rgba(254, 240, 138, 0.16),
0 12px 26px rgba(15, 23, 42, 0.22);
}
.guru-podcast-card #p-label {
color: #fde68a !important;
}
@keyframes guruPodcastGlow {
0%, 100% {
box-shadow:
0 22px 42px -24px rgba(49, 46, 129, 0.92),
0 0 0 6px rgba(245, 197, 66, 0.18),
0 0 0 12px rgba(79, 70, 229, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.28),
inset 0 -10px 24px rgba(15, 23, 42, 0.18);
}
50% {
box-shadow:
0 24px 46px -22px rgba(49, 46, 129, 0.98),
0 0 0 7px rgba(245, 197, 66, 0.30),
0 0 0 15px rgba(236, 72, 153, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.34),
inset 0 -10px 24px rgba(15, 23, 42, 0.18);
}
}
@keyframes guruPodcastShine {
0% { transform: translateX(-150%) rotate(9deg); }
44%, 100% { transform: translateX(280%) rotate(9deg); }
}
@media (max-width: 640px) {
#theory-audio-pill {
top: auto !important;
margin: 8px 0 18px !important;
}
#theory-audio-pill:not(.hidden) + #theory-master-shell {
padding-top: inherit !important;
}
.guru-podcast-card {
gap: 12px !important;
padding: 14px !important;
border-radius: 30px !important;
}
.guru-podcast-card::before {
inset: 6px;
border-radius: 24px;
}
.guru-podcast-card #p-play-circle {
width: 46px !important;
height: 46px !important;
font-size: 20px !important;
}
}
.live-dot {
width: 6px;
height: 6px;
background: #ff4d4d;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
animation: pod-pulse-dot 1.2s infinite;
box-shadow: 0 0 8px #ff4d4d;
}
:root {
/* 🎨 Semantic Color Tokens (Bada Book brand) — use these instead of raw hex */
--color-brand-navy: #11194d; /* header / dark surfaces */
--color-brand-navy-deep: #071b34; /* header gradient start */
--color-primary: #1d4ed8; /* primary blue (buttons, links) */
--color-primary-strong: #4f46e5; /* indigo emphasis */
--color-on-primary: #ffffff;
--color-accent: #f59e0b; /* amber — main CTA / brand accent */
--color-accent-soft: #fbbf24; /* lighter amber (stars, highlights) */
--color-accent-gold: #f5c542; /* gold sparkle accent */
--color-success: #16a34a;
--color-destructive: #ef4444; /* wrong answer / delete */
--color-on-destructive: #ffffff;
--color-background: #fff0e4; /* app body background (warm) */
--color-surface: #ffffff; /* cards / sheets */
--color-foreground: #0f172a; /* primary text */
--color-muted: #f8fafc; /* muted surface */
--color-muted-foreground: #64748b; /* secondary text */
--color-border: #e2e8f0;
--quiz-screen-top-safe-space: max(8px, calc(env(safe-area-inset-top) + 4px));
--sticky-banner-tray-height: max(58px, calc(env(safe-area-inset-bottom) + 52px));
--sticky-banner-reserved-space: max(96px, calc(var(--sticky-banner-tray-height) + 20px));
--sticky-banner-screen-padding: max(112px, calc(var(--sticky-banner-tray-height) + 32px));
--quiz-floating-action-ad-bottom: max(104px, calc(var(--sticky-banner-reserved-space) + 16px));
}
html.is-native-capacitor {
--quiz-screen-top-safe-space: max(2px, calc(env(safe-area-inset-top) - 32px));
--sticky-banner-tray-height: max(58px, calc(env(safe-area-inset-bottom) + 52px));
--sticky-banner-reserved-space: max(96px, calc(var(--sticky-banner-tray-height) + 20px));
--sticky-banner-screen-padding: max(116px, calc(var(--sticky-banner-tray-height) + 34px));
--quiz-floating-action-ad-bottom: max(108px, calc(var(--sticky-banner-reserved-space) + 16px));
}
body.ads-sticky-active {
scroll-padding-bottom: var(--sticky-banner-screen-padding);
}
/* 💰 स्टिकी विज्ञापन पट्टी की स्टाइल */
#sticky-banner-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
min-height: var(--sticky-banner-tray-height);
padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
box-sizing: border-box;
background: #ffffff;
z-index: 2200;
border-top: 1px solid #f1f5f9;
box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.08);
display: flex;
align-items: center;
justify-content: center;
}
#sticky-banner-container.is-visible,
#sticky-banner-container.is-reserved {
display: flex;
}
#sticky-banner-container.is-reserved {
pointer-events: auto;
touch-action: none;
}
#sticky-banner-container.is-reserved > * {
display: none !important;
}
#sticky-banner-container.is-visible::after,
#sticky-banner-container.is-reserved::after {
content: "Ad";
position: absolute;
top: 5px;
right: 10px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
min-height: 16px;
padding: 2px 6px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.36);
background: rgba(255, 255, 255, 0.92);
color: #475569;
font-size: 8px;
font-weight: 950;
line-height: 1;
letter-spacing: 0;
pointer-events: none;
text-transform: uppercase;
}
#sticky-banner-container.is-hidden {
display: none !important;
}
#ad-modal {
z-index: 3000 !important;
}
.ad-slot {
display: none;
position: relative;
box-sizing: border-box;
}
.ad-slot.is-visible {
display: block;
}
.ad-slot.is-visible::after {
content: "Ad";
position: absolute;
top: 8px;
right: 10px;
z-index: 4;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
min-height: 16px;
padding: 2px 6px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.36);
background: rgba(255, 255, 255, 0.92);
color: #475569;
font-size: 8px;
font-weight: 950;
line-height: 1;
letter-spacing: 0;
pointer-events: none;
text-transform: uppercase;
box-shadow: 0 8px 18px -14px rgba(15, 23, 42, 0.68);
}
.ad-slot.is-native-placeholder {
display: block;
width: 100%;
height: 112px;
min-height: 112px;
border: 1px solid rgba(226, 232, 240, 0.78);
border-radius: 22px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.92) 62%, rgba(255, 247, 237, 0.9) 100%);
overflow: hidden;
contain: layout paint style;
}
.ad-slot.is-native-placeholder.is-banner-placeholder {
height: 92px;
min-height: 92px;
}
.large-native-ad-slot {
width: 100%;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.large-native-ad-slot.is-native-placeholder {
height: 340px;
min-height: 340px;
}
.theory-start-ad-slot {
margin-top: 30px !important;
margin-bottom: 18px !important;
}
.result-screen-ad-slot {
max-width: 600px;
margin-top: 10px !important;
margin-bottom: 36px !important;
}
.home-screen-ad-slot {
max-width: 620px;
margin-top: 28px !important;
margin-bottom: 36px !important;
}
.ad-slot.is-native-placeholder > * {
display: none !important;
}
.ad-slot.has-demo-ad {
display: block;
}
.demo-ad-card {
width: 100%;
box-sizing: border-box;
background:
radial-gradient(circle at 12% 0%, rgba(245, 158, 11, 0.16), transparent 34%),
linear-gradient(135deg, #ffffff 0%, #f8fafc 64%, #fff7ed 100%);
border: 1.5px solid rgba(148, 163, 184, 0.34);
border-radius: 24px;
padding: 14px;
box-shadow: 0 18px 36px -28px rgba(15, 23, 42, 0.48);
overflow: hidden;
}
.demo-ad-card.is-native {
display: grid;
grid-template-columns: 54px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
}
.demo-ad-card.is-banner {
width: min(740px, 100%);
min-height: 46px;
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 8px 12px;
border-radius: 18px;
box-shadow: none;
}
.demo-ad-icon {
width: 54px;
height: 54px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #11194d 0%, #4f46e5 72%, #f59e0b 140%);
color: #fff7ed;
font-size: 11px;
font-weight: 950;
letter-spacing: 0.7px;
border: 2px solid rgba(255, 255, 255, 0.88);
}
.demo-ad-card.is-banner .demo-ad-icon {
width: 40px;
height: 40px;
border-radius: 14px;
font-size: 8px;
}
.demo-ad-copy {
min-width: 0;
}
.demo-ad-kicker {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
color: #64748b;
font-size: 8px;
font-weight: 950;
letter-spacing: 1px;
text-transform: uppercase;
}
.demo-ad-badge {
display: inline-flex;
padding: 3px 7px;
border-radius: 999px;
background: #fef3c7;
color: #92400e;
border: 1px solid #fde68a;
font-size: 7px;
font-weight: 950;
letter-spacing: 0.7px;
}
.demo-ad-title {
color: #11194d;
font-size: 13px;
line-height: 1.28;
font-weight: 950;
overflow-wrap: anywhere;
}
.demo-ad-body {
margin-top: 3px;
color: #64748b;
font-size: 10px;
line-height: 1.35;
font-weight: 800;
}
.demo-ad-card.is-banner .demo-ad-title {
font-size: 11px;
}
.demo-ad-card.is-banner .demo-ad-body {
display: none;
}
.demo-ad-cta {
flex-shrink: 0;
border-radius: 14px;
background: #11194d;
color: white;
padding: 9px 12px;
font-size: 8px;
font-weight: 950;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.large-native-ad-slot .demo-ad-card.is-native {
min-height: 210px;
grid-template-columns: 64px minmax(0, 1fr);
align-items: start;
padding: 18px;
}
.large-native-ad-slot .demo-ad-card.is-native .demo-ad-icon {
width: 64px;
height: 64px;
}
.large-native-ad-slot .demo-ad-card.is-native .demo-ad-cta {
grid-column: 1 / -1;
width: 100%;
text-align: center;
}
.unit-list-ad-slot .demo-ad-card {
height: 120px;
min-height: 120px;
border-radius: 30px;
}
.unit-list-ad-slot .demo-ad-card.is-banner {
width: 100%;
grid-template-columns: 52px minmax(0, 1fr) auto;
padding: 14px 18px;
}
.unit-list-ad-slot .demo-ad-card.is-banner .demo-ad-icon {
width: 52px;
height: 52px;
border-radius: 18px;
font-size: 10px;
}
.unit-list-ad-slot .demo-ad-card.is-banner .demo-ad-body {
display: block;
}
@media (max-width: 480px) {
.demo-ad-card.is-native {
grid-template-columns: 48px minmax(0, 1fr);
}
.demo-ad-card.is-native .demo-ad-icon {
width: 48px;
height: 48px;
}
.demo-ad-card.is-native .demo-ad-cta {
grid-column: 1 / -1;
width: 100%;
text-align: center;
}
.unit-list-ad-slot .demo-ad-card.is-banner {
grid-template-columns: 44px minmax(0, 1fr);
padding: 12px 14px;
}
.unit-list-ad-slot .demo-ad-card.is-banner .demo-ad-icon {
width: 44px;
height: 44px;
}
.unit-list-ad-slot .demo-ad-card.is-banner .demo-ad-cta {
display: none;
}
}
.unit-list-ad-slot {
height: 120px;
margin: 20px 0 40px;
overflow: hidden;
contain: layout paint style;
}
.unit-list-ad-slot.ad-slot.is-native-placeholder.is-banner-placeholder {
height: 120px;
min-height: 120px;
}
.test-list-ad-slot {
width: 100%;
height: 154px;
min-height: 154px;
margin: 18px 0 24px;
overflow: hidden;
contain: layout paint style;
}
.test-list-ad-slot.ad-slot.is-native-placeholder {
height: 154px;
min-height: 154px;
border-color: rgba(99, 102, 241, 0.22);
background:
radial-gradient(circle at 8% 0%, rgba(99, 102, 241, 0.12), transparent 32%),
linear-gradient(135deg, #f8fbff 0%, #ffffff 58%, #fff7ed 100%);
}
.test-list-ad-slot .demo-ad-card.is-native {
min-height: 136px;
}
#home-footer-ad-slot,
#result-native-ad-slot,
#theory-header-ad-slot,
#theory-footer-ad-slot,
#q1-explanation-ad-slot {
margin: 24px 0;
}
#home-footer-ad-slot {
margin-top: 28px;
margin-bottom: 96px;
}
#q1-explanation-ad-slot {
padding-top: 22px;
border-top: 1px dashed #e2e8f0;
width: 100%;
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
/* विज्ञापन बंद होने पर भी सफेद पट्टी (reserved जगह) — ठोस सफेद + टच ब्लॉक */
#q1-explanation-ad-slot.is-reserved-strip {
background: #ffffff;
position: relative;
z-index: 1;
pointer-events: auto;
touch-action: none;
}
#theory-footer-ad-slot {
max-width: 620px;
margin-top: 32px;
margin-bottom: 28px;
}
.theory-inline-ad-slot {
width: 100%;
max-width: 620px;
height: 280px;
min-height: 280px;
margin: 22px auto 30px;
overflow: hidden;
contain: layout paint style;
}
.theory-inline-ad-slot.is-native-placeholder {
height: 280px;
min-height: 280px;
border-color: rgba(214, 168, 31, 0.34);
background:
radial-gradient(circle at 9% 0%, rgba(246, 200, 79, 0.15), transparent 32%),
linear-gradient(135deg, #fffdf5 0%, #ffffff 58%, #eff6ff 100%);
}
.theory-inline-ad-slot.is-short-notes-ad.is-native-placeholder {
border-color: rgba(37, 99, 235, 0.22);
background:
radial-gradient(circle at 8% 0%, rgba(37, 99, 235, 0.11), transparent 32%),
linear-gradient(135deg, #f8fbff 0%, #ffffff 56%, #fff8e1 100%);
}
.theory-inline-ad-slot.has-demo-ad {
min-height: 280px;
}
.theory-inline-ad-slot .demo-ad-card.is-native {
min-height: 136px;
border-radius: 22px;
}
#theory-screen-content.handwritten-notebook .theory-inline-ad-slot {
/* height वैसी ही (base 280px) — width थोड़ी सी बढ़ाओ (किनारों तक flush नहीं) */
max-width: none;
width: calc(100% + 40px);
margin: 28px -18px 34px -22px; /* top right bottom left */
border-radius: 8px;
}
#theory-screen-content.handwritten-notebook .theory-inline-ad-slot.is-native-placeholder {
border: none;
background:
linear-gradient(90deg, transparent 0 54px, rgba(239, 68, 68, 0.14) 54px 56px, transparent 56px),
repeating-linear-gradient(0deg, rgba(255, 254, 248, 0.82) 0 35px, rgba(59, 130, 246, 0.12) 35px 37px);
}
#theory-screen-content.handwritten-notebook .theory-inline-ad-slot::after {
color: #7f1d1d;
border-color: rgba(153, 27, 27, 0.28);
background: rgba(255, 254, 248, 0.94);
}
/* मोबाइल पर एड के पीछे टेक्स्ट न छिपे इसके लिए जगह बनाना */
#quiz-screen, #theory-screen, #result-screen {
padding-bottom: 96px !important;
}
body.quiz-active #quiz-screen {
padding-top: var(--quiz-screen-top-safe-space) !important;
scroll-padding-top: var(--quiz-screen-top-safe-space);
}
body.ads-sticky-active #quiz-screen,
body.ads-sticky-active #theory-screen,
body.ads-sticky-active #result-screen {
padding-bottom: var(--sticky-banner-screen-padding) !important;
scroll-padding-bottom: var(--sticky-banner-screen-padding);
}
body.ads-sticky-active #pn-btns {
top: calc((100dvh - var(--sticky-banner-reserved-space)) / 2) !important;
right: max(10px, calc(env(safe-area-inset-right) + 10px)) !important;
bottom: auto !important;
transform: translateY(-50%) !important;
z-index: 2190 !important;
}
/* 🛡️ AdMob safe-zone: जब कोई भी विज्ञापन स्क्रीन में दिखे, तब सारे फ्लोटिंग
क्लिक करने योग्य कंट्रोल्स (Prev/Next बटन, स्कोर-बोर्ड, ऑडियो pill,
पॉडकास्ट बटन) छुपा दें — ताकि वे विज्ञापन के ऊपर न आएं और
accidental/invalid click न हो। */
body.ad-in-view #pn-btns,
body.ad-in-view #score-board,
body.ad-in-view #floating-audio-pill,
body.ad-in-view #theory-floating-podcast-btn {
display: none !important;
pointer-events: none !important;
}
#tests-list-screen {
padding-bottom: 132px !important;
}
body.ads-sticky-active #tests-list-screen {
padding-bottom: max(218px, calc(env(safe-area-inset-bottom) + 204px)) !important;
}
.home-legal-footer {
margin-top: 42px !important;
padding-bottom: max(128px, calc(env(safe-area-inset-bottom) + 112px)) !important;
}
body.ads-sticky-active .home-legal-footer {
padding-bottom: max(218px, calc(env(safe-area-inset-bottom) + 204px)) !important;
}
body.ads-sticky-active #home-footer-ad-slot {
margin-bottom: 34px;
}
body.ads-sticky-active #score-board {
bottom: max(142px, calc(var(--sticky-banner-reserved-space) + 24px)) !important;
}
body.ads-sticky-active #floating-audio-pill {
bottom: max(136px, calc(var(--sticky-banner-reserved-space) + 18px)) !important;
}
body.ads-sticky-active #theory-floating-podcast-btn {
bottom: max(202px, calc(var(--sticky-banner-reserved-space) + 84px)) !important;
}
/* ⭐ प्रीमियम टेस्ट कार्ड डिज़ाइन ⭐ */
.premium-test-item {
background: #ffffff;
border: 1px solid #f1f5f9;
border-radius: 28px;
padding: 16px 20px;
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
cursor: pointer;
position: relative;
border-bottom: 4px solid #f1f5f9; /* हल्का 3D इफ़ेक्ट */
}
.premium-test-item:active {
transform: scale(0.97);
border-bottom-width: 1px;
}
/* लेफ्ट साइड - नंबर बैज */
.test-number-badge {
width: 50px;
height: 50px;
flex-shrink: 0;
background: #f8fafc;
color: #64748b;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 16px;
border: 1px solid #e2e8f0;
}
/* बीच का हिस्सा - टेक्स्ट कंट्रोल */
.test-info-area {
flex-grow: 1;
min-width: 0; /* बहुत ज़रूरी: टेक्स्ट को काटने के लिए */
}
.test-main-title {
color: #1e293b;
font-weight: 800;
font-size: 15px;
line-height: 1.3;
margin-bottom: 2px;
display: -webkit-box;
-webkit-line-clamp: 2; /* अधिकतम 2 लाइन */
-webkit-box-orient: vertical;
overflow: hidden;
}
.test-sub-text {
color: #94a3b8;
font-weight: 700;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* दायां हिस्सा - एक्शन बटन */
.action-status-btn {
flex-shrink: 0;
min-width: 110px;
height: 44px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 900;
font-size: 11px;
text-transform: uppercase;
transition: all 0.2s;
}
/* अनलॉक वाला बटन (Glassy Amber) */
.btn-locked {
background: #fffbeb;
border: 1px solid #fde68a;
color: #d97706;
}
/* स्टार्ट वाला बटन (Soft Indigo) */
.btn-start {
background: #eff6ff;
border: 1px solid #bfdbfe;
color: #2563eb;
}
.btn-unlocked-premium {
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #16a34a;
}
.unlock-reward-badge,
.unlock-instant-cta {
position: relative;
overflow: hidden;
min-width: 190px;
min-height: 54px;
border-radius: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 9px 16px;
isolation: isolate;
text-align: left;
}
.unlock-reward-badge {
color: #fffdf0;
background:
radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.42), transparent 30%),
linear-gradient(135deg, #064e3b 0%, #10b981 52%, #f5c542 132%);
border: 2px solid rgba(245, 197, 66, 0.92);
box-shadow:
0 16px 28px -16px rgba(6, 78, 59, 0.82),
0 0 0 4px rgba(245, 197, 66, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.36),
inset 0 -3px 9px rgba(0, 0, 0, 0.22);
}
.unlock-reward-badge::after,
.unlock-instant-cta::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.34) 44%, transparent 70%);
transform: translateX(-130%);
animation: rewardSweep 2.7s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.reward-medal,
.unlock-cta-icon {
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.reward-medal {
color: #6b3f00;
background: linear-gradient(145deg, #fff7bf 0%, #f5c542 54%, #b8790b 100%);
border: 1px solid rgba(255, 255, 255, 0.62);
box-shadow: 0 8px 14px -9px rgba(69, 26, 3, 0.9), inset 0 1px 0 rgba(255,255,255,0.7);
}
.reward-medal svg,
.unlock-cta-icon svg {
width: 18px;
height: 18px;
stroke-width: 2.6;
}
.reward-copy,
.unlock-cta-copy {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1;
position: relative;
z-index: 1;
}
.reward-title,
.unlock-cta-title {
font-size: 11px;
font-weight: 900;
letter-spacing: 2.2px;
text-transform: uppercase;
white-space: nowrap;
}
.reward-subtitle,
.unlock-cta-subtitle {
margin-top: 5px;
font-size: 7.5px;
font-weight: 900;
letter-spacing: 1.2px;
text-transform: uppercase;
opacity: 0.86;
white-space: nowrap;
}
.unlock-instant-cta {
color: #11194d;
background:
radial-gradient(circle at 10% 8%, rgba(245, 197, 66, 0.28), transparent 28%),
linear-gradient(135deg, #fff8df 0%, #ffffff 48%, #eef2ff 100%);
border: 2px solid rgba(245, 197, 66, 0.78);
box-shadow:
0 14px 24px -18px rgba(17, 25, 77, 0.62),
0 0 0 3px rgba(245, 197, 66, 0.10),
inset 0 1px 0 rgba(255,255,255,0.92);
}
.unlock-cta-icon {
color: #fff7d6;
background: linear-gradient(145deg, #11194d 0%, #4f46e5 64%, #f5c542 150%);
box-shadow: 0 9px 16px -10px rgba(17, 25, 77, 0.82);
}
.unlock-cta-title {
color: #11194d;
letter-spacing: 1.7px;
}
.unlock-cta-subtitle {
color: #a16207;
}
.locked-ad-unlock-cta {
position: relative;
overflow: hidden;
min-width: 184px;
min-height: 54px;
border-radius: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 10px 18px;
color: #11194d;
background:
radial-gradient(circle at 12% 10%, rgba(245, 197, 66, 0.20), transparent 30%),
linear-gradient(135deg, #fff9e8 0%, #fffdf7 46%, #f5f8ff 100%);
border: 1.8px solid rgba(245, 197, 66, 0.76);
box-shadow:
0 14px 24px -18px rgba(17, 25, 77, 0.58),
0 0 0 3px rgba(245, 197, 66, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.locked-ad-unlock-cta::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.42) 44%, transparent 72%);
transform: translateX(-130%);
transition: transform 0.5s ease;
pointer-events: none;
}
.locked-ad-unlock-cta:hover::after {
transform: translateX(130%);
}
.locked-ad-icon {
width: 34px;
height: 34px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 19px;
background: linear-gradient(145deg, #fff7c2 0%, #f7d36d 60%, #d59b21 100%);
box-shadow:
0 9px 15px -11px rgba(120, 53, 15, 0.86),
inset 0 1px 0 rgba(255,255,255,0.76);
}
.locked-ad-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1;
position: relative;
z-index: 1;
}
.locked-ad-title {
color: #11194d;
font-size: 9.5px;
font-weight: 900;
letter-spacing: 0.2px;
white-space: nowrap;
}
.locked-ad-subtitle {
margin-top: 5px;
color: #c05621;
font-size: 8.5px;
font-weight: 900;
letter-spacing: 0.4px;
text-transform: uppercase;
white-space: nowrap;
}
@keyframes rewardSweep {
0%, 45% { transform: translateX(-130%); }
72%, 100% { transform: translateX(130%); }
}
@media (max-width: 520px) {
.unlock-reward-badge,
.unlock-instant-cta,
.locked-ad-unlock-cta {
width: 100%;
min-width: 0;
min-height: 50px;
padding: 8px 13px;
border-radius: 18px;
}
.reward-title,
.unlock-cta-title {
font-size: 10px;
letter-spacing: 1.6px;
}
}
.unit-chapter-card {
--unit-a: #4f46e5;
--unit-b: #11194d;
--unit-c: #f5c542;
--unit-soft: rgba(79, 70, 229, 0.13);
--unit-text: #ffffff;
position: relative;
isolation: isolate;
margin-bottom: 30px;
border-radius: 34px;
overflow: hidden;
border: 2px solid color-mix(in srgb, var(--unit-a) 38%, #ffffff 62%);
background:
linear-gradient(90deg, var(--unit-a) 0%, color-mix(in srgb, var(--unit-a) 45%, var(--unit-b) 55%) 50%, var(--unit-b) 100%);
box-shadow:
0 24px 44px -24px color-mix(in srgb, var(--unit-b) 72%, transparent),
inset 0 1px 0 rgba(255,255,255,0.30);
}
.unit-chapter-card::before,
.unit-chapter-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.unit-chapter-card::before {
opacity: 0.34;
background-image:
radial-gradient(circle, rgba(255,255,255,0.35) 0 1px, transparent 1.5px),
radial-gradient(circle, rgba(255,255,255,0.18) 0 1px, transparent 1.8px);
background-size: 16px 16px, 29px 29px;
background-position: 0 0, 11px 13px;
}
.unit-chapter-card::after {
background:
radial-gradient(ellipse at center, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.16) 34%, transparent 68%);
}
.unit-chapter-card > * {
position: relative;
z-index: 1;
}
.unit-chapter-header {
min-height: 84px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 16px;
cursor: pointer;
transition: transform 0.16s ease, filter 0.16s ease;
}
.unit-chapter-header:active {
transform: translateY(2px) scale(0.985);
}
.unit-chapter-main {
min-width: 0;
display: flex;
align-items: center;
gap: 0;
flex: 1 1 auto;
}
.unit-chapter-copy {
min-width: 0;
flex: 1 1 auto;
}
.unit-title {
color: var(--unit-text);
min-width: 0;
margin: 0;
padding: 3px 0 2px;
font-size: clamp(14px, 2.35vw, 19px);
font-weight: 900;
line-height: 1.38;
letter-spacing: 0;
white-space: normal;
overflow: visible;
overflow-wrap: anywhere;
text-overflow: clip;
text-shadow: 0 4px 18px color-mix(in srgb, var(--unit-b) 72%, transparent);
}
.unit-title-row {
min-width: 0;
display: flex;
align-items: center;
gap: 9px;
}
.unit-chapter-number {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 11px;
color: color-mix(in srgb, var(--unit-b) 86%, #11194d 14%);
background: rgba(255, 255, 255, 0.90);
border: 1px solid rgba(255, 255, 255, 0.62);
box-shadow: 0 12px 22px -16px color-mix(in srgb, var(--unit-b) 78%, transparent), inset 0 1px 0 rgba(255,255,255,0.96);
font-size: 13px;
font-weight: 900;
line-height: 1;
}
.unit-chapter-actions {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 9px;
}
.unit-count-pill {
min-width: 70px;
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
border-radius: 999px;
color: #11194d;
background: rgba(255,255,255,0.88);
border: 1px solid rgba(255,255,255,0.58);
box-shadow: 0 12px 24px -18px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.94);
font-size: 10px;
font-weight: 900;
white-space: nowrap;
}
.unit-fold-arrow {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: #ffffff;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.24);
font-size: 15px;
font-weight: 900;
transition: transform 0.2s ease;
}
.unit-inner-list {
margin: 0 20px 20px;
padding: 18px;
border-radius: 28px;
background: rgba(255,255,255,0.84);
border: 1px solid rgba(255,255,255,0.52);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.88);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.unit-inner-list .ad-slot.is-native-placeholder {
height: 128px;
min-height: 128px;
margin: 22px 0;
}
.unit-inner-list .ad-slot.is-native-placeholder.is-banner-placeholder {
height: 120px;
min-height: 120px;
}
.unit-test-card {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 12px;
padding: 17px;
border-radius: 25px;
border: 2px solid color-mix(in srgb, var(--unit-a) 24%, #ffffff 76%);
background:
radial-gradient(circle at 92% 0%, var(--unit-soft), transparent 32%),
linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,255,255,0.90) 62%, color-mix(in srgb, var(--unit-a) 7%, #ffffff 93%));
box-shadow: 0 16px 30px -24px color-mix(in srgb, var(--unit-b) 62%, transparent);
cursor: pointer;
transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.unit-test-card + .unit-test-card,
.unit-test-card + .ad-slot,
.ad-slot + .unit-test-card {
margin-top: 18px;
}
.unit-test-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.46;
background: linear-gradient(110deg, rgba(255,255,255,0.64), transparent 22%, transparent 76%, var(--unit-soft));
}
.unit-test-card:active {
transform: scale(0.975);
}
.unit-test-card:hover {
transform: translateY(-2px);
box-shadow: 0 22px 38px -24px color-mix(in srgb, var(--unit-b) 70%, transparent);
}
.unit-test-main,
.unit-test-action {
position: relative;
z-index: 1;
}
.unit-test-main {
min-width: 0;
display: flex;
align-items: center;
gap: 14px;
text-align: left;
}
.unit-test-index {
width: 44px;
height: 44px;
flex: 0 0 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 17px;
color: #ffffff;
background:
radial-gradient(circle at 30% 22%, rgba(255,255,255,0.30), transparent 23%),
linear-gradient(145deg, var(--unit-a), var(--unit-b));
border: 1px solid rgba(255,255,255,0.68);
box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--unit-b) 80%, transparent);
font-size: 13px;
font-weight: 900;
}
.unit-test-copy {
min-width: 0;
}
.unit-test-title {
color: color-mix(in srgb, var(--unit-b) 76%, #11194d 24%);
font-size: clamp(16px, 3.2vw, 20px);
font-weight: 900;
line-height: 1.3;
overflow-wrap: anywhere;
}
.unit-test-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 5px;
}
.unit-test-meta strong {
color: color-mix(in srgb, var(--unit-a) 84%, #11194d 16%);
font-size: 9px;
font-weight: 900;
letter-spacing: 1.8px;
text-transform: uppercase;
}
.unit-test-dot {
width: 5px;
height: 5px;
border-radius: 999px;
background: var(--unit-c);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--unit-c) 18%, transparent);
}
.unit-test-meta span {
color: #64748b;
font-size: 10px;
font-weight: 900;
}
.unit-test-action {
width: 100%;
display: flex;
justify-content: center;
}
.unit-test-card.is-unlocked {
border-color: color-mix(in srgb, var(--unit-c) 38%, #ffffff 62%);
}
.unit-theme-sapphire { --unit-a: #2563eb; --unit-b: #11194d; --unit-c: #f5c542; --unit-soft: rgba(37, 99, 235, 0.15); }
.unit-theme-emerald { --unit-a: #059669; --unit-b: #064e3b; --unit-c: #a7f3d0; --unit-soft: rgba(5, 150, 105, 0.15); }
.unit-theme-rose { --unit-a: #e11d48; --unit-b: #831843; --unit-c: #fecdd3; --unit-soft: rgba(225, 29, 72, 0.14); }
.unit-theme-amber { --unit-a: #f59e0b; --unit-b: #78350f; --unit-c: #fde68a; --unit-soft: rgba(245, 158, 11, 0.17); }
.unit-theme-violet { --unit-a: #7c3aed; --unit-b: #312e81; --unit-c: #ddd6fe; --unit-soft: rgba(124, 58, 237, 0.15); }
.unit-theme-cyan { --unit-a: #0891b2; --unit-b: #164e63; --unit-c: #a5f3fc; --unit-soft: rgba(8, 145, 178, 0.15); }
.unit-theme-lime { --unit-a: #65a30d; --unit-b: #365314; --unit-c: #d9f99d; --unit-soft: rgba(101, 163, 13, 0.16); }
.unit-theme-coral { --unit-a: #f97316; --unit-b: #9a3412; --unit-c: #fed7aa; --unit-soft: rgba(249, 115, 22, 0.16); }
@media (min-width: 640px) {
.unit-test-card {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.unit-test-main {
flex: 1 1 auto;
}
.unit-test-action {
width: auto;
flex-shrink: 0;
justify-content: flex-end;
}
}
@media (max-width: 640px) {
.unit-chapter-card {
margin-bottom: 22px;
border-radius: 28px;
}
.unit-chapter-header {
min-height: 76px;
align-items: center;
gap: 8px;
padding: 13px;
}
.unit-chapter-main {
gap: 0;
}
.unit-title {
font-size: clamp(12.5px, 3.45vw, 15px);
line-height: 1.42;
padding-top: 4px;
padding-bottom: 3px;
}
.unit-title-row {
gap: 7px;
}
.unit-chapter-number {
width: 27px;
height: 27px;
flex-basis: 27px;
border-radius: 10px;
font-size: 12px;
}
.unit-chapter-actions {
gap: 7px;
}
.unit-count-pill {
min-width: 60px;
min-height: 32px;
padding: 7px 9px;
font-size: 8.5px;
}
.unit-fold-arrow {
width: 29px;
height: 29px;
font-size: 13px;
}
.unit-inner-list {
margin: 0 12px 14px;
padding: 12px;
border-radius: 22px;
}
.unit-test-card {
padding: 14px;
border-radius: 21px;
}
.unit-test-main {
gap: 11px;
}
.unit-test-index {
width: 38px;
height: 38px;
flex-basis: 38px;
border-radius: 14px;
}
.unit-test-meta strong {
letter-spacing: 1.2px;
}
}
#folders-screen,
#tests-list-screen {
position: relative;
isolation: isolate;
min-height: calc(100dvh - 78px);
}
#folders-screen::before,
#folders-screen::after,
#tests-list-screen::before,
#tests-list-screen::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
}
#folders-screen::before,
#tests-list-screen::before {
z-index: -2;
background:
radial-gradient(circle at 18% 6%, rgba(255, 255, 255, 0.28), transparent 25%),
radial-gradient(circle at 86% 18%, rgba(255, 255, 255, 0.18), transparent 24%),
radial-gradient(circle at 78% 100%, rgba(255, 246, 181, 0.72), transparent 33%),
linear-gradient(180deg, #ff6b45 0%, #ff7e2f 36%, #ffb66d 68%, #fffbe8 100%);
}
#folders-screen::after,
#tests-list-screen::after {
z-index: -1;
opacity: 0.42;
background-image:
radial-gradient(circle, rgba(255,255,255,0.66) 0 1px, transparent 1.5px),
radial-gradient(circle, rgba(255,247,227,0.44) 0 1px, transparent 1.8px),
linear-gradient(180deg, transparent 0 64%, rgba(255, 255, 245, 0.62) 100%);
background-size: 16px 16px, 28px 28px, 100% 100%;
background-position: 0 0, 10px 13px, 0 0;
}
#folders-screen #user-greeting {
color: #ffffff !important;
text-shadow: 0 3px 12px rgba(177, 65, 24, 0.26);
}
#folders-screen #user-greeting span {
color: inherit !important;
}
.learning-command-center {
width: min(100%, 540px);
margin: 12px auto 22px;
border-radius: 34px;
border: 1.5px solid rgba(255, 255, 255, 0.56);
position: relative;
isolation: isolate;
overflow: hidden;
background:
radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.24), transparent 30%),
radial-gradient(circle at 92% 12%, rgba(255, 242, 184, 0.28), transparent 34%),
linear-gradient(145deg, rgba(255, 115, 61, 0.88) 0%, rgba(255, 139, 48, 0.84) 48%, rgba(255, 224, 142, 0.72) 118%);
box-shadow:
0 28px 54px -30px rgba(177, 65, 24, 0.64),
inset 0 0 0 1px rgba(255,255,255,0.42);
padding: clamp(14px, 2.8vw, 24px);
}
.learning-command-center::before {
content: '';
position: absolute;
inset: 9px;
border-radius: 26px;
border: 1px solid rgba(255, 255, 255, 0.24);
background:
radial-gradient(circle at 10% 16%, rgba(255,255,255,0.14), transparent 24%),
linear-gradient(135deg, rgba(255,255,255,0.14), transparent 40%, rgba(255,247,229,0.18));
pointer-events: none;
z-index: 0;
}
.learning-command-center > * {
position: relative;
z-index: 1;
}
.learning-panel-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
margin-bottom: 16px;
padding: 15px 16px;
border-radius: 26px;
border: 1.5px solid rgba(255, 255, 255, 0.34);
background:
linear-gradient(180deg, rgba(255,255,255,0.20), transparent 50%),
linear-gradient(135deg, rgba(255, 105, 65, 0.94) 0%, rgba(255, 126, 46, 0.92) 58%, rgba(255, 197, 111, 0.88) 140%);
box-shadow:
0 18px 28px -22px rgba(165, 59, 20, 0.82),
inset 0 1px 0 rgba(255,255,255,0.36);
}
.learning-kicker {
display: block;
color: rgba(255, 255, 255, 0.86);
font-size: 8px;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 4px;
}
.learning-title {
color: #ffffff;
font-size: clamp(18px, 4.4vw, 26px);
font-weight: 900;
line-height: 1.18;
text-shadow: 0 2px 8px rgba(0,0,0,0.22);
}
.learning-title .learning-title-gold {
background: linear-gradient(180deg, #ffffff 0%, #fff5dc 48%, #ffe397 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.learning-refresh-btn {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #11194d;
background: rgba(255,255,255,0.76);
border: 1px solid rgba(218, 165, 76, 0.34);
box-shadow: 0 12px 22px -18px rgba(15, 23, 42, 0.48);
}
.learning-stats-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.learning-stat-card {
border-radius: 26px;
border: 1.5px solid rgba(255, 234, 218, 0.72);
background:
radial-gradient(circle at 94% 0%, rgba(255, 116, 61, 0.11), transparent 28%),
linear-gradient(135deg, rgba(255,255,255,0.97), rgba(255,252,246,0.98) 72%, rgba(255,247,230,0.92));
padding: 16px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.90),
0 18px 32px -24px rgba(177, 65, 24, 0.42);
}
.leaderboard-home-card {
position: relative;
overflow: hidden;
padding-top: 18px;
}
.leaderboard-home-card::before {
content: "";
position: absolute;
left: 22px;
right: 22px;
top: 0;
height: 5px;
border-radius: 0 0 999px 999px;
background: linear-gradient(90deg, transparent, #f7c948, #4f46e5, transparent);
opacity: 0.92;
}
.learning-stat-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.leaderboard-home-card .learning-stat-topline {
position: relative;
justify-content: center;
margin-bottom: 13px;
min-height: 38px;
}
.leaderboard-home-card .learning-stat-label {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
max-width: calc(100% - 54px);
min-height: 34px;
padding: 8px 18px;
border-radius: 999px;
color: #4a2a05;
background:
linear-gradient(90deg, rgba(255,255,255,0.38), transparent 22%, rgba(255,255,255,0.26) 52%, transparent 78%),
linear-gradient(135deg, #fff7d6 0%, #f7c948 54%, #b7791f 100%);
border: 1.5px solid rgba(146, 64, 14, 0.24);
box-shadow:
0 14px 26px -18px rgba(146, 64, 14, 0.96),
inset 0 1px 0 rgba(255,255,255,0.72),
inset 0 -1px 0 rgba(74, 42, 5, 0.18);
font-size: 11px;
font-weight: 1000;
letter-spacing: 1.8px;
line-height: 1;
text-align: center;
white-space: nowrap;
}
.leaderboard-home-card .learning-stat-label::before,
.leaderboard-home-card .learning-stat-label::after {
content: "";
width: 7px;
height: 7px;
border-radius: 999px;
background: #11194d;
box-shadow: 0 0 0 4px rgba(17, 25, 77, 0.10);
flex-shrink: 0;
}
.learning-stat-icon {
width: 34px;
height: 34px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff7d6;
background: linear-gradient(145deg, #071b34, #11194d 55%, #4f46e5);
border: 1px solid rgba(245,197,66,0.42);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 12px 18px -16px rgba(17,25,77,0.82);
}
.leaderboard-home-card .learning-stat-icon {
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 15px;
}
.learning-stat-icon svg {
width: 17px;
height: 17px;
}
.learning-stat-label {
display: block;
color: #9a6a25;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.learning-stat-value {
color: #11194d;
font-size: clamp(24px, 5.4vw, 36px);
font-weight: 900;
line-height: 1;
letter-spacing: 0.4px;
}
.learning-stat-note {
color: #475569;
font-size: 11px;
font-weight: 900;
line-height: 1.45;
margin-top: 8px;
}
.streak-overview-card {
grid-column: 1 / -1;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.streak-overview-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin: 2px 4px 12px;
color: #ffffff;
}
.streak-eyebrow {
display: block;
color: rgba(255,255,255,0.82);
font-size: 14px;
font-weight: 800;
line-height: 1;
}
.streak-overview-title {
margin-top: 4px;
color: #ffffff;
font-size: clamp(24px, 6vw, 34px);
font-weight: 900;
line-height: 1;
text-shadow: 0 3px 12px rgba(163, 58, 19, 0.24);
}
.streak-live-chip {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
min-height: 38px;
padding: 8px 12px;
border-radius: 999px;
color: #ffffff;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.34);
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.7px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.streak-live-chip svg {
width: 16px;
height: 16px;
}
.streak-calendar-panel {
border-radius: 30px;
padding: clamp(16px, 3.6vw, 24px);
background: rgba(255, 255, 255, 0.96);
border: 1.5px solid rgba(255, 255, 255, 0.92);
box-shadow:
0 22px 42px -26px rgba(142, 50, 18, 0.62),
inset 0 1px 0 rgba(255,255,255,0.94);
}
.streak-month-strip {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
margin-bottom: 20px;
color: #c8b8af;
font-size: clamp(12px, 3.4vw, 16px);
font-weight: 900;
}
.streak-month-strip span:last-child {
text-align: right;
}
.streak-month-strip strong {
color: #ff6538;
font-size: clamp(18px, 4.8vw, 24px);
line-height: 1;
}
.streak-week-row,
.streak-calendar-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: clamp(7px, 2.2vw, 12px);
max-width: 430px;
margin-left: auto;
margin-right: auto;
}
.streak-week-row {
margin-bottom: 10px;
color: #2f2f35;
font-size: clamp(9px, 2.6vw, 12px);
font-weight: 900;
text-align: center;
}
.streak-day-cell {
aspect-ratio: 1;
width: min(100%, 44px);
min-width: 0;
justify-self: center;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
color: #2d2a2d;
background: #ffffff;
border: 1.5px solid #f5e8df;
font-size: clamp(10px, 3vw, 14px);
font-weight: 900;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
.streak-day-cell.is-empty {
visibility: hidden;
}
.streak-day-cell.is-active {
color: #ffffff;
border-color: rgba(255, 100, 52, 0.86);
background:
radial-gradient(circle at 34% 26%, rgba(255,255,255,0.38), transparent 18%),
linear-gradient(145deg, #ff7a38 0%, #ff512f 68%, #de3a1e 100%);
box-shadow:
0 8px 14px -8px rgba(235, 75, 30, 0.9),
inset 0 1px 0 rgba(255,255,255,0.34);
}
.streak-day-cell.is-today {
border-color: rgba(255, 101, 56, 0.72);
box-shadow:
0 0 0 4px rgba(255, 101, 56, 0.10),
inset 0 1px 0 rgba(255,255,255,0.9);
}
.streak-day-cell.is-active.is-today {
box-shadow:
0 0 0 4px rgba(255, 101, 56, 0.16),
0 8px 14px -8px rgba(235, 75, 30, 0.9),
inset 0 1px 0 rgba(255,255,255,0.34);
}
.streak-day-cell svg {
width: 54%;
height: 54%;
filter: drop-shadow(0 1px 1px rgba(152, 45, 15, 0.34));
}
.streak-summary-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 22px;
margin-left: auto;
margin-right: auto;
max-width: 430px;
padding-top: 18px;
border-top: 1px solid #f0e6de;
}
.streak-summary-item {
min-width: 0;
}
.streak-summary-label {
display: block;
color: #3b3432;
font-size: clamp(9px, 2.7vw, 12px);
font-weight: 900;
line-height: 1.25;
}
.streak-summary-value {
display: inline-flex;
align-items: baseline;
gap: 4px;
margin-top: 4px;
color: #262327;
font-size: clamp(20px, 5.2vw, 27px);
font-weight: 900;
line-height: 1;
}
.streak-summary-unit {
color: #8f8580;
font-size: 12px;
font-weight: 900;
}
.streak-trophy-section {
margin-top: 14px;
border-radius: 26px;
padding: 15px;
background: rgba(255,255,255,0.78);
border: 1.5px solid rgba(255, 216, 197, 0.84);
box-shadow: 0 18px 32px -26px rgba(177, 65, 24, 0.44);
}
.streak-trophy-title {
display: flex;
align-items: center;
gap: 8px;
color: #2b2524;
font-size: 15px;
font-weight: 900;
margin-bottom: 11px;
}
.streak-trophy-title svg {
width: 20px;
height: 20px;
color: #ff6538;
}
.streak-trophy-list {
display: grid;
gap: 9px;
}
.streak-trophy-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
min-height: 48px;
padding: 9px 11px;
border-radius: 17px;
border: 1.4px solid #ffd5c8;
background: #ffffff;
color: #3b3432;
font-size: 12px;
font-weight: 900;
box-shadow: 0 10px 18px -16px rgba(177, 65, 24, 0.42);
}
.streak-trophy-row svg {
width: 18px;
height: 18px;
color: #ff6538;
}
.streak-trophy-row span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.streak-trophy-row b {
padding: 7px 10px;
border-radius: 999px;
color: #9a4525;
background: #fff0e9;
font-size: 9px;
font-weight: 900;
}
.streak-trophy-row.is-unlocked b {
color: #4a2a05;
background: linear-gradient(145deg, #fff7cf 0%, #f7c948 58%, #d99a18 100%);
border: 1px solid rgba(146, 64, 14, 0.22);
box-shadow: 0 10px 18px -12px rgba(146, 64, 14, 0.82);
}
.streak-trophy-row.is-unlocked {
border-color: rgba(245, 158, 11, 0.58);
background: linear-gradient(135deg, #fffdf2 0%, #ffffff 55%, #fff1b8 100%);
box-shadow: 0 12px 24px -16px rgba(180, 83, 9, 0.72);
}
.streak-trophy-row.is-unlocked svg {
color: #d99000;
filter: drop-shadow(0 3px 4px rgba(180, 83, 9, 0.24));
}
.streak-trophy-row.is-unlocked b::before {
content: "🏆";
margin-right: 4px;
}
.streak-trophy-row.is-unlocked[data-achievement="Silver"] b {
color: #334155;
background: linear-gradient(145deg, #ffffff 0%, #dbe3ec 55%, #a8b4c4 100%);
}
.streak-trophy-row.is-unlocked[data-achievement="Gold"] b {
color: #713f12;
background: linear-gradient(145deg, #fff8c5 0%, #facc15 52%, #e59b08 100%);
}
.leaderboard-open-btn {
width: 100%;
min-height: 58px;
border-radius: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
color: #fff7d6;
background:
linear-gradient(180deg, rgba(255,248,220,0.20), transparent 45%),
linear-gradient(135deg, #071b34 0%, #11194d 52%, #4f46e5 100%);
border: 1.5px solid rgba(245, 197, 66, 0.58);
box-shadow:
0 18px 28px -18px rgba(17, 25, 77, 0.78),
inset 0 1px 0 rgba(255,255,255,0.26);
font-size: clamp(15px, 4vw, 22px);
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.leaderboard-open-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.leaderboard-modal {
position: fixed;
inset: 0;
z-index: 5000;
display: flex;
align-items: center;
justify-content: center;
padding: max(14px, calc(env(safe-area-inset-top) + 8px)) 18px max(104px, calc(env(safe-area-inset-bottom) + 86px));
overflow-y: auto;
background:
radial-gradient(circle at 50% 10%, rgba(248, 181, 38, 0.14), transparent 30%),
rgba(15, 23, 42, 0.78);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.leaderboard-modal.hidden {
display: none !important;
}
.leaderboard-modal-card {
width: min(620px, 100%);
min-height: min(760px, calc(100dvh - 104px));
max-height: min(880px, calc(100dvh - 82px));
overflow: hidden;
border-radius: 36px;
border: 2px solid rgba(218, 165, 76, 0.68);
background:
radial-gradient(circle at 12% 0%, rgba(245, 197, 66, 0.24), transparent 34%),
radial-gradient(circle at 92% 12%, rgba(99, 102, 241, 0.12), transparent 28%),
linear-gradient(135deg, #fff8e6 0%, #ffffff 46%, #eef2ff 100%);
box-shadow:
0 34px 70px -24px rgba(7, 11, 36, 0.7),
inset 0 1px 0 rgba(255,255,255,0.8);
padding: 20px;
display: flex;
flex-direction: column;
}
.leaderboard-modal-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
margin-bottom: 14px;
position: relative;
padding-right: 54px;
flex-shrink: 0;
}
.leaderboard-modal-card .learning-kicker {
color: #9a6a25;
}
.leaderboard-modal-card .learning-title {
color: #11194d;
text-shadow: none;
font-size: clamp(26px, 5vw, 36px);
line-height: 1.05;
letter-spacing: 0;
}
.leaderboard-title {
display: flex;
align-items: center;
gap: 10px;
margin-top: 4px;
max-width: 100%;
min-width: 0;
flex-wrap: nowrap;
}
.leaderboard-title-line {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
white-space: nowrap;
flex: 1 1 auto;
overflow: hidden;
}
.leaderboard-title-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 5px 12px;
border-radius: 999px;
color: #4a2a05;
background:
linear-gradient(135deg, #fff7d6 0%, #f7c948 52%, #b7791f 100%);
border: 1px solid rgba(146, 64, 14, 0.22);
box-shadow:
0 10px 22px -16px rgba(146, 64, 14, 0.85),
inset 0 1px 0 rgba(255,255,255,0.75);
font-size: 14px;
font-weight: 1000;
letter-spacing: 0.5px;
line-height: 1;
flex-shrink: 0;
}
.leaderboard-title-main {
color: #11194d;
font-size: clamp(20px, 2.3vw, 26px);
font-weight: 1000;
line-height: 1;
letter-spacing: 0;
flex-shrink: 0;
}
.leaderboard-title-board {
width: fit-content;
position: relative;
color: #11194d;
font-size: clamp(20px, 2.3vw, 26px);
font-weight: 1000;
line-height: 1;
letter-spacing: 0;
flex-shrink: 0;
}
.leaderboard-title-board::after {
content: "";
position: absolute;
left: 2px;
right: 2px;
bottom: -4px;
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(245, 158, 11, 0.78), rgba(99, 102, 241, 0.18));
z-index: -1;
}
.leaderboard-week-label {
margin-top: 5px;
color: #8a5a16;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.leaderboard-period-tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
margin-bottom: 12px;
padding: 5px;
border-radius: 16px;
background: rgba(226, 232, 240, 0.72);
}
.leaderboard-period-tab {
padding: 9px 8px;
border-radius: 12px;
color: #64748b;
background: transparent;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
}
.leaderboard-period-tab.is-active {
color: #ffffff;
background: linear-gradient(135deg, #1d2676, #5b5cf0);
box-shadow: 0 8px 16px -10px rgba(49, 46, 129, 0.9);
}
.leaderboard-modal-close {
position: absolute;
top: 0;
right: 0;
width: 38px;
height: 38px;
border-radius: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #11194d;
background: rgba(255,255,255,0.78);
border: 1px solid rgba(218, 165, 76, 0.34);
font-weight: 900;
flex-shrink: 0;
z-index: 5;
}
.leaderboard-modal-list {
flex: 1 1 auto;
max-height: none;
overflow-y: auto;
padding-right: 2px;
min-height: 0;
}
.leaderboard-self-card {
display: grid;
grid-template-columns: 42px 1fr auto;
align-items: center;
gap: 12px;
margin-bottom: 12px;
padding: 14px;
border-radius: 22px;
border: 2px solid rgba(99, 102, 241, 0.48);
background:
radial-gradient(circle at 10% 0%, rgba(79, 70, 229, 0.2), transparent 35%),
linear-gradient(135deg, #eef2ff 0%, #ffffff 56%, #fff7e6 100%);
box-shadow: 0 14px 28px -22px rgba(49, 46, 129, 0.72);
flex-shrink: 0;
}
.leaderboard-self-card .leaderboard-rank {
width: 40px;
height: 40px;
border-radius: 15px;
background: linear-gradient(145deg, #1d2676, #5b5cf0);
box-shadow: 0 12px 24px -15px rgba(49, 46, 129, 0.95);
}
.leaderboard-self-card .leaderboard-name {
font-size: 14px;
}
.leaderboard-self-card .leaderboard-points {
border-color: rgba(245, 158, 11, 0.46);
background: linear-gradient(135deg, #fff7e6 0%, #ffffff 100%);
}
.leaderboard-self-card.is-empty {
grid-template-columns: 1fr;
border-style: dashed;
border-color: rgba(148, 163, 184, 0.55);
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}
.leaderboard-self-title {
color: #11194d;
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.7px;
margin-bottom: 2px;
}
.leaderboard-self-meta {
color: #64748b;
font-size: 9px;
font-weight: 800;
line-height: 1.35;
}
.leaderboard-list {
display: grid;
gap: 9px;
}
.leaderboard-identity {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.leaderboard-identity > div {
min-width: 0;
}
.leaderboard-avatar {
width: 30px;
height: 30px;
border-radius: 11px;
overflow: hidden;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(99, 102, 241, 0.26);
background: linear-gradient(145deg, #ffffff 0%, #e8ecff 100%);
box-shadow: 0 5px 12px -8px rgba(15, 23, 42, 0.58);
}
.leaderboard-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.leaderboard-avatar-fallback {
color: #1f2a65;
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
}
.leaderboard-row {
display: grid;
grid-template-columns: 42px 1fr auto;
align-items: center;
gap: 12px;
padding: 11px 12px;
border-radius: 20px;
border: 1px solid rgba(226, 232, 240, 0.82);
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
box-shadow: 0 10px 22px -20px rgba(15, 23, 42, 0.35);
}
.leaderboard-row.is-top-1 {
border-color: rgba(245, 158, 11, 0.48);
background: linear-gradient(135deg, #fff8db 0%, #ffffff 62%, #fff3bf 100%);
}
.leaderboard-row.is-top-2 {
border-color: rgba(148, 163, 184, 0.62);
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 62%, #e5e7eb 100%);
}
.leaderboard-row.is-top-3 {
border-color: rgba(180, 83, 9, 0.38);
background: linear-gradient(135deg, #fff7ed 0%, #ffffff 62%, #fed7aa 100%);
}
.leaderboard-rank {
width: 36px;
height: 36px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #fff7d6;
background: linear-gradient(145deg, #11194d, #4f46e5);
font-size: 12px;
font-weight: 900;
box-shadow: 0 9px 18px -13px rgba(17, 25, 77, 0.9);
position: relative;
}
.leaderboard-rank-medal {
font-size: 18px;
line-height: 1;
filter: drop-shadow(0 3px 5px rgba(15, 23, 42, 0.18));
}
.leaderboard-row.is-top-1 .leaderboard-rank {
background: linear-gradient(145deg, #92400e, #f59e0b);
}
.leaderboard-row.is-top-2 .leaderboard-rank {
background: linear-gradient(145deg, #475569, #cbd5e1);
}
.leaderboard-row.is-top-3 .leaderboard-rank {
background: linear-gradient(145deg, #7c2d12, #fb923c);
}
.leaderboard-name {
color: #11194d;
font-size: 12px;
font-weight: 900;
line-height: 1.25;
overflow-wrap: anywhere;
}
.leaderboard-habit {
color: #64748b;
font-size: 9px;
font-weight: 800;
margin-top: 2px;
}
.leaderboard-points {
color: #8a5a16;
background: #fff7e6;
border: 1px solid rgba(218, 165, 76, 0.32);
border-radius: 999px;
padding: 6px 9px;
font-size: 9px;
font-weight: 900;
white-space: nowrap;
justify-self: end;
}
@media (max-width: 520px) {
.learning-panel-head,
.learning-stats-grid {
grid-template-columns: 1fr;
}
.learning-stats-grid {
gap: 10px;
}
.learning-panel-head {
padding: 14px;
border-radius: 22px;
}
.learning-stat-card {
padding: 15px;
border-radius: 22px;
}
.leaderboard-home-card {
padding-top: 17px;
}
.leaderboard-home-card .learning-stat-topline {
min-height: 36px;
margin-bottom: 12px;
}
.leaderboard-home-card .learning-stat-label {
max-width: calc(100% - 48px);
min-height: 32px;
padding: 7px 15px;
font-size: 10px;
letter-spacing: 1.45px;
}
.leaderboard-home-card .learning-stat-icon {
width: 33px;
height: 33px;
border-radius: 14px;
}
.streak-overview-top {
margin: 0 2px 11px;
align-items: center;
}
.streak-live-chip {
min-height: 34px;
padding: 7px 10px;
gap: 6px;
font-size: 8.5px;
letter-spacing: 0.35px;
}
.streak-live-chip svg {
width: 14px;
height: 14px;
}
.streak-calendar-panel {
border-radius: 24px;
padding: 15px;
}
.streak-month-strip {
gap: 6px;
margin-bottom: 16px;
}
.streak-week-row,
.streak-calendar-grid {
gap: 6px;
}
.streak-summary-row {
gap: 6px;
margin-top: 18px;
padding-top: 14px;
}
.streak-summary-unit {
font-size: 9px;
}
.streak-trophy-section {
border-radius: 22px;
padding: 13px;
}
.streak-trophy-row {
min-height: 45px;
gap: 7px;
padding: 8px 9px;
border-radius: 15px;
font-size: 11px;
}
.streak-trophy-row b {
padding: 6px 8px;
font-size: 8px;
}
.leaderboard-modal {
padding: 44px 7px max(48px, calc(env(safe-area-inset-bottom) + 32px));
align-items: center;
}
.leaderboard-modal-card {
width: min(94vw, 430px);
min-height: min(780px, calc(100dvh - 86px));
max-height: calc(100dvh - 74px);
border-radius: 26px;
padding: 15px;
border-width: 1.5px;
}
.leaderboard-modal-head {
padding-right: 46px;
margin-bottom: 10px;
}
.leaderboard-modal-card .learning-kicker {
font-size: 9px;
letter-spacing: 2.8px;
line-height: 1.35;
}
.leaderboard-modal-card .learning-title {
font-size: clamp(24px, 7.2vw, 32px);
line-height: 1.04;
}
.leaderboard-title {
gap: 7px;
max-width: 100%;
margin-top: 5px;
}
.leaderboard-title-line {
gap: 5px;
}
.leaderboard-title-badge {
min-height: 27px;
padding: 5px 8px;
font-size: 11px;
}
.leaderboard-title-main {
font-size: clamp(14px, 4vw, 18px);
}
.leaderboard-title-board {
font-size: clamp(14px, 4vw, 18px);
}
.leaderboard-week-label {
font-size: 9px;
line-height: 1.2;
margin-top: 9px;
letter-spacing: 0.4px;
}
.leaderboard-modal-close {
top: 0;
right: 0;
width: 40px;
height: 40px;
border-radius: 15px;
font-size: 20px;
}
.leaderboard-modal-list {
max-height: none;
flex: 1 1 auto;
padding-right: 0;
gap: 7px;
}
.leaderboard-row {
grid-template-columns: 36px minmax(0, 1fr) auto;
gap: 8px;
padding: 10px 9px;
border-radius: 16px;
}
.leaderboard-self-card {
grid-template-columns: 36px minmax(0, 1fr) auto;
gap: 8px;
padding: 12px 10px;
border-radius: 20px;
min-height: 80px;
}
.leaderboard-self-card .leaderboard-rank {
width: 36px;
height: 36px;
border-radius: 13px;
}
.leaderboard-self-card .leaderboard-name {
font-size: 13px;
}
.leaderboard-rank {
width: 32px;
height: 32px;
border-radius: 12px;
}
.leaderboard-avatar {
width: 32px;
height: 32px;
border-radius: 12px;
}
.leaderboard-identity {
gap: 8px;
}
.leaderboard-self-title {
font-size: 10px;
letter-spacing: 0.55px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.leaderboard-name {
font-size: 12px;
line-height: 1.15;
}
.leaderboard-habit,
.leaderboard-self-meta {
font-size: 8px;
line-height: 1.25;
}
.leaderboard-points {
grid-column: auto;
padding: 5px 7px;
font-size: 8px;
min-width: 46px;
text-align: center;
}
}
@media (max-width: 360px) {
.leaderboard-modal-card {
width: calc(100vw - 12px);
padding: 12px;
border-radius: 24px;
}
.leaderboard-modal-head {
padding-right: 42px;
}
.leaderboard-title {
gap: 5px;
}
.leaderboard-title-line {
gap: 4px;
}
.leaderboard-title-badge {
min-height: 24px;
padding: 4px 7px;
font-size: 9px;
}
.leaderboard-title-main,
.leaderboard-title-board {
font-size: 12.5px;
}
.leaderboard-modal-close {
width: 36px;
height: 36px;
border-radius: 13px;
font-size: 18px;
}
.leaderboard-row,
.leaderboard-self-card {
grid-template-columns: 30px minmax(0, 1fr) auto;
gap: 6px;
}
.leaderboard-rank,
.leaderboard-avatar {
width: 28px;
height: 28px;
border-radius: 10px;
}
.leaderboard-points {
min-width: 40px;
padding: 5px 6px;
}
}
button,
[role="button"],
[onclick],
.folder-card,
.unit-test-card,
.unit-chapter-header,
.locked-ad-unlock-cta,
.leaderboard-open-btn,
.universal-search-result {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.tactile-ready {
position: relative;
overflow: hidden;
transform: translateZ(0);
transition:
transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.14s ease,
filter 0.14s ease,
border-color 0.14s ease;
will-change: transform, filter;
}
.tactile-positioned {
position: relative !important;
}
.tactile-ready > :not(.tactile-ripple) {
position: relative;
z-index: 1;
}
.tactile-ready.touch-pressing {
transform: translateY(2px) scale(0.972) !important;
filter: saturate(1.08) contrast(1.03);
box-shadow:
0 4px 10px rgba(15, 23, 42, 0.18),
inset 0 3px 9px rgba(15, 23, 42, 0.18),
inset 0 -1px 0 rgba(255, 255, 255, 0.34) !important;
}
.tactile-ready.tactile-strong.touch-pressing,
.folder-card.touch-pressing,
.unit-test-card.touch-pressing,
.gateway-choice.touch-pressing,
.zen-premium-btn.touch-pressing {
transform: translateY(3px) scale(0.958) !important;
box-shadow:
0 3px 8px rgba(15, 23, 42, 0.20),
inset 0 4px 12px rgba(15, 23, 42, 0.22),
inset 0 -1px 0 rgba(255, 255, 255, 0.28) !important;
}
.folder-card.tactile-ready {
transform: translateZ(0) !important;
will-change: transform, filter;
}
.folder-card.tactile-ready.touch-pressing {
transform: translateY(4px) scale(0.952) !important;
filter: saturate(1.1) contrast(1.04);
box-shadow:
0 3px 8px rgba(15, 23, 42, 0.20),
inset 0 5px 14px rgba(15, 23, 42, 0.24),
inset 0 -1px 0 rgba(255, 255, 255, 0.28) !important;
}
.unit-chapter-header.tactile-ready.touch-pressing {
transform: translateY(3px) scale(0.972) !important;
}
.tactile-ready:disabled,
.tactile-ready[aria-disabled="true"],
.tactile-ready.is-disabled {
transform: none !important;
filter: none !important;
}
.tactile-ripple {
position: absolute;
width: var(--tactile-ripple-size, 96px);
height: var(--tactile-ripple-size, 96px);
left: var(--tactile-ripple-x, 50%);
top: var(--tactile-ripple-y, 50%);
z-index: 0;
pointer-events: none;
border-radius: 999px;
background:
radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.34) 36%, rgba(255, 255, 255, 0) 68%);
opacity: 0.62;
transform: translate(-50%, -50%) scale(0.2);
animation: tactileRipple 460ms ease-out forwards;
mix-blend-mode: screen;
}
.tactile-ripple.is-dark {
background:
radial-gradient(circle, rgba(15, 23, 42, 0.20) 0%, rgba(15, 23, 42, 0.10) 38%, rgba(15, 23, 42, 0) 70%);
mix-blend-mode: multiply;
}
@keyframes tactileRipple {
0% {
opacity: 0.58;
transform: translate(-50%, -50%) scale(0.2);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(1);
}
}
/* Feature Onboarding Tour */
body.app-tour-open {
overflow: hidden !important;
}
.app-tour-modal {
position: fixed;
inset: 0;
z-index: 2600;
display: flex;
align-items: stretch;
justify-content: center;
color: #f8fafc;
background:
linear-gradient(135deg, #071b34 0%, #0c153a 46%, #030712 100%);
}
.app-tour-modal.hidden {
display: none !important;
}
.app-tour-modal::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
repeating-linear-gradient(135deg, rgba(245, 158, 11, 0.04) 0 1px, transparent 1px 18px);
background-size: 34px 34px, 34px 34px, 100% 100%;
opacity: 0.5;
}
.app-tour-shell {
position: relative;
z-index: 1;
width: min(100%, 520px);
height: 100dvh;
max-height: 100dvh;
min-height: 100dvh;
display: flex;
flex-direction: column;
padding: max(14px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
box-sizing: border-box;
}
body.ads-sticky-active .app-tour-modal {
inset: 0;
z-index: 2100;
}
body.ads-sticky-active .app-tour-shell {
height: calc(100dvh - var(--sticky-banner-tray-height) - 4px);
max-height: calc(100dvh - var(--sticky-banner-tray-height) - 4px);
min-height: 0;
padding-bottom: 4px;
}
body.ads-sticky-active .app-tour-topbar {
padding-bottom: 6px;
}
body.ads-sticky-active .app-tour-slide {
gap: 6px;
padding: 8px;
}
body.ads-sticky-active .app-tour-poster {
padding: 10px;
}
body.ads-sticky-active .app-tour-footer {
padding-top: 6px;
}
body.ads-sticky-active .app-tour-progress-row {
margin-bottom: 6px;
}
body.ads-sticky-active .app-tour-icon-btn,
body.ads-sticky-active .app-tour-primary {
min-height: 42px;
border-radius: 15px;
}
.app-tour-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-shrink: 0;
padding: 4px 2px 10px;
}
.app-tour-brand-chip,
.app-tour-skip-btn {
min-height: 36px;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.09);
color: #f8fafc;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}
.app-tour-brand-chip {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: calc(100% - 96px);
padding: 6px 10px 6px 7px;
border-radius: 18px;
}
.app-tour-mini-logo {
width: 25px;
height: 25px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
color: #0f172a;
background: linear-gradient(145deg, #fef3c7 0%, #f59e0b 100%);
font-weight: 900;
font-size: 13px;
}
.app-tour-mini-logo svg {
width: 88%;
height: 88%;
display: block;
}
.app-tour-brand-copy {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.05;
}
.app-tour-brand-copy strong {
font-size: 11px;
font-weight: 900;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-tour-brand-copy span {
font-size: 8px;
font-weight: 900;
color: #fbbf24;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-tour-skip-btn {
flex-shrink: 0;
padding: 0 13px;
border-radius: 18px;
font-size: 11px;
font-weight: 900;
}
.app-tour-viewport {
flex: 1;
min-height: 0;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.18);
border-radius: 30px;
background: rgba(255,255,255,0.08);
box-shadow:
0 22px 54px -34px rgba(0,0,0,0.9),
inset 0 1px 0 rgba(255,255,255,0.18);
touch-action: pan-y;
}
.app-tour-track {
height: 100%;
display: flex;
transition: transform 0.34s ease;
will-change: transform;
}
.app-tour-slide {
width: 100%;
min-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: stretch;
gap: clamp(8px, 1.4dvh, 12px);
padding: 14px;
box-sizing: border-box;
overflow: hidden;
}
.app-tour-slide::-webkit-scrollbar {
display: none;
}
.app-tour-poster {
position: relative;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
border-radius: 26px;
padding: 16px;
color: #f8fafc;
background: linear-gradient(145deg, var(--tour-bg-a), var(--tour-bg-b));
border: 1px solid rgba(255,255,255,0.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.18),
0 18px 44px -30px rgba(0,0,0,0.78);
}
.app-tour-poster::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(255,255,255,0.11), transparent 28%, rgba(255,255,255,0.07) 72%, transparent),
repeating-linear-gradient(0deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 19px);
}
.app-tour-poster > * {
position: relative;
z-index: 1;
}
.app-tour-slide[data-feature="theory"] {
--tour-bg-a: #053047;
--tour-bg-b: #11194d;
--tour-accent: #22d3ee;
--tour-accent-2: #fbbf24;
}
.app-tour-slide[data-feature="handwritten"] {
--tour-bg-a: #34230f;
--tour-bg-b: #7c2d12;
--tour-accent: #fbbf24;
--tour-accent-2: #38bdf8;
}
.app-tour-slide[data-feature="short"] {
--tour-bg-a: #063b2f;
--tour-bg-b: #155e75;
--tour-accent: #34d399;
--tour-accent-2: #fde68a;
}
.app-tour-slide[data-feature="mindmap"] {
--tour-bg-a: #31124d;
--tour-bg-b: #0f3b57;
--tour-accent: #c084fc;
--tour-accent-2: #2dd4bf;
}
.app-tour-slide[data-feature="mcq"] {
--tour-bg-a: #4c0519;
--tour-bg-b: #1e293b;
--tour-accent: #fb7185;
--tour-accent-2: #86efac;
}
.tour-poster-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: clamp(8px, 1.4dvh, 12px);
}
.tour-feature-tag,
.tour-feature-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 4px 10px;
border-radius: 14px;
font-size: 9px;
font-weight: 900;
color: #ffffff;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.2);
}
.tour-feature-tag {
min-width: 0;
max-width: calc(100% - 48px);
text-align: left;
line-height: 1.15;
overflow-wrap: anywhere;
}
.tour-feature-count {
width: 34px;
flex: 0 0 34px;
padding: 0;
color: var(--tour-accent-2);
}
.tour-visual {
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(4px, 1.2dvh, 10px) 0 clamp(6px, 1.4dvh, 12px);
}
.tour-smart-board {
width: min(96%, 390px);
display: grid;
grid-template-columns: 1fr;
align-items: center;
gap: clamp(5px, 1dvh, 8px);
}
.tour-smart-card {
min-height: 188px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px;
padding: 12px;
border-radius: 20px;
color: #0f172a;
background: rgba(248, 250, 252, 0.96);
border: 2px solid rgba(255,255,255,0.58);
box-shadow: 0 20px 36px -26px rgba(0,0,0,0.9);
}
.tour-smart-card-title {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
min-height: 27px;
padding: 4px 9px;
border-radius: 12px;
color: #ffffff;
background: #1d4ed8;
font-size: 9px;
font-weight: 900;
}
.tour-smart-book {
position: relative;
min-height: 105px;
padding: 12px 10px 12px 15px;
border-radius: 16px;
background:
linear-gradient(90deg, rgba(59, 130, 246, 0.16) 0 3px, transparent 3px),
repeating-linear-gradient(180deg, #ffffff 0 22px, #dbeafe 23px 24px);
border: 1px solid #bfdbfe;
}
.tour-smart-book::before {
content: "";
position: absolute;
top: 11px;
left: -7px;
bottom: 11px;
width: 12px;
border-radius: 8px;
background: repeating-linear-gradient(180deg, #f59e0b 0 7px, #1e3a8a 7px 14px);
}
.tour-smart-topic {
height: 19px;
width: 82%;
margin-bottom: 10px;
border-radius: 9px;
background: linear-gradient(90deg, #bae6fd, #fef3c7);
border: 1px solid #67e8f9;
}
.tour-smart-point {
height: 7px;
margin-top: 7px;
border-radius: 99px;
background: #94a3b8;
}
.tour-smart-point:nth-child(3) { width: 74%; }
.tour-smart-point:nth-child(4) { width: 92%; }
.tour-smart-point:nth-child(5) { width: 58%; }
.tour-smart-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
border-radius: 14px;
color: #0f172a;
background: #fbbf24;
font-size: 12px;
font-weight: 900;
}
.tour-smart-plus {
width: clamp(28px, 5.2dvh, 38px);
height: clamp(28px, 5.2dvh, 38px);
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
justify-self: center;
color: #0f172a;
background: linear-gradient(135deg, #fef3c7, #f59e0b);
border: 2px solid rgba(255,255,255,0.64);
font-size: clamp(17px, 3.2dvh, 23px);
font-weight: 900;
box-shadow: 0 16px 28px -22px rgba(0,0,0,0.92);
}
.tour-theory-mini-card {
min-height: clamp(84px, 15dvh, 118px);
gap: clamp(4px, 0.9dvh, 7px);
padding: clamp(7px, 1.1dvh, 10px);
}
.tour-theory-mini-card .tour-smart-book {
min-height: clamp(36px, 6.8dvh, 56px);
padding: 8px 8px 8px 13px;
}
.tour-theory-mini-card .tour-smart-topic {
height: clamp(10px, 2dvh, 14px);
margin-bottom: clamp(4px, 0.7dvh, 6px);
}
.tour-theory-mini-card .tour-smart-point {
height: 4px;
margin-top: 4px;
}
.tour-theory-mini-card .tour-smart-point:nth-of-type(n+4) {
display: none;
}
.tour-theory-mini-card .tour-smart-action {
min-height: clamp(22px, 4dvh, 28px);
border-radius: 12px;
font-size: clamp(9px, 1.7dvh, 11px);
}
.tour-podcast-card {
min-height: clamp(144px, 25dvh, 188px);
}
.tour-podcast-card .tour-smart-audio {
min-height: clamp(90px, 16dvh, 112px);
}
.tour-smart-audio {
min-height: 105px;
display: grid;
place-items: center;
gap: 8px;
border-radius: 17px;
color: #ffffff;
background:
radial-gradient(circle at 50% 22%, rgba(34, 211, 238, 0.24), transparent 42%),
linear-gradient(135deg, #0f172a, #1d4ed8);
border: 1px solid rgba(29, 78, 216, 0.3);
}
.tour-teacher-face {
width: 55px;
height: 55px;
border-radius: 20px;
display: grid;
place-items: center;
color: #0f172a;
background: linear-gradient(145deg, #fef3c7, #f59e0b);
font-size: 27px;
font-weight: 900;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.tour-smart-audio-wave {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 28px;
}
.tour-smart-audio-wave span {
width: 5px;
border-radius: 99px;
background: #67e8f9;
}
.tour-smart-audio-wave span:nth-child(1) { height: 10px; }
.tour-smart-audio-wave span:nth-child(2) { height: 18px; }
.tour-smart-audio-wave span:nth-child(3) { height: 27px; }
.tour-smart-audio-wave span:nth-child(4) { height: 15px; }
.tour-smart-audio-wave span:nth-child(5) { height: 22px; }
.tour-smart-audio-label {
font-size: 9px;
font-weight: 900;
color: #dbeafe;
}
.tour-podcast-discussion {
display: flex;
align-items: stretch;
justify-content: stretch;
padding: 10px;
}
.tour-podcast-stage {
width: 100%;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px;
grid-template-rows: auto auto auto;
align-items: center;
gap: 7px 8px;
}
.tour-podcast-person {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
min-width: 0;
}
.tour-podcast-person.teacher {
grid-column: 1;
grid-row: 1;
}
.tour-podcast-person.student {
grid-column: 3;
grid-row: 2;
}
.tour-avatar-face {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 15px;
color: #0f172a;
background: linear-gradient(145deg, #fef3c7, #f59e0b);
border: 2px solid rgba(255,255,255,0.74);
font-size: 20px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.52);
}
.tour-podcast-person.student .tour-avatar-face {
background: linear-gradient(145deg, #dcfce7, #22c55e);
}
.tour-podcast-person strong {
max-width: 100%;
color: #e0f2fe;
font-size: 7px;
line-height: 1;
font-weight: 900;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tour-chat-bubble {
min-width: 0;
min-height: 34px;
display: flex;
align-items: center;
padding: 7px 8px;
border-radius: 15px;
color: #0f172a;
background: rgba(255,255,255,0.96);
border: 1px solid rgba(255,255,255,0.62);
font-size: 8px;
line-height: 1.2;
font-weight: 900;
box-shadow: 0 10px 18px -14px rgba(0,0,0,0.82);
overflow-wrap: anywhere;
}
.tour-chat-bubble.teacher {
grid-column: 2 / 4;
grid-row: 1;
border-top-left-radius: 6px;
}
.tour-chat-bubble.student {
grid-column: 1 / 3;
grid-row: 2;
border-top-right-radius: 6px;
}
.tour-podcast-chapter {
grid-column: 1 / -1;
grid-row: 3;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
padding: 8px 10px;
border-radius: 15px;
color: #083344;
background: linear-gradient(135deg, #cffafe, #fef3c7);
border: 1px solid rgba(255,255,255,0.68);
font-size: 8px;
line-height: 1.15;
font-weight: 900;
}
.tour-podcast-chapter span {
min-width: 0;
overflow-wrap: anywhere;
}
.tour-podcast-mini-wave {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 3px;
}
.tour-podcast-mini-wave i {
display: block;
width: 4px;
border-radius: 99px;
background: #0ea5e9;
}
.tour-podcast-mini-wave i:nth-child(1) { height: 9px; }
.tour-podcast-mini-wave i:nth-child(2) { height: 17px; }
.tour-podcast-mini-wave i:nth-child(3) { height: 12px; }
.tour-podcast-mini-wave i:nth-child(4) { height: 20px; }
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-poster-head {
margin-bottom: 6px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-visual {
flex: 0 0 auto;
padding: 2px 0 5px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-smart-board {
width: 94%;
gap: 4px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-smart-card {
padding: 7px;
gap: 5px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-smart-card-title {
min-height: 20px;
padding: 2px 7px;
font-size: 7.2px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-theory-mini-card {
min-height: 0;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-theory-mini-card .tour-smart-book {
min-height: clamp(28px, 5.4dvh, 36px);
padding: 6px 7px 6px 11px;
border-radius: 12px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-theory-mini-card .tour-smart-book::before {
top: 8px;
bottom: 8px;
left: -5px;
width: 9px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-theory-mini-card .tour-smart-topic {
height: 9px;
margin-bottom: 4px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-theory-mini-card .tour-smart-point {
height: 3px;
margin-top: 3px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-theory-mini-card .tour-smart-action {
display: none;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-smart-plus {
width: 22px;
height: 22px;
font-size: 14px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-podcast-card {
min-height: 0;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-podcast-card .tour-smart-audio {
height: clamp(92px, 16.2dvh, 108px);
min-height: 0;
padding: 5px;
overflow: hidden;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-podcast-stage {
grid-template-columns: 28px minmax(0, 1fr) 28px;
gap: 3px 5px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-avatar-face {
width: 24px;
height: 24px;
border-radius: 9px;
font-size: 13px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-podcast-person strong {
font-size: 5.8px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-chat-bubble {
min-height: 19px;
padding: 3px 5px;
border-radius: 9px;
font-size: 6.2px;
line-height: 1.12;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-podcast-chapter {
min-height: 20px;
padding: 3px 6px;
border-radius: 9px;
font-size: 6.4px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-podcast-mini-wave i {
width: 3px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-podcast-card .tour-smart-action {
min-height: 22px;
border-radius: 10px;
font-size: 9px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-title {
font-size: clamp(18px, 4.8vw, 20px);
line-height: 1.04;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-subtitle {
margin-top: 4px;
font-size: 9.5px;
line-height: 1.24;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-badges {
margin-top: 6px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-badge {
min-height: 21px;
padding: 3px 7px;
font-size: 7.4px;
}
.tour-title {
margin: 0;
font-size: clamp(20px, 3.9dvh, 25px);
line-height: 1.08;
font-weight: 900;
color: #ffffff;
text-shadow: 0 2px 8px rgba(0,0,0,0.28);
overflow-wrap: anywhere;
}
.tour-title span {
color: var(--tour-accent-2);
}
.tour-subtitle {
margin: clamp(5px, 1dvh, 8px) 0 0;
font-size: clamp(10.5px, 1.9dvh, 13px);
line-height: 1.36;
font-weight: 800;
color: rgba(255,255,255,0.82);
overflow-wrap: anywhere;
}
.tour-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: clamp(7px, 1.4dvh, 12px);
}
.tour-badge {
display: inline-flex;
align-items: center;
min-height: 27px;
padding: 4px 9px;
border-radius: 14px;
font-size: 9px;
font-weight: 900;
color: #0f172a;
background: var(--tour-accent-2);
box-shadow: 0 10px 22px -17px rgba(0,0,0,0.85);
overflow-wrap: anywhere;
}
.tour-phone-mock {
width: min(82%, 300px);
aspect-ratio: 0.78;
max-height: 340px;
border-radius: 24px;
padding: 10px;
background: #0f172a;
border: 2px solid rgba(255,255,255,0.28);
box-shadow: 0 24px 46px -28px rgba(0,0,0,0.92);
}
.tour-screen-mock {
height: 100%;
border-radius: 18px;
padding: 12px;
background: #f8fafc;
color: #0f172a;
overflow: hidden;
}
.tour-theory-layout {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 10px;
height: 100%;
}
.tour-theory-kicker {
display: inline-flex;
width: fit-content;
padding: 4px 8px;
border-radius: 8px;
background: #dbeafe;
color: #1e40af;
font-size: 9px;
font-weight: 900;
}
.tour-line {
height: 8px;
border-radius: 99px;
background: #cbd5e1;
margin-bottom: 8px;
}
.tour-line.short {
width: 68%;
}
.tour-highlight-line {
height: 28px;
border-radius: 10px;
background: linear-gradient(90deg, rgba(34, 211, 238, 0.2), rgba(251, 191, 36, 0.24));
border: 1px solid rgba(14, 165, 233, 0.18);
margin-bottom: 9px;
}
.tour-audio-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 14px;
color: #ffffff;
background: linear-gradient(135deg, #0f172a, #1d4ed8);
}
.tour-play {
width: 30px;
height: 30px;
border-radius: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #0f172a;
background: #fbbf24;
font-size: 13px;
font-weight: 900;
}
.tour-wave {
flex: 1;
height: 28px;
display: flex;
align-items: center;
gap: 4px;
}
.tour-wave span {
width: 5px;
border-radius: 99px;
background: #67e8f9;
}
.tour-wave span:nth-child(1) { height: 10px; }
.tour-wave span:nth-child(2) { height: 20px; }
.tour-wave span:nth-child(3) { height: 14px; }
.tour-wave span:nth-child(4) { height: 25px; }
.tour-wave span:nth-child(5) { height: 12px; }
.tour-wave span:nth-child(6) { height: 19px; }
.tour-audio-label {
font-size: 9px;
font-weight: 900;
white-space: nowrap;
}
.tour-notebook {
width: min(88%, 315px);
aspect-ratio: 1.14;
max-height: 286px;
display: grid;
grid-template-columns: 22px 1fr;
overflow: hidden;
border-radius: 20px;
background: #fff7ed;
color: #1e293b;
border: 2px solid rgba(255,255,255,0.55);
box-shadow: 0 24px 44px -28px rgba(0,0,0,0.86);
transform: rotate(-2deg);
}
.tour-spiral {
background: repeating-linear-gradient(180deg, #92400e 0 8px, #fbbf24 8px 17px);
border-right: 2px solid rgba(120, 53, 15, 0.28);
}
.tour-note-page {
position: relative;
padding: 16px 16px 12px;
background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(59, 130, 246, 0.22) 28px 29px);
}
.tour-note-page::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 18px;
width: 2px;
background: rgba(244, 63, 94, 0.36);
}
.tour-hand-title {
display: inline-flex;
margin-left: 10px;
padding: 5px 8px;
border-radius: 8px;
color: #1d4ed8;
background: rgba(59, 130, 246, 0.12);
font-size: 13px;
font-weight: 900;
}
.tour-hand-line {
height: 9px;
margin: 17px 10px 0;
border-radius: 99px;
background: #1d4ed8;
opacity: 0.68;
}
.tour-hand-line:nth-child(3) { width: 62%; background: #0369a1; }
.tour-hand-line:nth-child(4) { width: 82%; background: #be123c; }
.tour-hand-line:nth-child(5) { width: 52%; background: #1d4ed8; }
.tour-pen {
position: absolute;
right: 13px;
bottom: 12px;
width: 72px;
height: 12px;
border-radius: 8px;
background: linear-gradient(90deg, #0f172a 0 16%, #facc15 16% 76%, #1d4ed8 76%);
transform: rotate(-24deg);
box-shadow: 0 10px 16px -12px rgba(0,0,0,0.8);
}
.tour-short-stack {
width: min(88%, 318px);
max-height: 306px;
display: grid;
gap: 10px;
}
.tour-fast-chip {
justify-self: center;
min-width: 132px;
padding: 10px 16px;
border-radius: 18px;
text-align: center;
color: #064e3b;
background: #bbf7d0;
border: 2px solid rgba(255,255,255,0.6);
box-shadow: 0 16px 28px -22px rgba(0,0,0,0.82);
}
.tour-fast-chip strong {
display: block;
font-size: 34px;
line-height: 1;
font-weight: 900;
}
.tour-fast-chip span {
display: block;
font-size: 10px;
font-weight: 900;
color: #047857;
}
.tour-note-strip {
display: grid;
grid-template-columns: 34px 1fr;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 8px 10px;
border-radius: 16px;
background: rgba(255,255,255,0.92);
color: #0f172a;
border: 1px solid rgba(255,255,255,0.6);
}
.tour-note-strip b {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 12px;
background: #0f766e;
color: #ffffff;
font-size: 14px;
}
.tour-note-strip span {
font-size: 11px;
font-weight: 900;
}
.tour-map-board {
width: min(90%, 330px);
aspect-ratio: 1.24;
max-height: 306px;
position: relative;
}
.tour-map-line {
position: absolute;
left: 50%;
top: 50%;
width: 38%;
height: 4px;
border-radius: 99px;
background: rgba(255,255,255,0.54);
transform-origin: left center;
}
.tour-map-line.l1 { transform: rotate(-34deg); }
.tour-map-line.l2 { transform: rotate(32deg); }
.tour-map-line.l3 { transform: rotate(145deg); }
.tour-map-line.l4 { transform: rotate(212deg); }
.tour-map-node {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
min-width: 82px;
min-height: 42px;
padding: 6px 9px;
border-radius: 16px;
color: #0f172a;
background: #f8fafc;
border: 2px solid rgba(255,255,255,0.58);
box-shadow: 0 14px 26px -20px rgba(0,0,0,0.88);
font-size: 10px;
font-weight: 900;
}
.tour-map-node.center {
left: 50%;
top: 50%;
min-width: 96px;
min-height: 58px;
color: #ffffff;
background: linear-gradient(135deg, #7c3aed, #0f766e);
transform: translate(-50%, -50%);
}
.tour-map-node.n1 { right: 2px; top: 16px; }
.tour-map-node.n2 { right: 0; bottom: 18px; }
.tour-map-node.n3 { left: 0; top: 22px; }
.tour-map-node.n4 { left: 8px; bottom: 18px; }
.tour-mcq-board {
width: min(92%, 336px);
display: grid;
gap: clamp(5px, 1dvh, 8px);
}
.tour-question-card {
padding: clamp(8px, 1.5dvh, 10px) 12px;
border-radius: 16px;
color: #0f172a;
background: #ffffff;
border: 2px solid rgba(255,255,255,0.62);
font-size: clamp(10px, 2dvh, 12px);
font-weight: 900;
box-shadow: 0 14px 24px -20px rgba(0,0,0,0.88);
}
.tour-option-row {
display: grid;
grid-template-columns: 30px 1fr auto;
align-items: center;
gap: 8px;
min-height: clamp(32px, 6dvh, 38px);
padding: clamp(4px, 1dvh, 6px) 8px;
border-radius: 15px;
color: #0f172a;
background: rgba(255,255,255,0.92);
border: 1px solid rgba(255,255,255,0.5);
}
.tour-option-row b {
width: 28px;
height: 28px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 11px;
background: #64748b;
}
.tour-option-row span {
font-size: 10px;
font-weight: 900;
}
.tour-option-row em {
min-width: 68px;
padding: 4px 7px;
border-radius: 11px;
font-size: 8px;
font-style: normal;
font-weight: 900;
text-align: center;
}
.app-tour-slide[data-feature="mcq"] .tour-visual {
flex: 0 1 auto;
}
.app-tour-slide[data-feature="mcq"] .tour-title {
font-size: clamp(19px, 3.6dvh, 24px);
}
.tour-option-row.correct {
background: #dcfce7;
}
.tour-option-row.correct b,
.tour-option-row.correct em {
background: #16a34a;
color: #ffffff;
}
.tour-option-row.wrong {
background: #fff1f2;
}
.tour-option-row.wrong b,
.tour-option-row.wrong em {
background: #e11d48;
color: #ffffff;
}
.app-tour-footer {
flex-shrink: 0;
padding: 12px 2px 0;
}
.app-tour-progress-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 11px;
}
.app-tour-dots {
display: flex;
align-items: center;
gap: 7px;
}
.app-tour-dot {
width: 9px;
height: 9px;
border-radius: 99px;
border: 0;
padding: 0;
background: rgba(255,255,255,0.28);
transition: width 0.22s ease, background 0.22s ease;
}
.app-tour-dot.is-active {
width: 28px;
background: #fbbf24;
}
.app-tour-checkbox {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
color: rgba(255,255,255,0.82);
font-size: 10px;
line-height: 1.25;
font-weight: 900;
}
.app-tour-checkbox input {
width: 17px;
height: 17px;
flex-shrink: 0;
accent-color: #f59e0b;
}
.app-tour-actions {
display: grid;
grid-template-columns: 44px 1fr;
gap: 9px;
}
.app-tour-icon-btn,
.app-tour-primary {
min-height: 46px;
border: 0;
border-radius: 18px;
font-weight: 900;
box-shadow: 0 16px 30px -22px rgba(0,0,0,0.88);
}
.app-tour-icon-btn {
color: #ffffff;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.18);
}
.app-tour-icon-btn:disabled {
opacity: 0.35;
}
.app-tour-primary {
color: #111827;
background: linear-gradient(135deg, #fef3c7 0%, #f59e0b 100%);
font-size: 13px;
}
.logout-tour-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 0 14px;
padding: 13px 14px;
border-radius: 20px;
color: #1e1b4b;
background: linear-gradient(135deg, #eef2ff, #fef3c7);
border: 2px solid rgba(99, 102, 241, 0.15);
font-size: 12px;
font-weight: 900;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.84);
}
@media (max-width: 390px) {
.app-tour-shell {
padding: max(10px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom));
}
.app-tour-topbar {
gap: 8px;
padding-bottom: 7px;
}
.app-tour-brand-chip {
max-width: calc(100% - 74px);
padding-right: 8px;
}
.app-tour-skip-btn {
min-height: 34px;
padding: 0 10px;
font-size: 10px;
}
.app-tour-viewport {
border-radius: 24px;
}
.app-tour-slide {
padding: 8px;
gap: 8px;
}
.app-tour-poster {
min-height: 0;
padding: 10px;
border-radius: 20px;
}
.tour-poster-head {
gap: 8px;
margin-bottom: 8px;
}
.tour-feature-tag,
.tour-feature-count {
min-height: 24px;
padding: 3px 7px;
border-radius: 12px;
font-size: 7.5px;
}
.tour-feature-count {
width: 30px;
flex-basis: 30px;
}
.tour-visual {
min-height: auto;
padding: 4px 0 8px;
}
.tour-title {
font-size: clamp(18px, 5.6vw, 21px);
line-height: 1.08;
}
.tour-subtitle {
margin-top: 6px;
font-size: 10.5px;
line-height: 1.34;
}
.tour-badges {
margin-top: 8px;
gap: 5px;
}
.tour-badge {
min-height: 23px;
padding: 3px 7px;
border-radius: 12px;
font-size: 7.8px;
}
.tour-phone-mock,
.tour-smart-board,
.tour-map-board,
.tour-mcq-board,
.tour-notebook,
.tour-short-stack {
width: 96%;
}
.tour-phone-mock {
max-height: 316px;
}
.tour-notebook,
.tour-short-stack,
.tour-map-board {
max-height: 288px;
}
.tour-smart-board {
grid-template-columns: 1fr;
gap: 6px;
max-height: none;
}
.tour-smart-card {
min-height: 0;
gap: 7px;
padding: 8px;
border-radius: 17px;
}
.tour-podcast-card {
min-height: clamp(136px, 24dvh, 168px);
}
.tour-smart-card-title {
min-height: 23px;
padding: 3px 7px;
border-radius: 10px;
font-size: 7.8px;
}
.tour-smart-book,
.tour-smart-audio {
min-height: 74px;
}
.tour-smart-book {
padding: 9px 8px 9px 13px;
}
.tour-smart-topic {
height: 14px;
margin-bottom: 7px;
}
.tour-smart-point {
height: 5px;
margin-top: 5px;
}
.tour-smart-action {
min-height: 27px;
border-radius: 12px;
font-size: 10px;
}
.tour-smart-plus {
width: 28px;
height: 28px;
font-size: 16px;
}
.tour-teacher-face {
width: 42px;
height: 42px;
border-radius: 15px;
font-size: 21px;
}
.tour-smart-audio {
grid-template-columns: 44px 1fr;
justify-items: start;
padding: 8px;
}
.tour-smart-audio-label {
grid-column: 1 / -1;
}
.tour-podcast-stage {
grid-template-columns: 38px minmax(0, 1fr) 38px;
gap: 5px 6px;
}
.tour-avatar-face {
width: 34px;
height: 34px;
border-radius: 13px;
font-size: 18px;
}
.tour-podcast-person strong {
font-size: 6.5px;
}
.tour-chat-bubble {
min-height: 29px;
padding: 5px 7px;
border-radius: 12px;
font-size: 7.2px;
}
.tour-podcast-chapter {
padding: 6px 8px;
border-radius: 12px;
font-size: 7.2px;
}
.tour-option-row {
grid-template-columns: 27px 1fr;
}
.tour-option-row em {
grid-column: 2;
width: fit-content;
}
.app-tour-slide[data-feature="mcq"] .tour-option-row {
grid-template-columns: 26px minmax(0, 1fr) auto;
gap: 6px;
}
.app-tour-slide[data-feature="mcq"] .tour-option-row em {
grid-column: auto;
width: auto;
min-width: 58px;
padding-left: 6px;
padding-right: 6px;
}
.app-tour-footer {
padding-top: 8px;
}
.app-tour-progress-row {
gap: 8px;
margin-bottom: 8px;
}
.app-tour-checkbox {
gap: 6px;
font-size: 8.5px;
}
.app-tour-actions {
grid-template-columns: 40px 1fr;
gap: 8px;
}
.app-tour-icon-btn,
.app-tour-primary {
min-height: 42px;
border-radius: 15px;
}
}
@media (max-height: 640px) {
.app-tour-shell {
padding-top: max(8px, env(safe-area-inset-top));
padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.app-tour-topbar {
padding-bottom: 6px;
}
.app-tour-slide {
padding: 8px;
gap: 8px;
}
.app-tour-poster {
min-height: 0;
padding: 10px;
}
.tour-poster-head {
margin-bottom: 8px;
}
.tour-visual {
min-height: auto;
padding: 4px 0 8px;
}
.tour-title {
font-size: 20px;
line-height: 1.08;
}
.tour-subtitle {
margin-top: 6px;
font-size: 10.5px;
line-height: 1.34;
}
.tour-badges {
margin-top: 8px;
}
.tour-podcast-card {
min-height: clamp(132px, 24dvh, 164px);
}
.app-tour-slide[data-feature="mcq"] .tour-mcq-board {
gap: 5px;
}
.app-tour-slide[data-feature="mcq"] .tour-option-row {
min-height: 32px;
padding-top: 4px;
padding-bottom: 4px;
}
.app-tour-footer {
padding-top: 8px;
}
.app-tour-progress-row {
margin-bottom: 8px;
}
.app-tour-icon-btn,
.app-tour-primary {
min-height: 42px;
border-radius: 15px;
}
}
@media (max-height: 700px) {
.app-tour-slide[data-feature="theory"] .tour-poster-head {
margin-bottom: 6px;
}
.app-tour-slide[data-feature="theory"] .tour-visual {
flex: 0 0 auto;
padding: 2px 0 6px;
}
.app-tour-slide[data-feature="theory"] .tour-smart-board {
width: 94%;
gap: 4px;
}
.app-tour-slide[data-feature="theory"] .tour-smart-card {
padding: 7px;
gap: 5px;
}
.app-tour-slide[data-feature="theory"] .tour-smart-card-title {
min-height: 20px;
padding: 2px 7px;
font-size: 7.2px;
}
.app-tour-slide[data-feature="theory"] .tour-theory-mini-card {
min-height: 0;
}
.app-tour-slide[data-feature="theory"] .tour-theory-mini-card .tour-smart-book {
min-height: clamp(28px, 5.4dvh, 36px);
padding: 6px 7px 6px 11px;
border-radius: 12px;
}
.app-tour-slide[data-feature="theory"] .tour-theory-mini-card .tour-smart-book::before {
top: 8px;
bottom: 8px;
left: -5px;
width: 9px;
}
.app-tour-slide[data-feature="theory"] .tour-theory-mini-card .tour-smart-topic {
height: 9px;
margin-bottom: 4px;
}
.app-tour-slide[data-feature="theory"] .tour-theory-mini-card .tour-smart-point {
height: 3px;
margin-top: 3px;
}
.app-tour-slide[data-feature="theory"] .tour-theory-mini-card .tour-smart-action {
display: none;
}
.app-tour-slide[data-feature="theory"] .tour-podcast-card {
min-height: 0;
}
.app-tour-slide[data-feature="theory"] .tour-podcast-card .tour-smart-audio {
height: clamp(96px, 16.8dvh, 108px);
min-height: 0;
padding: 5px;
overflow: hidden;
}
.app-tour-slide[data-feature="theory"] .tour-podcast-stage {
grid-template-columns: 28px minmax(0, 1fr) 28px;
gap: 3px 5px;
}
.app-tour-slide[data-feature="theory"] .tour-avatar-face {
width: 24px;
height: 24px;
border-radius: 9px;
font-size: 13px;
}
.app-tour-slide[data-feature="theory"] .tour-podcast-person strong {
font-size: 5.8px;
}
.app-tour-slide[data-feature="theory"] .tour-chat-bubble {
min-height: 19px;
padding: 3px 5px;
border-radius: 9px;
font-size: 6.2px;
line-height: 1.12;
}
.app-tour-slide[data-feature="theory"] .tour-podcast-chapter {
min-height: 20px;
padding: 3px 6px;
border-radius: 9px;
font-size: 6.4px;
}
.app-tour-slide[data-feature="theory"] .tour-podcast-mini-wave i {
width: 3px;
}
.app-tour-slide[data-feature="theory"] .tour-smart-plus {
width: 22px;
height: 22px;
font-size: 14px;
}
.app-tour-slide[data-feature="theory"] .tour-podcast-card .tour-smart-action {
min-height: 22px;
border-radius: 10px;
font-size: 9px;
}
}
@media (max-height: 700px) {
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-visual {
padding: 1px 0 4px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-smart-board {
gap: 3px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-theory-mini-card {
min-height: 28px;
padding: 5px 7px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-theory-mini-card .tour-smart-book {
display: none;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-smart-plus {
display: none;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-podcast-card {
padding: 6px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-podcast-card .tour-smart-audio {
height: clamp(76px, 14dvh, 88px);
padding: 4px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-podcast-card .tour-smart-action {
display: none;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-podcast-stage {
grid-template-columns: 24px minmax(0, 1fr) 24px;
gap: 2px 4px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-avatar-face {
width: 21px;
height: 21px;
border-radius: 8px;
font-size: 11px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-chat-bubble {
min-height: 17px;
padding: 2px 5px;
font-size: 5.8px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-podcast-chapter {
min-height: 17px;
padding: 2px 5px;
font-size: 6px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-title {
font-size: 18px;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-subtitle {
display: none;
}
body.ads-sticky-active .app-tour-slide[data-feature="theory"] .tour-badges {
margin-top: 5px;
}
}
@media (max-width: 340px), (max-height: 590px) {
.app-tour-brand-copy span {
display: none;
}
.tour-phone-mock,
.tour-notebook,
.tour-short-stack,
.tour-map-board,
.tour-mcq-board {
transform: none;
}
.tour-map-node {
min-width: 66px;
min-height: 34px;
padding: 4px 6px;
border-radius: 13px;
font-size: 8px;
}
.tour-map-node.center {
min-width: 78px;
min-height: 46px;
}
.tour-note-strip {
grid-template-columns: 28px 1fr;
min-height: 38px;
gap: 7px;
padding: 6px 8px;
}
.tour-note-strip b {
width: 28px;
height: 28px;
border-radius: 10px;
font-size: 11px;
}
.tour-note-strip span,
.tour-option-row span {
font-size: 8.5px;
line-height: 1.18;
}
.tour-question-card {
padding: 8px 10px;
font-size: 10px;
}
.app-tour-slide[data-feature="mcq"] .tour-option-row {
grid-template-columns: 24px minmax(0, 1fr) auto;
gap: 5px;
min-height: 30px;
}
.app-tour-slide[data-feature="mcq"] .tour-option-row b {
width: 24px;
height: 24px;
border-radius: 8px;
}
.app-tour-slide[data-feature="mcq"] .tour-option-row em {
min-width: 52px;
font-size: 7px;
}
}
@media (min-width: 760px) {
.app-tour-shell {
width: min(100%, 640px);
padding-top: 24px;
padding-bottom: 24px;
}
.app-tour-slide {
padding: 18px;
}
.tour-title {
font-size: 30px;
}
.tour-subtitle {
font-size: 14px;
}
.tour-visual {
min-height: 272px;
}
}
@media (prefers-reduced-motion: reduce) {
.app-tour-track,
.app-tour-dot {
transition: none;
}
}
/* Android WebView scroll performance helpers */
@supports (content-visibility: auto) {
.folder-card,
.unit-test-card,
.premium-test-item,
.revision-card,
.leaderboard-row,
.leaderboard-self-card {
content-visibility: auto;
contain-intrinsic-size: 1px 150px;
}
.folder-card {
contain-intrinsic-size: 1px 180px;
}
.unit-test-card {
contain-intrinsic-size: 1px 126px;
}
.ad-slot,
.unit-list-ad-slot {
content-visibility: visible;
contain-intrinsic-size: auto;
}
}
.app-header,
#sticky-banner-container,
#score-board,
#floating-audio-pill,
#theory-floating-podcast-btn {
transform: translateZ(0);
backface-visibility: hidden;
}
@media (hover: none), (pointer: coarse) {
.app-header {
box-shadow: 0 8px 18px -14px rgba(15, 23, 42, 0.72);
transition: transform 0.2s ease, box-shadow 0.18s ease;
}
.app-header::before,
#folders-container::after,
.folder-section-heading::before,
#folders-screen::after,
#tests-list-screen::after {
opacity: 0.24;
}
.folder-badge-new,
.unit-inner-list,
.pomo-panel,
.zen-ultra-glass,
.gateway-modal,
.smart-revision-modal,
.revision-lock-modal {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.folder-card,
.unit-test-card,
.option-btn,
.test-card,
.premium-test-item {
transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
will-change: auto;
}
.folder-card,
.unit-test-card {
box-shadow: 0 10px 20px -16px rgba(7, 11, 36, 0.52), inset 0 1px 0 rgba(255,255,255,0.18);
}
.option-btn,
.quiz-question-card,
.unit-inner-list,
.learning-command-center {
box-shadow: 0 8px 18px -16px rgba(15, 23, 42, 0.45);
}
.unit-test-card:hover,
.option-btn:hover,
.active-recall-theory-btn:hover,
#theory-screen-content p.theory-line-focus:hover,
#theory-screen-content li.theory-line-focus:hover,
#theory-screen-content blockquote.theory-line-focus:hover {
transform: none;
filter: none;
}
.zen-animated-bg,
.zen-premium-btn {
animation: none;
}
.tactile-ripple {
mix-blend-mode: normal;
}
}
@media (prefers-reduced-motion: reduce) {
.tactile-ready,
.tactile-ready.touch-pressing,
.tactile-ready.tactile-strong.touch-pressing {
transition: none;
transform: none !important;
}
.tactile-ripple {
display: none;
}
}
/* ===== block 2 ===== */
body, body * {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
input, textarea, [contenteditable="true"] {
-webkit-user-select: text;
user-select: text;
-webkit-touch-callout: default;
}
/* ===== block 3: app-tour premium skin ===== */
/* ============================================================= */
/* ✨ PREMIUM STUDY TOUR SKIN — glowing, glassy, animated */
/* ============================================================= */
@keyframes tourEntranceUp {
0% { opacity: 0; transform: translateY(16px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes tourFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
@keyframes tourShine {
0% { transform: translateX(-140%) skewX(-18deg); }
55%,100% { transform: translateX(260%) skewX(-18deg); }
}
@keyframes tourGlowPulse {
0%, 100% { opacity: 0.45; }
50% { opacity: 0.85; }
}
@keyframes tourAurora {
0% { opacity: 0.55; }
100% { opacity: 1; }
}
/* ---- Aurora background ---- */
.app-tour-modal {
background:
radial-gradient(120% 80% at 12% -12%, rgba(99, 102, 241, 0.40), transparent 50%),
radial-gradient(120% 78% at 92% 6%, rgba(245, 158, 11, 0.20), transparent 46%),
radial-gradient(150% 95% at 78% 118%, rgba(34, 211, 238, 0.20), transparent 52%),
linear-gradient(150deg, #050f1e 0%, #0a1338 48%, #03060e 100%) !important;
}
.app-tour-modal::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(38% 26% at 16% 14%, rgba(99, 102, 241, 0.30), transparent 60%),
radial-gradient(34% 24% at 88% 86%, rgba(34, 211, 238, 0.24), transparent 60%);
animation: tourAurora 9s ease-in-out infinite alternate;
}
/* ---- Glass viewport ---- */
.app-tour-modal .app-tour-viewport {
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 32px;
background: linear-gradient(160deg, rgba(30, 41, 75, 0.55), rgba(8, 14, 38, 0.42));
box-shadow:
0 32px 72px -34px rgba(0, 0, 0, 0.95),
inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
/* ---- Premium poster with accent glow halo ---- */
.app-tour-modal .app-tour-poster {
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.16);
background:
radial-gradient(130% 78% at 50% -10%, rgba(255, 255, 255, 0.17), transparent 48%),
linear-gradient(160deg, var(--tour-bg-a), var(--tour-bg-b));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.24),
inset 0 0 0 1px rgba(255, 255, 255, 0.05),
0 28px 62px -32px rgba(0, 0, 0, 0.92);
}
.app-tour-modal .app-tour-poster::after {
content: "";
position: absolute;
inset: -30% -16% auto -16%;
height: 78%;
z-index: 0;
pointer-events: none;
background: radial-gradient(54% 56% at 50% 0%, var(--tour-accent), transparent 72%);
opacity: 0.42;
}
.app-tour-slide[aria-hidden="false"] .app-tour-poster::after {
animation: tourGlowPulse 4.8s ease-in-out infinite;
}
/* ---- Staggered entrance for the active slide ---- */
.app-tour-slide[aria-hidden="false"] .tour-poster-head { animation: tourEntranceUp 0.50s cubic-bezier(.22,1,.36,1) both; }
.app-tour-slide[aria-hidden="false"] .tour-visual { animation: tourEntranceUp 0.58s cubic-bezier(.22,1,.36,1) 0.06s both; }
.app-tour-slide[aria-hidden="false"] .tour-title { animation: tourEntranceUp 0.54s cubic-bezier(.22,1,.36,1) 0.16s both; }
.app-tour-slide[aria-hidden="false"] .tour-subtitle { animation: tourEntranceUp 0.54s cubic-bezier(.22,1,.36,1) 0.23s both; }
.app-tour-slide[aria-hidden="false"] .tour-badges { animation: tourEntranceUp 0.54s cubic-bezier(.22,1,.36,1) 0.30s both; }
.app-tour-slide[aria-hidden="false"] .tour-visual > * { animation: tourFloat 6s ease-in-out 0.7s infinite; }
/* ---- Feature tag + count ---- */
.app-tour-modal .tour-feature-tag {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.06));
border: 1px solid rgba(255, 255, 255, 0.24);
letter-spacing: 0.07em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 20px -16px #000;
}
.app-tour-modal .tour-feature-count {
color: #0b1220;
border: 0;
background: linear-gradient(135deg, var(--tour-accent), var(--tour-accent-2));
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 8px 18px -10px var(--tour-accent);
}
/* ---- Title with gradient accent ---- */
.app-tour-modal .tour-title {
font-size: clamp(22px, 4.2dvh, 28px);
letter-spacing: -0.01em;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}
.app-tour-modal .tour-title span {
background: linear-gradient(120deg, var(--tour-accent) 0%, var(--tour-accent-2) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.18));
}
/* ---- Subtitle ---- */
.app-tour-modal .tour-subtitle { color: rgba(255, 255, 255, 0.9); }
/* ---- Premium glowing badges ---- */
.app-tour-modal .tour-badge {
color: #0b1220;
background: linear-gradient(135deg, var(--tour-accent-2), var(--tour-accent));
border: 1px solid rgba(255, 255, 255, 0.5);
letter-spacing: 0.02em;
box-shadow: 0 10px 22px -14px var(--tour-accent), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
/* ---- Lift the inner mock cards ---- */
.app-tour-modal .tour-smart-card,
.app-tour-modal .tour-note-page,
.app-tour-modal .tour-notebook,
.app-tour-modal .tour-short-stack,
.app-tour-modal .tour-map-board,
.app-tour-modal .tour-mcq-board,
.app-tour-modal .tour-question-card {
box-shadow: 0 24px 48px -26px rgba(0, 0, 0, 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
/* ---- Brand chip + skip glass ---- */
.app-tour-modal .app-tour-brand-chip,
.app-tour-modal .app-tour-skip-btn {
background: linear-gradient(160deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
border: 1px solid rgba(255, 255, 255, 0.22);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 24px -18px #000;
}
.app-tour-modal .app-tour-skip-btn:active { transform: scale(0.95); }
.app-tour-modal .app-tour-mini-logo {
width: 28px;
height: 28px;
background: linear-gradient(135deg, #fff7e0, #f59e0b 60%, #d97706);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 8px 18px -8px rgba(245, 158, 11, 0.85);
}
/* ---- Premium dots ---- */
.app-tour-modal .app-tour-dot {
width: 8px;
height: 8px;
background: rgba(255, 255, 255, 0.3);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.app-tour-modal .app-tour-dot.is-active {
width: 30px;
background: linear-gradient(90deg, #fde68a, #f59e0b);
box-shadow: 0 0 14px -2px rgba(245, 158, 11, 0.85);
}
/* ---- Premium primary button with shine sweep ---- */
.app-tour-modal .app-tour-primary {
position: relative;
overflow: hidden;
min-height: 52px;
border-radius: 20px;
font-size: 14px;
letter-spacing: 0.03em;
color: #2a1a05;
background: linear-gradient(135deg, #fff1c9 0%, #fbbf24 45%, #f59e0b 100%);
box-shadow:
0 18px 34px -16px rgba(245, 158, 11, 0.7),
inset 0 1px 0 rgba(255, 255, 255, 0.85),
inset 0 -3px 8px rgba(180, 83, 9, 0.35);
}
.app-tour-modal .app-tour-primary::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 42%;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
transform: translateX(-140%) skewX(-18deg);
animation: tourShine 3.6s ease-in-out 1.2s infinite;
}
.app-tour-modal .app-tour-primary:active { transform: scale(0.97); }
/* ---- Prev icon button ---- */
.app-tour-modal .app-tour-icon-btn {
min-height: 52px;
border-radius: 18px;
font-size: 20px;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.app-tour-modal .app-tour-icon-btn:active { transform: scale(0.95); }
/* ---- Custom per-slide SVG illustration sizing ---- */
.app-tour-modal .tour-svg {
width: 100%;
max-width: 340px;
height: auto;
max-height: min(44dvh, 350px);
display: block;
overflow: visible;
filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.42));
}
body.ads-sticky-active .app-tour-modal .tour-svg {
max-height: min(38dvh, 300px);
}
/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
.app-tour-modal *,
.app-tour-modal *::before,
.app-tour-modal *::after { animation: none !important; }
}