/* CSP-safe utility classes replacing inline style= attributes */

/* Display */
.u-d-none { display: none !important; }
.u-d-block { display: block !important; }




/* Cursor */
.u-cursor-pointer { cursor: pointer; }
.u-cursor-grab { cursor: grab; }

/* Width / Height helpers */
.u-w-auto { width: auto; }

.u-w-6px { width: 6px; }
.u-w-24px { width: 24px; }

.u-w-32px { width: 32px; }

.u-w-36px { width: 36px; }

.u-w-40px { width: 40px; }
.u-w-48px { width: 48px; }

.u-w-60px { width: 60px; }


.u-w-80px { width: 80px; }
.u-w-90px { width: 90px; }

.u-w-130px { width: 130px; }
.u-w-150px { width: 150px; }




.u-h-6px { height: 6px; }





.u-h-400px { height: 400px; }
.u-h-18px { height: 18px; }
.u-h-24px { height: 24px; }

.u-h-32px { height: 32px; }

.u-h-36px { height: 36px; }




.u-h-52px { height: 52px; }


/* Object fit */



/* Max dimensions */
.u-max-h-120px { max-height: 120px; }
.u-max-h-150px { max-height: 150px; }
.u-max-h-160px { max-height: 160px; }
.u-max-h-200px { max-height: 200px; }
.u-max-h-300px { max-height: 300px; }
.u-max-w-100 { max-width: 100%; }


.u-max-w-380px { max-width: 380px; }
.u-max-w-500px { max-width: 500px; }

/* Min dimensions */

.u-min-w-3-5rem { min-width: 3.5rem; }
.u-min-w-300px { min-width: 300px; }
.u-min-h-60px { min-height: 60px; }
.u-min-h-80px { min-height: 80px; }

/* Notification dropdown items */
.notification-title,
.notification-message {
    max-width: 200px;
}

