:root{
    --bg:#fff7fb;

    --surface:rgba(255,255,255,.94);
    --solid:#ffffff;

    --text:#503843;
    --muted:#947684;

    /* MAIN COLOR — PASTEL PINK */
    --primary:#ef8fba;
    --primary-dark:#d96a9e;
    --primary-light:#f8c9dd;
    --secondary:#fde7f0;

    /* ACCENT COLOR — PASTEL YELLOW */
    --accent:#f6d77a;
    --accent-dark:#d6ad3d;
    --accent-light:#fff2bd;

    --border:rgba(217,106,158,.20);

    --shadow:
        0 18px 48px
        rgba(203,92,143,.14);

    --good:#66a97c;
    --bad:#df6679;
    --warn:#c69a32;

    --easy:#f6b6cf;
    --medium:#ef8fba;
    --hard:#d96a9e;
    --custom:#e8c36b;
}


/* =========================
   GENERAL RESET
========================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body{
    margin:0;
    min-height:100vh;

    color:var(--text);

    background:
        radial-gradient(
            circle at top left,
            rgba(248,201,221,.42),
            transparent 31%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255,242,189,.42),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #fff8fb,
            #fff4f8
        );

    overflow-x:hidden;
}

/* =========================
   DARK MATCHA MODE
========================= */

body.dark{
    --bg:#26171f;

    --surface:rgba(61,38,49,.95);
    --solid:#3b2530;

    --text:#fff5f9;
    --muted:#dcbcca;

    --primary:#f39ac1;
    --primary-dark:#dd74a7;
    --primary-light:#f7bdd5;
    --secondary:#5d384a;

    --accent:#f1d173;
    --accent-dark:#d6ad3d;
    --accent-light:#6a5826;

    --border:rgba(243,154,193,.22);

    --shadow:
        0 18px 48px
        rgba(0,0,0,.40);

    --good:#73c18e;
    --bad:#f18a9c;
    --warn:#ebc967;

    background:
        radial-gradient(
            circle at top left,
            rgba(243,154,193,.18),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(241,209,115,.10),
            transparent 28%
        ),
        var(--bg);
}

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

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

.floating-leaf {
    position: absolute;
    opacity: 0.16;
    font-size: 2.3rem;

    animation:
        leafFloat 9s ease-in-out infinite,
        leafRotate 14s linear infinite;
}

.leaf-one {
    top: 12%;
    left: 4%;
}

.leaf-two {
    top: 25%;
    right: 5%;
    animation-delay: 2s;
}

.leaf-three {
    bottom: 17%;
    left: 8%;
    animation-delay: 4s;
}

.leaf-four {
    bottom: 8%;
    right: 10%;
    animation-delay: 6s;
}

@keyframes leafFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-22px);
    }
}

@keyframes leafRotate {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}


/* =========================
   DEFAULT ELEMENTS
========================= */

button,
input,
select,
textarea {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin: 0 0 6px;

    font-size: clamp(
        2.2rem,
        5vw,
        3.7rem
    );

    letter-spacing: -0.045em;
    line-height: 1.05;
}

h2 {
    letter-spacing: -0.025em;
}

.subtitle {
    margin: 0;
    color: var(--muted);
}

.eyebrow {
    margin-bottom: 7px;

    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.13em;
}

.section-description {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}


/* =========================
   MAIN APP CONTAINER
========================= */

.app-shell {
    width: min(
        1180px,
        calc(100% - 24px)
    );

    margin: auto;
    padding: 25px 0 45px;
}


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

.topbar,
.quiz-head,
.collection-head,
.modal-head,
.quiz-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.topbar {
    margin-bottom: 18px;
}

/* =========================
   STUDY HUB BRAND
========================= */

.brand-section{

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

    width:100%;

    margin:0 auto 35px;

    text-align:center;

}

.brand-icon{

    width:85px;
    height:85px;

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

    margin:0 auto 18px;

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            #fff8fb,
            #ffe7f1
        );

    border:1px solid rgba(239,143,186,.25);

    box-shadow:
        0 12px 30px
        rgba(239,143,186,.18);

    animation:bearFloat 4s ease-in-out infinite;
}

.brand-icon img{

    width:100%;
    height:100%;

    object-fit:contain;

    animation:bearFloat 4s ease-in-out infinite;

    filter:
        drop-shadow(
            0 10px 18px
            rgba(239,143,186,.28)
        );

}

.brand-label{

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

    padding:9px 22px;

    border-radius:999px;

    background:#fde7f1;

    color:#ef8fba;

    font-size:.72rem;

    font-weight:800;

    letter-spacing:3px;

    margin-bottom:16px;

}

.brand-title{

    margin:0;

    font-family:Georgia,serif;

    font-size:clamp(3.4rem,7vw,4.8rem);

    line-height:1;

    font-weight:700;

    color:#4d3944;

}

.brand-title span{

    color:#ef8fba;

}

.brand-subtitle{

    margin-top:12px;

    font-size:1.1rem;

    color:#8b6e7d;

}


/* Floating Animation */

@keyframes bearFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}


/* =========================
   CARDS AND PANELS
========================= */

.stat-card,
.panel {
    border: 1px solid var(--border);

    background: var(--surface);

    box-shadow: var(--shadow);

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

.panel {
    border-radius: 23px;
}


/* =========================
   STATISTICS
========================= */

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

    margin-bottom: 12px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 19px;

    border-radius: 19px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
}

.stat-card span {
    color: var(--muted);
}

.stat-card strong {
    display: block;

    margin-top: 6px;

    color: var(--primary-dark);
    font-size: 1.9rem;
}

body.dark .stat-card strong {
    color: var(--primary);
}

.stat-icon{
    display:grid;
    place-items:center;

    min-width:46px;
    width:46px;
    height:46px;

    border:1px solid rgba(217,106,158,.16);
    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(248,201,221,.70),
            rgba(255,242,189,.55)
        );

    box-shadow:
        0 8px 18px
        rgba(217,106,158,.10);

    font-size:1.4rem;
}


/* =========================
   QUIZ MODE PANEL
========================= */

.mode-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 12px;
    padding: 18px;
}

.mode-panel h2 {
    margin: 0;
}

