/* ==========================================================
   FREUMIA STUDENTS AI
   STUDY PLAN V2
   Reference-driven responsive design
========================================================== */

:root {
    --sp-bg: #061126;
    --sp-bg-soft: #0a1732;
    --sp-card: rgba(10, 24, 52, 0.86);
    --sp-card-strong: rgba(12, 28, 60, 0.96);
    --sp-border: rgba(123, 151, 217, 0.16);
    --sp-border-strong: rgba(108, 83, 255, 0.42);

    --sp-text: #f5f7ff;
    --sp-text-soft: #c6cee1;
    --sp-text-muted: #8d9ab7;

    --sp-purple: #6f35ff;
    --sp-purple-light: #8b6dff;
    --sp-blue: #2f72ff;
    --sp-cyan: #48d7ff;
    --sp-green: #2ed573;
    --sp-gold: #ffb51b;
    --sp-pink: #ff3f91;

    --sp-radius-xl: 28px;
    --sp-radius-lg: 22px;
    --sp-radius-md: 16px;
    --sp-radius-sm: 12px;

    --sp-shadow:
        0 24px 70px rgba(0, 0, 0, 0.28);

    --sp-container: 1180px;
}

/* ==========================================================
   RESET / BASE
========================================================== */

.study-plan-v2-page {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(
            circle at 80% 5%,
            rgba(79, 52, 255, 0.14),
            transparent 26%
        ),
        radial-gradient(
            circle at 10% 28%,
            rgba(0, 115, 255, 0.08),
            transparent 30%
        ),
        var(--sp-bg);

    color: var(--sp-text);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

.study-plan-v2-page *,
.study-plan-v2-page *::before,
.study-plan-v2-page *::after {
    box-sizing: border-box;
}

.study-plan-v2-page button,
.study-plan-v2-page a {
    -webkit-tap-highlight-color: transparent;
}

.study-plan-v2-page a {
    color: inherit;
    text-decoration: none;
}

.study-plan-v2-page button {
    font: inherit;
}

/* ==========================================================
   BACKGROUND
========================================================== */

.spv2-background {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}

.spv2-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(96, 118, 177, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(96, 118, 177, 0.035) 1px,
            transparent 1px
        );

    background-size: 48px 48px;
    mask-image: linear-gradient(
        to bottom,
        black,
        transparent 90%
    );
}

.spv2-orb {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.12;
}

.spv2-orb-one {
    top: -180px;
    right: -120px;
    background: var(--sp-purple);
}

.spv2-orb-two {
    top: 45%;
    left: -260px;
    background: var(--sp-blue);
}

/* ==========================================================
   HEADER
========================================================== */

