:root { 
    --md-sys-color-primary: #d0bcff; 
    --md-sys-color-on-primary: #381e72; 
    --md-sys-color-primary-container: #4f378b; 
    --md-sys-color-on-primary-container: #eaddff; 
    --md-sys-color-secondary: #cddb2b; 
    --md-sys-color-on-secondary: #2f3400; 
    --md-sys-color-secondary-container: #454c00; 
    --md-sys-color-on-secondary-container: #e9f848; 
    --md-sys-color-tertiary: #80d8ff; 
    --md-sys-color-on-tertiary: #00344d; 
    --md-sys-color-tertiary-container: #004d70; 
    --md-sys-color-on-tertiary-container: #c4e7ff; 
    --md-sys-color-error: #ffb4ab; 
    --md-sys-color-on-error: #690005; 
    --md-sys-color-error-container: #93000a; 
    --md-sys-color-on-error-container: #ffdad6; 
    --md-sys-color-background: #141218; 
    --md-sys-color-on-background: #e6e1e5; 
    --md-sys-color-surface: #141218; 
    --md-sys-color-on-surface: #e6e1e5; 
    --md-sys-color-surface-variant: #49454f; 
    --md-sys-color-on-surface-variant: #cac4d0; 
    --md-sys-color-surface-container: #1d1b20; 
    --md-sys-color-surface-container-high: #2b2930; 
    --md-sys-color-surface-container-highest: #36343b; 
    --md-sys-color-outline: #938f99; 
    --md-sys-color-outline-variant: #49454f; 
    --font-heading: 'Fraunces', serif; 
    --font-body: 'Outfit', sans-serif; 
    --font-mono: 'JetBrains Mono', monospace; 
} 

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

body { 
    font-family: var(--font-body); 
    background-color: var(--md-sys-color-background); 
    color: var(--md-sys-color-on-surface); 
    min-height: 100vh; 
    overflow-x: hidden; 
    display: flex; 
    flex-direction: column; 
} 

.expressive-bg { 
    position: fixed; 
    top: 0; left: 0; right: 0; bottom: 0; 
    overflow: hidden; 
    z-index: 0; 
    pointer-events: none; 
} 

.bg-shape { 
    position: absolute; 
    border-radius: 50%; 
    filter: blur(100px); 
    opacity: 0.12; 
} 

.shape-purple { 
    width: 650px; height: 650px; 
    background: var(--md-sys-color-primary); 
    top: -150px; left: -100px; 
} 

.shape-lime { 
    width: 500px; height: 500px; 
    background: var(--md-sys-color-secondary); 
    bottom: -100px; right: -80px; 
} 

.shape-blue { 
    width: 450px; height: 450px; 
    background: var(--md-sys-color-tertiary); 
    top: 40%; right: 20%; 
} 

.app-layout { 
    display: flex; 
    min-height: 100vh; 
    position: relative; 
    z-index: 1; 
} 

.main-content-wrapper { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    min-width: 0; 
    padding: 32px 40px 48px; 
} 

.mobile-top-bar { 
    display: none; 
    align-items: center; 
    justify-content: space-between; 
    padding-bottom: 20px; 
} 

.mobile-menu-btn { 
    width: 44px; height: 44px; 
    border-radius: 50%; 
    background: var(--md-sys-color-surface-container-high); 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    color: var(--md-sys-color-on-surface); 
    display: flex; align-items: center; justify-content: center; 
    cursor: pointer; 
} 

.mobile-top-title { 
    font-family: var(--font-heading); 
    font-size: 22px; 
    font-weight: 600; 
} 

.mobile-spacer { 
    width: 44px; 
} 

.content-area { 
    max-width: 1360px; 
    width: 100%; 
    margin: 0 auto; 
} 

.app-section { 
    display: none; 
    animation: fadeInSection 0.25s cubic-bezier(0.2, 0, 0, 1); 
} 

.app-section.active { 
    display: block; 
} 

@keyframes fadeInSection { 
    from { opacity: 0; transform: translateY(6px); } 
    to { opacity: 1; transform: translateY(0); } 
} 

.display-title { 
    font-family: var(--font-heading); 
    font-size: clamp(28px, 4vw, 42px); 
    font-weight: 700; 
    line-height: 1.15; 
    color: var(--md-sys-color-on-surface); 
    letter-spacing: -0.5px; 
} 

.expressive-subtitle { 
    font-size: 15px; 
    color: var(--md-sys-color-on-surface-variant); 
    margin-top: 6px; 
    line-height: 1.5; 
} 





.home-cognitive-hero { 
    background: #ece7f6; 
    border: 1px solid #ded7ea; 
    border-radius: 28px; 
    padding: 24px 28px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 24px; 
    margin-bottom: 24px; 
    box-shadow: 0 4px 20px rgba(103, 80, 164, 0.06); 
} 

.hero-left-info { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    max-width: 65%; 
} 

.hero-date-row { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    flex-wrap: wrap; 
} 

.hero-date-icon { 
    font-size: 18px; 
    color: #6750a4; 
} 

.hero-date-text { 
    font-size: 14px; 
    font-weight: 600; 
    color: #1d192b; 
} 

.hero-streak-badge { 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    padding: 4px 12px; 
    background: #ded7ea; 
    border-radius: 100px; 
    color: #49454f; 
    font-size: 12.5px; 
    font-weight: 600; 
} 

.streak-fire-icon { 
    font-size: 16px; 
    color: #e65100; 
} 

.hero-greeting-title { 
    font-family: 'Outfit', sans-serif; 
    font-size: 26px; 
    font-weight: 700; 
    color: #1d192b; 
    margin: 0; 
} 

.hero-motto-quote { 
    font-size: 14px; 
    color: #49454f; 
    line-height: 1.45; 
    margin: 0; 
} 

.hero-quick-launch-box { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
    gap: 10px; 
    flex-shrink: 0; 
} 

.hero-focus-stat-pill { 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    padding: 6px 14px; 
    background: #ded7ea; 
    border-radius: 100px; 
    font-size: 13px; 
    color: #49454f; 
} 

.hero-launch-focus-btn { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    padding: 12px 24px; 
    background: #6750a4; 
    color: #ffffff; 
    border: none; 
    border-radius: 100px; 
    font-size: 15px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1); 
    box-shadow: 0 4px 14px rgba(103, 80, 164, 0.25); 
} 

.hero-launch-focus-btn:hover { 
    background: #5b4495; 
    transform: translateY(-1px); 
    box-shadow: 0 6px 18px rgba(103, 80, 164, 0.35); 
} 

.hero-launch-focus-btn:active { 
    transform: scale(0.97); 
} 

.home-bento-grid { 
    display: grid; 
    grid-template-columns: repeat(12, 1fr); 
    gap: 20px; 
} 