.mode-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.mode-btn,
.primary-btn,
.secondary-btn,
.icon-btn,
.text-btn,
.hint-btn {
    border: 0;
    border-radius: 13px;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.mode-btn {
    min-width: 112px;
    padding: 11px 15px;

    border: 1px solid var(--border);

    background: var(--solid);
    color: var(--text);

    font-weight: 850;
}

.mode-btn:hover{
    transform:translateY(-4px);

    box-shadow:
        0 14px 30px
        rgba(217,106,158,.22);
}

.mode-btn small {
    display: block;

    margin-top: 3px;

    color: var(--muted);
    font-size: 0.68rem;
}

.mode-icon {
    display: block;
    margin-bottom: 4px;

    font-size: 1.1rem;
}


.mode-btn.active small {
    color:#dbeafe;
}

.mode-btn.active,
.mode-btn[data-mode="easy"].active,
.mode-btn[data-mode="medium"].active,
.mode-btn[data-mode="hard"].active,
.mode-btn[data-mode="custom"].active{
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark) 65%,
            var(--accent)
        );

    border-color:var(--primary);

    color:#ffffff;

    box-shadow:
        0 12px 30px
        rgba(217,106,158,.28);

    transform:translateY(-2px);
}

.mode-btn.active small{
    color:#fff7fb;
}


/* =========================
   BUTTONS
========================= */

.primary-btn {
    padding: 12px 17px;

    color: white;
    font-weight: 850;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    box-shadow:
        0 8px 20px
        rgba(217,106,158,.22);
}

.primary-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
}

.primary-btn:active,
.secondary-btn:active,
.mode-btn:active,
.icon-btn:active {
    transform: scale(0.97);
}

.secondary-btn {
    padding: 12px 17px;

    border: 1px solid var(--border);

    background: transparent;
    color: var(--text);

    font-weight: 800;
}

.secondary-btn:hover {
    transform: translateY(-2px);

    border-color: var(--primary);

    background: rgba(239,143,186,.10);
}

.icon-btn {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

    border: 1px solid var(--border);

    background: var(--surface);
    color: var(--text);

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

.icon-btn:hover {
    transform: translateY(-2px) rotate(3deg);
    border-color: var(--primary);
}

.text-btn {
    padding: 7px;

    background: transparent;
    color: var(--primary);

    font-weight: 850;
}

.text-btn:hover {
    color: var(--primary-dark);
}


/* =========================
   TOOLBAR
========================= */

.toolbar {
    display: flex;
    align-items: end;
    gap: 11px;

    margin-bottom: 12px;
    padding: 15px;
}

.field {
    display: grid;
    gap: 7px;
}

.field.grow {
    flex: 1;
}

label {
    color: var(--text);
    font-size: 0.83rem;
    font-weight: 850;
}

input,
select,
textarea {
    width: 100%;
    padding: 12px 13px;

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

    outline: none;

    background: var(--solid);
    color: var(--text);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
    opacity: 0.72;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(239,143,186,.16);
}


/* =========================
   MAIN CONTENT GRID
========================= */

.main-grid {
    display: grid;
    grid-template-columns: 1.28fr 0.72fr;
    gap: 12px;
}

.quiz-panel,
.collection-panel {
    min-height: 580px;
    padding: 21px;
}


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

.pill,
.badge,
.point-badge {
    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    font-weight: 850;
}

.pill {
    padding: 8px 12px;

    background: rgba(111, 143, 91, 0.13);
    color: var(--primary);
}


/* =========================
   EMPTY STATE
========================= */

.empty {
    display: grid;
    place-content: center;

    min-height: 430px;

    text-align: center;
    color: var(--muted);
}

.empty div,
.empty-icon {
    margin-bottom: 8px;
    font-size: 4rem;

    animation: emptyFloat 4s ease-in-out infinite;
}

@keyframes emptyFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


/* =========================
   QUESTION CARD
========================= */

.question-card{
    position:relative;

    padding:36px;

    border-radius:28px;

    border:
        1px solid
        rgba(217,106,158,.20);

    background:
        radial-gradient(
            circle at top left,
            rgba(248,201,221,.35),
            transparent 42%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255,242,189,.28),
            transparent 38%
        ),
        rgba(255,255,255,.95);

    overflow:hidden;
}

body.dark .question-card{

    border:1px solid rgba(243,154,193,.25);

    background:
        radial-gradient(
            circle at top left,
            rgba(243,154,193,.18),
            transparent 42%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(241,209,115,.10),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #5c3b4b,
            #472c39
        );

}
.question-decoration {
    position: absolute;
    top: 65px;
    right: 20px;

    opacity: 0.11;

    font-size: 5rem;

    transform: rotate(18deg);
}

.question-top{
    position:relative;
    z-index:2;

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

    margin-bottom:28px;
}

.badge{
    position:static;

    display:inline-flex;
    align-items:center;

    padding:6px 12px;

    border:
        1px solid
        rgba(217,106,158,.28);

    border-radius:999px;

    background:
        rgba(248,201,221,.58);

    color:var(--primary-dark);

    font-size:.75rem;
    font-weight:800;
}

.point-badge{
    position:static;

    display:inline-flex;
    align-items:center;

    padding:6px 12px;

    border:
        1px solid
        rgba(214,173,61,.30);

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            var(--accent-light),
            rgba(246,215,122,.55)
        );

    color:#9b7317;

    font-size:.75rem;
    font-weight:800;
}

.question-card > h3{

    position:relative;
    z-index:2;

    margin:0 0 24px;

    color:#4d3944;

    font-size:clamp(1.35rem,3vw,2rem);

    font-weight:800;

    line-height:1.35;
}

body.dark .question-card > h3{
    color:#4d3944;
}

/* =========================
   HINT
========================= */

.hint-btn {
    padding: 9px 12px;

    background: rgba(167, 123, 53, 0.11);
    color: var(--warn);

    font-weight: 850;
}

.hint-btn:hover {
    transform: translateY(-2px);

    background:
        rgba(167, 123, 53, 0.17);
}

.hint {
    margin: 12px 0 0;
    padding: 12px;

    border: 1px solid
        rgba(167, 123, 53, 0.18);

    border-radius: 12px;

    background:
        rgba(167, 123, 53, 0.09);

    color: var(--text);

    animation: fadeSlide 0.25s ease;
}


/* =========================
   ANSWER AREA
========================= */

.answer-box {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 10px;

    margin-top: 22px;
}

.answer-box label {
    grid-column: 1 / -1;
}

.answer-input-row {
    display: contents;
}


/* =========================
   ANSWER FEEDBACK
========================= */

.feedback {
    margin-top: 18px;
    padding: 16px;

    border-radius: 15px;

    animation: fadeSlide 0.28s ease;
}

