/* ========================================
   Hank Workspace - Apple-Style Design System
   Enhanced with fluid animations & micro-interactions
   ======================================== */

:root {
    /* Color System */
    --bg-primary: #f5f5f7;
    --bg-secondary: #ffffff;
    --bg-tertiary: #fafafa;
    --bg-dark: #1d1d1f;

    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --text-tertiary: #86868b;
    --text-inverse: #f5f5f7;

    --accent: #0071e3;
    --accent-hover: #0077ed;
    --accent-light: rgba(0, 113, 227, 0.08);
    --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    --success: #34c759;
    --warning: #ff9f0a;
    --danger: #ff3b30;
    --info: #5ac8fa;

    --border: rgba(0, 0, 0, 0.06);
    --border-strong: rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.05), 0 12px 36px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 8px 20px rgba(0, 0, 0, 0.06), 0 24px 64px rgba(0, 0, 0, 0.12);

    /* Glass */
    --glass-bg: rgba(255, 255, 255, 0.78);
    --glass-bg-strong: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-blur: 24px;

    /* Layout */
    --sidebar-width: 240px;
    --sidebar-collapsed: 72px;
    --header-height: 64px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    /* Apple-like spring transitions */
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.18s var(--ease-in-out);
    --transition-normal: 0.35s var(--ease-spring);
    --transition-slow: 0.55s var(--ease-spring);

    /* Font */
    --font: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #1a1a1e;
    --bg-secondary: #2c2c30;
    --bg-tertiary: #222225;
    --bg-dark: #f5f5f7;

    --text-primary: #f0f0f5;
    --text-secondary: #a1a1a6;
    --text-tertiary: #6e6e73;
    --text-inverse: #1d1d1f;

    --accent: #2997ff;
    --accent-hover: #40a3ff;
    --accent-light: rgba(41, 151, 255, 0.12);

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.25), 0 12px 36px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 8px 20px rgba(0, 0, 0, 0.3), 0 24px 64px rgba(0, 0, 0, 0.4);

    --glass-bg: rgba(44, 44, 48, 0.82);
    --glass-bg-strong: rgba(44, 44, 48, 0.95);
    --glass-border: rgba(255, 255, 255, 0.1);

    --success: #30d158;
    --warning: #ff9f0a;
    --danger: #ff453a;
    --info: #64d2ff;
}

/* Dark mode overrides for hardcoded colors */
[data-theme="dark"] .breadcrumb-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .batch-action-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .login-container {
    background: var(--bg-secondary);
}

[data-theme="dark"] .search-input {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .file-item:hover {
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .note-card:hover {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .context-menu {
    background: var(--bg-secondary);
}

/* ========================================
   Reset & Base
   ======================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow: hidden;
    letter-spacing: -0.011em;
    line-height: 1.47;
}

/* Smooth theme transition — applied temporarily via JS class */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
    transition: background-color 0.6s ease,
                border-color 0.6s ease,
                box-shadow 0.6s ease,
                color 0.5s ease,
                fill 0.5s ease,
                stroke 0.5s ease !important;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.22);
}

a {
    text-decoration: none;
    color: inherit;
}

input, button, textarea {
    font-family: inherit;
    outline: none;
}

/* ========================================
   Login — Interactive Particle Network
   ======================================== */
.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050510;
    overflow: hidden;
}

#loginCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Card */
.login-card {
    position: relative;
    z-index: 1;
    width: 380px;
    padding: 48px 40px 36px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    text-align: center;
    animation: loginCardIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    opacity: 0;
    transform: translateY(30px) scale(0.96);
}

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

/* Logo */
.login-logo {
    margin-bottom: 20px;
}

.logo-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 14px;
    background: linear-gradient(145deg, #5856d6 0%, #007aff 50%, #bf5af2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    box-shadow: 0 6px 20px rgba(88, 86, 214, 0.35);
    animation: logoFloat 4s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Title */
.login-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.04em;
    margin-bottom: 32px;
    background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Form fields */
.login-field {
    margin-bottom: 16px;
    text-align: left;
}

.login-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 6px;
    padding-left: 2px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.login-field input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    transition: all 0.25s ease;
}

.login-field input::placeholder {
    color: rgba(255, 255, 255, 0.15);
}

.login-field input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(88, 86, 214, 0.6);
    box-shadow: 0 0 0 3px rgba(88, 86, 214, 0.15), 0 0 20px rgba(88, 86, 214, 0.08);
}

/* Error */
.login-error {
    padding: 10px 14px;
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.2);
    border-radius: 10px;
    color: #ff6b6b;
    font-size: 13px;
    margin-bottom: 16px;
    text-align: left;
    animation: shakeX 0.5s ease;
}

@keyframes shakeX {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Button */
.login-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #5856d6, #007aff);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
}

.login-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #bf5af2, #5856d6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.login-btn:hover::before {
    opacity: 1;
}

.login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(88, 86, 214, 0.4);
}

.login-btn .btn-text,
.login-btn .btn-loader {
    position: relative;
    z-index: 1;
}

.login-btn:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
}

.login-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Footer */
.login-footer {
    margin-top: 28px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    font-style: italic;
}

/* ========================================
   App Container
   ======================================== */