.bento-card { 
    background: #ded7ea; 
    border: 1px solid #ded7ea; 
    border-radius: 24px; 
    padding: 22px; 
    display: flex; 
    flex-direction: column; 
    gap: 14px; 
    position: relative; 
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
} 

.bento-card:hover { 
    box-shadow: 0 6px 20px rgba(103, 80, 164, 0.08); 
} 

.home-priorities-card { 
    grid-column: span 7; 
} 

.home-flashcard-card { 
    grid-column: span 5; 
} 

.home-grades-card { 
    grid-column: span 4; 
    cursor: pointer; 
} 

.home-soundscapes-card { 
    grid-column: span 4; 
} 

.home-scratchpad-card { 
    grid-column: span 4; 
} 

.bento-card-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 12px; 
} 

.bento-header-title-group { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
} 

.bento-icon-wrapper { 
    width: 38px; height: 38px; 
    border-radius: 12px; 
    display: flex; align-items: center; justify-content: center; 
    background: #ece7f6; 
    color: #6750a4; 
    flex-shrink: 0; 
} 

.bento-icon-wrapper.lime-tint { color: #556b2f; } 
.bento-icon-wrapper.purple-tint { color: #6750a4; } 
.bento-icon-wrapper.blue-tint { color: #1a73e8; } 
.bento-icon-wrapper.amber-tint { color: #e65100; } 
.bento-icon-wrapper.teal-tint { color: #00796b; } 

.bento-card-title { 
    font-size: 16px; 
    font-weight: 600; 
    color: #1d192b; 
} 

.bento-card-subtitle { 
    font-size: 12px; 
    color: #49454f; 
} 

.bento-action-icon-btn { 
    width: 32px; height: 32px; 
    border-radius: 50%; 
    background: #ece7f6; 
    border: 1px solid #ded7ea; 
    color: #1d192b; 
    display: flex; align-items: center; justify-content: center; 
    cursor: pointer; 
    transition: all 0.2s ease; 
} 

.bento-action-icon-btn:hover { 
    background: #6750a4; 
    color: #ffffff; 
    transform: scale(1.05); 
} 

.bento-text-link-btn { 
    display: inline-flex; 
    align-items: center; 
    gap: 4px; 
    background: none; 
    border: none; 
    color: #6750a4; 
    font-size: 13px; 
    font-weight: 600; 
    cursor: pointer; 
} 

.bento-text-link-btn span.material-symbols-outlined { 
    font-size: 16px; 
} 

.bento-action-pill-btn { 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    padding: 5px 12px; 
    background: #ece7f6; 
    border: 1px solid #ded7ea; 
    border-radius: 100px; 
    color: #1d192b; 
    font-size: 12px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.2s ease; 
} 

.bento-action-pill-btn:hover { 
    background: #6750a4; 
    color: #ffffff; 
} 


.home-priorities-list { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
} 

.home-empty-tasks-hint { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 16px; 
    background: #ece7f6; 
    border-radius: 16px; 
    color: #49454f; 
    font-size: 13px; 
} 

.home-empty-tasks-hint span.material-symbols-outlined { 
    font-size: 20px; 
    color: #6750a4; 
} 

.home-priority-row { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    padding: 10px 14px; 
    background: #ece7f6; 
    border: 1px solid #ded7ea; 
    border-radius: 16px; 
    transition: transform 0.15s ease, background 0.15s ease; 
} 

.home-priority-row:hover { 
    transform: translateX(3px); 
    background: #e4ddf0; 
} 

.home-priority-row.urgent { 
    border-left: 3px solid #b3261e; 
} 

.home-priority-check { 
    width: 24px; height: 24px; 
    border-radius: 50%; 
    border: 2px solid #79747e; 
    display: flex; align-items: center; justify-content: center; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    flex-shrink: 0; 
    color: transparent; 
} 

.home-priority-check span.material-symbols-outlined { 
    font-size: 16px; 
} 

.home-priority-check:hover { 
    border-color: #6750a4; 
    color: #6750a4; 
    background: rgba(103, 80, 164, 0.1); 
} 

.home-priority-content { 
    flex: 1; 
    min-width: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
} 

.home-priority-title { 
    font-size: 14px; 
    font-weight: 600; 
    color: #1d192b; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

.home-priority-meta { 
    font-size: 12px; 
    color: #49454f; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

.home-priority-focus-btn { 
    width: 32px; height: 32px; 
    border-radius: 50%; 
    background: #ded7ea; 
    border: none; 
    color: #6750a4; 
    display: flex; align-items: center; justify-content: center; 
    cursor: pointer; 
    transition: transform 0.2s ease, background 0.2s ease; 
} 

.home-priority-focus-btn:hover { 
    transform: scale(1.1); 
    background: #6750a4; 
    color: #ffffff; 
} 


.flashcard-3d-scene { 
    perspective: 1000px; 
    width: 100%; 
    min-height: 130px; 
    cursor: pointer; 
} 

.flashcard-3d-flipper { 
    position: relative; 
    width: 100%; 
    min-height: 130px; 
    transform-style: preserve-3d; 
    transition: transform 0.45s cubic-bezier(0.2, 0, 0, 1); 
} 

.flashcard-3d-flipper.is-flipped { 
    transform: rotateY(180deg); 
} 

.flashcard-face { 
    position: absolute; 
    inset: 0; 
    backface-visibility: hidden; 
    border-radius: 20px; 
    padding: 16px 20px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    gap: 8px; 
} 

.flashcard-front { 
    background: #ece7f6; 
    border: 1px solid #ded7ea; 
} 

.flashcard-back { 
    background: #ded7ea; 
    border: 1px solid #c9bece; 
    transform: rotateY(180deg); 
} 

.flashcard-badge-top { 
    font-size: 11px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    color: #6750a4; 
} 

.flashcard-back .flashcard-badge-top { 
    color: #49454f; 
} 

.flashcard-main-text { 
    font-size: 15px; 
    font-weight: 600; 
    color: #1d192b; 
    line-height: 1.4; 
    margin: 0; 
} 

.flashcard-hint-bottom { 
    font-size: 11.5px; 
    color: #49454f; 
    opacity: 0.8; 
} 

.flashcard-actions-row { 
    display: flex; 
    gap: 10px; 
} 

.flashcard-rate-btn { 
    flex: 1; 
    padding: 8px 14px; 
    border-radius: 100px; 
    border: none; 
    font-size: 13px; 
    font-weight: 600; 
    display: flex; align-items: center; justify-content: center; gap: 6px; 
    cursor: pointer; 
    transition: all 0.2s ease; 
} 

.flashcard-rate-btn.repeat { 
    background: #ece7f6; 
    color: #1d192b; 
    border: 1px solid #ded7ea; 
} 

.flashcard-rate-btn.mastered { 
    background: #6750a4; 
    color: #ffffff; 
} 

.flashcard-rate-btn:hover { 
    transform: translateY(-1px); 
} 


.home-grades-display-flex { 
    display: flex; align-items: center; gap: 16px; 
} 

.home-gpa-circle-badge { 
    width: 68px; height: 68px; border-radius: 50%; 
    background: #ece7f6; 
    border: 2px solid #6750a4; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    flex-shrink: 0; 
} 

.home-gpa-val-large { 
    font-size: 20px; font-weight: 700; color: #1d192b; line-height: 1; 
} 

.home-gpa-label { 
    font-size: 9.5px; color: #49454f; font-weight: 600; text-transform: uppercase; margin-top: 2px; 
} 

.home-gpa-info-col { 
    flex: 1; display: flex; flex-direction: column; gap: 6px; 
} 

.home-gpa-target-text { 
    font-size: 13px; font-weight: 600; color: #1d192b; 
} 

.home-gpa-progress-track { 
    width: 100%; height: 8px; background: #ece7f6; border-radius: 8px; overflow: hidden; 
} 

.home-gpa-progress-bar { 
    height: 100%; background: #6750a4; border-radius: 8px; transition: width 0.4s ease; 
} 

.home-gpa-status-hint { 
    font-size: 11.5px; color: #49454f; 
} 


.home-sound-buttons-grid { 
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; 
} 

.home-sound-btn { 
    display: flex; align-items: center; gap: 8px; padding: 10px 12px; 
    background: #ece7f6; border: 1px solid #ded7ea; border-radius: 14px; 
    color: #1d192b; font-size: 12.5px; font-weight: 600; cursor: pointer; 
    transition: all 0.2s ease; 
} 

.home-sound-btn:hover { 
    background: #e4ddf0; transform: translateY(-1px); 
} 

.home-sound-btn.active { 
    background: #6750a4; color: #ffffff; border-color: #6750a4; 
} 

.home-sound-btn.active span.material-symbols-outlined { 
    color: #ffffff; 
} 


.home-scratchpad-textarea { 
    width: 100%; height: 90px; padding: 12px; background: #ece7f6; 
    border: 1px solid #ded7ea; border-radius: 16px; color: #1d192b; 
    font-family: inherit; font-size: 13px; resize: none; outline: none; 
    transition: border-color 0.2s ease; 
} 

.home-scratchpad-textarea:focus { 
    border-color: #6750a4; 
} 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    background: var(--md-sys-color-surface-container-high); 
    color: var(--md-sys-color-on-surface); 
    font-size: 13px; 
    font-weight: 600; 
    display: inline-flex; align-items: center; justify-content: center; 
    gap: 6px; 
    cursor: pointer; 
    transition: all 0.2s ease; 
} 

.flashcard-rate-btn.mastered:hover { 
    background: rgba(205, 219, 43, 0.2); 
    border-color: var(--md-sys-color-secondary); 
    color: var(--md-sys-color-secondary); 
} 

.flashcard-rate-btn.repeat:hover { 
    background: rgba(255, 180, 171, 0.15); 
    border-color: var(--md-sys-color-error); 
    color: var(--md-sys-color-error); 
} 


.home-grades-display-flex { 
    display: flex; 
    align-items: center; 
    gap: 18px; 
} 

.home-gpa-circle-badge { 
    width: 80px; height: 80px; 
    border-radius: 50%; 
    background: linear-gradient(135deg, rgba(128, 216, 255, 0.18) 0%, rgba(0, 77, 112, 0.3) 100%); 
    border: 1.5px solid rgba(128, 216, 255, 0.3); 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    flex-shrink: 0; 
} 

.home-gpa-val-large { 
    font-family: var(--font-heading); 
    font-size: 24px; 
    font-weight: 700; 
    color: var(--md-sys-color-tertiary); 
    line-height: 1; 
} 

.home-gpa-label { 
    font-size: 10px; 
    color: var(--md-sys-color-on-surface-variant); 
    text-transform: uppercase; 
    letter-spacing: 0.3px; 
    margin-top: 2px; 
} 

.home-gpa-info-col { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
} 

.home-gpa-target-text { 
    font-size: 13.5px; 
    font-weight: 600; 
    color: var(--md-sys-color-on-surface); 
} 

.home-gpa-progress-track { 
    width: 100%; 
    height: 8px; 
    background: rgba(255, 255, 255, 0.08); 
    border-radius: 8px; 
    overflow: hidden; 
} 

.home-gpa-progress-bar { 
    height: 100%; 
    background: linear-gradient(90deg, var(--md-sys-color-tertiary), var(--md-sys-color-primary)); 
    border-radius: 8px; 
    transition: width 0.4s ease; 
} 

.home-gpa-status-hint { 
    font-size: 12px; 
    color: var(--md-sys-color-on-surface-variant); 
} 


.home-sound-buttons-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); 
    gap: 8px; 
} 

.home-sound-btn { 
    padding: 10px 12px; 
    background: var(--md-sys-color-surface-container-high); 
    border: 1px solid rgba(255, 255, 255, 0.06); 
    border-radius: 16px; 
    color: var(--md-sys-color-on-surface-variant); 
    font-size: 12.5px; 
    font-weight: 500; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    gap: 6px; 
    cursor: pointer; 
    transition: all 0.2s ease; 
} 

.home-sound-btn span.material-symbols-outlined { 
    font-size: 20px; 
} 

.home-sound-btn:hover { 
    background: var(--md-sys-color-surface-container-highest); 
    color: var(--md-sys-color-on-surface); 
    transform: translateY(-2px); 
} 

.home-sound-btn.active { 
    background: rgba(255, 224, 130, 0.15); 
    border-color: #ffe082; 
    color: #ffe082; 
} 


.home-scratchpad-textarea { 
    width: 100%; 
    height: 110px; 
    background: var(--md-sys-color-surface-container-high); 
    border: 1px solid rgba(255, 255, 255, 0.06); 
    border-radius: 18px; 
    padding: 14px 16px; 
    color: var(--md-sys-color-on-surface); 
    font-family: var(--font-body); 
    font-size: 14px; 
    line-height: 1.45; 
    resize: none; 
    outline: none; 
    transition: border-color 0.2s ease; 
} 

.home-scratchpad-textarea:focus { 
    border-color: #b9f6ca; 
} 





.tasks-top-card { 
    background: #fbf9fe; 
    border-radius: 28px; 
    padding: 24px 28px; 
    border: 1px solid rgba(103, 80, 164, 0.12); 
    box-shadow: 0 4px 20px rgba(103, 80, 164, 0.04); 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 20px; 
} 

.tasks-top-text-group { 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
} 

.tasks-top-title { 
    font-family: 'Outfit', sans-serif; 
    font-size: 28px; 
    font-weight: 600; 
    color: #1d192b; 
    margin: 0; 
    line-height: 1.2; 
} 

.tasks-top-subtitle { 
    font-size: 14.5px; 
    color: #6750a4; 
    margin: 0; 
    font-weight: 400; 
} 

.tasks-add-pill-btn { 
    background: #6750a4; 
    color: #ffffff; 
    border: none; 
    border-radius: 100px; 
    padding: 10px 26px; 
    font-size: 15px; 
    font-weight: 600; 
    cursor: pointer; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 4px 14px rgba(103, 80, 164, 0.28); 
    transition: all 0.2s ease; 
} 

.tasks-add-pill-btn:hover { 
    background: #533d8b; 
    transform: translateY(-1px) scale(1.02); 
    box-shadow: 0 6px 18px rgba(103, 80, 164, 0.38); 
} 

.tasks-search-pill-wrapper { 
    position: relative; 
    margin-bottom: 24px; 
    width: 100%; 
    box-sizing: border-box; 
} 

.tasks-search-icon { 
    position: absolute; 
    left: 18px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: #6750a4; 
    font-size: 22px; 
    pointer-events: none; 
} 

.tasks-search-input { 
    width: 100%; 
    background: #ede8f7; 
    border: 1px solid rgba(103, 80, 164, 0.16); 
    border-radius: 100px; 
    padding: 14px 20px 14px 52px; 
    font-size: 15px; 
    font-family: inherit; 
    color: #1d192b; 
    outline: none; 
    box-sizing: border-box; 
    transition: all 0.2s ease; 
} 

.tasks-search-input::placeholder { 
    color: #79747e; 
    opacity: 0.9; 
} 

.tasks-search-input:focus { 
    border-color: #6750a4; 
    background: #fbf9fe; 
    box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.12); 
} 

.tasks-figma-grid { 
    display: grid; 
    grid-template-columns: 1fr 340px; 
    gap: 24px; 
    align-items: start; 
} 

.tasks-list-col { 
    display: flex; 
    flex-direction: column; 
    gap: 14px; 
} 

.tasks-list-header-row { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 4px; 
} 

.tasks-list-heading { 
    font-size: 18px; 
    font-weight: 600; 
    color: #1d192b; 
    margin: 0; 
} 

.tasks-list-count-badge { 
    font-size: 14px; 
    color: #79747e; 
    font-weight: 500; 
} 

.tasks-cards-stream { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
} 

.task-card { 
    background: #ede8f7; 
    border: 1px solid rgba(103, 80, 164, 0.14); 
    border-radius: 24px; 
    padding: 16px 20px; 
    display: flex; 
    align-items: center; 
    gap: 16px; 
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); 
    box-shadow: 0 2px 10px rgba(103, 80, 164, 0.04); 
} 

.task-card:hover { 
    transform: translateY(-2px); 
    background: #e5def2; 
    box-shadow: 0 6px 18px rgba(103, 80, 164, 0.08); 
} 

.task-card.completed { 
    opacity: 0.75; 
    background: #f2edf9; 
} 

.task-checkbox { 
    width: 24px; 
    height: 24px; 
    border-radius: 50%; 
    border: 2px solid #6750a4; 
    background: transparent; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    color: transparent; 
    transition: all 0.2s ease; 
    flex-shrink: 0; 
} 

.task-checkbox span.material-symbols-outlined { 
    font-size: 16px; 
} 

.task-checkbox:hover { 
    background: rgba(103, 80, 164, 0.12); 
    color: #6750a4; 
} 

.task-checkbox.checked { 
    background: #6750a4; 
    border-color: #6750a4; 
    color: #ffffff; 
} 

.task-main-info { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 3px; 
    min-width: 0; 
} 

.task-title { 
    font-size: 15.5px; 
    font-weight: 600; 
    color: #1d192b; 
    margin: 0; 
    line-height: 1.3; 
} 

.task-title.strike { 
    text-decoration: line-through; 
    color: #79747e; 
} 

.task-description { 
    font-size: 13.5px; 
    color: #49454f; 
    margin: 0; 
    line-height: 1.4; 
} 

.task-actions-menu { 
    display: flex; 
    align-items: center; 
    gap: 4px; 
} 

.task-btn-icon { 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    background: transparent; 
    border: none; 
    color: #79747e; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    transition: all 0.15s ease; 
} 

.task-btn-icon:hover { 
    background: rgba(103, 80, 164, 0.12); 
    color: #1d192b; 
} 

.task-btn-icon.delete-btn:hover { 
    color: #ba1a1a; 
} 


.tasks-progress-col { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
    position: relative; 
} 

.tasks-donut-progress-card { 
    background: #ede8f7; 
    border-radius: 32px; 
    padding: 24px 22px; 
    border: 1px solid rgba(103, 80, 164, 0.14); 
    box-shadow: 0 4px 20px rgba(103, 80, 164, 0.06); 
    display: flex; 
    flex-direction: column; 
    gap: 18px; 
} 

.donut-card-top-row { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
} 

.donut-card-title { 
    font-size: 16px; 
    font-weight: 600; 
    color: #1d192b; 
} 

.donut-card-ratio { 
    font-size: 14px; 
    color: #79747e; 
    font-weight: 500; 
} 

.donut-chart-center-wrapper { 
    position: relative; 
    width: 140px; 
    height: 140px; 
    margin: 4px auto; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.donut-svg-gauge { 
    width: 140px; 
    height: 140px; 
    transform: rotate(-90deg); 
} 

.donut-bg-ring { 
    fill: none; 
    stroke: rgba(103, 80, 164, 0.16); 
    stroke-width: 12; 
} 

.donut-active-ring { 
    fill: none; 
    stroke: #6750a4; 
    stroke-width: 12; 
    stroke-linecap: round; 
    stroke-dasharray: 389.5; 
    stroke-dashoffset: 389.5; 
    transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1); 
} 

.donut-center-text-group { 
    position: absolute; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    pointer-events: none; 
} 

.donut-big-percent { 
    font-family: 'Outfit', sans-serif; 
    font-size: 28px; 
    font-weight: 700; 
    color: #1d192b; 
    line-height: 1; 
} 

.donut-sub-label { 
    font-size: 12.5px; 
    color: #79747e; 
    margin-top: 4px; 
    font-weight: 500; 
} 

.donut-stats-bottom-row { 
    display: flex; 
    justify-content: space-between; 
    padding-top: 14px; 
    border-top: 1px solid rgba(103, 80, 164, 0.1); 
    margin-top: 4px; 
} 

.donut-stat-col { 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
} 

.donut-stat-label { 
    font-size: 12.5px; 
    color: #79747e; 
} 

.donut-stat-val { 
    font-size: 18px; 
    font-weight: 600; 
    color: #1d192b; 
} 


.tasks-decor-shapes-backdrop { 
    position: relative; 
    width: 100%; 
    height: 160px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    pointer-events: none; 
    margin-top: 12px; 
} 

.tasks-m3-shape-svg { 
    width: 180px; 
    height: 180px; 
    opacity: 0.9; 
    filter: drop-shadow(0 8px 24px rgba(103, 80, 164, 0.08)); 
    transition: transform 0.4s ease; 
} 

@media (max-width: 900px) { 
    .tasks-figma-grid { 
        grid-template-columns: 1fr; 
    } 
    .tasks-progress-col { 
        order: -1; 
    } 
} 


.accordion-left { 
    display: flex; align-items: center; gap: 8px; 
} 

.accordion-body { 
    padding: 0 20px 20px; 
    display: none; 
} 

.empty-state { 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    padding: 40px 20px; 
    text-align: center; 
    color: var(--md-sys-color-on-surface-variant); 
    gap: 12px; 
} 

.empty-blob { 
    width: 54px; height: 54px; 
    border-radius: 50%; 
    background: rgba(255, 255, 255, 0.04); 
    display: flex; align-items: center; justify-content: center; 
    color: var(--md-sys-color-primary); 
} 

.mobile-fab { 
    display: none; 
    position: fixed; 
    bottom: 24px; right: 24px; 
    width: 56px; height: 56px; 
    border-radius: 20px; 
    background: var(--md-sys-color-primary); 
    color: var(--md-sys-color-on-primary); 
    border: none; 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); 
    align-items: center; justify-content: center; 
    cursor: pointer; 
    z-index: 90; 
} 





.grades-expressive-header { 
    display: flex; align-items: center; justify-content: space-between; 
    gap: 20px; 
    margin-bottom: 24px; 
    background: #ece7f6; 
    border: 1px solid #ded7ea; 
    border-radius: 28px; 
    padding: 24px 28px; 
    flex-wrap: wrap; 
} 

.grades-header-actions { 
    display: flex; align-items: center; gap: 12px; 
    flex-wrap: wrap; 
} 

.grades-system-select { 
    min-width: 220px; 
    padding: 10px 16px; 
    background: #ded7ea; 
    border: 1px solid #c9bece; 
    border-radius: 100px; 
    color: #1d192b; 
    font-size: 13px; 
    font-weight: 500; 
    outline: none; 
} 

.grades-bento-overview { 
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px; 
    margin-bottom: 24px; 
} 

.grades-summary-card { 
    background: #ece7f6; 
    border: 1px solid #ded7ea; 
    border-radius: 24px; 
    padding: 22px; 
    display: flex; flex-direction: column; gap: 12px; 
} 

.summary-top-row { 
    display: flex; align-items: center; justify-content: space-between; 
} 

.summary-label { 
    font-size: 14px; font-weight: 600; color: #49454f; 
} 

.summary-icon { 
    color: #6750a4; 
} 

.gpa-big-number { 
    font-family: 'Outfit', sans-serif; 
    font-size: 42px; font-weight: 700; color: #1d192b; 
    line-height: 1; 
} 

.gpa-target-bar-wrap { 
    width: 100%; height: 8px; background: #ded7ea; 
    border-radius: 8px; overflow: hidden; 
} 

.gpa-target-bar-fill { 
    height: 100%; background: #6750a4; 
    border-radius: 8px; transition: width 0.4s ease; 
} 

.gpa-target-info-row { 
    display: flex; justify-content: space-between; 
    font-size: 12px; color: #49454f; 
} 

.simulator-controls-row { 
    display: flex; gap: 10px; flex-wrap: wrap; 
} 

.sim-field-group { 
    flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 120px; 
} 

.sim-field-group label { 
    font-size: 12px; color: #49454f; 
} 

.sim-select, .sim-input { 
    padding: 8px 12px; background: #ded7ea; 
    border: 1px solid #c9bece; border-radius: 12px; 
    color: #1d192b; font-size: 13px; outline: none; 
} 

.sim-result-box { 
    background: #ded7ea; border-radius: 14px; padding: 10px 14px; 
    border: 1px solid #c9bece; 
} 

.sim-result-text { 
    font-size: 13px; line-height: 1.4; color: #1d192b; 
    margin: 0; 
} 

.grades-filters-bar { 
    margin-bottom: 20px; 
} 

.grades-filter-chips { 
    display: flex; gap: 8px; flex-wrap: wrap; 
} 

.grades-chip { 
    padding: 7px 16px; background: #ece7f6; 
    border: 1px solid #ded7ea; border-radius: 100px; 
    color: #49454f; font-size: 13px; font-weight: 500; 
    cursor: pointer; transition: all 0.2s ease; 
} 

.grades-chip.active { 
    background: #6750a4; color: #ffffff; 
    border-color: #6750a4; 
} 

.grades-subjects-grid { 
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; 
} 

.subject-card { 
    background: #ded7ea; border-radius: 22px; padding: 18px; 
    border: 1px solid #ded7ea; display: flex; flex-direction: column; gap: 12px; 
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
} 

.subject-card:hover { 
    transform: translateY(-2px); box-shadow: 0 4px 16px rgba(103, 80, 164, 0.08); 
} 

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

.subject-info-col { 
    display: flex; flex-direction: column; gap: 4px; 
} 

.subject-name-row { 
    display: flex; align-items: center; gap: 8px; 
} 

.subject-color-dot { 
    width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; 
} 

.subject-title { 
    font-size: 17px; font-weight: 600; color: var(--md-sys-color-on-surface); 
} 

.subject-teacher-text { 
    font-size: 12.5px; color: var(--md-sys-color-on-surface-variant); 
} 

.subject-gpa-badge { 
    display: flex; flex-direction: column; align-items: flex-end; 
    background: rgba(255, 255, 255, 0.04); padding: 6px 12px; border-radius: 14px; 
} 

.subject-gpa-val { 
    font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--md-sys-color-on-surface); 
} 

