/* =============================================
   BOOTSTRAP OVERRIDE — Fix invisible text
   Bootstrap's a{color} rule overrides Tailwind's
   text-slate-950 on <a> tags. This section forces
   correct colors AFTER both frameworks load.
   ============================================= */

/* Sidebar conversation links & account link */
a.block[class*="bg-slate-50"],
a[class*="bg-slate-50"] {
    color: #020617 !important;        /* slate-950 */
    text-decoration: none !important;
}
a.block[class*="bg-slate-50"]:hover,
a[class*="bg-slate-50"]:hover {
    color: #020617 !important;
}

/* Navbar links — keep them light on dark navbar */
nav a {
    text-decoration: none !important;
}
nav a[class*="text-slate-300"] {
    color: #cbd5e1 !important;        /* slate-300 */
}
nav a[class*="text-slate-300"]:hover {
    color: #22d3ee !important;        /* cyan-400 */
}
nav a[class*="text-slate-400"] {
    color: #94a3b8 !important;        /* slate-400 */
}
nav a[class*="text-cyan-400"] {
    color: #22d3ee !important;        /* cyan-400 */
}

/* All links inside white chat area / info cards */
.bg-white a,
div[class*="bg-white"] a {
    color: inherit !important;
    text-decoration: none !important;
}

/* "Descarcă Barem (PDF)" link — dark button, needs white text */
a[class*="bg-slate-800"][class*="text-white"] {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* optional custom scrollbar */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.copy-format-wrap {
    position: absolute !important;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 20;
}

.copy-format-wrap .copy-math-btn {
    position: static !important;
}

/* =============================================
   RESPONSIVE LAYOUT FIXES
   The templates are desktop-first Tailwind shells. These overrides keep
   desktop behavior intact while letting app screens stack and scroll on
   tablets and phones.
   ============================================= */

html,
body {
    max-width: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.25rem;
}

.math-content,
.msg-content-container,
#chat {
    overflow-wrap: anywhere;
    word-break: normal;
}

@media (max-width: 1024px) {
    body {
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    nav > div {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    nav > div > a {
        min-width: 0;
    }

    nav .text-2xl {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }

    nav div[class*="gap-6"],
    nav div[class*="gap-4"] {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.75rem !important;
    }

    main {
        min-width: 0;
    }

    div[class*="h-[calc(100"],
    div[class*="h-[calc(100dvh"] {
        height: auto !important;
        min-height: calc(100dvh - 72px) !important;
        overflow: visible !important;
        padding: 1rem !important;
    }

    div[class*="max-w-[1850px]"] {
        height: auto !important;
        min-height: 0 !important;
        flex-direction: column !important;
        overflow: visible !important;
        border-radius: 1rem !important;
        padding: 0.75rem !important;
    }

    div[class*="max-w-[1850px]"] > div,
    div[class*="w-72"],
    div[class*="w-80"] {
        width: 100% !important;
        min-width: 0 !important;
    }

    div[class*="max-w-[1850px]"] div[class*="overflow-hidden"] {
        overflow: visible !important;
    }

    div[class*="h-[calc(100vh-430px)]"],
    div[class*="h-[calc(100vh-670px)]"],
    div[class*="min-h-[720px]"],
    div[class*="min-h-[540px]"],
    div[class*="min-h-[300px]"] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    #chat {
        max-height: 56dvh;
        overflow-y: auto !important;
        padding-right: 0 !important;
    }

    div[class*="grid-cols-3"] {
        grid-template-columns: 1fr !important;
    }

    form[class*="flex"][class*="gap-3"]:has(textarea) {
        flex-direction: column !important;
    }

    form[class*="flex"][class*="gap-3"]:has(textarea) button[type="submit"] {
        width: 100%;
        min-height: 3rem;
    }

    textarea,
    input,
    select,
    button {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .text-5xl,
    .text-4xl {
        font-size: 2rem !important;
        line-height: 2.4rem !important;
    }

    .text-3xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }

    div[class*="rounded-[2rem]"],
    .rounded-3xl {
        border-radius: 1rem !important;
    }

    .p-8,
    .p-7,
    .p-6 {
        padding: 1rem !important;
    }

    div[class*="min-h-[670px]"],
    div[class*="min-h-[800px]"],
    div[class*="min-h-[534px]"],
    div[class*="min-h-[520px]"],
    div[class*="min-h-[250px]"] {
        min-height: 0 !important;
    }

    div[class*="max-w-[1700px]"] {
        gap: 1rem !important;
    }

    .max-w-xl,
    .max-w-lg,
    .max-w-3xl,
    .max-w-5xl {
        width: 100% !important;
    }
}

@media (max-width: 520px) {
    nav > div {
        align-items: flex-start !important;
    }

    nav div[class*="gap-6"],
    nav div[class*="gap-4"] {
        width: 100%;
        justify-content: flex-start;
    }

    nav a[class*="bg-cyan-500"] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    div[class*="h-[calc(100"] {
        padding: 0.75rem !important;
    }

    #chat {
        max-height: 50dvh;
    }

    .w-fit {
        width: 100% !important;
    }
}

