/* Margin card backgrounds - opaque CSS gradients + SVG patterns */

.margin-theme-classic,
.margin-theme-modern,
.margin-theme-dark,
.margin-theme-paper,
.margin-theme-sunset,
.margin-theme-forest,
.margin-theme-ocean,
.margin-theme-lavender {
    isolation: isolate;
}

.margin-theme-classic,
.margin-theme-paper,
.margin-theme-sunset,
.margin-theme-ocean,
.margin-theme-lavender {
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: cover, cover, cover;
}

.margin-theme-modern,
.margin-theme-dark,
.margin-theme-forest {
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: cover, cover, cover, cover;
}

.margin-theme-classic {
    color: #2c2c2c;
    border: 1px solid rgba(139, 115, 85, 0.28);
    background-color: #ebe3d4;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 48 L48 0 M-8 40 L8 56 M40 -8 L56 8' stroke='%23a89272' stroke-width='0.6' opacity='0.14' fill='none'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 95% 55% at 50% 0%, #fffaf2 0%, #ebe3d4 58%),
        linear-gradient(168deg, #faf6ef 0%, #ebe3d4 42%, #d4c4a8 100%);
}

.margin-theme-modern {
    color: #1f2937;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='2' cy='2' r='1' fill='%2394a3b8' fill-opacity='0.22'/%3E%3C/svg%3E"),
        radial-gradient(circle at 18% 8%, #eef0ff 0%, #f8fafc 42%),
        radial-gradient(circle at 88% 92%, #e8f4fc 0%, #f1f5f9 38%),
        linear-gradient(180deg, #ffffff 0%, #f1f5f9 52%, #e2e8f0 100%);
}

.margin-theme-dark {
    color: #f8f4ec;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: #1a1410;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40 Q20 32 40 40 T80 40 M0 55 Q20 47 40 55 T80 55' fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 100% 75% at 50% 100%, #3d3020 0%, #1a1410 52%),
        radial-gradient(ellipse 50% 35% at 85% 15%, #2a2520 0%, #1a1410 100%),
        linear-gradient(175deg, #120e0a 0%, #2a2118 38%, #1e293b 100%);
}

.margin-theme-paper {
    color: #3f3a32;
    border: 1px solid rgba(180, 155, 120, 0.35);
    background-color: #f3ead8;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='3' cy='3' r='0.8' fill='%23b49b78' fill-opacity='0.18'/%3E%3Ccircle cx='11' cy='11' r='0.6' fill='%23b49b78' fill-opacity='0.12'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 80% 50% at 50% 0%, #fffaf0 0%, #f0e2c8 55%),
        linear-gradient(180deg, #faf3e4 0%, #f0e2c8 55%, #e6d4b4 100%);
}

.margin-theme-sunset {
    color: #4a2c2a;
    border: 1px solid rgba(200, 100, 80, 0.35);
    background-color: #ffe8d9;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 8 L32 28 L52 30 L32 32 L30 52 L28 32 L8 30 L28 28 Z' fill='%23f4a261' fill-opacity='0.12'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 90% 60% at 50% 0%, #fff5eb 0%, #ffd4b8 50%),
        linear-gradient(168deg, #fff8f0 0%, #ffd4b8 42%, #f4a261 100%);
}

.margin-theme-forest {
    color: #e2ede4;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: #1a2e22;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 4 C16 14 8 16 8 24 C8 30 13 34 20 36 C27 34 32 30 32 24 C32 16 24 14 20 4Z' fill='%234ade80' fill-opacity='0.08'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 70% 50% at 20% 100%, #2d5a3d 0%, #1a2e22 55%),
        linear-gradient(175deg, #0d1a12 0%, #1e3d2b 45%, #2a5240 100%);
}

.margin-theme-ocean {
    color: #1a3a4a;
    border: 1px solid #b8d4e3;
    background-color: #e8f4f8;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='20' viewBox='0 0 80 20'%3E%3Cpath d='M0 12 Q20 6 40 12 T80 12' fill='none' stroke='%230ea5e9' stroke-opacity='0.2' stroke-width='1.5'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 80% 55% at 50% 100%, #bae6fd 0%, #e8f4f8 45%),
        linear-gradient(180deg, #f0f9ff 0%, #bae6fd 52%, #7dd3fc 100%);
}

.margin-theme-lavender {
    color: #3d3550;
    border: 1px solid rgba(150, 120, 180, 0.35);
    background-color: #f3eef8;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='6' cy='6' r='1.2' fill='%23a855f7' fill-opacity='0.2'/%3E%3Ccircle cx='18' cy='14' r='0.9' fill='%23c084fc' fill-opacity='0.16'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 85% 55% at 50% 0%, #faf5ff 0%, #e9d5ff 50%),
        linear-gradient(175deg, #faf5ff 0%, #e9d5ff 45%, #d8b4fe 100%);
}