/* --------------------------------------------------
   XOLO GLOBAL THEME
-------------------------------------------------- */
:root {
    --xolo-blue: #87ceeb;
    --xolo-neon: #00c8ff;
    --xolo-black: #050505;
    --xolo-bg: #0f0f0f;
    --xolo-card-border: rgba(255,255,255,0.08);
    --xolo-text: #eaeaea;
    --xolo-radius: 12px;
    --xolo-transition: 0.2s ease;
}

/* --------------------------------------------------
   BASE LAYOUT
-------------------------------------------------- */
body {
    background: var(--xolo-black) !important;
    color: var(--xolo-text);
    font-family: system-ui, sans-serif;
    padding-bottom: 60px;
}

.page-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* --------------------------------------------------
   TYPOGRAPHY
-------------------------------------------------- */
h1, h2, h3, h4, h5 {
    color: var(--xolo-blue);
    font-weight: 600;
}

p {
    color: var(--xolo-text);
}

/* --------------------------------------------------
   MENU CARDS (Homepage + Tools)
-------------------------------------------------- */
.menu-card {
    background: var(--xolo-bg);
    border: 1px solid var(--xolo-card-border);
    padding: 20px;
    border-radius: var(--xolo-radius);
    transition: var(--xolo-transition);
}

.menu-card:hover {
    border-color: var(--xolo-neon);
    transform: translateY(-2px);
}

/* --------------------------------------------------
   BUTTONS
-------------------------------------------------- */
.btn-xolo {
    background: var(--xolo-blue);
    color: black;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: bold;
    transition: var(--xolo-transition);
}

.btn-xolo:hover {
    background: var(--xolo-neon);
    color: black;
}

/* --------------------------------------------------
   INPUTS
-------------------------------------------------- */
input.form-control {
    background: #111;
    border: 1px solid var(--xolo-card-border);
    color: var(--xolo-text);
    border-radius: var(--xolo-radius);
}

input.form-control:focus {
    border-color: var(--xolo-blue);
    box-shadow: 0 0 0 2px rgba(135,206,235,0.3);
}

/* --------------------------------------------------
   FLIP CARD (for plugin registry / quiz)
-------------------------------------------------- */
#card {
    width: 100%;
    background: var(--xolo-bg);
    border: 1px solid var(--xolo-card-border);
    border-radius: var(--xolo-radius);
    padding: 20px;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

#card.flipped {
    transform: rotateY(180deg);
}

/* --------------------------------------------------
   UTILITIES
-------------------------------------------------- */
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }

.center {
    text-align: center;
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rounded {
    border-radius: var(--xolo-radius);
}