/* Mobile visual polish */
@media (max-width: 1024px) {
    nav {
        position: sticky;
        top: 0;
    }

    nav button,
    nav a {
        min-height: 2.5rem;
        display: inline-flex;
        align-items: center;
    }

    div[class*="max-w-[1850px]"] > div[class*="flex-1"] {
        order: 1;
    }

    div[class*="max-w-[1850px]"] > div[class*="w-72"] {
        order: 2;
    }

    div[class*="max-w-[1850px]"] > div[class*="w-80"] {
        order: 3;
    }

    div[class*="bg-slate-950"][class*="rounded-3xl"],
    div[class*="bg-white"][class*="rounded-3xl"] {
        box-shadow: 0 14px 30px rgba(2, 6, 23, 0.22) !important;
    }

    div[class*="w-72"] .space-y-2,
    div[class*="w-80"] .space-y-2,
    div[class*="w-80"] .space-y-5 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
        gap: 0.5rem !important;
    }

    div[class*="w-72"] a,
    div[class*="w-80"] div[class*="bg-slate-50"],
    div[class*="w-80"] li[class*="bg-slate-50"] {
        min-height: 2.75rem;
        display: flex;
        align-items: center;
    }

    .copy-format-wrap {
        position: static !important;
        margin-bottom: 0.5rem;
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    body {
        background: #020617;
    }

    nav {
        border-bottom-color: rgba(51, 65, 85, 0.85) !important;
        background: rgba(2, 6, 23, 0.96) !important;
    }

    nav > div {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    nav div[class*="gap-6"],
    nav div[class*="gap-4"] {
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
    }

    nav a[class*="bg-cyan-500"],
    nav button,
    button[type="submit"] {
        border-radius: 0.875rem !important;
    }

    input,
    select,
    textarea {
        min-height: 3rem;
        font-size: 1rem !important;
    }

    textarea {
        line-height: 1.5rem !important;
    }

    button,
    a[class*="bg-cyan-500"] {
        min-height: 2.75rem;
    }

    div[class*="bg-white"][class*="shadow-xl"],
    div[class*="bg-slate-900/70"],
    div[class*="bg-slate-950"][class*="shadow-xl"] {
        border-color: rgba(148, 163, 184, 0.24) !important;
    }

    div[class*="bg-cyan-100"],
    div[class*="bg-slate-100"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
    }

    .math-content .katex {
        font-size: 1em !important;
    }

    footer > div {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        text-align: center;
    }

    footer div[class*="gap-4"] {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 520px) {
    nav div[class*="gap-6"] > *,
    nav div[class*="gap-4"] > * {
        flex: 0 0 auto;
    }

    nav div[class*="gap-6"],
    nav div[class*="gap-4"] {
        overflow-x: auto;
        padding-bottom: 0.125rem;
        scrollbar-width: none;
    }

    nav div[class*="gap-6"]::-webkit-scrollbar,
    nav div[class*="gap-4"]::-webkit-scrollbar {
        display: none;
    }

    h1,
    h2,
    h3,
    p,
    label,
    button,
    a,
    span {
        overflow-wrap: anywhere;
    }

    div[class*="max-w-[1850px]"] {
        border-width: 0 !important;
        box-shadow: none !important;
    }

    div[class*="w-72"] .space-y-2,
    div[class*="w-80"] .space-y-2,
    div[class*="w-80"] .space-y-5 {
        grid-template-columns: 1fr;
    }

    form[class*="space-y-5"] {
        gap: 1rem;
    }
}

/* Targeted mobile UI improvements */
.mobile-nav-toggle {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 0.875rem;
    background: rgba(15, 23, 42, 0.85);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0;
}

.mobile-nav-toggle span {
    display: block;
    width: 1.15rem;
    height: 2px;
    border-radius: 999px;
    background: #e2e8f0;
}

.password-toggle {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
}

.password-toggle-icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mode-card {
    position: relative;
}

.mode-card::before {
    align-self: flex-start;
    display: inline-flex;
    margin-bottom: 0.9rem;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.mode-card--recommended::before {
    content: "Recomandat";
    background: #cffafe;
    color: #155e75;
}

.mode-card--new::before {
    content: "Nou";
    background: #dcfce7;
    color: #166534;
}

.mode-card--beta::before {
    content: "Beta";
    background: #fef3c7;
    color: #92400e;
}

.mode-card--quick::before {
    content: "Rapid";
    background: #e0e7ff;
    color: #3730a3;
}

.standard-copy-action,
.copy-btn,
.copy-math-btn {
    min-width: 2.25rem;
    min-height: 2.25rem;
    border-radius: 0.75rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-weight: 700;
}

.empty-state {
    border: 1px dashed rgba(148, 163, 184, 0.45);
    border-radius: 1rem;
    background: rgba(248, 250, 252, 0.75);
    color: #475569;
    padding: 1rem;
    text-align: center;
    font-size: 0.9rem;
}

.empty-state--compact {
    padding: 0.75rem;
    font-size: 0.82rem;
}

@media (max-width: 768px) {
    .mobile-nav-bar {
        position: relative;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center !important;
    }

    .mobile-nav-toggle {
        display: inline-flex;
        justify-self: end;
    }

    .mobile-nav-links {
        display: none !important;
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 0.75rem;
        padding: 0.75rem;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 1rem;
        background: rgba(15, 23, 42, 0.98);
        box-shadow: 0 18px 35px rgba(2, 6, 23, 0.35);
    }

    .mobile-nav-open .mobile-nav-links {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem !important;
        overflow: visible !important;
    }

    .mobile-nav-links form,
    .mobile-nav-links a,
    .mobile-nav-links button {
        width: 100%;
        justify-content: center;
        border-radius: 0.75rem !important;
        padding: 0.65rem 0.75rem !important;
        background: rgba(30, 41, 59, 0.82);
    }

    .mobile-nav-links span.text-slate-600 {
        display: none;
    }

    .mobile-nav-links a[class*="bg-cyan-500"] {
        background: #06b6d4 !important;
    }

    .mode-card {
        padding: 1rem !important;
        border-radius: 1rem !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12) !important;
        min-height: 0 !important;
    }

    .mode-card h2 {
        font-size: 1.2rem !important;
        line-height: 1.55rem !important;
        margin-bottom: 0.4rem !important;
    }

    .mode-card p {
        font-size: 0.92rem !important;
        line-height: 1.45rem !important;
    }

    .mode-card form {
        gap: 0.65rem !important;
    }

    .mode-card label {
        margin-bottom: -0.25rem;
    }

    .mode-card button[type="submit"],
    .mode-card button:not([type]) {
        padding-top: 0.8rem !important;
        padding-bottom: 0.8rem !important;
        font-size: 0.95rem;
    }

    .mobile-collapsible-panel {
        padding: 0.75rem !important;
    }

    .mobile-panel-toggle {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: 0.875rem;
        background: rgba(30, 41, 59, 0.92);
        color: #f8fafc;
        font-weight: 800;
        padding: 0.75rem 0.9rem;
        margin-bottom: 0.75rem;
    }

    .mobile-panel-chevron {
        color: #22d3ee;
        font-size: 1.25rem;
        line-height: 1;
    }

    .mobile-collapsible-panel.is-collapsed > :not(.mobile-panel-toggle) {
        display: none !important;
    }

    .mobile-prompt-composer {
        position: sticky;
        bottom: 0;
        z-index: 20;
        padding: 0.65rem;
        margin: 0 -0.65rem -0.65rem;
        border-top: 1px solid rgba(148, 163, 184, 0.25);
        background: rgba(248, 250, 252, 0.98);
        backdrop-filter: blur(10px);
        border-radius: 1rem;
        box-shadow: 0 -12px 26px rgba(15, 23, 42, 0.12);
    }

    .mobile-prompt-composer textarea {
        border-radius: 0.9rem !important;
        min-height: 3.25rem;
        max-height: 8rem;
    }

    .mobile-prompt-composer button[type="submit"],
    .mobile-prompt-composer button:not([type]) {
        border-radius: 0.9rem !important;
        box-shadow: none !important;
    }

    .mobile-prompt-composer button.is-loading {
        opacity: 0.8;
        cursor: wait;
    }

    .copy-format-wrap,
    .copy-btn,
    .copy-math-btn {
        position: static !important;
    }

    .standard-copy-action,
    .copy-btn,
    .copy-math-btn {
        background: #e2e8f0 !important;
        color: #0f172a !important;
        border: 1px solid #cbd5e1 !important;
    }
}

@media (min-width: 769px) {
    .mobile-panel-toggle {
        display: none;
    }
}
/* ===========================
   PREMIUM MODE CARD EFFECTS
=========================== */

.mode-card{
    position: relative;
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease,
        border-color .35s ease,
        background-color .35s ease;
}

.mode-card::after{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:70%;
    height:100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
    transition: left .8s ease;
    pointer-events:none;
}

.mode-card p{
    transition: color .3s ease, transform .3s ease;
}

.mode-card h2{
    transition: color .3s ease, transform .3s ease;
}

.mode-card button{
    transition: transform .3s ease, box-shadow .3s ease;
}

.mode-card button:active{
    transform:scale(.95);
}

.mode-card select,
.mode-card textarea{
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.mode-card select:focus,
.mode-card textarea:focus{
    transform:scale(1.01);
    border-color:#06b6d4;
    box-shadow: 0 0 0 4px rgba(6,182,212,.18);
}

#drop3,
#drop4{
    transition: transform .3s ease, box-shadow .3s ease;
}

/* Hover-only choreography: gated so touch devices don't get stuck "hover" after a tap */
@media (hover: hover) and (pointer: fine) {
    .mode-card:hover{
        transform: translateY(-10px) scale(1.02);
        box-shadow:
            0 30px 60px rgba(15,23,42,.18),
            0 10px 20px rgba(6,182,212,.15);
        border-color:#06b6d4;
    }

    .mode-card:hover::after{
        left:150%;
    }

    .mode-card:hover p{
        transform:translateX(8px);
        color:#475569;
    }

    .mode-card:hover h2{
        color:#0891b2;
        transform:translateX(8px);
    }

    .mode-card:hover button{
        transform:scale(1.04);
        box-shadow: 0 12px 25px rgba(6,182,212,.30);
    }

    #drop3:hover,
    #drop4:hover{
        transform:scale(1.02);
        box-shadow: 0 10px 25px rgba(0,0,0,.12);
    }

    .cards-container:hover .mode-card{
        opacity:.65;
    }

    .cards-container:hover .mode-card:hover{
        opacity:1;
    }
}

/* ===========================
   CARD CLICK EFFECT
=========================== */

.clickable-card{
    user-select:none;
}

.clickable-card.selected{
    transform: translateY(-8px) scale(.98);
    border-color:#06b6d4 !important;
    box-shadow:
        0 0 0 4px rgba(6,182,212,.25),
        0 25px 50px rgba(6,182,212,.30);
}

.mode-card.selected::after{
    content:"✓ Selected";
    position:absolute;
    top:18px;
    right:18px;
    background:#06b6d4;
    color:white;
    padding:6px 14px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:700;
    animation:pop .35s ease;
}

@keyframes pop{
    0%{ transform:scale(.4); opacity:0; }
    100%{ transform:scale(1); opacity:1; }
}

.mode-card.selected button{
    background:#0891b2;
    transform:scale(1.05);
    box-shadow: 0 12px 30px rgba(6,182,212,.35);
}

/* ===========================
   CARD ENTRANCE (staggered reveal, see menu.html)
=========================== */

.reveal{
    opacity:0;
    transform: translateY(16px);
    transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1);
}

