* { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { height: 100%; width: 100%; overflow: hidden; font-family: 'Nunito', sans-serif; background: #1a1a2e; }
        .screen { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; flex-direction: column; }
        .screen.active { display: flex; }

        /* HOME SCREEN */
        .home-screen { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); justify-content: center; align-items: center; padding: 3vmin; }
        .home-content { text-align: center; }
        .home-logo { font-size: 15vmin; margin-bottom: 2vmin; }
        .home-title { font-size: 7vmin; font-weight: 800; color: white; margin-bottom: 1vmin; }
        .home-subtitle { font-size: 2.5vmin; color: rgba(255,255,255,0.8); margin-bottom: 6vmin; }
        .home-menu { display: flex; gap: 3vmin; justify-content: center; flex-wrap: wrap; }
        .menu-card { background: white; border-radius: 2.5vmin; padding: 3.5vmin 4vmin; cursor: pointer; transition: transform 0.2s; text-align: center; box-shadow: 0 1vmin 3vmin rgba(0,0,0,0.2); min-width: 18vmin; max-width: 22vmin; flex: 1; }
        .menu-card:hover { transform: translateY(-1vmin) scale(1.02); }
        .menu-card-icon { font-size: 7vmin; margin-bottom: 1.5vmin; display: block; }
        .menu-card h3 { font-size: 2.5vmin; color: #333; margin-bottom: 0.5vmin; }
        .menu-card p { font-size: 1.6vmin; color: #666; }
        .menu-card.create { border-top: 0.8vmin solid #00b894; }
        .menu-card.load { border-top: 0.8vmin solid #0984e3; }
        .menu-card.manage { border-top: 0.8vmin solid #6c5ce7; background: white; }
        .settings-btn { position: absolute; top: 3vmin; right: 3vmin; background: rgba(255,255,255,0.2); border: none; color: white; width: 7vmin; height: 7vmin; border-radius: 50%; cursor: pointer; font-size: 4vmin; display: flex; align-items: center; justify-content: center; }
        .settings-btn:hover { background: rgba(255,255,255,0.3); }

        /* SCREEN HEADER */
        .screen-header { height: 8vmin; min-height: 45px; padding: 0 2vmin; display: flex; align-items: center; gap: 1.5vmin; flex-shrink: 0; background: linear-gradient(135deg, #0984e3, #6c5ce7); }
        .home-btn { background: rgba(255,255,255,0.2); border: none; color: white; width: 5vmin; height: 5vmin; min-width: 36px; min-height: 36px; border-radius: 50%; cursor: pointer; font-size: 2.5vmin; display: flex; align-items: center; justify-content: center; }
        .home-btn:hover { background: rgba(255,255,255,0.3); }
        .screen-title { font-size: 2.8vmin; color: white; flex: 1; font-weight: 700; }
        .header-btn { background: rgba(255,255,255,0.2); border: none; color: white; padding: 1vmin 2vmin; border-radius: 1vmin; cursor: pointer; font-size: 1.8vmin; font-weight: 600; font-family: inherit; display: flex; align-items: center; gap: 0.5vmin; }
        .header-btn:hover { background: rgba(255,255,255,0.3); }
        .header-btn.danger { background: #d63031; }
        .header-btn.success { background: #00b894; }

        /* LOAD SCREEN */
        .load-screen .screen-header { background: linear-gradient(135deg, #74b9ff, #0984e3); }
        .screen-title-dark { color: #333; }
        .board-grid-list { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(22vmin, 1fr)); gap: 2vmin; padding: 2vmin; align-content: start; overflow-y: auto; background: #f5f5f5; }
        .board-card { background: white; border-radius: 2vmin; padding: 2.5vmin; cursor: pointer; box-shadow: 0 0.5vmin 2vmin rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items: center; transition: transform 0.2s; }
        .board-card:hover { transform: scale(1.03); }
        .board-card-icon { font-size: 5vmin; margin-bottom: 1vmin; }
        .board-card-preview { margin-bottom: 1vmin; display: flex; align-items: center; justify-content: center; }
        .board-card-preview svg { max-width: 100%; height: auto; }
        .board-card h3 { font-size: 2vmin; text-align: center; margin-bottom: 0.3vmin; }
        .board-card p { font-size: 1.4vmin; color: #666; }
        .empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f5f5f5; }
        .empty-state-icon { font-size: 12vmin; margin-bottom: 2vmin; opacity: 0.3; }
        .empty-state p { font-size: 2.5vmin; color: #666; }

        /* MANAGE SCREEN */
        .manage-screen .screen-header { background: linear-gradient(135deg, #a29bfe, #6c5ce7); }
        .manage-screen .board-grid-list { grid-template-columns: repeat(auto-fit, minmax(28vmin, 1fr)); }
        .manage-card { background: white; border-radius: 2vmin; padding: 2vmin; box-shadow: 0 0.5vmin 2vmin rgba(0,0,0,0.1); display: flex; flex-direction: column; height: 100%; }
        .manage-card-header { display: flex; align-items: center; gap: 1.5vmin; margin-bottom: 1.5vmin; padding-bottom: 1.5vmin; border-bottom: 1px solid #eee; }
        .manage-card-icon { font-size: 5vmin; }
        .manage-card-preview { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
        .manage-card-preview svg { max-width: 100%; height: auto; }
        .manage-card-info { flex: 1; }
        .manage-card-info h3 { font-size: 2.2vmin; margin-bottom: 0.3vmin; }
        .manage-card-info p { font-size: 1.6vmin; color: #666; }
        .manage-card-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1vmin; margin-top: auto; }
        .manage-action-btn { padding: 1.2vmin; border: none; border-radius: 1vmin; cursor: pointer; font-size: 1.6vmin; font-weight: 600; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 0.5vmin; transition: opacity 0.2s; }
        .manage-action-btn:hover { opacity: 0.85; }
        .manage-action-btn.open { background: #00cec9; color: #333; }
        .manage-action-btn.duplicate { background: #74b9ff; color: white; }
        .manage-action-btn.rename { background: #fdcb6e; color: #333; }
        .manage-action-btn.delete { background: #ff7675; color: white; }
        .manage-action-btn.export { background: #00b894; color: white; }
        .manage-action-btn.share { background: #0984e3; color: white; }
        .manage-action-btn.symbols { background: #a29bfe; color: white; }
        .manage-action-btn.print { background: #6c5ce7; color: white; }

        /* SETTINGS SCREEN */
        .settings-screen .screen-header { background: linear-gradient(135deg, #ffeaa7, #fdcb6e); }
        .settings-body { flex: 1; padding: 3vmin; background: #f5f5f5; overflow-y: auto; display: flex; justify-content: center; align-items: flex-start; }
        .settings-card { background: white; border-radius: 2vmin; padding: 3vmin; max-width: 70vmin; width: 100%; box-shadow: 0 0.5vmin 2vmin rgba(0,0,0,0.1); }
        .settings-section { margin-bottom: 3vmin; }
        .settings-section:last-child { margin-bottom: 0; }
        .settings-section h3 { font-size: 2.5vmin; margin-bottom: 1.5vmin; display: flex; align-items: center; gap: 1vmin; }
        .settings-row { display: flex; gap: 1vmin; margin-bottom: 1.5vmin; align-items: center; }
        .settings-row input[type="number"] { width: 8vmin; padding: 1.2vmin; border: 2px solid #ddd; border-radius: 1vmin; font-size: 1.8vmin; text-align: center; }
        .btn { padding: 1.2vmin 2vmin; border: none; border-radius: 1vmin; font-size: 1.8vmin; font-weight: 600; cursor: pointer; font-family: inherit; }
        .btn-secondary { background: #dfe6e9; color: #333; }

        /* EDITOR SCREEN */
        .editor-body { flex: 1; display: flex; overflow: hidden; background: #e8e8e8; }
        
        .resize-handle { width: 6px; background: #ddd; cursor: ew-resize; flex-shrink: 0; transition: background 0.2s; }
        .resize-handle:hover, .resize-handle.dragging { background: #0984e3; }
        
        .editor-sidebar { width: 32vmin; min-width: 220px; max-width: 50%; display: flex; flex-direction: column; background: #fff; border-left: 1px solid #ddd; overflow-y: auto; overflow-x: hidden; flex-shrink: 0; }
        .sidebar-section { border-bottom: 1px solid #eee; }
        .sidebar-header { padding: 1.5vmin 1.8vmin; background: #f8f8f8; font-size: 2vmin; font-weight: 700; display: flex; align-items: center; gap: 1vmin; cursor: pointer; position: sticky; top: 0; z-index: 1; }
        .sidebar-header:hover { background: #f0f0f0; }
        .sidebar-header .expand-icon { margin-left: auto; font-size: 1.5vmin; transition: transform 0.2s; }
        .sidebar-header.collapsed .expand-icon { transform: rotate(-90deg); }
        .sidebar-content { padding: 1.5vmin; }
        .sidebar-content.collapsed { display: none; }
        
        .tabs { display: flex; gap: 0.5vmin; margin-bottom: 1.2vmin; }
        .tab { flex: 1; padding: 1.2vmin; background: #f0f0f0; border: none; border-radius: 1vmin; cursor: pointer; font-size: 1.8vmin; font-weight: 600; }
        .tab.active { background: #0984e3; color: white; }
        
        .symbol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6vmin, 1fr)); gap: 0.6vmin; max-height: 40vmin; overflow-y: auto; border: 1px solid #eee; border-radius: 1vmin; padding: 0.8vmin; background: #fafafa; }
        .symbol-grid.web-results { grid-template-columns: repeat(auto-fill, minmax(10vmin, 1fr)); }
        .symbol-item { aspect-ratio: 1; background: white; border: 2px solid #eee; border-radius: 0.8vmin; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0.3vmin; }
        .symbol-item:hover { border-color: #0984e3; }
        .symbol-item img { width: 90%; height: 90%; object-fit: contain; }
        
        .input-row { display: flex; gap: 0.8vmin; margin-bottom: 1.2vmin; }
        .input-row input, .input-row select { flex: 1; padding: 1vmin; border: 1px solid #ddd; border-radius: 0.8vmin; font-size: 1.8vmin; }
        .input-row button { padding: 1vmin 1.5vmin; background: #dfe6e9; border: none; border-radius: 0.8vmin; cursor: pointer; font-size: 1.8vmin; }
        .btn-small { padding: 1vmin 1.5vmin; font-size: 1.8vmin; width: 100%; margin-top: 0.8vmin; }
        .btn-success { background: #00b894; color: white; }
        .btn-primary { background: #0984e3; color: white; }
        .btn-danger { background: #d63031; color: white; }

        /* CELL EDITOR */
        .cell-preview { display: flex; align-items: center; gap: 1.2vmin; background: #f5f5f5; padding: 1vmin; border-radius: 1vmin; margin-bottom: 1.2vmin; min-height: 6vmin; }
        .cell-preview img { width: 5vmin; height: 5vmin; object-fit: contain; }
        .cell-preview span { font-size: 1.8vmin; color: #666; flex: 1; }
        .form-group { margin-bottom: 1vmin; }
        .form-group label { display: block; font-size: 1.5vmin; color: #666; margin-bottom: 0.4vmin; }
        .form-group input, .form-group select { width: 100%; padding: 0.8vmin; border: 1px solid #ddd; border-radius: 0.8vmin; font-size: 1.8vmin; }
        .form-row { display: flex; gap: 0.8vmin; }
        .form-row .form-group { flex: 1; }
        .editor-btns { display: flex; gap: 0.8vmin; margin-top: 1vmin; }
        .editor-btns button { flex: 1; }

        /* BOARD AREA */
        .board-container { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.5vmin; overflow: auto; background: repeating-conic-gradient(#e0e0e0 0% 25%, #f0f0f0 0% 50%) 50% / 20px 20px; position: relative; }
        .board { background: white; box-shadow: 0 0.5vmin 2vmin rgba(0,0,0,0.15); transform-origin: center; }
        .board-inner { padding: 4mm; }
        .board-grid { display: grid; gap: 1mm; }
        
        .cell { background: white; border: 1px solid #ddd; border-radius: 1.5mm; display: flex; flex-direction: column; cursor: pointer; position: relative; overflow: hidden; }
        .cell:hover { border-color: #0984e3; }
        .cell.selected { border: 3px solid #0984e3; background: #e3f2fd; box-shadow: 0 0 0 3px rgba(9, 132, 227, 0.3), 0 4px 12px rgba(9, 132, 227, 0.25); }
        .cell-content { flex: 1; display: flex; flex-direction: column; padding: 0.5mm; min-height: 0; position: relative; }
        .cell-content.label-top { flex-direction: column; }
        .cell-content.label-bottom { flex-direction: column; }
        .cell-content.label-center { justify-content: center; align-items: center; }
        .cell-content.label-center .cell-image-area { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
        .cell-content.label-center .cell-label { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); z-index: 2; width: 100%; }
        .cell-image-area { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; position: relative; }
        .cell-image-area img.main-img { max-width: 100%; max-height: 100%; object-fit: contain; }
        .cell-image-area img.annotation-img { position: absolute; width: 30%; height: 30%; object-fit: contain; }
        .cell-image-area img.ann-tl { top: 0; left: 0; }
        .cell-image-area img.ann-tr { top: 0; right: 0; }
        .cell-image-area img.ann-bl { bottom: 0; left: 0; }
        .cell-image-area img.ann-br { bottom: 0; right: 0; }
        .cell-label { text-align: center; padding: 0.5mm; line-height: 1.1; word-break: break-word; flex-shrink: 0; }
        .cell .remove { position: absolute; top: 0.5mm; left: 0.5mm; width: 3mm; height: 3mm; background: #d63031; color: white; border: none; border-radius: 50%; font-size: 2mm; cursor: pointer; opacity: 0; display: flex; align-items: center; justify-content: center; z-index: 5; }
        .cell:hover .remove { opacity: 1; }
        .cell .link-indicator { position: absolute; bottom: 0.5mm; right: 0.5mm; font-size: 2.5mm; opacity: 0.7; z-index: 4; filter: drop-shadow(0 0 1px white); }
        .cell:hover .link-indicator { opacity: 1; }
        .cell.has-link { border-radius: 1.5mm 15% 1.5mm 1.5mm !important; }
        .cell-placeholder { font-size: 1.8mm; color: #ccc; }
        .cell.drag-over { background: #e8f5e9 !important; border: 2px dashed #00b894 !important; }
        .cell.drag-over * { pointer-events: none; }

        /* DRAW */
        .draw-area { border: 1px solid #ddd; border-radius: 0.5vmin; overflow: hidden; margin-bottom: 1vmin; }
        .draw-toolbar { display: flex; gap: 0.5vmin; padding: 0.5vmin; background: #f5f5f5; align-items: center; flex-wrap: wrap; }
        .draw-toolbar input[type="color"] { width: 3vmin; height: 3vmin; border: none; cursor: pointer; }
        .draw-toolbar input[type="range"] { width: 5vmin; }
        .draw-canvas { display: block; background: white; cursor: crosshair; width: 100%; height: 10vmin; }
        .draw-tool-btn { padding: 6px 10px; font-size: 14pt; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
        .draw-tool-btn svg { width: 22px; height: 22px; }

        /* ZOOM */
        .zoom-bar { position: absolute; bottom: 1.5vmin; left: 1.5vmin; display: flex; align-items: center; gap: 0.5vmin; background: white; padding: 0.5vmin; border-radius: 0.8vmin; box-shadow: 0 0.3vmin 1vmin rgba(0,0,0,0.15); }
        .zoom-bar button { width: 3.5vmin; height: 3.5vmin; border: none; background: #f0f0f0; border-radius: 0.5vmin; cursor: pointer; font-size: 1.8vmin; }
        .zoom-bar button:hover { background: #0984e3; color: white; }
        .zoom-bar span { font-size: 1.5vmin; min-width: 5vmin; text-align: center; }

        /* MODALS */
        .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 100; }
        .modal.active { display: flex; }
        .modal-box { background: white; border-radius: 2vmin; width: 90%; max-width: 45vmin; max-height: 80%; overflow: hidden; }
        .modal-header { padding: 1.5vmin; background: #f8f8f8; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; }
        .modal-header h3 { font-size: 2.2vmin; }
        .modal-close { background: none; border: none; font-size: 2.5vmin; cursor: pointer; color: #666; }
        .modal-body { padding: 1.5vmin; overflow-y: auto; max-height: 50vmin; }
        .modal-footer { padding: 1.5vmin; background: #f8f8f8; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 1vmin; }
        .modal .form-group { margin-bottom: 1.5vmin; }
        .modal .form-group label { font-size: 1.6vmin; margin-bottom: 0.5vmin; }
        .modal .form-group input, .modal .form-group select { padding: 1vmin; font-size: 1.8vmin; }
        .modal .form-row input { width: 8vmin; }
        .modal .btn { padding: 1vmin 2vmin; font-size: 1.8vmin; }

        /* ANNOTATION PICKER */
        .ann-picker { display: flex; gap: 0.5vmin; flex-wrap: wrap; margin-top: 0.5vmin; }
        .ann-picker-item { width: 4vmin; height: 4vmin; border: 2px solid #ddd; border-radius: 0.5vmin; cursor: pointer; display: flex; align-items: center; justify-content: center; background: white; }
        .ann-picker-item:hover { border-color: #0984e3; }
        .ann-picker-item.selected { border-color: #00b894; background: #e8f8f5; }
        .ann-picker-item img { width: 80%; height: 80%; object-fit: contain; }

        @media print {
            body * { visibility: hidden; }
            .board, .board * { visibility: visible; }
            .board { position: absolute; left: 0; top: 0; box-shadow: none !important; transform: none !important; }
            .cell .remove { display: none !important; }
        }
        .brand-logo { position: absolute; top: 2vmin; left: 2vmin; width: 8vmin; height: 8vmin; object-fit: contain; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 8px rgba(100, 150, 255, 0.4)); }

        /* Custom Language Dropdown with Tooltips */
        .custom-language-dropdown {
            position: relative;
            flex: 1;
        }
        .custom-language-dropdown .dropdown-selected {
            width: 100%;
            padding: 0.8vmin;
            border: 1px solid #ddd;
            border-radius: 0.5vmin;
            font-size: 1.8vmin;
            background: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5vmin;
        }
        .custom-language-dropdown .dropdown-selected:hover {
            border-color: #0984e3;
        }
        .custom-language-dropdown .dropdown-selected::after {
            content: '▼';
            font-size: 1.2vmin;
            color: #666;
        }
        .custom-language-dropdown .dropdown-list {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            max-height: 40vmin;
            overflow-y: auto;
            background: white;
            border: 1px solid #ddd;
            border-radius: 0.5vmin;
            box-shadow: 0 0.5vmin 2vmin rgba(0,0,0,0.15);
            z-index: 1000;
            margin-top: 0.3vmin;
        }
        .custom-language-dropdown.open .dropdown-list {
            display: block;
        }
        .custom-language-dropdown .dropdown-item {
            padding: 0.8vmin 1vmin;
            font-size: 1.8vmin;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5vmin;
        }
        .custom-language-dropdown .dropdown-item:hover {
            background: #e3f2fd;
        }
        .custom-language-dropdown .dropdown-item.selected {
            background: #0984e3;
            color: white;
        }