/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* VARIABLES */
:root {
    --bg-main: #0a0f0f;
    --bg-secondary: #111818;
    --bg-card: #162222;

    --text-main: #e0f7f7;
    --text-muted: #7aa6a6;

    --accent: #00ffd5;
    --accent-dark: #00bfa5;
    --accent-green: #00ff88;

    --border: #1f2f2f;
}

/* BODY */
body {
    background: var(--bg-main);
    color: var(--text-main);
    font-family: 'Segoe UI', 'Inter', sans-serif;
    line-height: 1.6;
    letter-spacing: 0.3px;
}

/* HEADINGS */
h1, h2, h3, h4, h5 {
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 10px;
}

h1 {
    font-size: 2rem;
    text-shadow: 0 0 8px rgba(0, 255, 213, 0.4);
}

h2 {
    font-size: 1.6rem;
}

h3 {
    font-size: 1.3rem;
}

/* TEXT */
p {
    color: var(--text-main);
    margin-bottom: 10px;
}

small {
    color: var(--text-muted);
}

/* LINKS */
a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-green);
    text-shadow: 0 0 5px rgba(0, 255, 136, 0.6);
}

/* DIV / CARD STYLE */
div {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    transition: 0.2s ease;
}

/* HOVER EFFECT (subtelny glow) */
div:hover {
    border-color: var(--accent-dark);
    box-shadow: 0 0 12px rgba(0, 255, 213, 0.1);
}

/* BUTTON */
button {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

button:hover {
    background: var(--accent);
    color: #001a1a;
    box-shadow: 0 0 10px rgba(0, 255, 213, 0.4);
}

/* INPUT */
input, textarea {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 8px;
    border-radius: 6px;
    width: 100%;
}

input:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 5px rgba(0, 255, 213, 0.3);
}