/* --- 1. MR HACKER COLOR PALETTE --- */
:root {
    --bg-main: #050505;         /* OLED Black */
    --bg-surface: #111111;      /* Elevated Dark */
    --bg-panel: #181818;        /* Input backgrounds */
    --accent-primary: #00FF66;  /* Hacker Neon Green */
    --text-main: #E0E0E0;       
    --text-muted: #666666;      
    --text-inverse: #000000;    
    --border-color: #222222;    
    --border-radius: 12px;      /* Rounded Shape */
}

html { min-height: 100%; position: relative; }
body {
    background: var(--bg-main); color: var(--text-main);
    font-family: monospace, 'Open Sans', sans-serif;
    font-size: 14px; line-height: 1.6; margin: 0; text-align: center;
}

a:link, a:active, a:visited { color: var(--text-main); text-decoration: none; transition: all 0.3s ease; }
a:hover { color: var(--accent-primary); text-decoration: none; text-shadow: 0 0 8px rgba(0, 255, 102, 0.5); }

#container { width: 90%; max-width: 1200px; margin: 40px auto; text-align: left; }
#content { padding: 10px; }

/* --- FLOATING CARD DESIGN --- */
table { width: 100%; color: var(--text-main); font-size: 13px; }
table.tborder { background: transparent; width: 100%; margin: auto auto; border: none; border-collapse: separate; border-spacing: 0 10px; }

.thead {
    background: var(--accent-primary); color: var(--text-inverse);
    padding: 16px 20px; font-size: 16px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
    border-radius: var(--border-radius); box-shadow: 0 4px 15px rgba(0, 255, 102, 0.2);
}
.thead a:link, .thead a:visited, .thead a:hover { color: var(--text-inverse); }

.tcat { background-color: transparent; border-bottom: 1px solid var(--border-color); padding: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }

.trow1, .trow2 { background: var(--bg-surface); padding: 15px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); transition: transform 0.2s ease; }
.trow1:hover, .trow2:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.trow1:first-child, .trow2:first-child { border-left: 1px solid var(--border-color); border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); }
.trow1:last-child, .trow2:last-child { border-right: 1px solid var(--border-color); border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); }
.tfoot { padding: 11px; text-align: right; }

/* --- BUTTONS & INPUTS --- */
button, input.button, a.button {
    background: transparent; color: var(--accent-primary);
    padding: 10px 20px; cursor: pointer; border: 1px solid var(--accent-primary);
    border-radius: 30px; outline: 0; transition: all 0.3s ease;
    font-family: monospace; font-size: 14px; font-weight: bold; display: inline-block;
}
button:hover, input.button:hover, a.button:hover { background: var(--accent-primary); color: var(--text-inverse); box-shadow: 0 0 15px rgba(0, 255, 102, 0.4); }

input.textbox, textarea, select {
    color: var(--accent-primary); border: 1px solid var(--border-color);
    background-color: var(--bg-panel); padding: 12px; border-radius: var(--border-radius);
    outline: 0; font-family: monospace; width: 100%; box-sizing: border-box;
}
input.textbox:focus, textarea:focus, select:focus { border-color: var(--accent-primary); box-shadow: 0 0 5px rgba(0, 255, 102, 0.2); }

/* --- POSTS --- */
.post { background: var(--bg-surface); border-radius: var(--border-radius); border: 1px solid var(--border-color); margin-bottom: 20px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.post_author { background: var(--bg-panel); padding: 20px; border-right: 1px solid var(--border-color); }
.post_content { padding: 25px; }
.post_controls { background: var(--bg-main); border-top: 1px solid var(--border-color); padding: 15px 20px; }
.author_avatar img { border-radius: 50%; border: 2px solid var(--accent-primary); padding: 3px; box-shadow: 0 0 10px rgba(0, 255, 102, 0.2); }
.author_statistics { font-size: 12px; color: var(--text-muted); margin-top: 10px; font-family: monospace; }
.clear { clear: both; } .float_left { float: left; } .float_right { float: right; }