/* style.css v0.002 - Shared for both index.html and admin.html, optimized for dark mode, white text, and subtle accents */

/* ===== Design System Tokens: Optimized for a dark background ===== */

:root {

--color-background: #131415; /* Deep black/charcoal */

--color-surface: #1a1b1e; /* Panel BG */

--color-text: #fff; /* White text */

--color-text-secondary: #b2b7be; /* Muted white/gray */

--color-primary: #33b9f2; /* Gentle blue for highlights */

--color-primary-hover: #2196f3;

--color-primary-active: #156db2;

--color-secondary: #22242a; /* Soft near-black */

--color-secondary-hover: #34373f;

--color-secondary-active: #23252b;

--color-border: #27292f; /* Very dark gray */

--color-error: #ee3d3d;

--color-success: #47f5b0;

--color-info: #46c9f5;

--color-card-border: #23252b;

--color-btn-primary-text: #fff;

--color-warning: #ffe082;

--color-focus-ring: rgba(51,185,242,0.22);

--font-family-base: 'Segoe UI', Arial, Helvetica, sans-serif;

--font-family-mono: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;

--font-size-base: 14px;

--font-size-md: 16px;

--font-size-lg: 18px;

--font-size-xl: 20px;

--font-size-2xl: 26px;

--font-size-3xl: 32px;

--font-size-4xl: 40px;

--space-4: 4px;

--space-8: 8px;

--space-12: 12px;

--space-16: 16px;

--space-20: 20px;

--space-24: 24px;

--space-32: 32px;

--radius-sm: 6px;

--radius-base: 10px;

--radius-md: 16px;

--radius-lg: 22px;

--shadow-md: 0 2px 16px 0 rgba(0,0,0,0.15);



/* No need for prefers-color-scheme since we want always-dark! */

/* ========== Reset & Accessibility ========== */

html, body {

background: var(--color-background);

color: var(--color-text);

font-family: var(--font-family-base);

font-size: var(--font-size-base);

line-height: 1.6;

margin: 0; padding: 0;

}

*, *::before, *::after { box-sizing: border-box; }

a {

color: var(--color-primary);

text-decoration: none;

transition: color 0.2s;

}

a:hover { color: var(--color-primary-hover); }

.hidden { display: none !important; }

.block { display: block; }

/* ========== Admin & App Table Styles ========== */

table {

width: 100%;

border-collapse: collapse;

background: var(--color-surface);

margin-top: 1.25em;

}

th, td {

border: 1px solid var(--color-border);

padding: var(--space-8) var(--space-12);

}

th {

background: var(--color-secondary);

color: var(--color-primary);

font-weight: 600;

}

td { color: var(--color-text); }

input, textarea {

background: var(--color-secondary);

color: var(--color-text);

border: 1px solid var(--color-border);

border-radius: var(--radius-base);

padding: var(--space-8) var(--space-12);

font-size: var(--font-size-md);

}

input:focus, textarea:focus {

border-color: var(--color-primary);

outline: 2px solid var(--color-primary);

}

button {

padding: var(--space-8) var(--space-16);

border-radius: var(--radius-sm);

border: none;

cursor: pointer;

font-size: var(--font-size-base);

background: var(--color-secondary);

color: var(--color-text);

transition: background 0.22s;

}

button.primary, .btn--primary {

background: var(--color-primary);

color: var(--color-btn-primary-text);

}

button.primary:hover, .btn--primary:hover { background: var(--color-primary-hover);}

button.danger { background: var(--color-error); color: #fff; }

button.danger:hover { background: #c13232; }

button.gray { background: var(--color-border);}

button:disabled { opacity: 0.65; cursor: not-allowed; }

.admin-header { display: flex; justify-content: space-between; align-items: center; }

.admin-section { margin-bottom: var(--space-24); }

#loginError { color: var(--color-error); margin-top:12px;}

#adminLogin { margin-top: 80px; text-align: center; }

h2, h4 { color: var(--color-primary); }

/* ========== Layout, Panel and Section Styles ========== */

.container {

max-width: 700px; margin: 36px auto; padding: 0 var(--space-16);

}

.section {

background: none;

min-height: 80vh;

padding: var(--space-24) 0;

}

.section.hidden { display: none; }

.voting-header, .winner-announcement { text-align: center; margin-bottom: var(--space-24);}

.voting-instructions { text-align: center; margin-bottom: var(--space-16); color: var(--color-text-secondary);}

.ranking-container { max-width: 600px; margin: 0 auto; }

/* ========== Inputs / Form UI ========== */

.form-control { width: 100%; margin-bottom: var(--space-8);}

input[type="password"], input[type="text"] { background: var(--color-secondary);}

input:focus, textarea:focus { outline: 2px solid var(--color-primary); border-color: var(--color-primary);}

.voter-input { display: flex; gap: var(--space-12); flex-wrap: wrap; margin-bottom: var(--space-16);}

.voter-input input { flex: 1; min-width: 200px;}

/* ========== Voting