.feedback.correct {
    border: 1px solid
        rgba(79, 138, 76, 0.28);

    background:
        rgba(79, 138, 76, 0.12);
}

.feedback.correct h3 {
    color: var(--good);
}

.feedback.wrong {
    border: 1px solid
        rgba(199, 91, 85, 0.26);

    background:
        rgba(199, 91, 85, 0.11);
}

.feedback.wrong h3 {
    color: var(--bad);
}

.feedback h3 {
    margin-bottom: 6px;
}

.feedback p:last-child {
    margin-bottom: 0;
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================
   QUESTION COLLECTION
========================= */

.question-list {
    display: grid;
    gap: 10px;

    max-height: 500px;
    margin-top: 18px;

    overflow: auto;
    padding-right: 3px;
}

.question-list::-webkit-scrollbar {
    width: 7px;
}

.question-list::-webkit-scrollbar-thumb{

    background:
        rgba(239,143,186,.35);

}

.question-item {
    padding: 13px;

    border: 1px solid var(--border);
    border-radius: 15px;

    background: var(--solid);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.question-item:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.question-item.active{

    box-shadow:
        0 0 0 3px
        rgba(239,143,186,.14);

}

.item-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.question-item h3 {
    margin: 9px 0 5px;

    font-size: 0.98rem;
    line-height: 1.35;
}

.question-item p {
    margin-bottom: 10px;

    color: var(--muted);
    font-size: 0.86rem;
}

.item-actions {
    display: flex;
    gap: 7px;
}

.item-actions button {
    flex: 1;

    padding: 8px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: transparent;
    color: var(--text);

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.item-actions button:hover{

    background:
        rgba(239,143,186,.10);

}


/* =========================
   MODAL
========================= */

.modal {
    position: fixed;
    inset: 0;
    z-index: 20;

    display: grid;
    place-items: center;

    padding: 16px;

    background:
        rgba(20, 28, 18, 0.62);

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

.modal-card {
    width: min(680px, 100%);
    max-height: 92vh;
    overflow: auto;

    padding: 21px;

    border: 1px solid var(--border);
    border-radius: 23px;

    background: var(--solid);
    color: var(--text);

    box-shadow: var(--shadow);

    animation: modalOpen 0.28s ease;
}

@keyframes modalOpen {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#questionForm {
    display: grid;
    gap: 14px;

    margin-top: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}


/* =========================
   TOAST NOTIFICATION
========================= */

.toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 30;

    transform: translateX(-50%);

    padding: 11px 15px;

    border: 1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 11px;

    background: #304128;
    color: white;

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

    animation: toastOpen 0.25s ease;
}

@keyframes toastOpen {
    from {
        opacity: 0;
        transform:
            translateX(-50%)
            translateY(12px);
    }

    to {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(0);
    }
}


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

.app-footer {
    padding-top: 22px;

    text-align: center;
    color: var(--muted);
}

.app-footer p {
    margin: 0;
    font-size: 0.88rem;
}


/* =========================
   UTILITIES
========================= */

.hidden {
    display: none !important;
}


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

@media (max-width: 900px) {

    .main-grid {
        grid-template-columns: 1fr;
    }

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

    .mode-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .mode-buttons {
        width: 100%;
    }

    .mode-btn {
        flex: 1;
    }

    .collection-panel {
        min-height: auto;
    }

}


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

@media (max-width: 650px) {

    .app-shell {
        width: min(
            100% - 18px,
            1180px
        );

        padding-top: 16px;
    }

    .topbar {
        align-items: flex-start;
    }

    .brand-section {
        align-items: flex-start;
    }

    .brand-icon {
        display: none;
    }

    h1 {
        font-size: 2.25rem;
    }

    .stats-grid {
        gap: 8px;
    }

    .stat-card {
        align-items: flex-start;

        padding: 15px;
    }

    .stat-icon {
        min-width: 38px;
        width: 38px;
        height: 38px;

        font-size: 1.1rem;
    }

    .stat-card strong {
        font-size: 1.55rem;
    }

    .toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .field,
    .field.grow {
        grid-column: 1 / -1;
    }

    .answer-box {
        grid-template-columns: 1fr;
    }

    .answer-input-row {
        display: grid;
        gap: 10px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .quiz-nav {
        flex-direction: column;
    }

    .quiz-nav button {
        width: 100%;
    }

    .quiz-panel,
    .collection-panel {
        min-height: auto;
        padding: 16px;
    }

    .question-card {
        padding: 20px;
    }

    .question-decoration{
        position:absolute;
        right:20px;
        bottom:18px;

        opacity:.07;

        font-size:4rem;

        transform:rotate(12deg);

        pointer-events:none;
    }

    .mode-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;

        width: 100%;
    }

    .mode-btn {
        width: 100%;
        min-width: 0;
    }

}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 420px) {

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stat-card {
        display: block;
    }

    .stat-icon {
        margin-bottom: 8px;
    }

    .mode-buttons {
        grid-template-columns: 1fr;
    }

    .question-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .point-badge {
        align-self: flex-start;
    }

    .modal-actions {
        flex-direction: column-reverse;
    }

    .modal-actions button {
        width: 100%;
    }

}

/* =========================
   PHONE IMPROVEMENTS
========================= */

@media (max-width: 650px) {

    body {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .app-shell {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .topbar {
        gap: 10px;
    }

    .top-actions {
        flex-shrink: 0;
    }

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

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

    .stat-card span {
        font-size: 0.8rem;
    }

    .stat-card strong {
        word-break: break-word;
    }

    .mode-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .toolbar {
        grid-template-columns: 1fr;
    }

    .toolbar .field,
    .toolbar .field.grow {
        grid-column: 1;
    }

    .toolbar > button {
        width: 100%;
    }

    .question-card {
        margin-top: 18px;
    }

    .question-card > h3 {
        font-size: 1.35rem;
    }

    .answer-input-row {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .answer-input-row input,
    .answer-input-row button {
        width: 100%;
    }

    input,
    select,
    textarea,
    button {
        min-height: 44px;
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

    .question-list {
        max-height: none;
    }

    .item-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .modal {
        align-items: end;
        padding: 8px;
    }

    .modal-card {
        width: 100%;
        max-height: 92dvh;
        border-radius: 22px 22px 0 0;
        padding-bottom: calc(
            20px + env(safe-area-inset-bottom)
        );
    }
}

@media (max-width: 420px) {

    .mode-buttons {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .brand-section {
        width: 100%;
    }

    .topbar {
        flex-wrap: wrap;
    }

    .top-actions {
        margin-left: auto;
    }
}

.calendar-grid{

display:grid;

grid-template-columns:repeat(7,1fr);

gap:10px;

margin-top:20px;

}

.calendar-day-name{

text-align:center;

font-weight:bold;

padding:10px;

color:var(--primary);

}

.calendar-day{

background:var(--solid);

border-radius:15px;

padding:15px;

min-height:90px;

cursor:pointer;

transition:.2s;

border:1px solid var(--border);

}

.calendar-day:hover{

    background:
        linear-gradient(
            135deg,
            rgba(248,201,221,.30),
            rgba(255,242,189,.28)
        );

}

.calendar-empty{

min-height:90px;

}
/* =========================
   CALENDAR
========================= */

.calendar-container {
    padding: 20px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.calendar-header h2 {
    margin: 0;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.calendar-day-name {
    text-align: center;
    font-weight: 700;
    color: var(--primary);
    padding: 10px;
}

.calendar-day {
    position: relative;
    background: var(--solid);
    border: 1px solid var(--border);
    border-radius: 16px;
    min-height: 100px;
    padding: 10px;
    cursor: pointer;
    transition: .2s;
}

.calendar-day:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: var(--shadow);
}

.calendar-day span {
    font-weight: bold;
}

.calendar-empty {
    min-height: 100px;
}

.calendar-event {
    margin-top: 6px;
    padding: 4px 6px;
    border-radius: 8px;
    font-size: .75rem;
    background: var(--primary);
    color: white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.today-event{

display:flex;

gap:12px;

padding:12px;

margin-top:10px;

border-radius:12px;

 background: rgba(239,143,186,.12);

border-left:5px solid var(--primary);

align-items:center;

}

.today-event strong{

min-width:60px;

color:var(--primary);

}
/* =========================
   NOTIFICATIONS
========================= */

.notification-btn{

position:relative;

}

.notification-badge{

position:absolute;

top:-4px;

right:-4px;

width:20px;

height:20px;

border-radius:50%;

background:#ef4444;

color:white;

font-size:.7rem;

font-weight:bold;

display:flex;

align-items:center;

justify-content:center;

}

.notification-panel{

position:fixed;

top:90px;

right:20px;

width:340px;

max-height:450px;

overflow:auto;

padding:18px;

background:var(--solid);

border-radius:18px;

border:1px solid var(--border);

box-shadow:var(--shadow);

z-index:999;

}

.notification-header{

margin-bottom:15px;

}

.notification-list{

display:grid;

gap:10px;

}

.notification-item{

padding:12px;

border-radius:12px;

 background: rgba(239,143,186,.12);

border-left:5px solid var(--primary);

}

.notification-item h4{

margin:0 0 5px;

}

.notification-item p{

margin:0;

font-size:.85rem;

color:var(--muted);

}   
/* =========================
   PAGES
========================= */

.page{
    display:block;
}

.page.hidden{
    display:none;
}

/* =========================
   DASHBOARD
========================= */

.dashboard-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:20px;

    margin-top:20px;

}

.dashboard-card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:20px;

    padding:22px;

    box-shadow:var(--shadow);

}

.dashboard-card h1{

    margin:10px 0;

    color:var(--primary);

}

.dashboard-card h2{

    margin-bottom:10px;

}

/* =========================
   PAGE TABS
========================= */

/* =========================
   PAGE NAVIGATION
========================= */

.page-tabs{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:12px;

    width:max-content;
    max-width:100%;

    margin:22px auto 28px;
    padding:10px;

    border:1px solid rgba(239,143,186,.16);
    border-radius:22px;

    background:rgba(255,255,255,.46);

    box-shadow:
        0 14px 35px
        rgba(217,106,158,.10);

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

.page-tab{
    position:relative;

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

    gap:8px;

    min-height:46px;
    padding:11px 18px;

    border:1px solid transparent;
    border-radius:14px;

    background:var(--surface);
    color:var(--text);

    box-shadow:
        0 6px 16px
        rgba(203,92,143,.08);

    font-weight:750;

    cursor:pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.page-tab:hover{
    transform:translateY(-3px);

    border-color:var(--border);

    box-shadow:
        0 12px 24px
        rgba(203,92,143,.15);
}

.page-tab:active{
    transform:scale(.97);
}

.page-tab.active{
    background:var(--primary);
    color:#ffffff;

    border-color:var(--primary);

    box-shadow:
        0 12px 25px
        rgba(217,106,158,.28);

    transform:translateY(-2px);
}

.page-tab.active::after{
    content:"";

    position:absolute;

    left:18px;
    right:18px;
    bottom:5px;

    height:2px;

    border-radius:999px;

    background:rgba(255,255,255,.75);
}

body.dark .page-tabs{
    background:rgba(61,38,49,.62);

    border-color:
        rgba(243,154,193,.16);
}

body.dark .page-tab{
    background:var(--surface);
}

body.dark .page-tab.active{
    background:var(--primary);
    color:#ffffff;

    border-color:var(--primary);

    box-shadow:
        0 12px 25px
        rgba(243,154,193,.25);
}

@media(max-width:650px){

    .page-tabs{
        display:grid;
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        width:100%;
        gap:9px;
        padding:9px;
    }

    .page-tab{
        width:100%;
        padding:11px 10px;
    }

}

@media(max-width:380px){

    .page-tabs{
        grid-template-columns:1fr;
    }

}
/* =========================
   CALENDAR
========================= */

.calendar-container{

    background:var(--surface);

    border-radius:20px;

    padding:20px;

    box-shadow:var(--shadow);

}

.calendar{

    margin-top:20px;

}

.calendar-grid{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:8px;

}

.calendar-day-name{

    text-align:center;

    font-weight:bold;

    color:var(--primary);

}

.calendar-day{

    min-height:90px;

    border-radius:12px;

    border:1px solid var(--border);

    padding:8px;

    cursor:pointer;

    background:var(--solid);

}

.calendar-day:hover{
    transform:translateY(-4px);

    background:
        linear-gradient(
            135deg,
            rgba(248,201,221,.32),
            rgba(255,242,189,.30)
        );
}
/* =========================
   PROGRESS PAGE
========================= */

.progress-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:20px;
}

.danger-btn{
    border:1px solid rgba(220,38,38,.25);
    border-radius:13px;
    padding:11px 16px;
    background:rgba(220,38,38,.1);
    color:#dc2626;
    font-weight:850;
    cursor:pointer;
}

/* =========================
   STUDY TIMER
========================= */

.timer-container{
    width:min(700px,100%);
    margin:0 auto;
}

.timer-header{
    text-align:center;
    margin-bottom:20px;
}

.timer-card{
    padding:32px;
    border:1px solid var(--border);
    border-radius:26px;
    background:var(--surface);
    box-shadow:var(--shadow);
    text-align:center;
}

.timer-mode{
    color:var(--primary);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.timer-display{
    margin:25px 0;
    font-size:clamp(4rem,14vw,8rem);
    line-height:1;
    font-weight:900;
    color:var(--text);
    font-variant-numeric:tabular-nums;
}

.timer-presets{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-bottom:24px;
}

.timer-preset{
    padding:11px;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--solid);
    color:var(--text);
    font-weight:800;
    cursor:pointer;
}

.timer-preset.active{
    background:var(--primary);
    color:#fff;
}

.timer-actions{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

@media(max-width:650px){

    .progress-header{
        align-items:stretch;
        flex-direction:column;
    }

    .danger-btn{
        width:100%;
    }

    .timer-card{
        padding:22px 16px;
    }

    .timer-presets{
        grid-template-columns:1fr 1fr;
    }

    .timer-actions button{
        flex:1;
        min-width:100px;
    }

}
/* =========================
   CALENDAR EVENT DELETE
========================= */

.calendar-event{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    margin-top:6px;
    padding:6px 7px;
    border-radius:9px;
    background:rgba(239,143,186,.16);
    color:var(--text);
    font-size:.75rem;
}

.calendar-event-info{
    min-width:0;
    display:grid;
    gap:2px;
}

.calendar-event-info strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.calendar-event-info small{
    color:var(--muted);
    font-size:.68rem;
}

.calendar-delete-btn{
    flex:0 0 auto;
    width:24px;
    height:24px;
    border:0;
    border-radius:50%;
    background:rgba(220,38,38,.12);
    color:#dc2626;
    cursor:pointer;
    font-weight:900;
}

.calendar-delete-btn:hover{
    background:#dc2626;
    color:white;
}
.calendar-event-actions{
    display:flex;
    align-items:center;
    gap:4px;
    flex-shrink:0;
}

.calendar-edit-btn,
.calendar-delete-btn{
    width:24px;
    height:24px;
    border:0;
    border-radius:50%;
    cursor:pointer;
    font-weight:900;
    display:grid;
    place-items:center;
}

.calendar-edit-btn{
    background:rgba(239,143,186,.14);
    color:var(--primary-dark);
}

.calendar-edit-btn:hover{
    background:var(--primary);
    color:#ffffff;

    box-shadow:
        0 6px 14px
        rgba(217,106,158,.22);
}

.calendar-delete-btn{
    background:rgba(220,38,38,.12);
    color:#dc2626;
}

.calendar-delete-btn:hover{
    background:#dc2626;
    color:white;
}
/* =========================
   NOTES PAGE
========================= */

.notes-container{
    width:100%;
}

.notes-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}

.notes-toolbar{
    margin-bottom:20px;
}

.notes-toolbar input{
    width:100%;
    padding:13px 15px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
    color:var(--text);
    outline:none;
}

.notes-toolbar input:focus{
    border-color:var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(239,143,186,.16);
}

.notes-grid{
    display:grid;
    grid-template-columns:repeat(
        auto-fit,
        minmax(260px,1fr)
    );
    gap:16px;
}

.note-card{
    display:flex;
    flex-direction:column;
    min-height:230px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:20px;
    background:var(--surface);
    box-shadow:var(--shadow);
}

.note-card.pinned-note{
    border-color:rgba(217,106,158,.55);

    background:
        linear-gradient(
            145deg,
            rgba(248,201,221,.16),
            rgba(255,242,189,.10)
        ),
        var(--surface);

    box-shadow:
        0 12px 30px
        rgba(217,106,158,.14);
}

.note-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}

.note-card-head h3{
    margin:0 0 5px;
    overflow-wrap:anywhere;
}

.note-card-head small{
    color:var(--muted);
}

.note-preview{
    flex:1;
    margin:18px 0;
    color:var(--text);
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    line-height:1.55;
}

.note-card-actions{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:auto;
}

.note-card-actions button{
    flex:1;
}

.note-pin-btn{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    flex-shrink:0;
    border:1px solid var(--border);
    border-radius:50%;
    background:transparent;
    cursor:pointer;
    opacity:.55;
}

.note-pin-btn.active{
    background:
        linear-gradient(
            135deg,
            rgba(248,201,221,.70),
            rgba(255,242,189,.52)
        );

    border-color:var(--primary);
    color:var(--primary-dark);
    opacity:1;

    box-shadow:
        0 6px 14px
        rgba(217,106,158,.14);
}

.note-delete-btn{
    padding:10px 13px;
    border:1px solid rgba(220,38,38,.25);
    border-radius:12px;
    background:rgba(220,38,38,.10);
    color:#dc2626;
    font-weight:800;
    cursor:pointer;
    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.note-delete-btn:hover{
    background:#dc2626;
    border-color:#dc2626;
    color:#ffffff;
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(220,38,38,.25);
}

.note-delete-btn:active{
    transform:scale(.96);
}

.note-delete-btn:focus-visible{
    outline:none;
    box-shadow:
        0 0 0 3px rgba(220,38,38,.18);
}

.notes-empty{
    grid-column:1 / -1;
    padding:60px 20px;
    border:1px dashed var(--border);
    border-radius:20px;
    text-align:center;
    color:var(--muted);
}

.notes-empty-icon{
    margin-bottom:12px;
    font-size:3rem;
}

.note-modal-card{
    width:min(600px,100%);
}

.note-pin-option{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    margin-top:14px;
    border:1px solid var(--border);
    border-radius:13px;
    cursor:pointer;
}

.note-pin-option input{
    width:18px;
    height:18px;
}

@media(max-width:650px){

    .notes-header{
        align-items:stretch;
        flex-direction:column;
    }

    .notes-header .primary-btn{
        width:100%;
    }

    .notes-grid{
        grid-template-columns:1fr;
    }

    .note-card-actions{
        flex-direction:column;
    }

    .note-card-actions button{
        width:100%;
    }

}
.question-image-preview-box,
.quiz-question-image-box{
    display:grid;
    gap:12px;
    margin-top:12px;
}

.question-image-preview-box img,
.quiz-question-image-box img{
    display:block;
    width:100%;
    max-height:360px;
    object-fit:contain;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--solid);
}

.question-image-preview-box{
    padding:12px;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--surface);
}

.quiz-question-image-box{
    margin:18px 0;
}

.quiz-question-image-box img{
    max-width:520px;
    margin:auto;
}
.custom-timer-box{
    display:grid;
    gap:8px;
    margin:0 auto 24px;
    max-width:440px;
    text-align:left;
}

.custom-timer-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
}

@media(max-width:650px){

    .custom-timer-row{
        grid-template-columns:1fr;
    }

    .custom-timer-row button{
        width:100%;
    }

}
/* =========================
   CUTE TEDDY BACKGROUND
========================= */

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

.floating-cute{
    position:absolute;
    opacity:.14;
    font-size:2.5rem;

    animation:
        cuteFloat 9s ease-in-out infinite,
        cuteRotate 14s linear infinite;
}

.cute-one{
    top:12%;
    left:4%;
}

.cute-two{
    top:25%;
    right:5%;
    animation-delay:2s;
}

.cute-three{
    bottom:17%;
    left:8%;
    animation-delay:4s;
}

.cute-four{
    right:10%;
    bottom:8%;
    animation-delay:6s;
}

@keyframes cuteFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-22px);
    }

}

@keyframes cuteRotate{

    from{
        rotate:0deg;
    }

    to{
        rotate:360deg;
    }

}

.brand-icon{
    display:grid;
    place-items:center;

    width:58px;
    height:58px;

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

    background:
        linear-gradient(
            145deg,
            rgba(245,182,208,.45),
            rgba(255,240,247,.92)
        );

    box-shadow:var(--shadow);

    font-size:1.9rem;

    animation:cupFloat 4s ease-in-out infinite;
}
/* =========================
   SPOTIFY PLAYLIST LIBRARY
========================= */

.spotify-room{
    width:min(1050px,100%);
    margin:0 auto;
}

.spotify-room-header{
    margin-bottom:20px;
}

.spotify-room-title{
    display:flex;
    align-items:center;
    gap:16px;
}

.spotify-room-icon{
    display:grid;
    place-items:center;

    width:64px;
    height:64px;

    flex-shrink:0;

    border:1px solid var(--border);
    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(245,182,208,.48),
            rgba(255,240,247,.92)
        );

    box-shadow:var(--shadow);

    font-size:2rem;
}

.spotify-add-card{
    display:grid;
    gap:18px;

    margin-bottom:20px;
    padding:22px;

    border:1px solid var(--border);
    border-radius:24px;

    background:var(--surface);
    box-shadow:var(--shadow);
}

.spotify-add-card h3{
    margin:0;
}

.spotify-add-form{
    display:grid;
    grid-template-columns:
        minmax(180px,.75fr)
        minmax(280px,1.5fr)
        auto;

    align-items:end;
    gap:12px;
}

.spotify-library-layout{
    display:grid;
    grid-template-columns:
        minmax(250px,.68fr)
        minmax(0,1.32fr);

    align-items:start;
    gap:18px;
}

.spotify-library-panel,
.spotify-selected-panel{
    border:1px solid var(--border);
    border-radius:24px;

    background:var(--surface);
    box-shadow:var(--shadow);
}

.spotify-library-panel{
    padding:16px;
}

.spotify-selected-panel{
    min-width:0;
    padding:14px;
}

.spotify-library-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    margin-bottom:14px;
}