.subject-gpa-status { 
    font-size: 11px; font-weight: 600; 
} 

.subject-gpa-status.excellent { color: #b9f6ca; } 
.subject-gpa-status.good { color: #80d8ff; } 
.subject-gpa-status.warning { color: #ffe082; } 
.subject-gpa-status.danger { color: #ffb4ab; } 
.subject-gpa-status.empty { color: var(--md-sys-color-on-surface-variant); } 

.subject-grades-flow { 
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-height: 36px; 
} 

.grade-pill-item { 
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; 
    background: var(--md-sys-color-surface-container-high); border-radius: 100px; 
    border: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; font-weight: 600; 
    color: var(--md-sys-color-on-surface); 
} 

.grade-pill-weight-badge { 
    font-size: 10px; color: var(--md-sys-color-primary); opacity: 0.85; 
} 

.grade-pill-delete-btn { 
    display: none; background: none; border: none; color: var(--md-sys-color-error); 
    cursor: pointer; padding: 0; margin-left: 2px; 
} 

.grade-pill-item:hover .grade-pill-delete-btn { 
    display: inline-flex; 
} 

.subject-actions-row { 
    display: flex; justify-content: space-between; align-items: center; 
    margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.05); 
} 

.btn-add-grade-quick { 
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; 
    background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); 
    border: none; border-radius: 100px; font-size: 12.5px; font-weight: 600; cursor: pointer; 
    transition: transform 0.15s ease; 
} 

.btn-add-grade-quick:hover { transform: scale(1.03); } 

.btn-edit-subject-quick { 
    background: none; border: none; color: var(--md-sys-color-on-surface-variant); 
    cursor: pointer; padding: 4px; border-radius: 50%; display: inline-flex; 
} 





.expressive-modal-overlay { 
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; 
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); 
    z-index: 1000; display: flex; align-items: center; justify-content: center; 
    padding: 20px; opacity: 0; pointer-events: none; 
    transition: opacity 0.25s ease; 
} 

.expressive-modal-overlay.is-open { 
    opacity: 1; pointer-events: auto; 
} 

.expressive-modal-card { 
    width: 100%; max-width: 480px; background: var(--md-sys-color-surface-container); 
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 28px; padding: 28px; 
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 20px; 
    transform: scale(0.95); transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1); 
} 