.spv2-header {
    position: sticky;
    top: 0;
    z-index: 100;

    border-bottom: 1px solid rgba(126, 151, 207, 0.12);

    background:
        rgba(5, 15, 34, 0.82);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.spv2-header-inner {
    width: min(
        calc(100% - 40px),
        var(--sp-container)
    );

    min-height: 76px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.spv2-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.spv2-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;

    display: grid;
    place-items: center;

    color: #fff;
    font-size: 21px;

    background:
        linear-gradient(
            145deg,
            #28b9ff,
            #6534ff 62%,
            #9a5cff
        );

    box-shadow:
        0 0 28px rgba(82, 84, 255, 0.35);
}

.spv2-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.spv2-brand-copy strong {
    font-size: 15px;
    letter-spacing: 0.06em;
}

.spv2-brand-copy small {
    margin-top: 5px;
    color: var(--sp-text-muted);
    font-size: 10px;
}

.spv2-desktop-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.spv2-desktop-nav a {
    padding: 10px 13px;
    border-radius: 10px;

    color: #b8c3dc;
    font-size: 13px;
    font-weight: 600;

    transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.spv2-desktop-nav a:hover,
.spv2-desktop-nav a.is-active {
    color: #fff;
    background: rgba(101, 67, 255, 0.14);
}

.spv2-desktop-nav a.is-active {
    box-shadow:
        inset 0 0 0 1px rgba(115, 86, 255, 0.22);
}

.spv2-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.spv2-icon-button,
.spv2-menu-button {
    position: relative;

    width: 42px;
    height: 42px;

    border: 1px solid var(--sp-border);
    border-radius: 13px;

    color: #d9e0f1;
    background: rgba(18, 35, 69, 0.7);

    cursor: pointer;

    display: grid;
    place-items: center;

    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.spv2-icon-button:hover,
.spv2-menu-button:hover {
    border-color: var(--sp-border-strong);
    background: rgba(33, 44, 87, 0.85);
    transform: translateY(-1px);
}

.spv2-notification-badge {
    position: absolute;
    top: 7px;
    right: 7px;

    width: 7px;
    height: 7px;
    border-radius: 50%;

    background: var(--sp-pink);
    box-shadow: 0 0 9px rgba(255, 63, 145, 0.8);
}

.spv2-menu-button {
    display: none;
}

.spv2-mobile-nav {
    width: min(
        calc(100% - 24px),
        var(--sp-container)
    );

    margin: 0 auto 12px;
    padding: 8px;

    border: 1px solid var(--sp-border);
    border-radius: 18px;

    background: rgba(9, 22, 47, 0.98);

    box-shadow: var(--sp-shadow);
}

.spv2-mobile-nav[hidden] {
    display: none;
}

.spv2-mobile-nav a {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 14px;
    border-radius: 12px;

    color: var(--sp-text-soft);
    font-size: 14px;
    font-weight: 600;
}

.spv2-mobile-nav a.is-active,
.spv2-mobile-nav a:hover {
    color: #fff;
    background: rgba(105, 61, 255, 0.16);
}

/* ==========================================================
   MAIN
========================================================== */

.spv2-main {
    width: min(
        calc(100% - 40px),
        var(--sp-container)
    );

    margin: 0 auto;
    padding: 46px 0 70px;
}

/* ==========================================================
   HERO
========================================================== */

.spv2-hero {
    min-height: 330px;

    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
    align-items: center;

    gap: 34px;
    padding: 24px 22px 24px 34px;
}

.spv2-hero-copy {
    position: relative;
    z-index: 2;
}

.spv2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 12px;
    border: 1px solid rgba(110, 77, 255, 0.28);
    border-radius: 999px;

    color: #c9c0ff;
    background: rgba(86, 56, 255, 0.08);

    font-size: 12px;
    font-weight: 700;
}

.spv2-hero h1 {
    max-width: 720px;
    margin: 16px 0 12px;

    font-size: clamp(
        44px,
        6vw,
        72px
    );

    line-height: 0.98;
    letter-spacing: -0.055em;
    font-weight: 900;
}

.spv2-hero h1 span {
    background:
        linear-gradient(
            100deg,
            #55baff 0%,
            #8671ff 48%,
            #b35dff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.spv2-hero p {
    max-width: 590px;
    margin: 0;

    color: var(--sp-text-soft);
    font-size: 16px;
    line-height: 1.7;
}

.spv2-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 22px;
}

.spv2-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 12px;
    border: 1px solid var(--sp-border);
    border-radius: 11px;

    color: var(--sp-text-muted);
    background: rgba(12, 27, 56, 0.58);

    font-size: 12px;
}

.spv2-hero-meta strong {
    color: var(--sp-text-soft);
    font-weight: 600;
}

.spv2-hero-meta i {
    color: var(--sp-purple-light);
}

.spv2-hero-visual {
    position: relative;

    min-height: 300px;

    display: grid;
    place-items: center;
}

.spv2-brain-glow {
    position: absolute;

    width: 240px;
    height: 240px;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(73, 90, 255, 0.42),
            rgba(115, 49, 255, 0.17) 42%,
            transparent 72%
        );

    filter: blur(18px);
}

.spv2-brain-image {
    position: relative;
    z-index: 3;

    width: min(310px, 76%);
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 0 20px rgba(58, 92, 255, 0.55))
        drop-shadow(0 0 50px rgba(115, 44, 255, 0.25));
}

.spv2-brain-orbit {
    position: absolute;
    z-index: 1;

    width: 255px;
    height: 150px;

    border: 1px solid rgba(82, 128, 255, 0.28);
    border-radius: 50%;

    transform: rotate(-20deg);
}

.spv2-orbit-two {
    width: 210px;
    height: 250px;
    transform: rotate(24deg);
    border-color: rgba(145, 83, 255, 0.2);
}

