/* ============================================
   GLOBAL THEME VARIABLES
   ============================================ */
:root {
    --accent: #00FF66;
    --text: #00FF66;
    --bg: #000;
}

/* Amber Mode */
body.theme-amber {
    --accent: #FFB000;
    --text: #FFB000;
}

/* Dark Mode */
body.theme-dark {
    --accent: #CCCCCC;
    --text: #FFFFFF;
}

/* ============================================
   GLOBAL PAGE STYLING
   ============================================ */
body {
    background: var(--bg);
    color: var(--text);
    font-family: monospace;
    margin: 0;
    padding: 0;
}

/* ============================================
   HEADINGS
   ============================================ */
h1, h2, h3 {
    color: var(--accent);
    text-shadow: 0 0 6px var(--accent);
}

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

a:hover {
    text-decoration: underline;
}

/* ============================================
   BOXES / PANELS
   ============================================ */
.box,
.panel,
.info-box,
.download-box,
.tools-box,
.link-box {
    background: var(--bg);
    border: 1px solid var(--accent);
    color: var(--text);
    padding: 20px;
}

/* ============================================
   BUTTONS / INPUTS / FORMS
   ============================================ */
input,
textarea,
button,
select {
    background: var(--bg);
    border: 1px solid var(--accent);
    color: var(--text);
    padding: 8px;
    font-family: monospace;
}

input[type=submit],
button {
    cursor: pointer;
}

input[type=submit]:hover,
button:hover {
    background: var(--accent);
    color: #000;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.glow {
    text-shadow: 0 0 6px var(--accent);
}

.border-glow {
    box-shadow: 0 0 8px var(--accent);
}