.expressive-modal-overlay.is-open .expressive-modal-card { 
    transform: scale(1); 
} 

.modal-top, .modal-header-expressive { 
    display: flex; align-items: center; justify-content: space-between; 
} 

.modal-display-title, .modal-title { 
    font-family: var(--font-heading); font-size: 22px; font-weight: 600; 
} 

.modal-subtitle { 
    font-size: 13px; color: var(--md-sys-color-on-surface-variant); 
} 

.modal-close-icon, .modal-close-icon-btn { 
    background: none; border: none; color: var(--md-sys-color-on-surface-variant); 
    cursor: pointer; width: 36px; height: 36px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    transition: background 0.15s ease; 
} 

.modal-close-icon:hover, .modal-close-icon-btn:hover { 
    background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); 
} 

.expressive-form { 
    display: flex; flex-direction: column; gap: 16px; 
} 

.input-field-group { 
    display: flex; flex-direction: column; gap: 6px; 
} 

.input-field-group label { 
    font-size: 13px; font-weight: 500; color: var(--md-sys-color-on-surface-variant); 
} 

.modal-actions-row { 
    display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 8px; 
} 

.modal-actions-row.split { 
    justify-content: space-between; 
} 

.text-btn { 
    padding: 10px 18px; background: none; border: none; color: var(--md-sys-color-on-surface-variant); 
    font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 100px; 
    transition: background 0.15s ease; 
} 