.spv2-cap {
    position: absolute;
    top: 21%;
    right: 12%;

    z-index: 5;

    width: 78px;
    height: 32px;

    background:
        linear-gradient(
            135deg,
            #161d37,
            #273052
        );

    clip-path: polygon(
        50% 0,
        100% 45%,
        50% 100%,
        0 45%
    );

    transform: rotate(-8deg);
    filter: drop-shadow(0 7px 10px rgba(0,0,0,0.35));
}

.spv2-cap::after {
    content: "";

    position: absolute;
    width: 4px;
    height: 42px;

    right: 8px;
    top: 14px;

    background: #f1bd37;
    transform: rotate(23deg);
}

.spv2-cap span {
    position: absolute;
    right: 1px;
    bottom: -14px;

    width: 13px;
    height: 18px;

    background: #f1bd37;
    border-radius: 2px 2px 5px 5px;
}

.spv2-floating-icon {
    position: absolute;
    z-index: 4;

    display: grid;
    place-items: center;

    color: #73b8ff;
    text-shadow: 0 0 18px currentColor;
}

.spv2-book-icon {
    left: 11%;
    bottom: 18%;
    font-size: 27px;
}

.spv2-star-icon {
    top: 20%;
    left: 17%;
    color: #b07cff;
    font-size: 17px;
}

.spv2-chart-icon {
    right: 10%;
    bottom: 17%;
    color: #5fe5ff;
    font-size: 18px;
}

/* ==========================================================
   CARD SYSTEM
========================================================== */

.spv2-card {
    margin-top: 24px;

    padding: 24px;

    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(15, 31, 65, 0.94),
            rgba(7, 20, 44, 0.9)
        );

    box-shadow: var(--sp-shadow);

    overflow: hidden;
}

.spv2-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;
}

.spv2-card-heading.compact {
    margin-bottom: 18px;
}

.spv2-heading-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.spv2-heading-title h2,
.spv2-recommendation-heading h2 {
    margin: 0;

    color: #f4f7ff;

    font-size: 18px;
    line-height: 1.2;
    font-weight: 800;
}

.spv2-heading-title p {
    margin: 5px 0 0;

    color: var(--sp-text-muted);

    font-size: 12px;
}

.spv2-heading-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    font-size: 16px;
}

.spv2-heading-icon.purple {
    color: #c4adff;
    background: rgba(105, 62, 255, 0.17);
}

.spv2-heading-icon.blue {
    color: #78b5ff;
    background: rgba(40, 109, 255, 0.16);
}

.spv2-heading-icon.pink {
    color: #ff83bd;
    background: rgba(255, 49, 139, 0.13);
}

.spv2-heading-icon.gold {
    color: #ffc85b;
    background: rgba(255, 178, 28, 0.13);
}

.spv2-date-pill {
    padding: 9px 13px;

    border: 1px solid rgba(121, 149, 211, 0.16);
    border-radius: 999px;

    color: #c5cde0;
    background: rgba(24, 43, 79, 0.58);

    font-size: 12px;
    font-weight: 600;
}

/* ==========================================================
   TODAY PLAN
========================================================== */

.spv2-plan-list {
    margin-top: 20px;
}

.spv2-plan-row {
    min-height: 72px;

    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto 40px;
    align-items: center;

    gap: 14px;

    padding: 10px 2px;

    border-bottom: 1px solid rgba(127, 150, 200, 0.08);
}

.spv2-plan-row:last-child {
    border-bottom: 0;
}

.spv2-task-icon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #fff;
    font-size: 16px;
}

