:host {
    --lumo-primary-color: #2563eb;
    --lumo-primary-text-color: #1d4ed8;
    --lumo-error-color: #dc2626;
    --lumo-success-color: #16a34a;
}

.auth-view {
    background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 52%, #ecfeff 100%);
}

.auth-view h1 {
    margin-bottom: var(--lumo-space-l);
    color: #0f172a;
}

.auth-link {
    margin-top: var(--lumo-space-s);
}

.main-view {
    padding: var(--lumo-space-l);
    background: linear-gradient(180deg, #f8fafc 0%, #eef6f9 100%);
}

.app-header {
    padding: var(--lumo-space-m) var(--lumo-space-l);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.app-header h2 {
    margin: 0;
    color: #0f172a;
}

.current-user {
    color: #475569;
    font-size: var(--lumo-font-size-s);
}

.header-actions {
    gap: var(--lumo-space-m);
}

.notes-panel {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.notes-toolbar {
    padding: var(--lumo-space-m);
    border-bottom: 1px solid #e2e8f0;
    gap: var(--lumo-space-m);
}

.search-field {
    max-width: 520px;
}

.category-filter {
    width: 210px;
}

.note-count {
    color: #64748b;
    font-size: var(--lumo-font-size-s);
    white-space: nowrap;
}

.notes-grid {
    border: 0;
}

.favorite-check {
    color: #334155;
}

.favorite-marker {
    color: #cbd5e1;
}

.favorite-marker.active {
    color: #f59e0b;
}

.category-actions {
    gap: var(--lumo-space-s);
}

.categories-grid {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.dialog-form {
    gap: var(--lumo-space-m);
}

.confirm-message {
    display: block;
    max-width: 360px;
    color: #475569;
    line-height: 1.5;
}

vaadin-dialog-overlay::part(overlay) {
    border-radius: 10px;
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.22);
}

vaadin-dialog-overlay::part(header) {
    border-bottom: 1px solid #e2e8f0;
}

vaadin-dialog-overlay::part(footer) {
    border-top: 1px solid #e2e8f0;
}

@media (max-width: 760px) {
    .main-view {
        padding: var(--lumo-space-m);
    }

    .app-header,
    .header-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .app-header {
        gap: var(--lumo-space-m);
    }

    .notes-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-field {
        max-width: none;
    }

    .category-filter {
        width: 100%;
    }
}