.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ========================================
   Sidebar — icons never move, only width changes + text fades
   Icon centers all at 36px from left = center of 72px collapsed
   Header logo(22px): pad-left 25 + 11 = 36
   Nav icon(32px):    nav-pad 8 + item-pad 12 + 16 = 36
   Footer avatar(32px): pad-left 20 + 16 = 36
   ======================================== */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.42s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 100;
    position: relative;
    flex-shrink: 0;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed);
}

.sidebar.collapsed .sidebar-header {
    cursor: pointer;
}

/* ---- Text fade: out before shrink, in after expand ---- */
.sidebar-title,
.nav-text,
.user-name,
.logout-text {
    opacity: 1;
    transition: opacity 0.22s ease 0.2s;
    white-space: nowrap;
}

.sidebar.collapsed .sidebar-title,
.sidebar.collapsed .nav-text,
.sidebar.collapsed .user-name,
.sidebar.collapsed .logout-text {
    opacity: 0;
    transition: opacity 0.1s ease 0s;
}

/* ---- Toggle button: fade with text ---- */
.sidebar-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    opacity: 1;
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.22s ease 0.2s;
}

.sidebar.collapsed .sidebar-toggle {
    opacity: 0;
    pointer-events: none;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.1s ease 0s;
}

.sidebar-toggle:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}

.sidebar-toggle i {
    display: block;
    font-size: 18px;
}

/* ---- Logout button: fade with text ---- */
.logout-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    font-size: 13px;
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.22s ease 0.2s;
}

.sidebar.collapsed .logout-btn {
    opacity: 0;
    pointer-events: none;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.1s ease 0s;
}

.logout-text {
    white-space: nowrap;
}

.logout-btn:hover {
    background: rgba(255, 59, 48, 0.08);
    color: var(--danger);
}

/* ---- Active indicator bar: fade out on collapse ---- */
.sidebar.collapsed .nav-item.active::before {
    opacity: 0;
}

/* ---- Collapsed hover: logo morphs to expand icon in-place ---- */
.sidebar-logo-icon {
    transition: transform 0.25s var(--ease-spring), opacity 0.25s var(--ease-spring);
}

.sidebar.collapsed:hover .sidebar-logo-icon {
    transform: scale(0);
    opacity: 0;
}

/* Expand icon appears exactly where the logo icon is */
.sidebar-logo::after {
    content: '\f0c9';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 18px;
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.25s var(--ease-spring), opacity 0.25s var(--ease-spring);
    pointer-events: none;
}

.sidebar.collapsed:hover .sidebar-logo::after {
    transform: scale(1);
    opacity: 1;
}

/* Disable hover translateX on nav items when collapsed */
.sidebar.collapsed .nav-item:hover {
    transform: none;
}

/* ---- Sidebar structure (paddings tuned so icons sit at 36px from left) ---- */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 0 25px;
    min-height: 64px;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    position: relative;
}

.sidebar-logo i {
    font-size: 22px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    flex-shrink: 0;
}

.sidebar-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sidebar-nav {
    flex: 1;
    padding: 4px 8px 8px;
    overflow-y: auto;
}

.nav-section {
    margin-bottom: 8px;
}

.nav-divider {
    height: 1px;
    background: var(--border);
    margin: 0 12px 6px;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    margin-bottom: 2px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

.nav-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
    transform: translateX(2px);
}

.nav-item.active {
    background: var(--accent-light);
    color: var(--accent);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
    transition: opacity 0.15s ease;
}

.nav-item.active .nav-icon {
    color: var(--accent);
}

.nav-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border-radius: var(--radius-sm);
    font-size: 16px;
    flex-shrink: 0;
}

.nav-text {
    white-space: nowrap;
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
}

/* Theme Toggle */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.theme-toggle-track {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    transition: background 0.3s ease;
}

.theme-toggle-track:hover {
    background: var(--accent-light);
    border-color: var(--accent);
}

.theme-icon-wrapper {
    position: relative;
    width: 18px;
    height: 18px;
}

.theme-icon-sun,
.theme-icon-moon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: none;
}

.theme-icon-sun {
    color: #ff9500;
}

.theme-icon-moon {
    color: #5e5ce6;
    opacity: 0;
    transform: translate(-12px, 12px) scale(0.5);
}

/* Sun visible, moon hidden (light mode default) */
.theme-icon-sun {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Sunrise arc animation: rise from bottom-left to center */
@keyframes celestialRise {
    0% {
        opacity: 0;
        transform: translate(-14px, 14px) scale(0.4);
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translate(0, -2px) scale(1.15);
    }
}

/* Settle into final position */
@keyframes celestialSettle {
    0% {
        transform: translate(0, -2px) scale(1.15);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

/* Sunset arc animation: set to bottom-right */
@keyframes celestialSet {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    60% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        transform: translate(14px, 14px) scale(0.4);
    }
}

/* Dark mode: moon rises, sun sets */
[data-theme="dark"] .theme-icon-moon {
    animation: celestialRise 0.8s var(--ease-spring) forwards,
               celestialSettle 0.4s var(--ease-spring) 0.8s forwards;
}

[data-theme="dark"] .theme-icon-sun {
    animation: celestialSet 0.7s var(--ease-spring) forwards;
}

/* Light mode: sun rises, moon sets */
[data-theme="light"] .theme-icon-sun {
    animation: celestialRise 0.8s var(--ease-spring) forwards,
               celestialSettle 0.4s var(--ease-spring) 0.8s forwards;
}

[data-theme="light"] .theme-icon-moon {
    animation: celestialSet 0.7s var(--ease-spring) forwards;
}

.theme-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.sidebar.collapsed .theme-label {
    opacity: 0;
    transition: opacity 0.1s ease 0s;
}

/* ========================================
   Main Content
   ======================================== */
.main-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
}

.content-section {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    animation: fadeIn 0.3s ease;
}

.content-section.active {
    display: flex;
}

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

@keyframes modalOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.95) translateY(8px); }
}