.spotify-library-heading h3{
    margin:0;
}

.spotify-playlist-list{
    display:grid;
    gap:9px;

    max-height:590px;

    overflow-y:auto;
}

.spotify-playlist-item{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:6px;

    padding:7px;

    border:1px solid var(--border);
    border-radius:16px;

    background:var(--solid);
}

.spotify-playlist-item.active{
    border-color:#1db954;

    background:
        linear-gradient(
            135deg,
            rgba(29,185,84,.12),
            rgba(232,121,168,.08)
        );
}

.spotify-select-playlist{
    display:flex;
    align-items:center;
    gap:11px;

    min-width:0;
    padding:8px;

    border:0;

    background:transparent;
    color:var(--text);

    text-align:left;
    cursor:pointer;
}

.spotify-playlist-item-icon{
    display:grid;
    place-items:center;

    width:42px;
    height:42px;

    flex-shrink:0;

    border-radius:13px;

    background:var(--secondary);

    font-size:1.25rem;
}

.spotify-playlist-item-text{
    display:grid;
    min-width:0;
    gap:3px;
}

.spotify-playlist-item-text strong,
.spotify-playlist-item-text small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.spotify-playlist-item-text small{
    color:var(--muted);
}

.spotify-delete-playlist{

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

    width:40px;
    height:40px;

    flex-shrink:0;

    border:none;
    border-radius:12px;

    background:#ffe8ec;

    color:#e11d48;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        transform .2s ease;

}