.reveal.is-visible{
    opacity:1;
    transform:none;
}

@media (prefers-reduced-motion: reduce){
    .mode-card,
    .mode-card::after,
    .mode-card p,
    .mode-card h2,
    .mode-card button,
    .mode-card select,
    .mode-card textarea,
    .clickable-card.selected,
    #drop3,
    #drop4,
    .reveal{
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
    }
    .mode-card:hover,
    .clickable-card.selected{
        transform: none;
    }
    .reveal{
        opacity:1;
        transform:none;
    }
}

/* ===========================
   EXPORT SHEET PICKER (modes 1-4)
   A picked reply becomes a numbered section of the printed sheet, so the
   chip reads "Subiectul II" rather than looking like a stray checkbox.
=========================== */

.sheet-pick {
    border: 1px solid transparent;
}

.sheet-pick--on {
    background-color: #ecfeff;
    border-color: #a5f3fc;
}

.sheet-pick--on .sheet-pick-text {
    color: #0e7490;
}

/* ===========================
   COMPOSER WITH INLINE ATTACH (mode3, mode4)

   Bootstrap ships its spacing utilities with !important
   (`.p-4 { padding: 1.5rem !important }`), so it beats Tailwind's `pr-16`
   on the composer textarea. Without this override the right padding collapses
   back to 1.5rem and typed text runs underneath the attach button sitting in
   that corner. The descendant selector outranks Bootstrap's single class, so
   the gutter the button needs is reserved for real.
=========================== */