/* Section Header */
.section-header {
    display: flex;
    align-items: center;
    padding: 16px 28px 12px;
    gap: 12px;
    flex-wrap: nowrap;
    position: relative;
    z-index: 100;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    flex: 1 1 0;
    min-width: 0;
    overflow: visible;
    position: relative;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.breadcrumb-item:last-child {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
    font-weight: 600;
}

.breadcrumb-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
}

.breadcrumb-separator {
    color: var(--text-tertiary);
    font-size: 12px;
}

.breadcrumb-ellipsis {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.breadcrumb-ellipsis:hover {
    background: rgba(0, 0, 0, 0.04);
}

.breadcrumb-dots {
    color: var(--text-tertiary);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1;
}

.breadcrumb-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    max-width: 300px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    z-index: 10000;
    animation: dropdownIn 0.15s ease;
}

.breadcrumb-dropdown.show {
    display: block;
}

@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.breadcrumb-dropdown-item {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.15s;
}

.breadcrumb-dropdown-item:hover {
    background: var(--accent-light);
    color: var(--accent);
}

.breadcrumb-dropdown-item::before {
    content: '\f07b';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 8px;
    color: var(--text-tertiary);
    font-size: 12px;
}

.breadcrumb-dropdown-item:hover::before {
    color: var(--accent);
}

.section-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Search Box */
.search-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.search-icon {
    color: var(--text-tertiary);
    font-size: 13px;
    margin-right: -24px;
    z-index: 1;
    pointer-events: none;
}

.search-input {
    padding: 9px 12px 9px 32px;
    width: 200px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.search-input:focus {
    width: 260px;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

/* View Toggle */
.view-toggle {
    display: flex;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.view-btn {
    padding: 8px 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
}

.view-btn.active {
    background: var(--accent);
    color: white;
}

.view-btn:hover:not(.active) {
    color: var(--text-primary);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-primary {
    background: var(--accent);
    color: white;
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    background: var(--accent-hover);
    box-shadow: 0 4px 16px rgba(0, 113, 227, 0.3);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.1s;
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-strong);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    opacity: 0.9;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-ghost {
    background: none;
    color: var(--text-secondary);
    padding: 8px 10px;
}

.btn-ghost:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

.btn-ghost.active {
    background: var(--accent-light);
    color: var(--accent);
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

.action-buttons {
    display: flex;
    gap: 8px;
}

/* ========================================
   File Manager
   ======================================== */
.drop-zone {
    flex: 1;
    overflow-y: auto;
    padding: 0 28px 28px;
    position: relative;
}

.drop-zone.drag-over .drop-overlay {
    display: flex;
}

.drop-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 50;
    background: rgba(0, 113, 227, 0.04);
    border: 2px dashed rgba(0, 113, 227, 0.4);
    border-radius: var(--radius-lg);
    margin: 12px;
    align-items: center;
    justify-content: center;
    animation: dropZonePulse 0.3s var(--ease-spring);
    backdrop-filter: blur(4px);
}

@keyframes dropZonePulse {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.drop-message {
    text-align: center;
    color: var(--accent);
}

.drop-message i {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.7;
}

.drop-message p {
    font-size: 16px;
    font-weight: 500;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: var(--text-tertiary);
    text-align: center;
}

.empty-state i {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 14px;
}

/* Grid View */
.file-container.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.file-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s var(--ease-spring);
    position: relative;
    user-select: none;
    will-change: transform, box-shadow;
}

.file-item:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px) scale(1.01);
}

.file-item:active {
    transform: translateY(-1px) scale(0.98);
    transition-duration: 0.1s;
}

.file-item.selected {
    border-color: var(--accent);
    background: var(--accent-light);
    box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.15), var(--shadow-md);
}

/* Checkbox overlay on file items */
.file-item-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--border-strong);
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: white;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
    z-index: 2;
    cursor: pointer;
}

.file-item-checkbox i {
    display: none;
}

.file-item:hover .file-item-checkbox,
.multi-select-mode .file-item-checkbox {
    opacity: 1;
    transform: scale(1);
}

.file-item.selected .file-item-checkbox {
    opacity: 1;
    transform: scale(1);
    background: var(--accent);
    border-color: var(--accent);
}

.file-item.selected .file-item-checkbox i {
    display: block;
}

/* Batch Action Bar */
.batch-action-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    z-index: 900;
    animation: batchBarIn 0.35s var(--ease-spring);
}

@keyframes batchBarIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.batch-action-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.batch-action-close {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    color: var(--text-tertiary);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s ease;
}

.batch-action-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}

