.color-icon {
    --icon-color: #228abb;
    --icon-bg: #e4f4ff;
    color: var(--icon-color) !important;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0
}

.color-icon[data-color=purple] {
    --icon-color: #8b66cf;
    --icon-bg: #f0e9ff
}

.color-icon[data-color=mint] {
    --icon-color: #17987c;
    --icon-bg: #dcf7ed
}

.color-icon[data-color=orange] {
    --icon-color: #d48530;
    --icon-bg: #fff1d8
}

.color-icon[data-color=pink] {
    --icon-color: #cf6096;
    --icon-bg: #ffe7f2
}

.color-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    filter: drop-shadow(0 3px 3px #1433470b)
}

.color-icon svg * {
    vector-effect: non-scaling-stroke
}

.category .symbol.color-icon {
    width: 46px;
    height: 46px;
    padding: 6px;
    border-radius: 14px;
    background: var(--icon-bg);
    flex: 0 0 46px
}

.category[data-color=purple] {
    --tone: #9876db
}

.category[data-color=mint] {
    --tone: #35b792
}

.category[data-color=orange] {
    --tone: #edae54
}

.category[data-color=pink] {
    --tone: #de83b0
}

.category[data-color=blue] {
    --tone: #57b9ed
}

.category {
    border-top: 3px solid var(--tone) !important
}

.learning-grid>a .color-nav-icon {
    width: 56px;
    height: 56px;
    padding: 9px;
    border-radius: 17px;
    background: var(--icon-bg);
    margin-bottom: 7px
}

.learning-grid>a {
    position: relative;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s
}

.learning-grid>a:hover {
    transform: translateY(-5px);
    box-shadow: 0 13px 35px #36799c15
}

.learning-grid>a:after {
    content: '↗';
    position: absolute;
    left: 25px;
    top: 29px;
    color: #80a2b6;
    font-size: 22px
}

.study-nav a {
    position: relative;
    padding-inline-start: 52px !important
}

.study-nav .color-nav-icon {
    position: absolute;
    inset-inline-start: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 4px;
    border-radius: 9px;
    background: var(--icon-bg)
}

.study-subject-icon.color-icon {
    padding: 18px;
    background: var(--icon-bg) !important;
    border: 1px solid color-mix(in srgb, var(--icon-color) 20%, transparent)
}

.category-symbol .color-icon {
    width: 90px;
    height: 90px
}

.hub-hero-icon.color-icon {
    padding: 18px;
    background: var(--icon-bg);
    border-color: transparent
}

.resource-icon.color-icon,
.speech-icon.color-icon {
    padding: 7px;
    background: var(--icon-bg)
}

.plan-color-icon {
    width: 53px;
    height: 53px;
    margin: 0 auto 13px;
    padding: 8px;
    background: var(--icon-bg);
    border-radius: 16px
}

.calculator-color-icon {
    width: 62px;
    height: 62px;
    padding: 10px;
    background: var(--icon-bg);
    border-radius: 19px;
    margin-bottom: 18px
}

[data-theme=dark] .color-icon {
    --icon-bg: #213e54
}

[data-theme=dark] .color-icon[data-color=purple] {
    --icon-bg: #342c50
}

[data-theme=dark] .color-icon[data-color=mint] {
    --icon-bg: #1c453f
}

[data-theme=dark] .color-icon[data-color=orange] {
    --icon-bg: #493b25
}

[data-theme=dark] .color-icon[data-color=pink] {
    --icon-bg: #492f44
}