.text-btn:hover { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); } 
.text-btn.danger { color: var(--md-sys-color-error); } 

.solid-pill-btn { 
    padding: 10px 24px; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); 
    border: none; border-radius: 100px; font-size: 14px; font-weight: 600; cursor: pointer; 
    transition: transform 0.15s ease, opacity 0.15s ease; 
} 

.solid-pill-btn:hover { transform: scale(1.02); opacity: 0.95; } 

.color-bubbles { 
    display: flex; gap: 10px; align-items: center; 
} 

.color-dot { 
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer; 
    border: 2px solid transparent; transition: transform 0.2s ease, border-color 0.2s ease; 
} 

.color-dot.active { border-color: #ffffff; transform: scale(1.15); } 

.grade-quick-selector { 
    display: flex; gap: 8px; 
} 

.grade-quick-pill { 
    flex: 1; padding: 8px; background: var(--md-sys-color-surface-container-high); 
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; color: var(--md-sys-color-on-surface); 
    font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; 
} 

.grade-quick-pill.active { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-color: var(--md-sys-color-primary); } 

.stopwatch-tasks-checklist { 
    display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; padding-right: 4px; 
} 

.stopwatch-check-item { 
    display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--md-sys-color-surface-container-high); 
    border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; cursor: pointer; transition: all 0.15s ease; 
} 