.batch-action-buttons {
    display: flex;
    gap: 6px;
}

.file-item .file-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 28px;
    transition: transform 0.3s var(--ease-spring);
}

.file-item:hover .file-icon {
    transform: scale(1.08);
}

.file-item .file-icon.folder-icon {
    background: linear-gradient(135deg, #5AC8FA 0%, #007AFF 100%);
    color: white;
}

.file-item .file-icon.code-icon {
    background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
    color: white;
}

.file-item .file-icon.image-icon {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF3B30 100%);
    color: white;
}

.file-item .file-icon.archive-icon {
    background: linear-gradient(135deg, #FF9F0A 0%, #FF6B00 100%);
    color: white;
}

.file-item .file-icon.doc-icon {
    background: linear-gradient(135deg, #5856D6 0%, #AF52DE 100%);
    color: white;
}

.file-item .file-icon.default-icon {
    background: linear-gradient(135deg, #8E8E93 0%, #636366 100%);
    color: white;
}

.file-item .file-name {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.file-item .file-meta {
    text-align: center;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* List View */
.file-container.list-view {
    display: flex;
    flex-direction: column;
}

.file-container.list-view .file-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 2px;
}

.file-container.list-view .file-item:hover {
    transform: none;
}

.file-container.list-view .file-item .file-icon {
    width: 36px;
    height: 36px;
    margin: 0;
    font-size: 18px;
    flex-shrink: 0;
}

.file-container.list-view .file-item .file-name {
    text-align: left;
    flex: 1;
    font-size: 13px;
}

.file-container.list-view .file-item .file-meta {
    text-align: right;
    margin-top: 0;
    white-space: nowrap;
}

.file-container.list-view .file-item .file-size {
    min-width: 80px;
    text-align: right;
    font-size: 12px;
    color: var(--text-tertiary);
}

.file-container.list-view .file-item .file-date {
    min-width: 140px;
    text-align: right;
    font-size: 12px;
    color: var(--text-tertiary);
}

.file-container.list-view .file-item-checkbox {
    position: relative;
    top: auto;
    left: auto;
    flex-shrink: 0;
}

/* ========================================
   Notes
   ======================================== */
.notes-layout {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.notes-sidebar {
    width: 300px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.notes-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

.notes-sidebar-header h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.notes-search {
    padding: 0 16px 12px;
    position: relative;
}

.notes-search i {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-70%);
    color: var(--text-tertiary);
    font-size: 12px;
    pointer-events: none;
}

.notes-search input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.notes-search input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 12px;
}

.note-card {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.25s var(--ease-spring);
    margin-bottom: 4px;
    border: 1px solid transparent;
}

.note-card:hover {
    background: rgba(0, 0, 0, 0.03);
    transform: translateX(3px);
}

.note-card:active {
    transform: translateX(1px) scale(0.99);
}

.note-card.active {
    background: var(--accent-light);
    border-color: rgba(0, 113, 227, 0.2);
    transform: translateX(0);
}

.note-card .note-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-card .note-card-preview {
    font-size: 12px;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}

.note-card .note-card-date {
    font-size: 11px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.note-card .note-card-date .pin-badge {
    color: var(--accent);
    font-size: 10px;
}

/* Notes Editor */
.notes-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-secondary);
    min-width: 0;
    max-width: 100%;
}

.notes-editor-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    text-align: center;
    padding: 40px;
}

.notes-editor-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.notes-editor-empty h3 {
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.notes-editor-active {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.note-header {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.note-title-input {
    flex: 1;
    font-size: 22px;
    font-weight: 700;
    border: none;
    background: none;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.note-title-input::placeholder {
    color: var(--text-tertiary);
}

.note-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.note-save-status {
    font-size: 12px;
    color: var(--text-tertiary);
    padding: 4px 10px;
    background: rgba(52, 199, 89, 0.1);
    border-radius: var(--radius-sm);
    color: var(--success);
}

/* TinyMCE Editor Wrapper — fill available space */
.tinymce-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

.tinymce-wrapper .tox.tox-tinymce {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Menu bar & toolbar Apple-style polish */
.tinymce-wrapper .tox .tox-menubar {
    background: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 2px 8px !important;
}

.tinymce-wrapper .tox .tox-toolbar-overlord {
    background: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border) !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.tinymce-wrapper .tox .tox-toolbar__primary {
    background: var(--bg-tertiary) !important;
}

.tinymce-wrapper .tox .tox-toolbar__group {
    padding: 0 4px !important;
}

/* Toolbar button hover & active */
.tinymce-wrapper .tox .tox-tbtn:hover {
    background: var(--accent-light) !important;
}

.tinymce-wrapper .tox .tox-tbtn--enabled,
.tinymce-wrapper .tox .tox-tbtn--enabled:hover {
    background: var(--accent-light) !important;
    color: var(--accent) !important;
}

.tinymce-wrapper .tox .tox-tbtn svg {
    fill: var(--text-secondary) !important;
}

.tinymce-wrapper .tox .tox-tbtn:hover svg,
.tinymce-wrapper .tox .tox-tbtn--enabled svg {
    fill: var(--accent) !important;
}

/* Select/dropdown buttons */
.tinymce-wrapper .tox .tox-tbtn--select {
    padding: 0 6px !important;
}

/* Status bar */
.tinymce-wrapper .tox .tox-statusbar {
    background: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text-tertiary) !important;
    font-size: 12px !important;
    padding: 4px 12px !important;
}

.tinymce-wrapper .tox .tox-statusbar a,
.tinymce-wrapper .tox .tox-statusbar__path-item {
    color: var(--text-tertiary) !important;
}

.tinymce-wrapper .tox .tox-statusbar__wordcount {
    color: var(--text-tertiary) !important;
}

/* Dark mode overrides for TinyMCE */
[data-theme="dark"] .tinymce-wrapper .tox .tox-menubar,
[data-theme="dark"] .tinymce-wrapper .tox .tox-toolbar-overlord,
[data-theme="dark"] .tinymce-wrapper .tox .tox-toolbar__primary {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .tinymce-wrapper .tox .tox-tbtn svg {
    fill: var(--text-secondary) !important;
}

[data-theme="dark"] .tinymce-wrapper .tox .tox-tbtn:hover svg,
[data-theme="dark"] .tinymce-wrapper .tox .tox-tbtn--enabled svg {
    fill: var(--accent) !important;
}

[data-theme="dark"] .tinymce-wrapper .tox .tox-mbtn {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .tinymce-wrapper .tox .tox-mbtn:hover {
    background: rgba(255,255,255,0.06) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tinymce-wrapper .tox .tox-tbtn {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .tinymce-wrapper .tox .tox-tbtn--bespoke .tox-tbtn__select-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .tinymce-wrapper .tox .tox-statusbar {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .tinymce-wrapper .tox .tox-edit-area__iframe {
    background: var(--bg-secondary) !important;
}

/* ---- Toolbar: let TinyMCE sliding mode handle overflow natively ---- */
.tinymce-wrapper .tox .tox-toolbar-overlord {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Sliding overflow drawer styling */
.tinymce-wrapper .tox .tox-toolbar__overflow {
    background: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border) !important;
}

[data-theme="dark"] .tinymce-wrapper .tox .tox-toolbar__overflow {
    background: var(--bg-tertiary) !important;
}

/* ---- Table: Office-like resize handles & borders ---- */
/* Table resize bars (column/row drag handles) */
.tinymce-wrapper .mce-resize-bar-row,
.tinymce-wrapper .mce-resize-bar-col {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tinymce-wrapper .mce-resize-bar-row:hover,
.tinymce-wrapper .mce-resize-bar-col:hover {
    opacity: 1;
}

/* ---- Fullscreen: cover full viewport, constrain all children ---- */
.tox.tox-tinymce.tox-fullscreen {
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    z-index: 10001 !important;
}

.tox.tox-tinymce.tox-fullscreen .tox-editor-header,
.tox.tox-tinymce.tox-fullscreen .tox-toolbar-overlord,
.tox.tox-tinymce.tox-fullscreen .tox-toolbar__primary,
.tox.tox-tinymce.tox-fullscreen .tox-menubar,
.tox.tox-tinymce.tox-fullscreen .tox-sidebar-wrap,
.tox.tox-tinymce.tox-fullscreen .tox-edit-area {
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ========================================
   File Preview Modal
   ======================================== */
.preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 20000;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.2s ease;
}

.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    flex-shrink: 0;
}

.preview-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
}

.preview-title i {
    color: var(--accent);
    flex-shrink: 0;
}

.preview-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-size {
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 400 !important;
    font-size: 12px !important;
}

.preview-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.preview-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.2s;
}

.preview-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.preview-body {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 0;
}

.preview-loading {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Text/Code preview */
.preview-code-wrap {
    width: 100%;
    height: 100%;
    max-width: 1000px;
    background: var(--bg-primary);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.preview-code-header {
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.preview-code-header i {
    color: var(--accent);
}

.preview-code-content {
    flex: 1;
    overflow: auto;
    padding: 0;
    margin: 0;
}

.preview-code-content pre {
    margin: 0;
    padding: 16px;
    font-family: 'Consolas', 'Courier New', 'Source Code Pro', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
    counter-reset: line;
}

.preview-code-content .line-numbers {
    counter-reset: line;
}

.preview-code-content .line-numbers .line::before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    width: 3.5em;
    margin-right: 16px;
    text-align: right;
    color: var(--text-tertiary);
    border-right: 1px solid var(--border);
    padding-right: 12px;
    user-select: none;
    -webkit-user-select: none;
}

/* Image preview */
.preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* PDF preview */
.preview-pdf {
    width: 100%;
    height: 100%;
    max-width: 1000px;
    border: none;
    border-radius: 8px;
    background: #fff;
}

/* Video/Audio preview */
.preview-media {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    outline: none;
}

/* Unsupported file */
.preview-unsupported {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    padding: 40px;
}

.preview-unsupported i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
    display: block;
}

.preview-unsupported .filename {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.preview-unsupported .fileinfo {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

/* ========================================
   Upload Panel
   ======================================== */
.upload-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 380px;
    max-height: 400px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.5s var(--ease-spring);
    overflow: hidden;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.upload-panel.minimized .upload-panel-body {
    display: none;
}

.upload-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 600;
}

.upload-panel-title i {
    margin-right: 8px;
    color: var(--accent);
}

.upload-panel-actions {
    display: flex;
    gap: 2px;
}

.upload-panel-btn {
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    color: var(--text-tertiary);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
}

.upload-panel-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}

.upload-panel-btn:active {
    transform: scale(0.9);
}

.upload-panel-body {
    overflow-y: auto;
    max-height: 300px;
    padding: 8px 0;
}

.upload-item {
    display: flex;
    align-items: center;
    padding: 10px 14px 10px 18px;
    gap: 12px;
}

.upload-item-cancel {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    color: var(--text-tertiary);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.15s ease;
}

.upload-item:hover .upload-item-cancel {
    opacity: 1;
}

.upload-item-cancel:hover {
    background: rgba(255, 59, 48, 0.1);
    color: var(--danger);
}

.upload-item-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--accent-light);
    color: var(--accent);
    flex-shrink: 0;
}

.upload-item-info {
    flex: 1;
    min-width: 0;
}

.upload-item-name {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-item-progress {
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.upload-item-progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.upload-item-progress-bar.complete {
    background: var(--success);
}

.upload-item-progress-bar.error {
    background: var(--danger);
}

.upload-item-status {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* ========================================
   Context Menu
   ======================================== */
.context-menu {
    position: fixed;
    z-index: 10000;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
    padding: 6px;
    min-width: 200px;
    animation: contextMenuIn 0.2s var(--ease-spring);
    transform-origin: top left;
}

@keyframes contextMenuIn {
    from { opacity: 0; transform: scale(0.9) translateY(-4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 13px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
    color: var(--text-primary);
}

.context-menu-item:hover {
    background: var(--accent);
    color: white;
}

.context-menu-item.danger:hover {
    background: var(--danger);
}

.context-menu-item i {
    width: 16px;
    text-align: center;
    font-size: 12px;
}

.context-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 8px;
}

#notesContextMenu {
    min-width: 120px;
}

/* ========================================
   Modal
   ======================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.modal-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
    width: 440px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: modalIn 0.45s var(--ease-spring);
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.88) translateY(16px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 12px;
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 700;
}

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

.modal-body {
    padding: 12px 24px;
    overflow-y: auto;
}

.modal-body p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.modal-body input[type="text"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    margin-top: 8px;
    transition: all var(--transition-fast);
}

.modal-body input[type="text"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px 20px;
}

/* ========================================
   Toast
   ======================================== */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 11000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 14px 20px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    font-size: 14px;
    font-weight: 500;
    animation: toastIn 0.5s var(--ease-spring);
    min-width: 280px;
    max-width: 400px;
}

.toast-message {
    flex: 1;
}

.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 4px;
    margin-left: 4px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.toast-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}

.toast.toast-out {
    animation: toastOut 0.3s ease forwards;
}

.toast-success i { color: var(--success); }
.toast-error i { color: var(--danger); }
.toast-warning i { color: var(--warning); }
.toast-info i { color: var(--info); }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
    to { opacity: 0; transform: translateX(40px); }
}

/* ========================================
   Mobile Header (hidden on desktop)
   ======================================== */
.mobile-header {
    display: none;
}

.sidebar-overlay {
    display: none;
}

.mobile-back-btn {
    display: none !important;
}

/* ========================================
   Responsive — Mobile (<= 768px)
   ======================================== */
@media (max-width: 768px) {

    /* ---- Mobile Header ---- */
    .mobile-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        background: var(--glass-bg-strong);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 150;
        flex-shrink: 0;
    }

    .mobile-menu-btn {
        width: 36px;
        height: 36px;
        background: none;
        border: none;
        cursor: pointer;
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
        flex-shrink: 0;
    }

    .mobile-menu-btn:hover {
        background: rgba(0, 0, 0, 0.05);
    }

    .mobile-header-title {
        flex: 1;
        font-size: 16px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    /* ---- App Container: vertical on mobile ---- */
    .app-container {
        flex-direction: column;
    }

    /* ---- Sidebar Overlay ---- */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 199;
        animation: fadeIn 0.2s ease;
    }

    .sidebar-overlay.show {
        display: block;
    }

    /* ---- Sidebar: off-canvas ---- */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 280px !important;
        height: 100vh;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.35s var(--ease-spring);
        border-radius: 0;
    }

    .sidebar.collapsed {
        width: 280px !important;
        transform: translateX(-100%);
    }

    .sidebar.collapsed .sidebar-title,
    .sidebar.collapsed .nav-text,
    .sidebar.collapsed .user-name,
    .sidebar.collapsed .logout-text,
    .sidebar.collapsed .theme-label {
        opacity: 1;
    }

    .sidebar.collapsed .sidebar-toggle,
    .sidebar.collapsed .logout-btn {
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Hide desktop sidebar toggle on mobile */
    .sidebar-toggle {
        display: none !important;
    }

    /* ---- Section Header: wrap to 2 rows ---- */
    .section-header {
        padding: 12px 16px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .breadcrumb {
        flex: 1 1 100%;
        font-size: 13px;
    }

    .breadcrumb-item {
        padding: 4px 6px;
    }

    .search-box {
        flex: 1 1 0;
        min-width: 0;
    }

    .search-input {
        width: 100%;
        padding: 8px 10px 8px 30px;
        font-size: 13px;
    }

    .search-input:focus {
        width: 100%;
    }

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

    /* Hide button text, keep icons only */
    .action-buttons .btn span {
        display: none;
    }

    .action-buttons .btn {
        padding: 9px 10px;
    }

    .action-buttons {
        gap: 4px;
    }

    /* ---- Drop Zone ---- */
    .drop-zone {
        padding: 0 12px 12px;
    }

    /* ---- File Grid ---- */
    .file-container.grid-view {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
    }

    .file-item {
        padding: 12px 8px;
    }

    .file-item .file-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 8px;
        font-size: 22px;
    }

    .file-item .file-name {
        font-size: 11px;
    }

    .file-item .file-meta {
        font-size: 10px;
    }

    /* Hover effects: disable on touch */
    .file-item:hover {
        transform: none;
        box-shadow: none;
    }

    .file-item:active {
        transform: scale(0.97);
    }

    /* Checkbox always visible on mobile (no hover on touch) */
    .file-item .file-item-checkbox {
        opacity: 0.5;
        transform: scale(1);
    }

    .file-item.selected .file-item-checkbox {
        opacity: 1;
    }

    /* ---- List View ---- */
    .file-container.list-view .file-item {
        padding: 10px 12px;
        gap: 10px;
    }

    .file-container.list-view .file-item .file-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .file-container.list-view .file-item .file-name {
        font-size: 13px;
    }

    /* Hide date column on mobile */
    .file-container.list-view .file-item .file-date {
        display: none;
    }

    .file-container.list-view .file-item .file-size {
        min-width: 50px;
        font-size: 11px;
    }

    /* ---- Batch Action Bar ---- */
    .batch-action-bar {
        width: calc(100% - 32px);
        left: 16px;
        transform: none;
        bottom: 16px;
        padding: 10px 14px;
        border-radius: var(--radius-lg);
    }

    @keyframes batchBarIn {
        from { opacity: 0; transform: translateY(20px) scale(0.95); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .batch-action-info {
        font-size: 13px;
    }

    /* ---- Notes Layout ---- */
    .notes-layout {
        flex-direction: column;
        position: relative;
    }

    .notes-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }

    /* Default mobile: show sidebar, hide editor */
    .notes-layout:not(.mobile-editing) .notes-editor {
        display: none;
    }

    .notes-layout:not(.mobile-editing) .notes-sidebar {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* When editing a note on mobile, hide sidebar, show editor full */
    .notes-layout.mobile-editing .notes-sidebar {
        display: none;
    }

    .notes-layout.mobile-editing .notes-editor {
        flex: 1;
    }

    .notes-sidebar-header {
        padding: 12px 16px;
    }

    .notes-sidebar-header h3 {
        font-size: 18px;
    }

    .notes-search {
        padding: 0 12px 10px;
    }

    .notes-list {
        flex: 1;
        overflow-y: auto;
        max-height: none;
        padding: 4px 8px;
    }

    /* Mobile back button */
    .mobile-back-btn {
        display: inline-flex !important;
        flex-shrink: 0;
    }

    .note-header {
        padding: 10px 12px;
        gap: 8px;
    }

    .note-title-input {
        font-size: 17px;
    }

    .note-actions .icon-btn {
        padding: 6px;
    }

    /* ---- TinyMCE on mobile ---- */
    .tinymce-wrapper .tox .tox-menubar {
        padding: 0 4px !important;
    }

    .tinymce-wrapper .tox .tox-toolbar__group {
        padding: 0 2px !important;
    }

    .tinymce-wrapper .tox .tox-tbtn {
        width: 28px !important;
        height: 28px !important;
    }

    .tinymce-wrapper .tox .tox-mbtn {
        padding: 2px 4px !important;
        font-size: 12px !important;
    }

    /* ---- Context Menu ---- */
    .context-menu {
        min-width: 160px;
        max-width: calc(100vw - 32px);
    }

    /* ---- Modal ---- */
    .modal-card {
        width: 95vw;
        max-width: 95vw;
        border-radius: var(--radius-lg);
    }

    .modal-header {
        padding: 16px 16px 10px;
    }

    .modal-body {
        padding: 10px 16px;
    }

    .modal-footer {
        padding: 12px 16px 16px;
    }

    /* ---- Toast: bottom center on mobile ---- */
    .toast-container {
        top: auto;
        bottom: 16px;
        right: 16px;
        left: 16px;
    }

    .toast {
        min-width: 0;
        max-width: 100%;
        font-size: 13px;
        padding: 12px 14px;
    }

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

    @keyframes toastOut {
        to { opacity: 0; transform: translateY(20px); }
    }

    /* ---- Upload Panel ---- */
    .upload-panel {
        width: calc(100% - 24px);
        right: 12px;
        bottom: 12px;
        max-height: 300px;
    }

    .upload-item-cancel {
        opacity: 1;
    }

    /* ---- Preview Modal ---- */
    .preview-header {
        padding: 10px 12px;
    }

    .preview-title {
        font-size: 13px;
        gap: 8px;
    }

    .preview-body {
        padding: 12px;
    }

    .preview-code-wrap {
        border-radius: 8px;
    }

    .preview-code-content pre {
        font-size: 11px;
        padding: 10px;
    }

    .preview-code-content .line-numbers .line::before {
        width: 2.5em;
        margin-right: 10px;
        padding-right: 8px;
        font-size: 11px;
    }

    /* ---- Login Card ---- */
    .login-card {
        width: calc(100vw - 40px);
        max-width: 380px;
        padding: 36px 24px 28px;
    }

    .login-title {
        font-size: 22px;
        margin-bottom: 24px;
    }

    /* ---- Empty State ---- */
    .empty-state {
        padding: 40px 16px;
    }

    .empty-state i {
        font-size: 40px;
    }

    .empty-state h3 {
        font-size: 16px;
    }

    /* ---- Breadcrumb Dropdown ---- */
    .breadcrumb-dropdown {
        max-width: calc(100vw - 32px);
    }
}

/* ========================================
   Selection Highlight
   ======================================== */
::selection {
    background: rgba(0, 113, 227, 0.2);
}

/* ========================================
   Loading Spinner
   ======================================== */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.loading-spinner::after {
    content: '';
    width: 28px;
    height: 28px;
    border: 2.5px solid rgba(0, 113, 227, 0.12);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   Move Modal folder tree
   ======================================== */
.folder-tree {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px;
    margin-top: 8px;
}

.folder-tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s var(--ease-spring);
}

.folder-tree-item:hover {
    background: rgba(0, 0, 0, 0.04);
    transform: translateX(2px);
}

.folder-tree-item.selected {
    background: var(--accent-light);
    color: var(--accent);
}

.folder-tree-item i {
    color: var(--accent);
}

/* ========================================
   Staggered File Item Entrance
   ======================================== */
.file-container .file-item {
    animation: fileItemIn 0.4s var(--ease-spring) both;
}

.file-container .file-item:nth-child(1)  { animation-delay: 0.02s; }
.file-container .file-item:nth-child(2)  { animation-delay: 0.04s; }
.file-container .file-item:nth-child(3)  { animation-delay: 0.06s; }
.file-container .file-item:nth-child(4)  { animation-delay: 0.08s; }
.file-container .file-item:nth-child(5)  { animation-delay: 0.10s; }
.file-container .file-item:nth-child(6)  { animation-delay: 0.12s; }
.file-container .file-item:nth-child(7)  { animation-delay: 0.14s; }
.file-container .file-item:nth-child(8)  { animation-delay: 0.16s; }
.file-container .file-item:nth-child(9)  { animation-delay: 0.18s; }
.file-container .file-item:nth-child(10) { animation-delay: 0.20s; }
.file-container .file-item:nth-child(n+11) { animation-delay: 0.22s; }

@keyframes fileItemIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ========================================
   Enhanced Focus Rings
   ======================================== */
.search-input:focus,
.notes-search input:focus,
.note-title-input:focus,
.modal-body input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ========================================
   Smooth Content Section Transitions
   ======================================== */
.content-section {
    animation: none;
}

.content-section.active {
    animation: sectionIn 0.4s var(--ease-spring) both;
}

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

/* ========================================
   Icon Button Micro-interactions
   ======================================== */
.icon-btn:active {
    transform: scale(0.88);
    transition-duration: 0.08s;
}

.logout-btn:active {
    transform: scale(0.9);
    transition-duration: 0.08s;
}

/* ========================================
   Sidebar Logo Gradient Animation
   ======================================== */
.sidebar-logo i {
    transition: transform 0.3s var(--ease-spring);
}

.sidebar-logo:hover i {
    transform: rotate(-10deg) scale(1.1);
}

/* ========================================
   Upload Progress Bar Glow
   ======================================== */
.upload-item-progress-bar {
    position: relative;
    background: linear-gradient(90deg, var(--accent), #5ac8fa);
    background-size: 200% 100%;
    animation: progressShimmer 2s linear infinite;
}

.upload-item-progress-bar.complete {
    background: var(--success);
    animation: none;
}

.upload-item-progress-bar.error {
    background: var(--danger);
    animation: none;
}

@keyframes progressShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========================================
   Notes Editor Smooth Transitions
   ======================================== */
.notes-editor-active {
    animation: editorIn 0.35s var(--ease-spring) both;
}

@keyframes editorIn {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ========================================
   Button Ripple Cursor Enhancement
   ======================================== */
.btn, .login-btn, .icon-btn, .nav-item, .file-item, .note-card, .context-menu-item, .folder-tree-item {
    -webkit-tap-highlight-color: transparent;
}

/* ========================================
   TinyMCE Editor Extra Polish
   ======================================== */
.tinymce-wrapper .tox .tox-toolbar__group:not(:last-of-type) {
    border-right: 1px solid var(--border) !important;
}

/* Fullscreen TinyMCE z-index fix */
.tox.tox-tinymce--fullscreen {
    z-index: 10001 !important;
}

/* TinyMCE dialogs z-index */
.tox.tox-tinymce-aux {
    z-index: 10002 !important;
}

/* Note action buttons in header */
.note-actions .icon-btn {
    font-size: 14px;
    transition: color 0.2s ease, transform 0.15s ease;
}

.note-actions .icon-btn:hover {
    color: var(--accent);
    transform: scale(1.1);
}

#exportWordBtn:hover { color: #2b5797 !important; }
#exportPdfBtn:hover { color: #e74c3c !important; }