/* Landing accents and a short route into real practice. */
.colorful-home .hero {
    position: relative;
    background: radial-gradient(ellipse at 12% 22%, #c8bcff30, transparent 35%), radial-gradient(ellipse at 86% 50%, #b4eddd45, transparent 32%), radial-gradient(ellipse at 48% 58%, #d6edff60, transparent 55%)
}

.colorful-home h1 em {
    background: linear-gradient(100deg, #1487ba 12%, #8873d7 64%, #d96b9f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important
}

.hero-chips {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 24px auto 0;
    padding: 0 18px
}

.hero-chips>span {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #dce6f0;
    border-radius: 30px;
    background: #ffffffb8;
    color: #4c657a;
    font-size: 12px;
    padding: 7px 13px;
    box-shadow: 0 3px 10px #21486b03
}

.hero-chips .color-icon {
    width: 23px;
    height: 23px
}

.colorful-home .logo {
    box-shadow: 0 0 0 11px #6fc3ee0c, 0 0 0 23px #ae94f508, 0 20px 70px #5aadde30 !important;
    border: 3px solid #9bd8edaa
}

.colorful-home .orbit-one {
    border-color: #a2cfe47a
}

.colorful-home .orbit-two {
    border-color: #b5a3e840
}

.colorful-home .orbit-three {
    border-color: #f0bf9840
}

.color-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 17px;
    border: 1px solid #dde6ef;
    border-radius: 17px;
    background: #ffffffd9;
    box-shadow: 0 10px 30px #5d73a30d;
    font-size: 13px;
    color: #617189;
    pointer-events: none;
    animation: color-drift 5s ease-in-out infinite
}

.color-float .color-icon {
    width: 34px;
    height: 34px
}

.color-float-one {
    top: 22%;
    right: 8%;
    transform: rotate(-8deg)
}

.color-float-two {
    bottom: 20%;
    left: 7%;
    animation-delay: -2s;
    transform: rotate(6deg)
}

.universe.open .color-float {
    display: none
}

.colorful-home .formula {
    opacity: .35
}

.colorful-home .s1 {
    background: #a98ae6;
    box-shadow: 0 0 14px #ba9de9
}

.colorful-home .s2 {
    background: #edb45e;
    box-shadow: 0 0 14px #edb45e
}

.colorful-home .s3 {
    background: #69c7ac;
    box-shadow: 0 0 14px #69c7ac
}

.learning-path {
    max-width: 1140px;
    margin: 25px auto 55px;
    padding: 0 24px
}

.path-heading {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 28px
}

.path-heading h2 {
    font-size: 32px;
    color: #183c52;
    margin: 9px 0
}

.path-heading p {
    color: #6b8191;
    margin: 7px 0;
    font-size: 19px;
    font-family: Tajawal, Heebo, sans-serif
}

.path-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px
}

.path-card {
    --path-tint: #eef7ff;
    position: relative;
    display: block;
    border: 1px solid #dce8f0;
    background: linear-gradient(150deg, var(--path-tint), #fff 75%);
    border-radius: 24px;
    padding: 29px;
    color: #173a50;
    text-decoration: none;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s
}

.path-card:nth-child(2) {
    --path-tint: #f3edff
}

.path-card:nth-child(3) {
    --path-tint: #e7f8f0
}

.path-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 38px #40628912
}

.path-card .color-icon {
    width: 66px;
    height: 66px;
    padding: 9px;
    background: var(--icon-bg);
    border-radius: 20px
}

.path-step {
    position: absolute;
    left: 25px;
    top: 24px;
    font-size: 36px;
    font-weight: 800;
    color: #92abc326;
    line-height: 1
}

.path-card h3 {
    font-size: 21px;
    margin: 23px 0 8px
}

.path-card p {
    font-size: 15px;
    color: #637e8f;
    line-height: 1.9;
    margin: 0 0 19px
}

.path-card small {
    display: block;
    font: 400 17px/1.6 Tajawal, Heebo, sans-serif;
    margin: 6px 0;
    color: #71859a
}

.path-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: #3987b2;
    border-top: 1px solid #b8cede40;
    padding-top: 15px
}