.stopwatch-check-item.is-selected { background: var(--md-sys-color-primary-container); border-color: var(--md-sys-color-primary); } 

.stopwatch-item-checkbox { 
    width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, 0.3); 
    display: flex; align-items: center; justify-content: center; color: transparent; 
} 

.stopwatch-check-item.is-selected .stopwatch-item-checkbox { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } 

.stopwatch-item-info { 
    display: flex; flex-direction: column; gap: 2px; flex: 1; 
} 

.stopwatch-item-title { font-size: 13.5px; font-weight: 600; color: var(--md-sys-color-on-surface); } 
.stopwatch-item-deadline { font-size: 11.5px; color: var(--md-sys-color-on-surface-variant); } 

.stopwatch-select-quick-actions { 
    display: flex; gap: 8px; margin-bottom: 12px; 
} 

.text-pill-chip { 
    padding: 6px 12px; background: var(--md-sys-color-surface-container-high); border: 1px solid rgba(255, 255, 255, 0.08); 
    border-radius: 100px; color: var(--md-sys-color-on-surface-variant); font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; 
} 





.support-figma-container { 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
    width: 100%; 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 10px 0 30px; 
} 

.support-top-badge-row { 
    display: flex; 
    justify-content: center; 
    width: 100%; 
} 

.support-user-badge { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    background: #ded7ea; 
    color: #1d192b; 
    font-size: 15px; 
    font-weight: 600; 
    padding: 8px 24px; 
    border-radius: 100px; 
    box-shadow: 0 2px 10px rgba(103, 80, 164, 0.08); 
} 

.support-user-badge .user-badge-icon { 
    font-size: 20px; 
    color: #49454f; 
} 

.support-figma-grid { 
    display: grid; 
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); 
    gap: 28px; 
    width: 100%; 
    align-items: start; 
} 

.support-create-column { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
} 


.support-upload-card { 
    position: relative; 
    border-radius: 28px; 
    padding: 36px 24px; 
    background: #ede8f7; 
    cursor: pointer; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); 
    border: 3px solid transparent; 
    background-image: linear-gradient(#ede8f7, #ede8f7), repeating-linear-gradient(45deg, #7c3aed 0, #7c3aed 10px, #e9d5ff 10px, #e9d5ff 20px); 
    background-origin: padding-box, border-box; 
    background-clip: padding-box, border-box; 
    box-shadow: 0 4px 20px rgba(103, 80, 164, 0.06); 
} 

.support-upload-card:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.15); 
} 

.upload-center-content { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 8px; 
} 

.upload-arrows-wrap { 
    margin-bottom: 6px; 
} 

