body {
    font-family: 'Lato', Verdana, Geneva, Tahoma, sans-serif; /* Lato added as primary */
    background-color: #282a36; color: #f8f8f2;
    margin: 0; padding: 10px;
    display: flex; flex-direction: column; align-items: center;
}

h1 { 
    color: #bd93f9; font-weight: normal; /* Lato has its own weights, adjust if needed */
    padding-bottom: 5px; margin-bottom: 15px;
    user-select: none; cursor: pointer;
}

.container {
    background-color: #282a36; 
    border: none;
    padding: 10px;
    border-radius: 0; box-shadow: none;
    width: 90%; margin-left: auto; margin-right: auto; margin-bottom: 10px;
}

/* Max width for containers that shouldn't span the full page width */
#TickersTab > .container:nth-of-type(1), /* Add Ticker form */
#PollsTab > .container:nth-of-type(1), /* Add Poll form */
.tab-container,
#adminAccessContainer {
    max-width: 750px;
}

/* Max width for list containers, allowing them to be wider */
#TickersTab > .container:nth-of-type(2), /* Ticker list container */
#PollsTab > .container:nth-of-type(2) { /* Poll list container */
    width: 95%; 
    max-width: none; 
}

#adminAccessContainer { 
    max-width: 450px; 
    display:none; 
    border: none; 
    padding: 5px 8px; 
}

.container h2 { 
    color: #f8f8f2; margin-top: 0; 
    padding-bottom: 5px;
    border-bottom: 1px solid #44475a;
    margin-bottom: 10px;
    font-weight: 700; /* Explicitly use Lato's bold weight for headings */
}

/* General Form Elements */
input[type="text"], input[type="password"], button, select, textarea {
    padding: 6px 8px; margin: 3px; border-radius: 0; 
    border: 1px solid #6272a4;
    background-color: #44475a; color: #f8f8f2; font-size: 0.9em;
    font-family: 'Lato', Verdana, Geneva, Tahoma, sans-serif; /* Lato for form elements */
}

textarea {
    width: calc(100% - 18px); 
    box-sizing: border-box;
    resize: vertical; 
}

input[type="text"]::placeholder, input[type="password"]::placeholder, textarea::placeholder { 
    color: #9a9a9a; 
}

input[type="text"]:focus, input[type="password"]:focus, select:focus, textarea:focus { 
    outline: none; border-color: #bd93f9;
}

/* Buttons */
button {
    cursor: pointer; background-color: #bd93f9; color: #f8f8f2; 
    border: 1px solid #bd93f9;
    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out; 
    font-weight: 700; /* Use Lato bold for buttons */
}
button:focus { outline: none; }
button:hover:not(:disabled) { background-color: #f8f8f2; color: #bd93f9; border-color: #bd93f9; }
button:disabled { background-color: #6272a4; color: #9a9a9a; cursor: not-allowed; border-color: #6272a4; }
button.danger { background-color: #ff5555; border-color: #ff5555; color: #f8f8f2; }
button.danger:hover:not(:disabled) { background-color: #f8f8f2; color: #ff5555; border-color: #ff5555; }
button.secondary { background-color: #8be9fd; border-color: #8be9fd; color: #282a36; }
button.secondary:hover:not(:disabled) { background-color: #f8f8f2; color: #8be9fd; border-color: #8be9fd; }

/* Error Message */
.error-message {
    color: #f8f8f2; background-color: #ff5555; padding: 8px;
    border-radius: 0; margin-top: 8px; border: none;
    text-align: center; width: 100%; box-sizing: border-box; 
    font-weight: 700; /* Lato bold for errors */
}
.error-message:empty { display: none; }

/* Utility Classes */
.hidden { display: none !important; }
.admin-control.hidden { display: none !important; } 

/* Admin Access Input Area */
#adminAccessContainer.visible { display: flex; align-items:center; width:auto; }
#adminAccessLabel { margin-right:6px; font-size:0.9em; color:#f8f8f2; font-weight:700; } /* Lato bold */
#adminAccessContainer input[type="password"]#accessCode { 
    flex-grow:1; max-width:200px; 
    padding:5px 7px; font-size:0.85em; margin:0; 
}

/* Add Item Form Sections (shared by Tickers and Polls "Add New" forms) */
.add-item-form-section input[type="text"], 
.add-item-form-section select, 
.add-item-form-section textarea { 
    display: block; 
    width: calc(100% - 6px); 
    margin-left: 3px; 
    margin-right: 3px;
    margin-bottom: 8px; 
}
.add-item-form-section label { 
    font-size: 0.9em; 
    margin-bottom: 2px; 
    display: inline-block;
    margin-left: 3px;
}

/* Tab Navigation Styles */
.tab-container { 
    overflow: hidden; 
    border-bottom: 1px solid #44475a;
    background-color: #282a36; display: flex; 
}
.tab-button {
    background-color: inherit; color: #f8f8f2; float: left; border: none; outline: none;
    cursor: pointer; padding: 10px 15px; transition: 0.3s; font-size: 0.95em;
    flex-grow: 1; 
    font-family: 'Lato', Verdana, Geneva, Tahoma, sans-serif; /* Ensure tabs use Lato */
}
.tab-button.active { 
    background-color: #bd93f9; color: #282a36; font-weight: 700; /* Lato bold for active tab */
}
.tab-button + .tab-button { border-left: 1px solid #44475a; }
.tab-button:hover { background-color: #44475a; color: #bd93f9; }

.tab-content { 
    display: none; width: 100%; padding-top: 10px; 
}

/* Item Card Base (used by both Ticker and Poll cards, specific styles in their own CSS) */
li.item-card { 
    background-color: #44475a; 
    padding: 10px; 
    margin-bottom: 10px; 
    border: none;
    border-radius: 0;
    display: flex; 
    flex-direction: column; 
    box-sizing: border-box;
}