.spotify-delete-playlist:hover{

    background:#e11d48;
    color:white;

    transform:scale(1.08);

}

body.dark .spotify-delete-playlist{

    background:rgba(225,29,72,.18);

    color:#fb7185;

}

body.dark .spotify-delete-playlist:hover{

    background:#e11d48;

    color:white;

}

.spotify-delete-playlist:hover{
    background:#dc2626;
    color:#fff;
}

.spotify-player-area{
    display:grid;
    gap:12px;
}

.spotify-now-playing{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    padding:8px 8px 2px;
}

.spotify-now-playing h3{
    margin:0;
}

.spotify-player-card{
    padding:8px;

    border:1px solid var(--border);
    border-radius:20px;

    background:var(--solid);
}

.spotify-embed{
    display:block;
    width:100%;

    border:0;
    border-radius:15px;
}

.spotify-empty-state,
.spotify-library-empty{
    text-align:center;
    color:var(--muted);
}

.spotify-empty-state{
    display:grid;
    place-content:center;

    min-height:500px;
    padding:30px;
}

.spotify-library-empty{
    padding:35px 12px;
}

@media(max-width:850px){

    .spotify-add-form{
        grid-template-columns:1fr 1fr;
    }

    .spotify-add-form .primary-btn{
        grid-column:1 / -1;
        width:100%;
    }

    .spotify-library-layout{
        grid-template-columns:1fr;
    }

}