.upload-arrows-icon { 
    font-size: 38px; 
    color: #6750a4; 
    transition: transform 0.3s ease; 
} 

.support-upload-card:hover .upload-arrows-icon { 
    transform: scale(1.1) rotate(180deg); 
} 

.upload-title { 
    font-size: 19px; 
    font-weight: 600; 
    color: #1d192b; 
    margin: 0; 
} 

.upload-sub { 
    font-size: 14px; 
    color: #6750a4; 
    margin: 0; 
    max-width: 360px; 
    line-height: 1.4; 
} 

.support-attached-files-list { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px; 
    margin-top: 12px; 
} 

.support-file-chip { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    background: #ded7ea; 
    padding: 6px 14px; 
    border-radius: 100px; 
    font-size: 13px; 
    color: #1d192b; 
    font-weight: 600; 
} 

.support-file-chip .remove-file-btn { 
    background: none; 
    border: none; 
    cursor: pointer; 
    color: #6750a4; 
    display: flex; 
    align-items: center; 
    padding: 0; 
} 


.support-message-card { 
    background: #ede8f7; 
    border-radius: 28px; 
    padding: 20px 24px; 
    border: 1px solid rgba(103, 80, 164, 0.16); 
    box-shadow: 0 4px 20px rgba(103, 80, 164, 0.06); 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
    min-height: 200px; 
} 

.support-textarea { 
    width: 100%; 
    min-height: 120px; 
    background: transparent; 
    border: none; 
    outline: none; 
    font-family: inherit; 
    font-size: 15.5px; 
    color: #1d192b; 
    resize: none; 
    line-height: 1.5; 
} 

.support-textarea::placeholder { 
    color: #79747e; 
    opacity: 0.9; 
} 

.support-message-bottom-row { 
    display: flex; 
    justify-content: flex-end; 
    width: 100%; 
} 

.support-submit-pill-btn { 
    background: #6750a4; 
    color: #ffffff; 
    border: none; 
    border-radius: 100px; 
    padding: 10px 24px; 
    font-size: 15px; 
    font-weight: 600; 
    cursor: pointer; 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    box-shadow: 0 4px 14px rgba(103, 80, 164, 0.3); 
    transition: all 0.2s ease; 
} 

.support-submit-pill-btn:hover { 
    background: #533d8b; 
    transform: translateY(-1px) scale(1.02); 
    box-shadow: 0 6px 18px rgba(103, 80, 164, 0.4); 
} 

.support-submit-pill-btn .send-arrow-icon { 
    font-size: 18px; 
    color: #ffffff; 
    transform: rotate(0deg); 
} 


.support-sent-column { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
} 

.support-sent-header-pill { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    background: #ded7ea; 
    color: #1d192b; 
    font-size: 15px; 
    font-weight: 600; 
    padding: 8px 24px; 
    border-radius: 100px; 
    align-self: flex-start; 
    box-shadow: 0 2px 10px rgba(103, 80, 164, 0.08); 
} 

.support-sent-header-pill .sent-inbox-icon { 
    font-size: 20px; 
    color: #49454f; 
} 

.support-sent-list-card { 
    background: #f3effa; 
    border-radius: 28px; 
    padding: 20px; 
    border: 1px solid rgba(103, 80, 164, 0.12); 
    box-shadow: 0 4px 20px rgba(103, 80, 164, 0.06); 
    min-height: 380px; 
    display: flex; 
    flex-direction: column; 
} 

.sent-tickets-stream { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    width: 100%; 
} 

.sent-ticket-item { 
    background: #ded7ea; 
    border-radius: 20px; 
    padding: 14px 16px; 
    display: flex; 
    align-items: center; 
    gap: 14px; 
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
} 

.sent-ticket-item:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 14px rgba(103, 80, 164, 0.12); 
} 

.sent-ticket-avatar { 
    width: 38px; 
    height: 38px; 
    border-radius: 50%; 
    background: #6750a4; 
    color: #ffffff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 16px; 
    font-weight: 700; 
    flex-shrink: 0; 
} 

.sent-ticket-info { 
    flex: 1; 
    min-width: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
} 

.sent-ticket-title { 
    font-size: 14.5px; 
    font-weight: 600; 
    color: #1d192b; 
    margin: 0; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

.sent-ticket-snippet { 
    font-size: 12.5px; 
    color: #49454f; 
    margin: 0; 
    line-height: 1.35; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
} 

.sent-ticket-decor-shapes { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    opacity: 0.45; 
    color: #6750a4; 
    flex-shrink: 0; 
} 

.sent-ticket-decor-shapes span { 
    font-size: 18px; 
} 

.sent-tickets-empty { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 60px 20px; 
    color: #79747e; 
    text-align: center; 
    gap: 8px; 
} 

.sent-tickets-empty span { 
    font-size: 40px; 
    color: #6750a4; 
    opacity: 0.6; 
} 

@media (max-width: 900px) { 
    .support-figma-grid { 
        grid-template-columns: 1fr; 
    } 
} 





.stopwatch-fullscreen-overlay { 
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; 
    width: 100vw; height: 100vh; height: 100dvh; 
    z-index: 10000; background-color: #121016; 
    display: flex; flex-direction: column; justify-content: space-between; 
    opacity: 0; pointer-events: none; transform: scale(0.98); 
    transition: opacity 0.3s cubic-bezier(0.2, 0, 0, 1), transform 0.3s cubic-bezier(0.2, 0, 0, 1); 
    overflow: hidden; 
} 

.stopwatch-fullscreen-overlay.is-active { 
    opacity: 1; pointer-events: auto; transform: scale(1); 
} 

.stopwatch-ambient-mesh { 
    position: absolute; inset: 0; 
    background: radial-gradient(circle at 50% 30%, rgba(79, 55, 139, 0.35) 0%, rgba(18, 16, 22, 0.95) 75%, #121016 100%); 
    pointer-events: none; z-index: 1; 
} 

.stopwatch-top-bar { 
    position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; 
    padding: 24px 36px; gap: 16px; 
} 

.stopwatch-back-btn { 
    height: 44px; padding: 0 20px 0 14px; border-radius: 100px; 
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); 
    color: var(--md-sys-color-on-surface); font-size: 14px; font-weight: 600; 
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.2s ease; 
} 

.stopwatch-back-btn:hover { background: rgba(255, 255, 255, 0.16); transform: translateX(-3px); } 

.focus-mode-segmented-control { 
    display: flex; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); 
    border-radius: 100px; padding: 4px; gap: 4px; 
} 

.focus-seg-btn { 
    padding: 6px 14px; background: none; border: none; border-radius: 100px; 
    color: var(--md-sys-color-on-surface-variant); font-size: 13px; font-weight: 500; cursor: pointer; 
    white-space: nowrap; transition: all 0.2s ease; 
} 