.composer-has-attach textarea {
    padding-right: 4rem !important;
}

/* =========================================================
   Printing a generated worksheet (Elevii mei -> Exercitii).
   The app shell is dark; a printed worksheet must be
   black-on-white and contain only the worksheet. Everything
   that should not reach paper carries .no-print.
   ========================================================= */
@media print {
    nav,
    footer,
    header,
    .no-print,
    .mobile-nav-toggle,
    .mobile-nav-links {
        display: none !important;
    }

    html,
    body {
        background: #fff !important;
        color: #000 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    main {
        overflow: visible !important;
    }

    /* The worksheet sits in a 3-column grid next to the generator form.
       With the form gone, let it use the whole sheet. */
    .print-worksheet-wrap {
        display: block !important;
        grid-column: auto !important;
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #worksheet-card {
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        background: #fff !important;
        color: #000 !important;
    }

    #worksheet-content,
    #worksheet-content * {
        color: #000 !important;
        background: transparent !important;
        border-color: #999 !important;
    }

    #worksheet-content {
        font-size: 12pt;
        line-height: 1.7;
    }

    @page {
        margin: 1.6cm;
    }
}

/* Editor: skeleton placeholder for a pending AI answer. */
.ed-skeleton {
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #f8fafc;
    padding: 0.875rem 1rem;
    margin: 0.5rem 0;
}

.ed-skeleton-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

/* The /menu mode cards answer the pointer before they are picked. The
   `:not(.selected)` guard keeps the chosen-card lift below from being
   fought over by a hover. */
.mode-card {
    transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .mode-card:not(.selected):hover {
        transform: translateY(-5px);
        border-color: rgba(34, 211, 238, 0.6) !important;
        box-shadow: 0 26px 48px -28px rgba(8, 145, 178, 0.5);
    }
}

.mode-card:not(.selected):focus-within {
    border-color: rgba(34, 211, 238, 0.6) !important;
}

@media (prefers-reduced-motion: reduce) {
    .mode-card {
        transform: none !important;
        transition: border-color 200ms ease, box-shadow 200ms ease;
    }
}