body { 
    background: #f8fafc; 
    margin: 0; 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    font-family: 'Rubik', sans-serif; 
    overflow: hidden;
}

/* App Shell Header */
.app-header {
    background: white; border-bottom: 1px solid #eef2f6; 
    padding: 15px 5%; z-index: 100;
}
.cuba-btn-primary { background: #f43f5e; border: none; padding: 8px 15px; border-radius: 6px; color: white; font-weight: bold; cursor: pointer; }
.cuba-btn-secondary { background: white; border: 1px solid #cbd5e1; padding: 8px 15px; border-radius: 6px; cursor: pointer; font-family: inherit;}

/* Bottom App Shell Nav */
.bottom-nav { background: white; border-top: 1px solid #eef2f6; z-index: 100; padding: 10px 0; }
.bottom-nav ul { display: flex; justify-content: space-around; list-style: none; margin: 0; padding: 0; }
.bottom-nav a { text-decoration: none; font-size: 1.5rem; }

/* MS Word Style Ribbon */
.word-ribbon {
    display: flex; align-items: center; background: #ffffff; padding: 10px 5%;
    border-bottom: 1px solid #e2e8f0; gap: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    overflow-x: auto; white-space: nowrap; z-index: 90;
}
.toolbar-group { display: flex; gap: 5px; align-items: center; }
.toolbar-divider { width: 1px; height: 24px; background: #e2e8f0; margin: 0 5px; }
.word-ribbon button { background: #f1f5f9; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: bold; font-family: inherit;}
.word-ribbon button:hover { background: #e2e8f0; }
.color-picker { border: none; width: 30px; height: 30px; cursor: pointer; padding: 0; background: transparent; }
.danger-btn { color: #ef4444 !important; }
.hidden { display: none !important; }

/* Workspace */
.editor-workspace { display: flex; flex-grow: 1; overflow: hidden; }

/* Sidebar */
.editor-sidebar { 
    width: 220px; background: white; border-right: 1px solid #eef2f6; 
    padding: 15px; display: flex; flex-direction: column; overflow-y: auto;
}
.sidebar-title { font-size: 0.85rem; color: #64748b; font-weight: bold; margin-top: 0; text-transform: uppercase; }
.drag-item { 
    background: #f1f5f9; border: 1px dashed #cbd5e1; padding: 10px; margin-bottom: 10px; 
    border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 0.9rem;
    display: flex; align-items: center; gap: 10px; transition: 0.2s; 
}
.drag-item:active { transform: scale(0.96); }
.drag-icon { background: white; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

/* Canvas */
.editor-canvas-container { flex-grow: 1; padding: 20px; overflow-y: auto; display: flex; justify-content: center; }
.drop-canvas { 
    width: 100%; max-width: 800px; background: white; min-height: 80vh; 
    padding: 40px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); 
    padding-bottom: 150px;
}
.placeholder-text { color: #94a3b8; font-style: italic; text-align: center; margin-top: 40px; pointer-events: none; }

/* Blocks & Resizing Engine */
.content-block { 
    padding: 5px; margin-bottom: 10px; border: 1px solid transparent; 
    border-radius: 4px; outline: none; position: relative; transition: border-color 0.2s;
    /* This applies the native drag-to-resize corner to ANY active block */
    overflow: auto; resize: vertical; min-height: 40px;
}
.content-block.active-block { border-left: 3px solid #f43f5e; padding-left: 10px; background: #fdf2f8; resize: both;}
.content-block[contenteditable="true"]:empty:before { content: attr(data-placeholder); color: #cbd5e1; font-style: italic; }

/* Drag Sorting Handle */
.block-drag-handle {
    position: absolute; left: -20px; top: 10px; cursor: grab; color: #cbd5e1;
    font-weight: bold; font-size: 1.2rem; user-select: none;
}
.block-drag-handle:active { cursor: grabbing; }

/* Modals */
.preview-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(4px);
    z-index: 1000; display: flex; justify-content: center; align-items: center;
}
.preview-content {
    background: white; width: 90%; max-width: 800px; height: 85vh;
    border-radius: 12px; padding: 40px; overflow-y: auto; position: relative;
}
.close-preview { position: absolute; top: 15px; right: 20px; background: #f1f5f9; border: none; font-size: 1.2rem; cursor: pointer; border-radius: 50%; width: 35px; height: 35px; }

/* Mobile */
@media (max-width: 768px) {
    .editor-workspace { flex-direction: column; }
    .editor-sidebar { 
        order: 2; width: 100%; height: 80px; padding: 10px; 
        border-right: none; border-top: 1px solid #eef2f6; 
    }
    .sidebar-title { display: none; }
    .sidebar-scroll { display: flex; gap: 10px; overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
    .drag-item { margin-bottom: 0; flex-shrink: 0; }
    .editor-canvas-container { order: 1; padding: 10px; }
    .drop-canvas { padding: 20px; min-height: 50vh; }
}