.practice-banner {
    max-width: 1092px;
    margin: 0 auto 65px;
    border: 1px solid #d9e4ee;
    border-radius: 25px;
    background: linear-gradient(105deg, #eef4ff, #f5edff 53%, #e4f8ef);
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 29px 34px;
    color: #193b50
}

.practice-banner>.color-icon {
    width: 74px;
    height: 74px;
    flex: 0 0 74px
}

.practice-banner h2 {
    font-size: 24px;
    margin: 0 0 5px
}

.practice-banner p {
    margin: 0;
    font: 400 18px/1.6 Tajawal, Heebo, sans-serif;
    color: #697e92
}

.practice-banner a {
    margin-inline-start: auto;
    flex-shrink: 0;
    padding: 13px 22px;
    background: #087eae;
    color: #fff;
    border-radius: 13px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 7px 20px #087eae22
}

.practice-banner a:hover {
    background: #076f98
}

[data-theme=dark] .colorful-home .hero {
    background: radial-gradient(ellipse at 12% 22%, #5c3a8830, transparent 35%), radial-gradient(ellipse at 86% 50%, #18775f25, transparent 32%)
}

[data-theme=dark] .hero-chips>span,
[data-theme=dark] .color-float {
    background: #142435e8;
    border-color: #32485b;
    color: #c1d6e6
}

[data-theme=dark] .path-card {
    background: linear-gradient(150deg, #24334b, #132336 75%);
    border-color: #304559;
    color: #e4f1fb
}

[data-theme=dark] .path-card:nth-child(2) {
    background: linear-gradient(150deg, #352943, #132336 75%)
}

[data-theme=dark] .path-card:nth-child(3) {
    background: linear-gradient(150deg, #203e3a, #132336 75%)
}

[data-theme=dark] .path-heading h2,
[data-theme=dark] .practice-banner {
    color: #e4f1fb
}

[data-theme=dark] .path-card p,
[data-theme=dark] .path-card small,
[data-theme=dark] .path-heading p,
[data-theme=dark] .practice-banner p {
    color: #abc1d1
}

[data-theme=dark] .practice-banner {
    border-color: #33475c;
    background: linear-gradient(105deg, #183348, #30273f, #193931)
}

/* The original countdown engine supplies progress and expiry; this is presentation only. */
.modern-study .study-timer {
    --timer-tone: #168bad;
    --timer-tint: #e9f7fc;
    padding: 18px 23px 14px;
    border: 1px solid #b9deec;
    border-radius: 21px;
    background: linear-gradient(110deg, #f0f8ff, #fff 45%, #f0fcf8);
    box-shadow: 0 9px 30px #2884a21a;
    overflow: hidden
}

.modern-study .study-timer-row {
    gap: 17px
}

.modern-study .study-timer-icon {
    position: relative;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: conic-gradient(from -90deg, var(--timer-tone) var(--timer-progress, 100%), var(--s-line) 0);
    color: var(--timer-tone)
}

.modern-study .study-timer-icon:before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--s-panel)
}

.modern-study .study-timer-icon svg {
    position: relative;
    width: 30px;
    height: 30px;
    z-index: 1
}

.modern-study .study-timer-label strong {
    font-size: 15px
}

.modern-study .study-timer-label [lang] {
    font-size: 15px
}

.modern-study .study-timer-digits {
    font-size: 39px;
    letter-spacing: 1.8px;
    background: var(--timer-tint);
    border: 1px solid color-mix(in srgb, var(--timer-tone) 15%, transparent);
    padding: 11px 17px;
    border-radius: 14px;
    text-align: center;
    min-width: 155px
}

.modern-study .study-timer-track {
    height: 6px;
    margin-top: 15px;
    background: var(--s-line)
}

.modern-study .study-timer-track span {
    background: linear-gradient(90deg, color-mix(in srgb, var(--timer-tone) 65%, #bce7cd), var(--timer-tone));
    border-radius: 6px
}

.modern-study .study-timer-warning {
    font-size: 12px;
    max-width: 160px
}

.modern-study .study-timer[data-state=low] {
    --timer-tone: #b67917;
    --timer-tint: #fff4d9;
    border-color: #e7c986;
    background: linear-gradient(110deg, #fff8e9, var(--s-panel))
}

.modern-study .study-timer[data-state=urgent] {
    --timer-tone: #c54b62;
    --timer-tint: #fff0f3;
    border-color: #e4a9b7;
    background: linear-gradient(110deg, #fff0f5, var(--s-panel))
}

[data-theme=dark] .modern-study .study-timer {
    --timer-tone: #72d4ec;
    --timer-tint: #203f52;
    border-color: #31586c;
    background: linear-gradient(110deg, #193346, #142635 55%, #163b34)
}

[data-theme=dark] .modern-study .study-timer[data-state=low] {
    --timer-tone: #f1cc7c;
    --timer-tint: #443a22;
    background: linear-gradient(110deg, #3b3423, #142635)
}

[data-theme=dark] .modern-study .study-timer[data-state=urgent] {
    --timer-tone: #ffadbd;
    --timer-tint: #482632;
    background: linear-gradient(110deg, #412735, #142635)
}

@keyframes color-drift {

    0%,
    100% {
        translate: 0 0
    }

    50% {
        translate: 0 -12px
    }
}

@media(max-width:900px) {
    .path-grid {
        gap: 13px
    }

    .path-card {
        padding: 23px
    }

    .practice-banner {
        margin-left: 24px;
        margin-right: 24px
    }

    .study-nav a {
        padding-inline-start: 44px !important
    }

    .color-float-one {
        right: 3%
    }

    .color-float-two {
        left: 3%
    }
}

@media(max-width:700px) {
    .hero-chips {
        gap: 7px;
        margin-top: 20px
    }

    .hero-chips>span {
        font-size: 10px;
        padding: 6px 9px
    }

    .hero-chips .color-icon {
        width: 20px;
        height: 20px
    }

    .color-float {
        padding: 8px;
        border-radius: 13px
    }

    .color-float>span:not(.color-icon) {
        display: none
    }

    .color-float .color-icon {
        width: 29px;
        height: 29px
    }

    .color-float-one {
        top: 42px;
        right: 8%
    }

    .color-float-two {
        bottom: auto;
        top: 240px;
        left: 7%
    }

    .category .symbol.color-icon {
        width: 33px;
        height: 36px;
        flex-basis: 33px;
        padding: 4px;
        border-radius: 10px
    }

    .category {
        gap: 9px !important
    }

    .learning-path {
        padding: 0 18px;
        margin: 25px auto 32px
    }

    .path-heading h2 {
        font-size: 27px
    }

    .path-grid {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .path-card {
        padding: 24px
    }

    .path-card .color-icon {
        width: 54px;
        height: 54px
    }

    .path-card h3 {
        margin-top: 16px
    }

    .practice-banner {
        margin: 0 18px 40px;
        padding: 23px;
        gap: 16px;
        flex-wrap: wrap;
        border-radius: 21px
    }

    .practice-banner>.color-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px
    }

    .practice-banner h2 {
        font-size: 21px
    }

    .practice-banner p {
        font-size: 16px
    }

    .practice-banner a {
        width: 100%;
        text-align: center
    }

    .practice-banner>div {
        flex: 1
    }

    .modern-study .study-timer {
        padding: 14px;
        border-radius: 16px
    }

    .modern-study .study-timer-row {
        gap: 10px;
        flex-wrap: wrap
    }

    .modern-study .study-timer-icon {
        width: 48px;
        height: 48px
    }

    .modern-study .study-timer-icon:before {
        inset: 4px
    }

    .modern-study .study-timer-icon svg {
        width: 24px;
        height: 24px
    }

    .modern-study .study-timer-label strong {
        font-size: 12px
    }

    .modern-study .study-timer-label [lang] {
        font-size: 11px
    }

    .modern-study .study-timer-digits {
        font-size: 29px;
        padding: 10px;
        min-width: 111px;
        letter-spacing: 1px;
        margin-right: auto
    }

    .modern-study .study-timer-warning {
        max-width: none;
        width: 100%;
        order: 4
    }

    .modern-study .study-timer-track {
        margin-top: 12px
    }

    .category-symbol .color-icon {
        width: 35px;
        height: 42px
    }

    .hub-hero-icon.color-icon {
        padding: 10px
    }
}

[data-visual-motion=reduced] .color-float {
    animation: none
}

[data-visual-motion=reduced] .v-reveal {
    opacity: 1 !important;
    transform: none !important
}

@media(prefers-reduced-motion:reduce) {
    .color-float {
        animation: none
    }

    .path-card,
    .learning-grid>a {
        transition: none
    }

    .modern-study .study-timer-track span {
        transition: none
    }
}