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

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

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

/* Width / Height helpers */
.u-w-auto { width: auto; }
.u-w-1-25em { width: 1.25em; }
.u-w-6px { width: 6px; }
.u-w-24px { width: 24px; }
.u-w-30px { width: 30px; }
.u-w-32px { width: 32px; }
.u-w-34px { width: 34px; }
.u-w-36px { width: 36px; }
.u-w-38px { width: 38px; }
.u-w-40px { width: 40px; }
.u-w-48px { width: 48px; }
.u-w-50px { width: 50px; }
.u-w-60px { width: 60px; }
.u-w-52px { width: 52px; }
.u-w-72px { width: 72px; }
.u-w-80px { width: 80px; }
.u-w-90px { width: 90px; }
.u-w-120px { width: 120px; }
.u-w-130px { width: 130px; }
.u-w-150px { width: 150px; }
.u-w-250px { width: 250px; }
.u-w-320px { width: 320px; }
.u-w-380px { width: 380px; }
.u-w-400px { width: 400px; }
.u-h-6px { height: 6px; }
.u-h-1-25em { height: 1.25em; }
.u-h-8px { height: 8px; }
.u-h-12px { height: 12px; }
.u-h-60px { height: 60px; }
.u-h-200px { height: 200px; }
.u-h-18px { height: 18px; }
.u-h-24px { height: 24px; }
.u-h-30px { height: 30px; }
.u-h-32px { height: 32px; }
.u-h-34px { height: 34px; }
.u-h-36px { height: 36px; }
.u-h-38px { height: 38px; }
.u-h-40px { height: 40px; }
.u-h-48px { height: 48px; }
.u-h-50px { height: 50px; }
.u-h-52px { height: 52px; }
.u-h-72px { height: 72px; }

/* Object fit */
.u-object-contain { object-fit: contain; }
.u-object-cover { object-fit: cover; }

/* 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-200px { max-width: 200px; }
.u-max-w-400px { max-width: 400px; }
.u-max-w-380px { max-width: 380px; }
.u-max-w-500px { max-width: 500px; }

/* Min dimensions */
.u-min-w-0 { min-width: 0; }
.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;
}

/* 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-9rem { font-size: 0.9rem; }
.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 */
.u-opacity-40 { opacity: 0.4; }
.u-opacity-60 { opacity: 0.6; }
.u-opacity-90 { opacity: 0.9; }

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

/* Z-index */
.u-z-1 { z-index: 1; }
.u-z-2 { z-index: 2; }
.u-z-10 { z-index: 10; }
.u-z-900 { z-index: 900; }
.u-z-1000 { z-index: 1000; }
.u-z-1090 { z-index: 1090; }

/* White-space */
.u-ws-pre-wrap { white-space: pre-wrap; }
.u-wb-break-word { word-break: break-word; }

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

/* 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-1rem { top: 1rem; }
.u-top-80px { top: 80px; }
.u-top-100pct { top: 100%; }
.u-top-20px { top: 20px; }
.u-right-1rem { right: 1rem; }
.u-right-0 { right: 0; }
.u-left-0 { left: 0; }

/* Modal admin section overlay */
.modal-admin-section {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1000;
}

/* 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 */
.chart-bar-dynamic {
    height: var(--chart-height, 8px);
    min-height: 8px;
    max-height: 150px;
}

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

/* Sign edit preview constraints */
.sign-preview-img {
    max-height: 200px;
}

/* Crop tool */
.crop-area {
    user-select: none;
    line-height: 0;
}
.crop-canvas {
    display: block;
    max-width: 100%;
    border-radius: 6px;
}
.crop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    border-radius: 6px;
}

/* Roadmap progress fill */
.roadmap-progress-fill {
    width: var(--roadmap-progress, 0%);
}

/* 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 */
.sign-edit-preview-card {
    top: 80px;
    z-index: 900;
}

/* 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;
}

.admin-subsection-header {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

/* Brainmap legend */
.brainmap-legend-item {
    width: 16px;
    height: 16px;
    display: inline-block;
    border-radius: 3px;
    margin-right: 6px;
}

/* Continue learning card */
.continue-card {
    max-width: 400px;
    border-radius: 1rem;
    min-height: 60px;
}

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

/* Typing lesson detail sidebar */
.typing-sidebar-sticky {
    top: 80px;
}

/* Sign detail modal image */
.sign-modal-img {
    max-height: 200px;
}

/* Selected words area */
.selected-words-area {
    min-height: 60px;
}

/* Color picker in admin */
.color-picker-input {
    width: 48px;
    height: 36px;
}

/* 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 {
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
}

/* Mobile app */
.app-icon-lg {
    width: 52px;
    height: 52px;
}
.app-icon-sm {
    width: 24px;
    height: 24px;
    font-size: 0.72rem;
}
.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;
}
.app-gradient-section {
    background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(168,85,247,.08));
}

/* 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-th-char { width: 60px; }
.admin-th-class { width: 80px; }
.admin-th-audio { width: 80px; }
.admin-th-actions { width: 130px; }
.admin-th-word { width: 130px; }
.admin-th-actions-lg { width: 150px; }

/* Admin color text */
.admin-tone-color {
    color: var(--tone-color, #000);
}

/* 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;
}

/* Typing lesson exercise card header */
.exercise-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}