* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    background: url('wallpaer 3D.png') center/cover no-repeat, linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    height: 100vh;
    overflow: hidden;
}

/* Desktop */
.desktop {
    width: 100vw;
    height: 100vh;
    position: relative;
}

/* Taskbar */
.taskbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(30px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: normal;
    font-size: 12px;
    color: #333;
}

.user-profile .material-symbols-outlined {
    font-size: 12px;
    vertical-align: middle;
}

.user-profile:hover {
    background: none;
    cursor: default;
}

.avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: normal;
    font-size: 14px;
}

.taskbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #333;
}


.time {
    font-weight: normal;
    color: #333;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.time:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.time:active {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(0);
}

.date {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.date:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.date:active {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(0);
}

/* Date/Time Info Card */
.datetime-info-card {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Avatar Creator Styles */
.avatar-creator {
    display: flex;
    gap: 20px;
    padding: 20px;
    height: 500px;
}

.avatar-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.avatar-canvas {
    width: 280px;
    height: 320px;
    background: white;
    border-radius: 20px;
    border: 2px solid #ddd;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* SVG avatar styles - clean and scalable */

.avatar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 15px;
}

.avatar-btn {
    padding: 8px 16px;
    background: #f0f0f0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    font-weight: normal;
    color: #666;
    font-family: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.avatar-btn:hover {
    background: #e8e8e8;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.avatar-btn:active {
    background: #e0e0e0;
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.avatar-controls {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;
}

.control-section {
    margin-bottom: 20px;
}

.control-section h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #333;
    font-weight: normal;
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.option-item {
    padding: 10px;
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid transparent;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    font-weight: normal;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.option-item:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.option-item.active {
    border-color: #667eea;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* Avatar window specific sizing */
.avatar-window {
    width: 700px;
    min-height: 600px;
}

.avatar-window .window-content {
    padding: 0;
}

.mood-window .window-content {
    padding: 0 24px 24px 24px;
}

/* Desktop Icons */
.desktop-icons {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 30px;
    z-index: 10;
}

.desktop-icons-left {
    top: 80px;
    left: 40px;
}

.desktop-icons-right {
    top: 80px;
    right: 40px;
}

.icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    position: relative;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}


.icon-image {
    font-size: 32px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(35px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.2s ease;
}

.icon-image img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.icon span {
    font-size: 12px;
    font-weight: normal;
    color: white;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.3);
}

/* Windows */
.window {
    position: absolute;
    background: #ffffff !important;
    backdrop-filter: none !important;
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: none;
    min-width: 400px;
    max-width: 800px;
    max-height: 80vh;
    overflow: hidden;
    transition: all 0.3s ease;
}

.window.active {
    display: block;
    animation: windowOpen 0.3s ease;
}

.window.focused {
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

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

.window-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    background: #f8f9fa !important;
}

.window-title {
    font-weight: normal;
    color: #333;
    font-size: 14px;
}

.window-controls {
    display: flex;
    gap: 8px;
}

.window-controls span {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.2s ease;
}

.minimize {
    background: #ffbd2e;
    color: #995700;
}

.close {
    background: #ff5f57;
    color: #bf0711;
}

.window-controls span:hover {
    transform: scale(1.1);
}

.window-content {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(80vh - 60px);
}

/* Special handling for note editor windows */
.note-editor-window .window-content {
    padding: 0;
    overflow: hidden;
    max-height: none;
    height: calc(100% - 50px); /* Subtract header height */
    display: flex;
    flex-direction: column;
}

.note-editor-window {
    min-height: 400px;
    height: 500px;
}

/* Drawing Notebook Window */
.about-window {
    top: max(60px, 15%);
    left: 15%;
    width: 800px;
    background: #f5f3f0;
    backdrop-filter: none;
}

.notebook-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.notebook-tools {
    padding: 15px 20px;
    border-bottom: 1px solid #e8e5e1;
    background: #faf9f7;
    display: flex;
    gap: 10px;
}

.save-note-btn, .delete-note-btn {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #333;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
}

.save-note-btn:hover, .delete-note-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.delete-note-btn {
    background: rgba(255, 0, 0, 0.1);
    border-color: rgba(255, 0, 0, 0.2);
    color: #d63031;
}

.delete-note-btn:hover {
    background: rgba(255, 0, 0, 0.2);
}

/* Context Menu */
.context-menu {
    position: fixed;
    background: #f5f3f0;
    border: 1px solid #e8e5e1;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    min-width: 160px;
    z-index: 99999;
    display: none;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    color: #333;
}

.context-menu-item:hover {
    background: rgba(255, 255, 255, 0.5);
}

.context-menu-separator {
    height: 1px;
    background: #e8e5e1;
    margin: 4px 0;
}

.menu-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
}

.menu-icon[style*="background"] {
    border: 1px solid #ddd;
}

/* Note Formatting Toolbar */
.note-formatting-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 16px;
    background: #f8f6f3;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0px;
}

.toolbar-btn.color-btn {
    margin-right: -2px;
}


.toolbar-divider {
    width: 1px;
    height: 20px;
    background: #d0ccc7;
    margin: 0 8px;
}


.toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.toolbar-btn:hover {
    background: #e8e5e1;
}

.toolbar-btn.active {
    background: #d4c5b9;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toolbar-icon {
    font-weight: bold;
    font-size: 14px;
    color: #333;
}

.color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.note-editor-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.note-modal-editor {
    flex: 1;
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    padding: 16px 15px 16px 25px;
}

.sticky-notes-section {
    padding: 20px;
    background: #faf9f7;
    flex: 1;
    overflow-y: auto;
}

.sticky-notes-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sticky-notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.pinned-notes-section,
.regular-notes-section {
    margin-bottom: 10px;
}

.section-title {
    font-size: 14px;
    font-weight: normal;
    color: #666;
    margin: 15px 0 10px 0;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Date section styling for organized notes */
.date-notes-section {
    margin-top: 20px;
}

.date-notes-section .section-title {
    font-size: 14px;
    font-weight: normal;
    color: #666;
    margin: 15px 0 10px 0;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sticky-note {
    background: #fffbf0;
    border: 1px solid #f0e68c;
    border-radius: 8px;
    padding: 10px;
    height: 100px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sticky-note:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border-color: #ddd700;
}

.pin-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 12px;
    opacity: 0.8;
}

.sticky-note.pinned {
    background: #fffbf0;
    border: 1px solid #f0e68c;
    box-shadow: 0 3px 6px rgba(240, 230, 140, 0.15);
}

.sticky-note.pinned:hover {
    border-color: #ddd700;
    box-shadow: 0 5px 10px rgba(240, 230, 140, 0.25);
}


.sticky-note-title {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    line-height: 1.3;
    height: 16px;
    margin-bottom: 4px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    max-width: calc(100% - 28px);
    clear: both;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sticky-note-preview {
    font-size: 11px;
    line-height: 1.3;
    color: #888;
    height: 28px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    margin-bottom: 4px;
    margin-top: 2px;
    width: 100%;
    clear: both;
}


.sticky-note-date {
    font-size: 9px;
    color: #888;
    font-style: normal;
    text-align: left;
    position: absolute;
    bottom: 8px;
    left: 10px;
}

.sticky-note-pin {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
}

.sticky-note-icon {
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sticky-note-icon:hover {
    background: rgba(0, 0, 0, 0.1);
}

.sticky-note-icon .material-symbols-outlined {
    font-size: 16px;
    color: #666;
    transition: color 0.2s ease;
}

.sticky-note-icon .material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1;
    color: #ffffff;
}

.sticky-note.pinned .sticky-note-icon .material-symbols-outlined {
    color: #000000;
}

.sticky-note-icon.pinned-icon {
    background: none;
    box-shadow: none;
}


.sticky-note-menu {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.2s ease;
    line-height: 9px;
    height: 9px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sticky-note-menu:hover {
    background: rgba(0, 0, 0, 0.1);
}

.menu-dots {
    font-size: 14px;
    color: #666;
    font-weight: bold;
    line-height: 1;
}

.sticky-note-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding-right: 10px; /* Space for right-positioned pin icon */
}



/* Note window header buttons */
.note-editor-window .window-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.note-editor-window .modal-pin-btn,
.note-editor-window .modal-delete-btn {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 4px;
}

.note-editor-window .modal-pin-btn .material-symbols-outlined {
    font-size: 14px;
}

.note-editor-window .modal-pin-btn {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.note-editor-window .modal-pin-btn:hover {
    background: rgba(107, 114, 128, 0.2);
    transform: translateY(-1px);
}

.note-editor-window .modal-delete-btn {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.note-editor-window .modal-delete-btn:hover {
    background: rgba(107, 114, 128, 0.2);
    transform: translateY(-1px);
}


/* Actions Container */
.actions-container {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* Add New Note Sticky */
.add-note-sticky {
    background: rgba(248, 249, 250, 0.3);
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 10px;
    height: 100px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    width: 120px;
}

.add-note-sticky:hover {
    border-color: #9ca3af;
    background: rgba(248, 249, 250, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(107, 114, 128, 0.1);
}

.add-note-icon {
    font-size: 24px;
    margin-bottom: 5px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-note-icon .material-symbols-outlined {
    font-size: 24px;
    color: #6b7280;
}

.add-note-text {
    font-size: 11px;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
}

.template-note-sticky {
    background: rgba(255, 249, 240, 0.4);
    border: 2px dashed #fed7aa;
    border-radius: 8px;
    padding: 10px;
    height: 100px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ea580c;
    width: 120px;
    margin-left: 12px;
}

.template-note-sticky:hover {
    border-color: #fb923c;
    background: rgba(255, 249, 240, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(234, 88, 12, 0.1);
}

.template-note-icon {
    font-size: 24px;
    margin-bottom: 5px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-note-text {
    font-size: 11px;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
}

/* Sticker drag and drop styling */
.sticker-item {
    cursor: grab;
    transition: opacity 0.2s ease;
}

.sticker-item:active {
    cursor: grabbing;
}

.sticker-item.dragging {
    opacity: 0.5;
}

.note-modal-editor.drag-over {
    background-color: #f0f8ff !important;
    border: 2px dashed #4a90e2 !important;
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
}

.note-modal-editor img {
    max-width: 80px;
    height: auto;
    border-radius: 4px;
    margin: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}


/* Note Modal */
/* Note Editor Window - Now styled as a regular window */
.note-editor-window {
    width: 600px;
    height: 500px;
    min-width: 400px;
    min-height: 300px;
    max-width: 90vw;
    max-height: 90vh;
    background: #f5f3f0 !important; /* Solid white background like notebook */
    backdrop-filter: none !important;
}

.note-editor-window.active {
    display: block !important;
}

.note-editor-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.note-editor-body {
    flex: 1;
    padding: 0px 20px 16px 20px;
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Footer removed - buttons moved to header */

/* Old modal styles removed - now uses window structure */

.note-modal-editor {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 200px;
    background: #fffef5 !important;
    background-image: 
        /* Red margin line */
        linear-gradient(90deg, transparent 24px, #ff6b85 25px, #ff6b85 26px, transparent 27px),
        /* Blue horizontal lines */
        linear-gradient(180deg, transparent 0px, transparent 23px, #a8c8ec 24px, transparent 25px),
        /* Subtle paper fiber texture */
        radial-gradient(circle at 15% 25%, rgba(255, 250, 230, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(255, 250, 230, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 45% 60%, rgba(255, 250, 230, 0.2) 0%, transparent 30%),
        radial-gradient(circle at 70% 30%, rgba(255, 250, 230, 0.25) 0%, transparent 35%),
        /* Very fine paper grain */
        repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255, 248, 220, 0.08) 1px, rgba(255, 248, 220, 0.08) 2px),
        repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255, 248, 220, 0.06) 1px, rgba(255, 248, 220, 0.06) 2px);
    background-size: 100% 100%, 100% 24px, 180px 180px, 220px 220px, 160px 160px, 200px 200px, 3px 3px, 3px 3px;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
    border: 1px solid #e6d875;
    border-radius: 8px;
    outline: none;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #2c2c2c;
    line-height: 24px;
    padding: 16px 15px 16px 25px;
    overflow-y: auto;
    resize: none;
    box-sizing: border-box;
    box-shadow: 
        inset 0 1px 3px rgba(0,0,0,0.05),
        inset 2px 0 4px rgba(255, 248, 220, 0.2);
}

/* Ensure formatting elements display properly */
.note-modal-editor strong,
.note-modal-editor b,
.note-modal-editor div strong,
.note-modal-editor div b {
    font-weight: 900 !important;
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.1) !important;
}

.note-modal-editor em {
    font-style: italic;
}

.note-modal-editor u {
    text-decoration: underline;
}

.note-modal-editor ul {
    list-style-type: disc;
    margin-left: 20px;
    padding-left: 0;
}

.note-modal-editor ol {
    list-style-type: decimal;
    margin-left: 20px;
    padding-left: 0;
}

.note-modal-editor li {
    margin: 5px 0;
}

.note-modal-editor:empty::before {
    content: attr(data-placeholder);
    color: #a0a0a0;
    pointer-events: none;
}

/* note-modal-footer replaced by note-editor-footer */

/* Drag and Drop Styling */
.sticky-note.dragging {
    transform: rotate(5deg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}


.sticky-note[draggable="true"] {
    cursor: grab;
}

.sticky-note[draggable="true"]:active {
    cursor: grabbing;
}

.modal-pin-btn, .modal-delete-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
}

.modal-pin-btn:hover,
.modal-delete-btn:hover {
    background: rgba(107, 114, 128, 0.2);
    transform: translateY(-1px);
}

.modal-pin-btn.pinned {
    background: rgba(107, 114, 128, 0.2);
}

/* Auto-save indicator */
.auto-save-indicator {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 12px;
    font-weight: 500;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 4px 8px;
    border-radius: 12px;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    white-space: nowrap;
    z-index: 1000;
}

/* Delete confirmation popup */
.delete-confirmation-popup {
    position: absolute;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    animation: popupSlideIn 0.2s ease-out;
    min-width: 200px;
}

.delete-popup-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.delete-message {
    font-size: 13px;
    font-weight: normal;
    color: #374151;
    text-align: center;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    width: 100%;
}

.delete-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.delete-confirm-btn, .delete-cancel-btn {
    padding: 6px 12px;
    min-width: 60px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.delete-confirm-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.delete-confirm-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    transform: translateY(-1px);
}

.delete-cancel-btn {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.delete-cancel-btn:hover {
    background: rgba(107, 114, 128, 0.2);
    transform: translateY(-1px);
}

/* Pin icon in window header */
.note-pin-icon {
    margin-left: 8px;
    font-size: 12px;
}

/* Fix close button in note windows */
.note-editor-window .close {
    pointer-events: auto !important;
    z-index: 10000 !important;
    position: relative !important;
    cursor: pointer !important;
    user-select: none;
}

.notebook-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.canvas-container {
    position: relative;
    flex: 1;
    padding: 20px;
}

.notebook-editor {
    position: absolute;
    top: 20px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    background: #faf9f7;
    border: 1px solid #e8e5e1;
    border-radius: 6px;
    outline: none;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    padding: 15px;
    overflow-y: auto;
}

.notebook-editor:empty::before {
    content: attr(data-placeholder);
    color: #999;
    font-style: italic;
    pointer-events: none;
}

.profile-section {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
    align-items: flex-start;
}

.profile-photo img {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
}

.profile-info {
    flex: 1;
}

.profile-info h2 {
    font-size: 28px;
    font-weight: normal;
    color: #333;
    margin-bottom: 8px;
}

.role {
    font-size: 16px;
    color: #667eea;
    font-weight: normal;
    margin-bottom: 16px;
}

.description {
    color: #666;
    line-height: 1.6;
    font-size: 15px;
}

.experience-section h3 {
    font-size: 20px;
    font-weight: normal;
    color: #333;
    margin-bottom: 20px;
}

.experience-item {
    margin-bottom: 20px;
}

.experience-item h4 {
    font-size: 16px;
    font-weight: normal;
    color: #333;
    margin-bottom: 4px;
}

.company {
    font-size: 14px;
    color: #667eea;
    font-weight: normal;
    margin-bottom: 8px;
}

.experience-item p:last-child {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

/* Projects Window */
.projects-window {
    top: max(60px, 12%);
    left: 20%;
    width: 650px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.project-card {
    padding: 20px;
    background: #ffffff !important;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    cursor: pointer;
}

.project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.project-image {
    font-size: 32px;
    margin-bottom: 12px;
}

.project-card h3 {
    font-size: 16px;
    font-weight: normal;
    color: #333;
    margin-bottom: 8px;
}

.project-card p {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.project-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.project-tags span {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: normal;
}

/* Skills Window */
.skills-window {
    top: max(80px, 20%);
    left: 20%;
    width: 800px;
    background: #f5f3f0;
    backdrop-filter: none;
}

/* Sticker Container Layout */
.sticker-container {
    display: flex;
    height: 100%;
}

.sticker-sidebar {
    width: 200px;
    background: #f8f9fa !important;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: none !important;
    flex-shrink: 0;
}

.sticker-main {
    flex: 1;
    overflow-y: auto;
}

.sticker-search {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

#sticker-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #ffffff !important;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    color: #333;
    outline: none;
    transition: all 0.2s ease;
}

#sticker-search:focus {
    border-color: #d4cfc9;
    box-shadow: 0 0 0 3px rgba(212, 207, 201, 0.1);
}

#sticker-search::placeholder {
    color: #999;
}

/* Category Menu */
.category-menu {
    padding: 10px 0;
}

.category-item {
    padding: 10px 15px;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.category-item:hover {
    background: #ffffff !important;
    color: #333;
}

.category-item.active {
    background: #ffffff !important;
    color: #333;
    border-left-color: #333;
    font-weight: normal;
}

.sticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    padding: 15px;
}

.sticker-item {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff !important;
    border-radius: 12px;
    padding: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.sticker-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    background: #ffffff !important;
}

.sticker-item img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    border-radius: 6px;
}

/* Sticker Window */
.sticker-preview-window {
    position: fixed;
    width: 450px;
    height: 500px;
    background: #f5f3f0 !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    resize: both;
    min-width: 300px;
    min-height: 350px;
}

.sticker-preview-window .window-header {
    background: #f8f9fa !important;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    cursor: grab;
}

.sticker-preview-window .window-title {
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: #333;
    font-weight: normal;
}

.sticker-preview-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    overflow: auto;
}

.sticker-preview-content img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Sticker window dragging state */
.sticker-preview-window.dragging {
    transition: none !important;
    user-select: none;
}

.sticker-preview-window.dragging .window-header {
    cursor: grabbing !important;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Contact Window */
.contact-window {
    top: max(60px, 15%);
    right: 25%;
    width: 500px;
}

.contact-intro {
    color: #666;
    line-height: 1.6;
    margin-bottom: 24px;
    font-size: 15px;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #ffffff !important;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    text-decoration: none;
    transition: all 0.2s ease;
}

.contact-method:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.contact-icon {
    font-size: 20px;
}

.contact-info h4 {
    font-size: 14px;
    font-weight: normal;
    color: #333;
    margin-bottom: 2px;
}

.contact-info p {
    font-size: 13px;
    color: #667eea;
}

.contact-form {
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.contact-form h4 {
    font-size: 16px;
    font-weight: normal;
    color: #333;
    margin-bottom: 16px;
}

.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-form input,
.contact-form textarea {
    padding: 12px 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.contact-form button {
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.2s ease;
}

.contact-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .desktop-icons-left {
        top: 80px;
        left: 20px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }
    
    .desktop-icons-right {
        top: 80px;
        right: 20px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }
    
    .icon {
        width: 70px;
        padding: 8px;
    }
    
    .icon-image {
        font-size: 24px;
    }
    
    .icon span {
        font-size: 11px;
        color: white;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.3);
    }
    
    .window {
        width: 90vw !important;
        max-width: none;
        left: 5vw !important;
        right: auto !important;
        transform: none !important;
    }
    
    .profile-section {
        flex-direction: column;
        text-align: center;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .taskbar {
        padding: 0 16px;
    }
    
    .user-profile {
        gap: 8px;
    }
    
    .avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* Clock Window */
.clock-window {
    top: 45px;
    right: 20px;
    width: 320px;
}

.clock-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.analog-clock {
    width: 200px;
    height: 200px;
    position: relative;
}

.clock-face {
    width: 100%;
    height: 100%;
    border: 3px solid #333;
    border-radius: 50%;
    position: relative;
    background: #ffffff !important;
}

.clock-face::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    width: 2px;
    height: 15px;
    background: #333;
    transform: translateX(-50%);
}

.clock-face::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 2px;
    height: 15px;
    background: #333;
    transform: translateX(-50%);
}

.hour-hand, .minute-hand, .second-hand {
    position: absolute;
    background: #333;
    transform-origin: bottom center;
    left: 50%;
}

.hour-hand {
    width: 4px;
    height: 50px;
    top: 50px;
    margin-left: -2px;
    border-radius: 2px;
}

.minute-hand {
    width: 3px;
    height: 70px;
    top: 30px;
    margin-left: -1.5px;
    border-radius: 1.5px;
}

.second-hand {
    width: 1px;
    height: 80px;
    top: 20px;
    margin-left: -0.5px;
    background: #ff5f57;
}

.center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #333;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.digital-time {
    text-align: center;
}

.digital-clock {
    font-size: 28px;
    font-weight: normal;
    color: #333;
    margin-bottom: 8px;
}

.timezone {
    font-size: 14px;
    color: #666;
}

/* Calendar Window */
.calendar-window {
    top: 45px;
    right: 80px;
    width: 280px;
}

.calendar-widget {
    padding: 8px 16px 16px 16px;
}

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

.prev-month, .next-month {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #333;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    font-weight: normal;
    font-size: 14px;
    transition: all 0.2s ease;
}

.prev-month:hover, .next-month:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

.month-year {
    font-size: 14px;
    font-weight: normal;
    color: #333;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.month-year:hover {
    background: rgba(255, 255, 255, 0.3);
}

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

.day-header {
    padding: 4px;
    text-align: center;
    font-size: 13px;
    font-weight: normal;
    color: #666;
    margin-bottom: 6px;
}

.calendar-days {
    display: contents;
}

.calendar-day {
    padding: 8px 4px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 13px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-weight: normal;
}

.calendar-day:hover {
    background: rgba(255, 255, 255, 0.3);
}

.calendar-day.today {
    background: #000 !important;
    color: #fff !important;
    font-weight: normal;
    border: none !important;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    min-height: auto !important;
}

.calendar-day.other-month {
    color: rgba(51, 51, 51, 0.3);
    font-weight: 400;
}

.calendar-day.selected {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: #333;
    font-weight: normal;
}

/* Weekend styling */
.calendar-day:nth-child(7n), .calendar-day:nth-child(7n+1) {
    background: rgba(255, 255, 255, 0.05);
}

.calendar-day:nth-child(7n):hover, .calendar-day:nth-child(7n+1):hover {
    background: rgba(255, 255, 255, 0.25);
}


/* Window dragging cursor */
.window.dragging {
    cursor: move;
}

/* Subtle animations */
.window {
    will-change: transform;
}

.icon {
    will-change: transform;
}

.icon.dragging {
    cursor: grabbing;
    transform: scale(1.1);
    z-index: 1000;
    opacity: 0.9;
}

.icon.dragging .icon-image {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(40px);
    transform: scale(1.1);
}

.icon {
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.icon:hover:not(.dragging) {
    cursor: grab;
}

.icon:hover:not(.dragging) .icon-image {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(40px);
    transform: scale(1.05);
}

.icon:hover:not(.dragging) .icon-image img {
    transform: scale(1.1);
}

/* Window Resize Handles */
.resize-handle {
    position: absolute;
    z-index: 1000;
}

.resize-handle-n {
    top: 0;
    left: 10px;
    right: 10px;
    height: 4px;
    cursor: ns-resize;
}

.resize-handle-s {
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 4px;
    cursor: ns-resize;
}

.resize-handle-e {
    top: 10px;
    right: 0;
    bottom: 10px;
    width: 4px;
    cursor: ew-resize;
}

.resize-handle-w {
    top: 10px;
    left: 0;
    bottom: 10px;
    width: 4px;
    cursor: ew-resize;
}

.resize-handle-ne {
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    cursor: nesw-resize;
}

.resize-handle-nw {
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    cursor: nwse-resize;
}

.resize-handle-se {
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    cursor: nwse-resize;
}

.resize-handle-sw {
    bottom: 0;
    left: 0;
    width: 10px;
    height: 10px;
    cursor: nesw-resize;
}

/* Resize handles are invisible by default - no hover states */

/* Disable text selection during resize */
.resizing,
.resizing * {
    user-select: none !important;
    pointer-events: none !important;
}

.resizing .resize-handle {
    pointer-events: auto !important;
}

/* Modal resize handles */
/* Old modal dragging styles removed - now uses window system */

/* Window dragging */
.window-header {
    cursor: default;
    user-select: none;
}

.window-header:active {
    cursor: default;
}

.window.dragging {
    transition: none !important;
    user-select: none;
}

.window-header {
    cursor: grab;
}

.window.dragging .window-header {
    cursor: grabbing !important;
}

/* Camera Interface Styles */
.camera-content {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, 
        rgba(255, 182, 193, 0.6) 0%,    /* Light pink - more visible */
        rgba(173, 216, 230, 0.6) 25%,   /* Light blue - more visible */
        rgba(255, 218, 185, 0.6) 50%,   /* Peach - more visible */
        rgba(221, 160, 221, 0.6) 75%,   /* Plum - more visible */
        rgba(240, 248, 255, 0.6) 100%   /* Alice blue - more visible */
    );
    border-radius: 12px;
    position: relative;
    backdrop-filter: blur(20px);
}

.camera-interface {
    display: flex;
    flex-direction: column;
    gap: 30px;
    height: 100%;
}

.camera-preview {
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 3/2.5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.camera-preview.camera-active {
    background: transparent;
}

/* Cute decorative elements for camera */
.camera-decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* Love sticker in top left */
.love-sticker {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 80px;
    height: 80px;
    animation: loveSticker 3s ease-in-out infinite;
}

.love-sticker img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes loveSticker {
    0%, 100% {
        transform: scale(1) rotate(-5deg);
    }
    50% {
        transform: scale(1.1) rotate(5deg);
    }
}


/* Hide decorations when camera is not active */
.camera-preview:not(.camera-active) .camera-decorations {
    display: none;
}

/* Photo Large View Modal */
.photo-large-view-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.photo-large-view-modal.show {
    opacity: 1;
}

.photo-large-view-modal.hiding {
    opacity: 0;
}

.large-view-overlay {
    width: 100%;
    height: 100%;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.large-view-container {
    max-width: 90vw;
    max-height: 90vh;
    background: #f5f3f0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.large-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.photo-info {
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: #333;
    font-weight: normal;
}

.large-view-close {
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.large-view-close:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

.large-view-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 0;
}

.large-view-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.large-view-actions {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    justify-content: center;
}

.action-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 6px;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.download-btn {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.download-btn:hover {
    background: rgba(107, 114, 128, 0.2);
    transform: translateY(-1px);
}

.delete-btn {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.delete-btn:hover {
    background: rgba(107, 114, 128, 0.2);
    transform: translateY(-1px);
}

#camera-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.camera-overlay-controls {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.camera-shutter-btn {
    pointer-events: all;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.camera-shutter-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.shutter-circle {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
}

.camera-shutter-btn:hover:not(:disabled) .shutter-circle {
    border-color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.camera-shutter-btn:active:not(:disabled) .shutter-circle {
    transform: scale(0.95);
}

.shutter-inner {
    width: 44px;
    height: 44px;
    background: #ffffff !important;
    border-radius: 50%;
    transition: all 0.1s ease;
}

.camera-shutter-btn:active:not(:disabled) .shutter-inner {
    background: rgba(255, 255, 255, 1);
    transform: scale(0.9);
}

/* Camera overlay styles removed */

.camera-controls {
    display: flex;
    justify-content: center;
    align-items: center;
}

.controls-row {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    justify-content: space-between;
}

.camera-control-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.filter-controls label {
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    color: #333;
    font-weight: normal;
}

.filter-dropdown {
    padding: 8px 30px 8px 12px;
    border: 1px solid rgba(255, 182, 193, 0.5);
    border-radius: 6px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 182, 193, 0.2) 50%,
        rgba(173, 216, 230, 0.2) 100%
    ), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: left top, right 8px center;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, 16px 16px;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    -webkit-appearance: none;
    appearance: none;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    min-width: 120px;
}

.filter-dropdown:hover {
    border-color: rgba(255, 182, 193, 0.7);
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 182, 193, 0.3) 50%,
        rgba(173, 216, 230, 0.3) 100%
    );
}

.filter-dropdown:focus {
    outline: none;
    border-color: rgba(255, 182, 193, 0.8);
    box-shadow: 0 0 0 2px rgba(255, 182, 193, 0.2);
}

.camera-btn {
    padding: 12px 20px;
    border: 1px solid rgba(255, 182, 193, 0.5);
    border-radius: 8px;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 182, 193, 0.3) 50%,    /* More visible pink tint */
        rgba(173, 216, 230, 0.3) 100%    /* More visible blue tint */
    );
    color: #333;
    backdrop-filter: blur(10px);
}

.camera-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 182, 193, 0.2) 50%,    /* More pink on hover */
        rgba(173, 216, 230, 0.2) 100%    /* More blue on hover */
    );
    border-color: rgba(255, 182, 193, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.2);
}

.camera-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f1f3f4;
    color: #999;
}

.photo-gallery {
    flex: 1;
    min-height: 0;
}

.photo-gallery h4 {
    margin: 0 0 12px 0;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: #333;
}

.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    height: 100%;
    overflow-y: auto;
    padding: 12px;
    background: linear-gradient(45deg, 
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 182, 193, 0.4) 50%,    /* More visible pink tint */
        rgba(173, 216, 230, 0.4) 100%    /* More visible blue tint */
    );
    border-radius: 8px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 182, 193, 0.3);
}

.no-photos {
    grid-column: 1 / -1;
    text-align: center;
    color: #666;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    padding: 40px;
}

.no-photos-sticker {
    width: 80px;
    height: 80px;
    object-fit: contain;
    opacity: 0.7;
    margin-top: 10px;
}

.photo-item {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.5);
}

.photo-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.photo-item {
    position: relative;
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px;
}

.photo-item:hover .photo-overlay {
    opacity: 1;
}

.delete-photo {
    background: #FF3B30;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    align-self: flex-end;
    transition: all 0.2s ease;
}

.delete-photo:hover {
    background: #D70015;
    transform: scale(1.1);
}

.photo-timestamp {
    color: white;
    font-size: 10px;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    text-align: center;
    opacity: 0.9;
}

/* Drag and drop styles removed */





/* Popup rename field styling */
.rename-popup {
    position: fixed;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    min-width: 200px;
    animation: popupFadeIn 0.2s ease;
}

.rename-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid rgba(107, 114, 128, 0.3);
    border-radius: 4px;
    background: #ffffff !important;
    color: #374151;
    font-size: 12px;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    font-weight: normal;
    outline: none;
    transition: all 0.2s ease;
}

.rename-input:focus {
    border-color: #6b7280;
    box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.2);
    background: rgba(255, 255, 255, 1);
}

.rename-actions {
    display: flex;
    gap: 8px;
}

.rename-save-btn,
.rename-cancel-btn {
    padding: 6px 12px;
    min-width: 50px;
    height: auto;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: normal;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    transition: all 0.2s ease;
    white-space: nowrap;
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.rename-save-btn:hover,
.rename-cancel-btn:hover {
    background: rgba(107, 114, 128, 0.2);
    transform: translateY(-1px);
}

/* Popup delete confirmation styling */


.delete-popup {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    min-width: 240px;
    max-width: 300px;
    animation: popupFadeIn 0.2s ease;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

.delete-warning-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.warning-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.warning-text {
    flex: 1;
}

.warning-title {
    font-size: 13px;
    font-weight: normal;
    color: #dc2626;
    margin-bottom: 2px;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
}

.warning-subtitle {
    font-size: 11px;
    color: #6b7280;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
}

.delete-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.delete-confirm-btn,
.delete-cancel-btn {
    padding: 6px 12px;
    min-width: 50px;
    height: auto;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: normal;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.delete-confirm-btn:hover,
.delete-cancel-btn:hover {
    background: rgba(107, 114, 128, 0.2);
    transform: translateY(-1px);
}

/* Remove note popup */
.remove-note-popup {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    min-width: 240px;
    max-width: 300px;
    animation: popupFadeIn 0.2s ease;
}

.remove-note-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.remove-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #059669;
}

.remove-text {
    flex: 1;
}

.remove-title {
    font-size: 13px;
    font-weight: normal;
    color: #059669;
    margin-bottom: 2px;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
}

.remove-subtitle {
    font-size: 11px;
    color: #6b7280;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
}

.remove-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.remove-confirm-btn,
.remove-cancel-btn {
    padding: 6px 12px;
    min-width: 50px;
    height: auto;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: normal;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.remove-confirm-btn:hover,
.remove-cancel-btn:hover {
    background: rgba(107, 114, 128, 0.2);
    transform: translateY(-1px);
}

/* Popup animations */
@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes windowHighlight {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px 5px rgba(59, 130, 246, 0.3);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
        transform: scale(1);
    }
}

@keyframes windowShake {
    0%, 100% { 
        transform: translateX(0); 
    }
    10%, 30%, 50%, 70%, 90% { 
        transform: translateX(-2px); 
    }
    20%, 40%, 60%, 80% { 
        transform: translateX(2px); 
    }
}


.note-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 68, 68, 0.8);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
}


/* Five in a Row Game Styles */
.game-container {
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    height: 100%;
    max-height: 450px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(240,245,250,0.05));
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    overflow: hidden;
    position: relative;
}