.notification-message {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Overflow */
.u-overflow-y-auto { overflow-y: auto; }
.u-overflow-hidden { overflow: hidden; }

/* Font size */
.u-fs-65rem { font-size: 0.65rem; }
.u-fs-7rem { font-size: 0.7rem; }
.u-fs-72rem { font-size: 0.72rem; }
.u-fs-75rem { font-size: 0.75rem; }
.u-fs-78rem { font-size: 0.78rem; }
.u-fs-8rem { font-size: 0.8rem; }
.u-fs-875rem { font-size: 0.875rem; }

.u-fs-1-2rem { font-size: 1.2rem; }
.u-fs-1-25rem { font-size: 1.25rem; }
.u-fs-1-3rem { font-size: 1.3rem; }
.u-fs-1-5rem { font-size: 1.5rem; }
.u-fs-1-6rem { font-size: 1.6rem; }
.u-fs-1-8rem { font-size: 1.8rem; }
.u-fs-2-5rem { font-size: 2.5rem; }
.u-fs-3rem { font-size: 3rem; }
.u-fs-4rem { font-size: 4rem; }

/* Letter spacing */
.u-ls-06em { letter-spacing: 0.06em; }
.u-ls-08em { letter-spacing: 0.08em; }

/* Opacity */




/* Position helpers */
.u-pos-rel { position: relative; }
.u-pos-abs { position: absolute; }


/* Z-index */

.u-z-2 { z-index: 2; }

.u-z-900 { z-index: 900; }
.u-z-1000 { z-index: 1000; }
.u-z-1090 { z-index: 1090; }

/* White-space */



/* Border radius */
.u-br-6px { border-radius: 6px; }


/* Progress ring (used in progress/dashboard) */
.progress-ring {
    --progress: 0;
}

/* Dynamic width via data attribute (applied by JS) */
[data-u-width-pct] {
    width: attr(data-u-width-pct);
}

/* Top/Right positioning helpers */
.u-top-0 { top: 0; }

.u-top-80px { top: 80px; }
.u-top-100pct { top: 100%; }
.u-top-20px { top: 20px; }


.u-left-0 { left: 0; }

/* Line-height */
.u-lh-0 { line-height: 0; }
.u-lh-1 { line-height: 1; }

/* User select */
.u-user-select-none { user-select: none; }

/* Pointer events */
.u-pointer-events-none { pointer-events: none; }
.u-object-fit-contain { object-fit: contain; }
.u-color-primary { color: var(--color-primary); }
.u-color-dynamic { color: var(--dynamic-color, inherit); }

/* Audio button sizes */
.audio-btn-lg {
    width: 50px;
    height: 50px;
}
.audio-btn-sm {
    width: 34px;
    height: 34px;
}
.audio-btn-md {
    width: 38px;
    height: 38px;
}

/* Mastery badge neutral style (unified across list and detail) */
.mastery-badge {
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
}

/* Tag badge dynamic color via CSS custom property */
.tag-badge-dynamic {
    border-color: var(--tag-color, #6c757d) !important;
    color: var(--tag-color, #6c757d) !important;
}

/* Progress bar dynamic width */
.progress-fill-dynamic {
    width: var(--progress-width, 0%);
}

/* Level circle dynamic rotation */
.level-circle {
    --progress-deg: 0deg;
}

/* Chart bar dynamic height */


/* Notification item clickable area */
.notification-item-clickable {
    cursor: pointer;
}

/* Sign edit preview constraints */


/* Crop tool */




/* Roadmap progress fill */


/* Session UI */
.session-progress-track {
    width: 80%;
    max-width: 600px;
}
.session-progress-bar {
    height: 12px;
    border-radius: 6px;
}
.session-progress-fill {
    width: 0%;
}
.session-dropdown-menu {
    width: 250px;
}
.session-audio-btn {
    z-index: 10;
    width: 40px;
    height: 40px;
}

/* Sign edit sticky preview */


/* Search results dropdowns */
.search-results-dropdown {
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    top: 100%;
}
.search-results-dropdown-sm {
    max-height: 150px;
    overflow-y: auto;
}

/* Typing keyboard */
.keyboard-details-panel {
    display: none;
}

/* Lesson detail sticky sidebar */
.lesson-sidebar-sticky {
    top: 1rem;
    z-index: 1;
}

/* Lesson detail close button */
.lesson-close-btn {
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

/* Markdown content hidden source */
.markdown-source {
    display: none;
}

/* Word detail illustration */
.word-illustration {
    max-height: 200px;
    width: auto;
    object-fit: contain;
}

/* User dictionary modal overlay */
.modal-overlay.active {
    display: flex;
}

/* Admin dashboard */
.admin-pre-output {
    min-height: 150px;
    max-height: 60vh;
    overflow-y: auto;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.admin-section-header {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}



/* Brainmap legend */


/* Continue learning card */


/* Avatar styles */
.avatar-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 3px solid #e9ecef;
}

/* Typing lesson detail sidebar */


/* Sign detail modal image */


/* Selected words area */


/* Color picker in admin */


/* Navbar avatar */
.navbar-avatar-sm {
    width: 24px;
    height: 24px;
    object-fit: cover;
}
.navbar-avatar-md {
    width: 36px;
    height: 36px;
    object-fit: cover;
}

/* Notification dropdown */
.notification-dropdown-menu.show {
    width: 320px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.notification-dropdown-menu #notificationList {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Mobile app */


.app-gradient-bg {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(99,102,241,.18) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}
.app-device-frame {
    max-height: 580px;
    border-radius: 2.5rem;
    box-shadow: 0 28px 64px rgba(0,0,0,.2);
    z-index: 1;
}


/* Achievements */
.achievement-progress-track {
    height: 8px;
    width: 150px;
}

/* Sign detail / list */
.sign-tag-badge {
    border-color: var(--sign-tag-color, #6c757d) !important;
    color: var(--sign-tag-color, #6c757d) !important;
}

/* Admin table column widths */







/* Admin color text */


/* Vocabulary list link */
.vocab-link {
    text-decoration: none;
    color: inherit;
}

/* Auth pages */
.auth-page {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8, 2rem);
}
.auth-card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
}
.auth-card-accent {
    border-top: 4px solid #F59E0B !important;
}
.auth-mascot {
    max-width: 140px;
}

/* Auth divider with lines (matches landing page) */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #a8a29e;
    font-size: 0.875rem;
    margin: 0.75rem 0;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e7e5e4;
}

/* Google button — keep outline style on hover instead of gray fill */
.btn-google {
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: #495057;
    --bs-btn-hover-border-color: #495057;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-color: #495057;
    --bs-btn-active-border-color: #495057;
}

/* Navbar premium badge — keep white text on hover */
.navbar .badge.bg-primary:hover,
.navbar .badge.bg-primary:focus {
    color: #fff;
}

/* Typing lesson exercise card header */