.spv2-task-icon.blue {
    background: linear-gradient(145deg, #1468ff, #375dff);
    box-shadow: 0 8px 24px rgba(30, 100, 255, 0.2);
}

.spv2-task-icon.green {
    background: linear-gradient(145deg, #16b96a, #37c978);
}

.spv2-task-icon.orange {
    background: linear-gradient(145deg, #ff9d0b, #ffbd25);
}

.spv2-task-icon.purple {
    background: linear-gradient(145deg, #7a32ff, #9c54ff);
}

.spv2-task-icon.pink {
    background: linear-gradient(145deg, #ef277a, #ff4d9a);
}

.spv2-task-copy {
    min-width: 0;
}

.spv2-task-copy strong {
    display: block;

    color: #f3f6ff;

    font-size: 14px;
    font-weight: 750;
}

.spv2-task-copy span {
    display: block;

    margin-top: 4px;

    color: #919fbb;

    font-size: 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spv2-task-duration {
    color: #c8d1e6;

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
}

.spv2-task-status {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border: 2px solid rgba(111, 139, 194, 0.25);
    border-radius: 50%;

    color: #7181a3;
    background: transparent;

    font-size: 11px;
}

.spv2-task-status.complete {
    border-color: var(--sp-green);
    color: #062c18;
    background: var(--sp-green);
}

.spv2-task-status.current {
    border-color: var(--sp-blue);
    color: #fff;
    background: var(--sp-blue);
    box-shadow: 0 0 16px rgba(47, 114, 255, 0.32);
}

.spv2-loading-row,
.spv2-empty-row {
    min-height: 130px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    color: var(--sp-text-muted);

    font-size: 13px;
    text-align: center;
}

.spv2-spinner {
    width: 17px;
    height: 17px;

    border: 2px solid rgba(139, 109, 255, 0.22);
    border-top-color: var(--sp-purple-light);
    border-radius: 50%;

    animation: spv2Spin 700ms linear infinite;
}

@keyframes spv2Spin {
    to {
        transform: rotate(360deg);
    }
}

.spv2-primary-button {
    width: 100%;
    min-height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    margin-top: 17px;
    padding: 13px 18px;

    border: 0;
    border-radius: 13px;

    color: #fff;

    background:
        linear-gradient(
            100deg,
            #4b22e8,
            #6734ff 48%,
            #7c31ef
        );

    box-shadow:
        0 12px 30px rgba(84, 45, 255, 0.24);

    font-size: 14px;
    font-weight: 750;

    cursor: pointer;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease;
}

.spv2-primary-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        0 16px 36px rgba(84, 45, 255, 0.34);
}

.spv2-primary-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.spv2-button-arrow {
    margin-left: auto;
    opacity: 0.8;
}

/* ==========================================================
   WEEKLY PROGRESS
========================================================== */

.spv2-week-card {
    margin-top: 24px;
}

.spv2-progress-label {
    color: #9b8bff;
    font-size: 13px;
}

.spv2-week-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;

    margin-top: 23px;
}

.spv2-week-day {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.spv2-week-day-name {
    color: #b4bfd4;
    font-size: 11px;
    font-weight: 600;
}

.spv2-week-day-dot {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border: 2px solid rgba(99, 123, 178, 0.24);
    border-radius: 50%;

    color: #657391;
    background: rgba(9, 23, 50, 0.6);

    font-size: 11px;
}

.spv2-week-day.complete .spv2-week-day-dot {
    border-color: var(--sp-green);
    color: #082d19;
    background: var(--sp-green);
}

.spv2-week-day.today .spv2-week-day-dot {
    border-color: var(--sp-blue);
    color: #fff;
    background: rgba(47, 114, 255, 0.12);
    box-shadow: 0 0 16px rgba(47, 114, 255, 0.22);
}

.spv2-progress-track {
    height: 10px;

    margin-top: 24px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(83, 107, 159, 0.16);
}

.spv2-progress-fill {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #2d71ff,
            #7035ff,
            #9748ff
        );

    box-shadow:
        0 0 18px rgba(112, 53, 255, 0.38);

    transition: width 700ms cubic-bezier(.2,.8,.2,1);
}

.spv2-progress-message {
    margin: 12px 0 0;

    color: #aeb9cf;
    font-size: 12px;
}

/* ==========================================================
   STATS
========================================================== */

.spv2-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;

    margin-top: 24px;
}

.spv2-stat-card {
    min-width: 0;

    padding: 20px 16px;

    border: 1px solid var(--sp-border);
    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            rgba(13, 30, 62, 0.9),
            rgba(8, 20, 44, 0.84)
        );

    text-align: center;
}

.spv2-stat-icon {
    width: 39px;
    height: 39px;

    margin: 0 auto 12px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    font-size: 15px;
}

.spv2-stat-icon.purple {
    color: #b99cff;
    background: rgba(112, 59, 255, 0.13);
}

.spv2-stat-icon.green {
    color: #54e89b;
    background: rgba(46, 213, 115, 0.11);
}

.spv2-stat-icon.gold {
    color: #ffd05c;
    background: rgba(255, 181, 27, 0.11);
}

.spv2-stat-icon.blue {
    color: #78b9ff;
    background: rgba(47, 114, 255, 0.12);
}

.spv2-stat-label {
    display: block;

    color: #aab5ca;

    font-size: 11px;
    font-weight: 600;
}

.spv2-stat-card strong {
    display: block;

    margin-top: 8px;

    color: #f6f8ff;

    font-size: 27px;
    line-height: 1;
    font-weight: 850;
}

.spv2-stat-card small {
    display: block;

    margin-top: 7px;

    color: #73819e;

    font-size: 10px;
}

/* ==========================================================
   AI RECOMMENDATION
========================================================== */

.spv2-recommendation-card {
    min-height: 190px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    align-items: center;

    gap: 20px;

    position: relative;
}

.spv2-recommendation-copy {
    position: relative;
    z-index: 2;
}

.spv2-recommendation-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.spv2-recommendation-heading h2 {
    font-size: 18px;
}

.spv2-recommendation-card p {
    max-width: 650px;

    margin: 15px 0 0;

    color: #c1cadd;

    font-size: 15px;
    line-height: 1.65;
}


.spv2-recommendation-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 13px;
}

.spv2-recommendation-tag {
    padding: 6px 9px;

    border: 1px solid rgba(112, 73, 255, 0.28);
    border-radius: 8px;

    color: #a995ff;
    background: rgba(101, 58, 255, 0.08);

    font-size: 11px;
    font-weight: 700;
}

.spv2-recommendation-visual {
    position: relative;

    min-height: 150px;

    display: grid;
    place-items: center;
}

.spv2-recommendation-visual img {
    position: relative;
    z-index: 2;

    width: 190px;

    filter:
        drop-shadow(0 0 24px rgba(41, 95, 255, 0.48))
        drop-shadow(0 0 40px rgba(126, 46, 255, 0.24));
}

.spv2-recommendation-glow {
    position: absolute;

    width: 160px;
    height: 160px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(58, 95, 255, 0.32),
            transparent 70%
        );

    filter: blur(10px);
}