.game-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 600px;
    padding: 15px 20px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(15px);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
}

.player-turn {
    font-size: 18px;
    font-weight: normal;
    color: #333;
}

.game-stats {
    display: flex;
    align-items: center;
    gap: 20px;
}

.score {
    display: flex;
    gap: 15px;
    font-size: 14px;
    font-weight: normal;
    color: #555;
}

.game-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, #ffa726 0%, #ff8a65 100%);
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 167, 38, 0.4);
    margin-top: auto;
    align-self: center;
    text-transform: none;
    letter-spacing: 1px;
}

.game-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 167, 38, 0.6);
    background: linear-gradient(135deg, #ff9800 0%, #ff7043 100%);
}

.game-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(255, 167, 38, 0.4);
}

.game-board {
    display: grid;
    grid-template-columns: repeat(8, 28px);
    grid-template-rows: repeat(8, 28px);
    gap: 1px;
    background: rgba(139, 69, 19, 0.2);
    padding: 8px;
    border-radius: 6px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(139, 69, 19, 0.3);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
}

.game-cell {
    width: 28px;
    height: 28px;
    background: rgba(222, 184, 135, 0.8);
    border: 1px solid rgba(139, 69, 19, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s ease;
    backdrop-filter: blur(5px);
    position: relative;
}

.game-cell:hover {
    background: rgba(222, 184, 135, 0.9);
    transform: scale(1.03);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.game-cell.occupied {
    cursor: default;
}

.game-cell.occupied:hover {
    transform: none;
    background: rgba(222, 184, 135, 0.8);
}

.game-cell.player {
    color: #2c3e50;
}

.game-cell.player::after {
    content: '✕';
    color: #2c3e50;
    font-size: 16px;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.game-cell.ai {
    color: #e74c3c;
}

.game-cell.ai::after {
    content: '○';
    color: #e74c3c;
    font-size: 14px;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.game-cell.winning {
    background: rgba(255, 215, 0, 0.8) !important;
    animation: winning-pulse 1s ease-in-out infinite alternate;
}

@keyframes winning-pulse {
    0% { 
        background: rgba(255, 215, 0, 0.8) !important;
        transform: scale(1.1);
    }
    100% { 
        background: rgba(255, 255, 0, 0.9) !important;
        transform: scale(1.15);
    }
}

.game-message {
    font-size: 16px;
    font-weight: normal;
    color: #ffffff;
    text-align: center;
    padding: 12px 20px;
    background: linear-gradient(135deg, #ffab91 0%, #ffcc80 100%);
    border-radius: 12px;
    border: 2px solid #fff3e0;
    transition: opacity 0.3s ease;
    z-index: 20;
    box-shadow: 0 4px 15px rgba(255, 183, 77, 0.3);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

.game-message.show {
    opacity: 1;
}

.game-message.winner {
    background: linear-gradient(135deg, #ffab91 0%, #ffcc80 100%) !important;
    border: 2px solid #fff3e0 !important;
    color: #ffffff !important;
}

/* message-bounce animation removed to prevent position flashing */

/* Confetti Animation */
.confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ff6b6b;
    animation: confetti-fall 3s linear forwards;
    pointer-events: none;
}

.confetti:nth-child(2n) { background: #4ecdc4; }
.confetti:nth-child(3n) { background: #45b7d1; }
.confetti:nth-child(4n) { background: #f9ca24; }
.confetti:nth-child(5n) { background: #6c5ce7; }
.confetti:nth-child(6n) { background: #fd79a8; }

@keyframes confetti-fall {
    0% {
        transform: translateY(-30px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(200px) rotate(720deg);
        opacity: 0;
    }
}

.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    border-radius: 12px;
    overflow: hidden;
}

/* Mini Music Player Widget */
.mini-music-player {
    position: fixed;
    bottom: 40px;
    right: 20px;
    width: 280px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    font-family: 'Noto Sans', sans-serif;
    z-index: 1000;
    transition: all 0.3s ease;
    overflow: hidden;
}

.mini-music-player:not(.dragging) {
    bottom: 40px !important;
    right: 20px !important;
    left: auto !important;
    top: auto !important;
}

.mini-music-player.minimized .music-player-content {
    display: none;
}

.mini-music-player.minimized {
    width: 180px;
}

.music-player-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: background 0.2s ease;
}

.music-player-header:hover {
    background: rgba(255, 255, 255, 0.15);
}

.music-icon {
    font-size: 16px;
}

.music-title {
    flex: 1;
    font-size: 13px;
    font-weight: normal;
    color: #333;
}


.music-player-content {
    padding: 16px;
}

.music-visualizer-container {
    margin-bottom: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.music-visualizer {
    width: 100%;
    height: 60px;
    border-radius: 4px;
    background: transparent;
}

.music-info {
    text-align: center;
    margin-bottom: 16px;
}

.track-name {
    font-size: 14px;
    font-weight: normal;
    color: #333;
    margin-bottom: 4px;
}

.track-artist {
    font-size: 12px;
    color: #666;
}

.music-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

.music-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: all 0.2s ease;
}

.play-pause-btn {
    width: 50px;
    height: 50px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.3);
}

.music-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.music-progress {
    margin-bottom: 12px;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin-bottom: 8px;
    cursor: pointer;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #333;
    border-radius: 2px;
    width: 30%;
    transition: width 0.1s ease;
}

.time-display {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #666;
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.volume-icon {
    font-size: 14px;
}

.volume-slider {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(51, 51, 51, 0.3);
}

.volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(51, 51, 51, 0.3);
}

/* Updated Avatar Creator Styles */
.avatar-left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.avatar-canvas {
    width: 280px;
    height: 320px;
    background: white;
    border: 2px solid #ddd;
    border-radius: 15px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.avatar-right-panel {
    flex: 2;
    display: flex;
    flex-direction: column;
}

.category-tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

.category-tab {
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    font-weight: normal;
    transition: all 0.2s ease;
    color: #666;
}

.category-tab.active {
    color: #333;
    border-bottom-color: #000000;
}

.category-tab:hover {
    background: rgba(0, 0, 0, 0.05);
}

.category-content {
    flex: 1;
    overflow-y: auto;
}

.category-panel {
    display: none;
}

.category-panel.active {
    display: block;
}

.visual-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 15px;
    padding: 10px;
}

.visual-option-item {
    width: 80px;
    height: 80px;
    border: 2px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    transition: all 0.2s ease;
    overflow: hidden;
    position: relative;
}

.visual-option-item:hover {
    border-color: #000000;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.visual-option-item.active {
    border-color: #000000;
    border-width: 3px;
    background: rgba(0, 0, 0, 0.05);
}

.visual-option-item svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.visual-option-item.none {
    border-style: dashed;
    color: #999;
    font-size: 12px;
    font-weight: normal;
}

/* Cursor Themes */
.cursor-theme-default {
    cursor: default;
}

.cursor-theme-professional * {
    cursor: default;
}

.cursor-theme-professional a,
.cursor-theme-professional button,
.cursor-theme-professional [role="button"],
.cursor-theme-professional .cursor-pointer {
    cursor: pointer !important;
}

.cursor-theme-professional input[type="text"],
.cursor-theme-professional textarea {
    cursor: text !important;
}

.cursor-theme-retro * {
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFYSURBVCiRpZM9SwNBEIafgwQSCxsLwcJCG1sLG0uxsLBQsLCwsLGwsLCwsLGwsLBQsLCwsLGwsLCwsLCwsLGwsLCwsLGwsLCwsLCwsLGwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCw=='), auto;
}

.cursor-theme-gaming * {
    cursor: crosshair;
}

.cursor-theme-gaming a,
.cursor-theme-gaming button,
.cursor-theme-gaming [role="button"],
.cursor-theme-gaming .cursor-pointer {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="none" stroke="red" stroke-width="2"/><line x1="10" y1="2" x2="10" y2="18" stroke="red" stroke-width="1"/><line x1="2" y1="10" x2="18" y2="10" stroke="red" stroke-width="1"/></svg>'), crosshair !important;
}

.cursor-theme-creative * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M2 18L18 2M6 14l8-8" stroke="%23333" stroke-width="2" fill="none"/><circle cx="16" cy="4" r="2" fill="%23333"/></svg>'), auto;
}

.cursor-theme-creative a,
.cursor-theme-creative button,
.cursor-theme-creative [role="button"],
.cursor-theme-creative .cursor-pointer {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M2 18L18 2M6 14l8-8" stroke="%23666" stroke-width="2" fill="none"/><circle cx="16" cy="4" r="3" fill="%234f46e5"/></svg>'), pointer !important;
}

.cursor-theme-fun * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><text x="10" y="15" font-size="16" text-anchor="middle">🌟</text></svg>'), auto;
}

.cursor-theme-fun a,
.cursor-theme-fun button,
.cursor-theme-fun [role="button"],
.cursor-theme-fun .cursor-pointer {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><text x="10" y="15" font-size="16" text-anchor="middle">👆</text></svg>'), pointer !important;
}

.cursor-theme-minimal * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M0 0l8 8-2 2-6-6v-4z" fill="%23000"/></svg>'), auto;
}

/* Updated Simple Arrow Cursor Themes */
.cursor-theme-modern * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M0 0L16 6L8 8L6 16z" fill="%23000" opacity="0.8"/></svg>'), auto;
}

.cursor-theme-retro * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 120 120" fill="none"><path d="M45 21H39V27H45V21Z" fill="black"/><path d="M51 27H45V33H51V27Z" fill="black"/><path d="M57 33H51V39H57V33Z" fill="black"/><path d="M63 39H57V45H63V39Z" fill="black"/><path d="M69 45H63V51H69V45Z" fill="black"/><path d="M75 51H69V57H75V51Z" fill="black"/><path d="M81 57H75V63H81V57Z" fill="black"/><path d="M33 21H39V15H33V10H27V99H33V93H39V87H33V21Z" fill="black"/><path d="M57 81H51V93H57V81Z" fill="black"/><path d="M51 75H45V81H51V75Z" fill="black"/><path d="M45 81H39V87H45V81Z" fill="black"/><path d="M75 81H69V93H75V81Z" fill="black"/><path d="M81 93H75V104H81V93Z" fill="black"/><path d="M63 93H57V104H63V93Z" fill="black"/><path d="M62.5 104V110H75V104H62.5Z" fill="black"/><path d="M93 75V69H87V63H81V69H63V81H69.5V75H93Z" fill="black"/><path d="M33 87V21H39V27H45V33H51V39H57V45H63V51H69V57H75V63H81.5V69.5H63V81H69.5V93H75V104H62.5V93H57V81H51V75H45V81H39V87H33Z" fill="white"/></svg>') 10 10, auto !important;
}

/* Desktop Context Menu */
.desktop-context-menu {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.desktop-menu-item {
    padding: 12px 16px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.desktop-menu-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.desktop-menu-item:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.desktop-menu-item:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Wallpaper Selector Window */
.wallpaper-window {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.wallpaper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    padding: 20px;
    max-height: 300px;
    overflow-y: auto;
}

.wallpaper-option {
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.wallpaper-option:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.1);
}

.wallpaper-option.selected {
    border-color: #007AFF;
    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.3);
}

.wallpaper-option img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.wallpaper-name {
    padding: 12px;
    text-align: center;
    font-size: 13px;
    font-weight: normal;
    color: #333;
    background: rgba(255, 255, 255, 0.9);
}

.cursor-theme-red * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M0 0L16 6L8 8L6 16z" fill="%23e53e3e"/></svg>'), auto;
}

.cursor-theme-blue * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M0 0L16 6L8 8L6 16z" fill="%233b82f6"/></svg>'), auto;
}

.cursor-theme-green * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M0 0L16 6L8 8L6 16z" fill="%2310b981"/></svg>'), auto;
}

/* Mood Tracker Styles */
.mood-tracker-content {
    padding: 20px;
    max-width: 600px;
}

.mood-entry-section {
    position: sticky;
    top: 0;
    z-index: 100;
    margin: 0 -20px 30px -20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Flying emoji animation */
.flying-emoji {
    position: fixed;
    width: 60px;
    height: 60px;
    z-index: 1000;
    pointer-events: none;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    animation: float 0.5s ease-in-out;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.flying-emoji img {
    width: 100%;
    height: 100%;
    animation: spin 1.2s ease-in-out;
}

@keyframes float {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.3) rotate(10deg); }
    100% { transform: scale(1.1) rotate(0deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.2); }
    50% { transform: rotate(180deg) scale(1.1); }
    75% { transform: rotate(270deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(0.8); }
}

.mood-entry-section h3 {
    margin: 0 0 35px 0;
    color: #333;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
}

.mood-spectrum-container {
    margin-bottom: 20px;
}

.mood-selection {
    text-align: center;
    margin-bottom: 20px;
}

.mood-buttons-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.mood-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #f0f0f0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.mood-btn img {
    width: 120%;
    height: 120%;
    object-fit: contain;
}

.custom-emoji {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Emoji background colors */
.very-sad-emoji {
    background: #E08A8A;
}

.sad-emoji {
    background: #F4B084;
}

.neutral-emoji {
    background: #F2E394;
}

.happy-emoji {
    background: #B8C892;
}

.very-happy-emoji {
    background: #8DB4E2;
}

.emoji-eyes {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

.emoji-eye {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

/* Eye colors for each emoji */
.very-sad-emoji .emoji-eye,
.very-sad-emoji .very-sad-mouth {
    background: #B85A5A;
}

.sad-emoji .emoji-eye,
.sad-emoji .sad-mouth {
    background: #C67A4A;
}

.neutral-emoji .emoji-eye,
.neutral-emoji .neutral-mouth {
    background: #C4A962;
}

.happy-emoji .emoji-eye,
.happy-emoji .happy-mouth {
    background: #7A9A5A;
}

.very-happy-emoji .emoji-eye,
.very-happy-emoji .very-happy-mouth {
    background: #5A84B8;
}

/* Simple curved mouths using basic shapes */
.neutral-mouth {
    width: 12px;
    height: 2px;
    border-radius: 1px;
}

.sad-mouth {
    width: 12px;
    height: 6px;
    border: 2px solid #C67A4A;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    background: transparent;
}

.very-sad-mouth {
    width: 14px;
    height: 7px;
    border: 2px solid #B85A5A;
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    background: transparent;
}

.happy-mouth {
    width: 12px;
    height: 6px;
    border: 2px solid #7A9A5A;
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: transparent;
}

.very-happy-mouth {
    width: 14px;
    height: 7px;
    border: 2px solid #5A84B8;
    border-top: none;
    border-radius: 0 0 14px 14px;
    background: transparent;
}

.mood-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mood-btn.selected {
    transform: scale(1.3);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.mood-labels-emoji {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.mood-labels-emoji span {
    font-size: 12px;
    color: #666;
    width: 60px;
    text-align: center;
}

/* Monthly Calendar */
.mood-calendar {
    margin-bottom: 30px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
}

.simple-calendar {
    display: flex;
    flex-direction: column;
}

.weekday-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.weekday {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    padding: 8px 4px;
}

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

.date-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.date-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #e9ecef;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-bottom: 4px;
}

.date-circle:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
}

.date-number {
    font-size: 12px;
    font-weight: 500;
    color: #333;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
}

.date-box.today .date-number {
    background: #000;
    color: #fff;
}

.date-box.has-mood .date-circle {
    border: none;
    background: transparent;
    padding: 0;
}

.date-mood-emoji {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.date-mood-emoji img {
    width: 50px;
    height: 50px;
}

.date-box.other-month .date-number {
    color: #ccc;
}

.date-box.other-month .date-circle {
    background: #f8f9fa;
    border-color: #e9ecef;
}

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

.nav-btn {
    background: #e9ecef;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.nav-btn:hover {
    background: #dee2e6;
}

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

.weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    padding: 8px 4px;
}

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

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #e9ecef;
    background: white;
    padding: 4px;
    min-height: 60px;
}

.calendar-day:hover {
    background: #e9ecef;
}

.calendar-day.other-month {
    color: #adb5bd;
}

.calendar-day.today {
    background: #007bff;
    color: white;
}

.calendar-day.has-mood {
    position: relative;
}

.day-number {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    align-self: flex-start;
    margin-bottom: 4px;
}

.day-mood-indicator {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 4px;
}

.day-mood-indicator img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Monthly Dashboard */
.mood-dashboard {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
}

.insights-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.tab-btn {
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-weight: normal;
    color: #666;
    transition: all 0.2s ease;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
}

.tab-btn.active {
    background: #000;
    color: #fff;
}

.tab-btn:hover:not(.active) {
    background: #f0f0f0;
}

/* New insights header styling */
.insights-header {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 5px;
}

.insights-title {
    color: #000;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
}

.insights-dropdown {
    padding: 6px 24px 6px 10px;
    border: none;
    border-radius: 6px;
    background: #E9ECEF url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 12px;
    font-size: 13px;
    color: #666;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.stat-card {
    background: white;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 80px;
}

.stat-card:hover {
    transform: translateY(-2px);
}

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

.stat-number {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-label {
    font-size: 12px;
    color: #999;
    text-transform: none;
    font-weight: 500;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
}

.mood-distribution h5 {
    margin-bottom: 15px;
    color: #333;
    font-size: 16px;
}

.distribution-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mood-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mood-bar-label {
    font-size: 12px;
    min-width: 60px;
    color: #6c757d;
}

.mood-bar-fill {
    height: 20px;
    background: #e9ecef;
    border-radius: 10px;
    flex: 1;
    position: relative;
    overflow: hidden;
}

.mood-bar-progress {
    height: 100%;
    border-radius: 10px;
    transition: width 0.6s ease;
}

.mood-bar-count {
    font-size: 12px;
    min-width: 30px;
    text-align: right;
    color: #6c757d;
}

.today-mood {
    text-align: center;
    margin-top: 15px;
    padding: 10px;
    background: white;
    border-radius: 8px;
    font-size: 16px;
}

.mood-analytics-section h3 {
    margin: 0 0 20px 0;
    color: #333;
    font-size: 16px;
    padding-bottom: 10px;
}

.mood-week, .mood-month, .mood-streak {
    margin-bottom: 25px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 12px;
}

.mood-week h4, .mood-month h4 {
    margin: 0 0 15px 0;
    color: #555;
    font-size: 16px;
}

.week-grid {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 15px;
}

.week-day {
    text-align: center;
    padding: 10px 5px;
    background: white;
    border-radius: 8px;
    min-width: 60px;
    border: 1px solid #e9ecef;
}

.week-day-name {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

.week-day-mood {
    font-size: 20px;
}

.week-day.today {
    border-color: #2196f3;
    background: #e3f2fd;
}

.week-summary {
    text-align: center;
    color: #666;
    font-size: 14px;
}

.month-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.stat-item {
    padding: 10px;
}

.stat-number {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
}

.stat-label {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', system-ui, -apple-system, sans-serif;
}

.streak-counter {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
}

.streak-number {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 5px;
}

.streak-text {
    font-size: 14px;
    opacity: 0.9;
}

/* Mood Tracker Animations */
@keyframes pulse {
    0% { transform: translateY(-2px) scale(1.1); }
    50% { transform: translateY(-4px) scale(1.15); }
    100% { transform: translateY(-2px) scale(1.1); }
}

@keyframes celebrate {
    0% { transform: scale(1); }
    25% { transform: scale(1.2) rotate(-5deg); }
    50% { transform: scale(1.15) rotate(5deg); }
    75% { transform: scale(1.1) rotate(-2deg); }
    100% { transform: scale(1.1) rotate(0deg); }
}

@keyframes bounce {
    0%, 20%, 60%, 100% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-10px) scale(1.1); }
    80% { transform: translateY(-5px) scale(1.05); }
}

@keyframes sparkle {
    0% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(180deg); }
    100% { opacity: 0; transform: scale(0) rotate(360deg); }
}

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


/* Particle effects */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.particle {
    position: absolute;
    font-size: 16px;
    opacity: 0;
    animation: sparkle 2s ease-out;
}

.particle.hearts::before {
    content: "💖";
}

.particle.stars::before {
    content: "⭐";
}

.particle.sparkles::before {
    content: "✨";
}

.particle.rainbows::before {
    content: "🌈";
}

.particle.flowers::before {
    content: "🌸";
}


/* Interactive week grid */
.week-day:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.week-day.today {
    border-color: #2196f3;
    background: #e3f2fd;
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from { box-shadow: 0 0 5px rgba(33, 150, 243, 0.5); }
    to { box-shadow: 0 0 15px rgba(33, 150, 243, 0.8); }
}

/* Interactive streak counter */
.streak-counter.milestone {
    animation: celebration 1s ease-out;
}

@keyframes celebration {
    0% { transform: scale(1); }
    25% { transform: scale(1.1) rotate(-2deg); }
    50% { transform: scale(1.05) rotate(2deg); }
    75% { transform: scale(1.08) rotate(-1deg); }
    100% { transform: scale(1) rotate(0deg); }
}