@media(max-width:650px){

    .spotify-add-form{
        grid-template-columns:1fr;
    }

    .spotify-add-form .primary-btn{
        grid-column:auto;
    }

    .spotify-embed{
        height:460px;
    }

}
/* =========================
   PIN LOGIN — FINAL FIX
========================= */

body.pin-screen-open{
    overflow:hidden;
}

.pin-login-screen{
    position:fixed;
    inset:0;
    z-index:5000;

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

    width:100%;
    min-height:100vh;
    min-height:100dvh;

    padding:20px;

    overflow-y:auto;

    background:
        radial-gradient(
            circle at top left,
            rgba(239,143,186,.32),
            transparent 36%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(246,215,122,.34),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #fff7fb,
            #fff3f7
        );
}

body.dark .pin-login-screen{
    background:
        radial-gradient(
            circle at top left,
            rgba(232,121,168,.18),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(96,165,250,.12),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #24151d,
            #321e29
        );
}

.pin-login-screen.unlocking{
    opacity:0;
    transform:scale(1.04);
    pointer-events:none;

    transition:
        opacity .5s ease,
        transform .5s ease;
}


/* LOGIN CARD */

.pin-login-card{
    position:relative;
    z-index:2;

    width:min(430px,100%);
    margin:auto;
    padding:28px 28px 26px;

    border:1px solid rgba(232,121,168,.25);
    border-radius:30px;

    background:rgba(255,255,255,.94);

    box-shadow:
        0 28px 70px
        rgba(180,78,125,.22);

    color:var(--text);
    text-align:center;

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

body.dark .pin-login-card{
    background:rgba(56,35,46,.96);

    border-color:
        rgba(243,154,189,.25);

    box-shadow:
        0 28px 70px
        rgba(0,0,0,.45);
}


/* BEAR GIF */

.pin-login-logo{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:auto;

    margin:0 auto 14px;

    border:0;
    border-radius:0;

    background:transparent;
    box-shadow:none;

    animation:none;
}

.pin-login-logo img{
    display:block;

    width:170px;
    height:auto;
    max-width:100%;

    border-radius:20px;

    object-fit:contain;

    user-select:none;
    pointer-events:none;

    filter:
        drop-shadow(
            0 10px 18px
            rgba(232,121,168,.20)
        );
}


/* TEXT */

.pin-login-card .eyebrow{
    margin-bottom:7px;
}

.pin-login-title{
    margin:0 0 10px;

    font-size:clamp(
        1.9rem,
        7vw,
        2.65rem
    );

    line-height:1.1;
}

.pin-login-subtitle{
    max-width:340px;
    margin:0 auto 22px;

    color:var(--muted);

    line-height:1.55;
}


/* HIDDEN PIN INPUT */

.pin-hidden-input{
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    padding:0 !important;
    margin:0 !important;

    opacity:0;
    pointer-events:none;
}


/* PIN DOTS */

.pin-dots{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:12px;

    min-height:32px;
    margin:0 0 12px;
}

.pin-dot{
    display:block;

    width:15px;
    height:15px;

    border:2px solid rgba(232,121,168,.50);
    border-radius:50%;

    background:transparent;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.pin-dot.filled{
    border-color:#e879a8;

    background:
        linear-gradient(
            135deg,
            #f39abd,
            #c9578a
        );

    transform:scale(1.08);

    box-shadow:
        0 0 0 5px
        rgba(232,121,168,.10);
}

.pin-login-message{
    min-height:20px;
    margin:0 0 8px;

    color:var(--primary);
    font-size:.84rem;
    font-weight:800;
}


/* KEYPAD */

.pin-keypad{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px;

    width:100%;
    margin:8px 0 17px;
}

.pin-key{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    min-width:0;
    min-height:55px;

    padding:8px;

    border:1px solid var(--border);
    border-radius:16px;

    background:var(--solid);
    color:var(--text);

    box-shadow:
        0 7px 17px
        rgba(180,78,125,.09);

    font-size:1.18rem;
    font-weight:850;

    cursor:pointer;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.pin-key:hover{
    border-color:var(--primary);

    background:
        rgba(232,121,168,.10);

    transform:translateY(-2px);
}

.pin-key:active{
    transform:scale(.95);
}

.pin-key-secondary{
    color:var(--primary-dark);
    font-size:.78rem;
}


/* UNLOCK BUTTON */

.pin-unlock-btn{
    width:100%;
    min-height:52px;

    padding:12px 16px;

    border:0;
    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #f39abd,
            #c9578a
        );

    color:#ffffff;

    box-shadow:
        0 12px 27px
        rgba(201,87,138,.28);

    font-weight:900;

    cursor:pointer;
}

.pin-unlock-btn:disabled{
    opacity:.42;
    cursor:not-allowed;
    box-shadow:none;
}


/* FLOATING DECORATIONS */

.pin-login-decoration{
    position:absolute;

    opacity:.13;

    font-size:4rem;

    pointer-events:none;
}

.pin-decoration-one{
    top:8%;
    left:7%;
}

.pin-decoration-two{
    right:8%;
    bottom:8%;
}


/* PHONE */

@media(max-width:500px){

    .pin-login-screen{
        padding:12px;
    }

    .pin-login-card{
        padding:
            23px 17px
            calc(
                20px +
                env(safe-area-inset-bottom)
            );

        border-radius:25px;
    }

    .pin-login-logo img{
        width:145px;
    }

    .pin-login-title{
        font-size:2rem;
    }

    .pin-key{
        min-height:52px;
        border-radius:14px;
    }

}
/* =========================
   PASTEL YELLOW ACCENTS
========================= */

.stat-icon{
    background:
    linear-gradient(
        135deg,
        var(--accent-light),
        rgba(248,201,221,.55)
    );
}

.hint-btn{
    background:
        rgba(246,215,122,.20);

    color:#9b7317;
}

.hint-btn:hover{
    background:
        rgba(246,215,122,.32);
}

.pin-key-secondary{
    background:
        rgba(246,215,122,.18);

    color:#9b7317;

    border-color:
        rgba(214,173,61,.25);
}

.spotify-login-notice{
    border-color:
        rgba(214,173,61,.28);

    background:
        linear-gradient(
            135deg,
            rgba(246,215,122,.15),
            rgba(239,143,186,.08)
        );
}

.timer-preset.active{
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--accent)
        );

    color:#ffffff;
}

