.root {
    -fx-background-color: #1a1a2e;
    -fx-font-family: "DejaVu Sans", "Segoe UI", sans-serif;
}

.title {
    -fx-font-size: 28px;
    -fx-font-weight: bold;
    -fx-text-fill: #ffffff;
}

.toggle-btn {
    -fx-background-color: #4CAF50;
    -fx-text-fill: white;
    -fx-font-size: 12px;
    -fx-font-weight: bold;
    -fx-padding: 8 16;
    -fx-background-radius: 6;
    -fx-cursor: hand;
}

.toggle-btn:hover {
    -fx-background-color: #45a049;
}

.card {
    -fx-background-color: #3a3a5c;
    -fx-padding: 25 20;
    -fx-spacing: 12;
    -fx-alignment: CENTER;
    -fx-background-radius: 12;
    -fx-border-radius: 12;
    -fx-border-color: transparent;
    -fx-border-width: 2;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 8, 0, 0, 4);
    -fx-cursor: hand;
}

.card:hover {
    -fx-border-color: #4CAF50;
    -fx-effect: dropshadow(gaussian, rgba(76, 175, 80, 0.5), 16, 0, 0, 6);
}

.card:hover .plan-name {
    -fx-font-weight: bold;
}

.plan-name {
    -fx-font-size: 22px;
    -fx-font-weight: normal;
    -fx-text-fill: #ffffff;
}

.price {
    -fx-font-size: 16px;
    -fx-font-weight: bold;
    -fx-text-fill: #4CAF50;
}

.desc {
    -fx-font-size: 12px;
    -fx-text-fill: #aaaaaa;
    -fx-text-alignment: center;
}

.shop-btn {
    -fx-background-color: #4CAF50;
    -fx-text-fill: white;
    -fx-font-size: 14px;
    -fx-font-weight: bold;
    -fx-padding: 10 30;
    -fx-background-radius: 8;
    -fx-cursor: hand;
}

.shop-btn:hover {
    -fx-background-color: #45a049;
    -fx-scale-x: 1.05;
    -fx-scale-y: 1.05;
}