.focus-seg-btn.active { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } 

.stopwatch-active-task-info { 
    display: flex; align-items: center; gap: 8px; max-width: 40%; overflow-x: auto; 
} 

.stopwatch-task-indicator-dot { 
    width: 8px; height: 8px; border-radius: 50%; background: var(--md-sys-color-secondary); 
    box-shadow: 0 0 10px var(--md-sys-color-secondary); flex-shrink: 0; 
} 

.stopwatch-target-label { font-size: 13px; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; } 

.stopwatch-tasks-tags-list { display: flex; align-items: center; gap: 6px; } 

.stopwatch-task-tag { 
    padding: 4px 12px; border-radius: 100px; background: var(--md-sys-color-surface-container-high); 
    color: var(--md-sys-color-on-surface); font-size: 12.5px; font-weight: 600; white-space: nowrap; 
    border: 1px solid rgba(255, 255, 255, 0.08); display: inline-flex; align-items: center; gap: 4px; 
} 

.stopwatch-main-stage { 
    position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; 
    padding: 0 24px; text-align: center; 
} 

.focus-phase-indicator { 
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; 
    background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); 
    border-radius: 100px; font-size: 14px; font-weight: 600; margin-bottom: 12px; 
} 

.focus-phase-indicator.break { 
    background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); 
} 

.stopwatch-display-container { 
    display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 32px; 
} 

.stopwatch-digits-display { 
    display: flex; align-items: baseline; justify-content: center; 
    font-family: var(--font-mono); 
    font-variant-numeric: tabular-nums; 
    font-feature-settings: "tnum" 1; 
    color: var(--md-sys-color-on-surface); 
    user-select: none; 
    min-width: 5.5ch; 
} 

.stopwatch-main-digits { 
    font-size: clamp(72px, 15vw, 136px); font-weight: 700; line-height: 0.95; letter-spacing: -2px; 
} 

.stopwatch-ms-digits { 
    font-size: clamp(32px, 7vw, 60px); font-weight: 600; color: var(--md-sys-color-primary); margin-left: 4px; opacity: 0.85; 
} 

.stopwatch-status-hint { 
    font-size: 15px; color: var(--md-sys-color-on-surface-variant); font-weight: 500; 
} 

.focus-soundscape-bar { 
    display: flex; align-items: center; justify-content: center; gap: 16px; margin: 12px 0 28px; flex-wrap: wrap; 
} 

.soundscape-chips-list { 
    display: flex; gap: 8px; background: rgba(0, 0, 0, 0.35); padding: 6px 10px; border-radius: 100px; 
    border: 1px solid rgba(255, 255, 255, 0.06); flex-wrap: wrap; justify-content: center; 
} 

.soundscape-chip { 
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: transparent; 
    border: none; border-radius: 100px; color: var(--md-sys-color-on-surface-variant); font-size: 13px; font-weight: 500; 
    cursor: pointer; transition: all 0.2s ease; 
} 

.soundscape-chip.active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } 

.soundscape-volume-control { 
    display: flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.35); padding: 6px 14px; border-radius: 100px; 
    border: 1px solid rgba(255, 255, 255, 0.06); 
} 

.sound-volume-slider { width: 75px; height: 4px; accent-color: var(--md-sys-color-primary); cursor: pointer; } 

.stopwatch-controls-row { 
    display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; 
} 

.stopwatch-ctrl-btn { 
    height: 56px; border-radius: 100px; font-size: 16px; font-weight: 600; 
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 28px; 
    cursor: pointer; border: none; outline: none; transition: transform 0.2s ease, background 0.2s ease; 
} 

.stopwatch-ctrl-btn:hover { transform: translateY(-2px); } 
.stopwatch-ctrl-btn:active { transform: scale(0.96); } 

.stopwatch-ctrl-btn.primary-toggle-btn { 
    background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); min-width: 150px; 
} 

.stopwatch-ctrl-btn.primary-toggle-btn.is-running { 
    background: #ffb74d; color: #2e1c00; 
} 

.stopwatch-ctrl-btn.reset-btn, .stopwatch-ctrl-btn.lap-btn { 
    background: rgba(255, 255, 255, 0.08); color: var(--md-sys-color-on-surface); border: 1px solid rgba(255, 255, 255, 0.1); 
} 

.stopwatch-ctrl-btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } 

.stopwatch-ctrl-btn.finish-btn { 
    background: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary); 
} 

.stopwatch-laps-section { 
    position: relative; z-index: 3; padding: 20px 36px 28px; display: flex; flex-direction: column; gap: 12px; 
} 

.stopwatch-laps-header { 
    display: flex; align-items: center; justify-content: space-between; 
} 

.stopwatch-laps-title-group { display: flex; align-items: center; gap: 8px; } 
.stopwatch-laps-title { font-size: 14px; font-weight: 600; color: var(--md-sys-color-on-surface-variant); } 

.stopwatch-laps-grid { 
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; 
} 

.stopwatch-lap-card { 
    background: var(--md-sys-color-surface-container); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; 
    padding: 10px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 140px; flex-shrink: 0; 
} 

.lap-card-header { display: flex; justify-content: space-between; font-size: 11px; color: var(--md-sys-color-on-surface-variant); } 
.lap-card-time { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--md-sys-color-on-surface); } 
.lap-card-split { font-family: var(--font-mono); font-size: 11px; color: var(--md-sys-color-secondary); } 

.stopwatch-laps-empty-hint { font-size: 12.5px; color: var(--md-sys-color-on-surface-variant); opacity: 0.7; } 

.hidden { display: none !important; } 





@media (max-width: 1024px) { 
    .home-priorities-card { grid-column: span 12; } 
    .home-flashcard-card { grid-column: span 12; } 
    .home-grades-card { grid-column: span 6; } 
    .home-soundscapes-card { grid-column: span 6; } 
    .home-scratchpad-card { grid-column: span 12; } 
    .tasks-grid { grid-template-columns: 1fr; } 
    .grades-bento-overview { grid-template-columns: 1fr; } 
} 

@media (max-width: 768px) { 
    .main-content-wrapper { padding: 16px 16px 32px; } 
    .mobile-top-bar { display: flex; } 
    .home-cognitive-hero { flex-direction: column; align-items: flex-start; padding: 24px 20px; gap: 20px; } 
    .hero-left-info { max-width: 100%; } 
    .hero-quick-launch-box { align-items: flex-start; width: 100%; } 
    .hero-launch-focus-btn { width: 100%; justify-content: center; } 
    .home-grades-card { grid-column: span 12; } 
    .home-soundscapes-card { grid-column: span 12; } 
    .stopwatch-top-bar { padding: 16px 20px; flex-wrap: wrap; } 
    .stopwatch-active-task-info { display: none; } 
    .mobile-fab { display: flex; } 
}