/* ==========================================================
   QUICK ACTIONS
========================================================== */

.spv2-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.spv2-action-button {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 10px 12px;

    border: 1px solid rgba(108, 136, 196, 0.15);
    border-radius: 14px;

    color: #d7deed;
    background: rgba(16, 34, 68, 0.62);

    font-size: 12px;
    font-weight: 700;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease;
}

.spv2-action-button:hover {
    transform: translateY(-2px);

    border-color: rgba(114, 78, 255, 0.42);

    background:
        rgba(30, 40, 83, 0.82);
}

.spv2-action-icon {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    font-size: 12px;
}

.spv2-action-icon.robot {
    color: #9c86ff;
    background: rgba(111, 61, 255, 0.14);
}

.spv2-action-icon.quiz {
    color: #ff6aa9;
    background: rgba(255, 57, 143, 0.12);
}

.spv2-action-icon.materials {
    color: #57c5ff;
    background: rgba(42, 145, 255, 0.12);
}

.spv2-action-icon.notes {
    color: #ffad32;
    background: rgba(255, 167, 35, 0.12);
}

/* ==========================================================
   FINAL CTA
========================================================== */

.spv2-final-cta {
    min-height: 86px;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;

    gap: 16px;

    margin-top: 24px;
    padding: 15px 18px;

    border: 1px solid rgba(123, 66, 255, 0.42);
    border-radius: 21px;

    background:
        linear-gradient(
            105deg,
            rgba(55, 21, 130, 0.45),
            rgba(25, 24, 75, 0.55)
        );

    box-shadow:
        0 15px 45px rgba(74, 32, 200, 0.12);
}

.spv2-final-cta-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #4c29ff,
            #7836ff
        );

    box-shadow:
        0 0 24px rgba(111, 53, 255, 0.34);

    font-size: 21px;
}

.spv2-final-cta p {
    margin: 0;

    color: #d4d9e7;

    font-size: 14px;
    line-height: 1.5;
}

.spv2-final-cta p strong {
    color: #fff;
}

.spv2-cta-button {
    min-width: 125px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 17px;

    border-radius: 12px;

    color: #fff;

    background:
        linear-gradient(
            100deg,
            #5224e9,
            #7435ff
        );

    font-size: 13px;
    font-weight: 800;

    box-shadow:
        0 9px 24px rgba(93, 43, 242, 0.25);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.spv2-cta-button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 13px 30px rgba(93, 43, 242, 0.36);
}