.pill{

    background:
        rgba(248,201,221,.55);

    color:var(--primary-dark);

}

body.dark .pill{
    background:
        rgba(241,209,115,.14);

    color:#f4d97e;
}
/* =========================
   FINAL QUESTION CARD COLORS
========================= */

.question-card{
    border:
        1px solid
        rgba(217,106,158,.28) !important;

    background:
        radial-gradient(
            circle at top left,
            rgba(248,201,221,.48),
            transparent 42%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255,242,189,.38),
            transparent 40%
        ),
        #fffafb !important;
}



/* BADGES */

.question-card .badge{
    border-color:
        rgba(217,106,158,.34) !important;

    background:
        rgba(248,201,221,.78) !important;

    color:
        var(--primary-dark) !important;
}

.question-card .point-badge{
    border-color:
        rgba(214,173,61,.36) !important;

    background:
        linear-gradient(
            135deg,
            var(--accent-light),
            rgba(246,215,122,.70)
        ) !important;

    color:#8d6815 !important;
}


/* HINT BUTTON */

.question-card .hint-btn{
    background:
        rgba(246,215,122,.24) !important;

    color:#987117 !important;
}

.question-card .hint-btn:hover{
    background:
        rgba(246,215,122,.38) !important;
}


/* ANSWER INPUT */