/* ==========================================================
   FOOTER
========================================================== */

.spv2-footer {
    width: min(
        calc(100% - 40px),
        var(--sp-container)
    );

    margin: 0 auto;
    padding: 0 0 30px;

    color: #62708e;

    font-size: 11px;
    text-align: center;
}

/* ==========================================================
   FOCUS
========================================================== */

.study-plan-v2-page
a:focus-visible,
.study-plan-v2-page
button:focus-visible {
    outline: 2px solid #8e76ff;
    outline-offset: 3px;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 980px) {

    .spv2-desktop-nav {
        display: none;
    }

    .spv2-menu-button {
        display: grid;
    }

    .spv2-hero {
        grid-template-columns: 1fr 0.72fr;
    }

    .spv2-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .spv2-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {

    .spv2-header-inner {
        width: min(
            calc(100% - 24px),
            var(--sp-container)
        );

        min-height: 68px;
    }

    .spv2-main {
        width: min(
            calc(100% - 24px),
            var(--sp-container)
        );

        padding-top: 22px;
    }

    .spv2-hero {
        min-height: auto;

        grid-template-columns: 1fr;

        padding: 10px 8px 4px;
        gap: 10px;
    }

    .spv2-hero h1 {
        font-size: clamp(
            43px,
            14vw,
            62px
        );
    }

    .spv2-hero p {
        font-size: 14px;
    }

    .spv2-hero-visual {
        min-height: 230px;
        margin-top: -2px;
    }

    .spv2-brain-image {
        width: 250px;
    }

    .spv2-cap {
        top: 11%;
        right: 19%;
        transform: scale(0.82) rotate(-8deg);
    }

    .spv2-card {
        padding: 18px;
        border-radius: 21px;
    }

    .spv2-card-heading {
        align-items: flex-start;
    }

    .spv2-plan-row {
        grid-template-columns: 43px minmax(0, 1fr) auto;
        gap: 11px;
        min-height: 68px;
    }

    .spv2-task-icon {
        width: 40px;
        height: 40px;
    }

    .spv2-task-status {
        grid-column: 3;
        grid-row: 1;
    }

    .spv2-task-duration {
        grid-column: 2;
        grid-row: 2;
        margin-top: -17px;
        font-size: 11px;
        color: #8592ad;
    }

    .spv2-task-copy {
        grid-column: 2;
    }

    .spv2-week-days {
        gap: 4px;
    }

    .spv2-week-day-dot {
        width: 28px;
        height: 28px;
    }

    .spv2-recommendation-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .spv2-recommendation-visual {
        display: none;
    }

    .spv2-final-cta {
        grid-template-columns: auto 1fr;
    }

    .spv2-cta-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 480px) {

    .spv2-brand-mark {
        width: 38px;
        height: 38px;
    }

    .spv2-brand-copy strong {
        font-size: 14px;
    }

    .spv2-icon-button,
    .spv2-menu-button {
        width: 39px;
        height: 39px;
    }

    .spv2-main {
        padding-bottom: 48px;
    }

    .spv2-hero-meta span {
        flex: 1;
        min-width: 145px;
    }

    .spv2-date-pill {
        font-size: 10px;
    }

    .spv2-heading-title h2 {
        font-size: 16px;
    }

    .spv2-heading-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .spv2-plan-row {
        grid-template-columns: 40px minmax(0, 1fr) 30px;
    }

    .spv2-task-copy strong {
        font-size: 13px;
    }

    .spv2-stats-grid {
        gap: 9px;
    }

    .spv2-stat-card {
        padding: 16px 8px;
    }

    .spv2-stat-card strong {
        font-size: 23px;
    }

    .spv2-actions-grid {
        grid-template-columns: 1fr 1fr;
    }

    .spv2-action-button {
        min-height: 54px;
        font-size: 11px;
    }

    .spv2-final-cta {
        padding: 14px;
    }

    .spv2-final-cta-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .spv2-final-cta p {
        font-size: 12px;
    }

    .spv2-desktop-break {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .study-plan-v2-page *,
    .study-plan-v2-page *::before,
    .study-plan-v2-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}