.question-card input{
    border-color:
        rgba(217,106,158,.28) !important;

    background:
        rgba(255,255,255,.82) !important;
}

body.dark .question-card input{
    background:
        rgba(61,38,49,.88) !important;
}


/* DECORATION */

.question-card .question-decoration{
    color:var(--primary) !important;
}
/* =========================
   PIN LOGIN CLICK FIX
========================= */

.pin-login-screen {
    z-index: 99999 !important;
}

.pin-login-card {
    position: relative;
    z-index: 100000 !important;
}

.pin-login-card * {
    pointer-events: auto;
}

.pink-background,
.floating-cute,
.pin-login-decoration {
    pointer-events: none !important;
}
/* DARK MODE — LIGHT QUESTION CARD TEXT FIX */

body.dark .question-card > h3{
    color:#4d3944 !important;
    text-shadow:none !important;
}

body.dark .question-card label{
    color:#5b3d4c !important;
}

body.dark .question-card input{
    background:#fff8fb !important;
    color:#4d3944 !important;

    border-color:
        rgba(217,106,158,.25) !important;
}

body.dark .question-card input::placeholder{
    color:#9a7b89 !important;
    opacity:1;
}
/* =========================
   FINAL DARK MODE BADGE FIX
========================= */

body.dark .question-card .badge{
    background:#7b4b63 !important;

    border-color:
        rgba(243,154,193,.55) !important;

    color:#ffe1ed !important;

    font-weight:900;
}

body.dark .question-card .point-badge{
    background:
        linear-gradient(
            135deg,
            #7d651f,
            #a9862c
        ) !important;

    border-color:
        rgba(241,209,115,.60) !important;

    color:#fff1ad !important;

    font-weight:900;
}
/* =========================
   FINAL DARK MODE READABILITY
========================= */

/* Revealed hint text */
body.dark #hintText{
    background:#fff3df !important;
    color:#6b4525 !important;

    border:
        1px solid
        rgba(198,154,50,.28) !important;

    opacity:1 !important;
    text-shadow:none !important;
    -webkit-text-fill-color:#6b4525 !important;
}

/* Covers text added inside the hint */
body.dark #hintText *{
    color:#6b4525 !important;
    -webkit-text-fill-color:#6b4525 !important;
}


/* Easy badge inside Saved Questions */
body.dark .question-item .badge,
body.dark .question-list .badge{
    background:#f3b6cf !important;
    color:#5b2f43 !important;

    border:
        1px solid
        rgba(243,154,193,.60) !important;

    opacity:1 !important;
    text-shadow:none !important;
    -webkit-text-fill-color:#5b2f43 !important;
}
/* Header action buttons */

.top-actions{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:10px;

    flex-shrink:0;
}

.top-actions .icon-btn{
    flex:0 0 43px;

    width:43px;
    height:43px;
    margin:0;
}

/* =========================
   CENTER MOBILE HEADER
========================= */

@media (max-width: 650px) {

    .topbar {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        text-align: center;
    }

    .brand-section {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin: 0 auto;
        text-align: center;
    }

    .brand-section > div:last-child {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .brand-icon {
        display: grid;
        margin: 0 auto;
    }

    .brand-section .eyebrow,
    .brand-section h1,
    .brand-section .subtitle {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .top-actions {
        align-self: center;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }
}
/* =========================
   DARK MODE ANSWER FEEDBACK
========================= */

body.dark .feedback.wrong {
    background: linear-gradient(
        135deg,
        #fff0ec,
        #ffe8e5
    );

    border-color: rgba(210, 101, 123, 0.38);
}

body.dark .feedback.wrong h3 {
    color: #d6537d !important;
}

body.dark .feedback.wrong p,
body.dark .feedback.wrong #feedbackText,
body.dark .feedback.wrong #correctAnswerText {
    color: #5a3543 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}


/* Correct-answer box */

body.dark .feedback.correct {
    background: linear-gradient(
        135deg,
        #eff8ee,
        #e5f3e4
    );

    border-color: rgba(79, 138, 76, 0.35);
}

body.dark .feedback.correct h3 {
    color: #3f7f48 !important;
}

body.dark .feedback.correct p,
body.dark .feedback.correct #feedbackText,
body.dark .feedback.correct #correctAnswerText {
    color: #35523a !important;
    opacity: 1 !important;
    text-shadow: none !important;
}
/* =========================
   TRUE HEADER CENTERING
========================= */

.topbar {
    position: relative;
    width: 100%;

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

    margin-bottom: 35px;
}

.brand-section {
    width: auto;
    margin: 0 auto;
    text-align: center;
}

.top-actions {
    position: absolute;
    top: 50%;
    right: 0;

    margin: 0;

    transform: translateY(-50%);
}


/* Keep phone layout stacked */

@media (max-width: 650px) {

    .topbar {
        flex-direction: column;
        gap: 18px;
        margin-bottom: 24px;
    }

    .brand-section {
        width: 100%;
        margin: 0 auto;
    }

    .top-actions {
        position: static;
        transform: none;
        margin: 0 auto;
    }
}

.logout-btn:hover {
    background: rgba(
        214,
        83,
        125,
        0.2
    );

    border-color: rgba(
        241,
        138,
        184,
        0.55
    );
}