/* hub.css - Classic Wide Layout */

:root {
    --font-stack: 'Segoe UI', system-ui, sans-serif;
    --radius: 8px;
}

/* THEMES */
body.hub-mode {
    --bg: #f4f6f8; --card-bg: #fff; --text: #333; --accent: #005a9c;
    --border: #ddd; --input-bg: #fff; --btn-text: #fff;
    --banner-bg: #e0f2fe; --banner-border: #0284c7;
}
body.tagger-mode {
    --bg: #111; --card-bg: #222; --text: #eee; --accent: #00ffcc;
    --border: #444; --input-bg: #000; --btn-text: #000;
}

/* CORE LAYOUT */
body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-stack);
    margin: 0;
    padding: 40px 20px; /* More vertical breathing room */
    line-height: 1.6;
}

.container {
    max-width: 900px; /* WIDER LAYOUT */
    margin: 0 auto;
    background: var(--card-bg);
    padding: 3rem; /* Larger padding inside */
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* TYPOGRAPHY */
h1 { color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 15px; margin: 0 0 1.5rem 0; font-size: 2rem; }
h2 { font-size: 1.4rem; margin-top: 2.5rem; border-bottom: 1px solid var(--border); padding-bottom: 10px; opacity: 0.9; }
a { color: inherit; }

/* BANNER */
.team-note {
    background: var(--banner-bg); border: 1px solid var(--banner-border);
    color: #005a9c; padding: 1.5rem; border-radius: 4px; margin-bottom: 2rem;
    font-size: 1.1rem;
    display: flex; justify-content: space-between; align-items: center;
}
#close-banner { background: none; border: none; font-size: 1.5rem; color: #005a9c; cursor: pointer; }

/* FORMS */
label { display: block; margin-bottom: 10px; font-weight: bold; margin-top: 20px; font-size: 1.1rem; }
input[type="text"], input[type="password"], input[type="file"] {
    width: 100%; padding: 15px; background: var(--input-bg); color: var(--text);
    border: 2px solid var(--border); border-radius: 4px; box-sizing: border-box; font-size: 1rem;
}
input:focus { outline: none; border-color: var(--accent); }

/* BUTTONS */
button {
    width: 100%; padding: 18px; font-size: 1.2rem; font-weight: bold;
    background: var(--accent); color: var(--btn-text);
    border: none; border-radius: var(--radius); cursor: pointer; margin-top: 20px;
}
button:hover { opacity: 0.9; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: #555; color: #fff; }

/* UTILITIES */
.hidden { display: none !important; }
.back-link { display: block; text-align: center; margin-top: 30px; font-size: 1.1rem; text-decoration: underline; }
.error-msg { color: #ff4444; font-weight: bold; margin-top: 10px; }
.highlight-link { background: #333 !important; color: #00ffcc !important; text-align: center; font-size: 1.2rem !important; }

/* LINK LISTS (More spacing) */
.portal-links { list-style: none; padding: 0; }
.portal-links li { margin-bottom: 15px; } /* More space between buttons */
.portal-links a {
    display: block; padding: 15px; background: var(--input-bg);
    border: 1px solid var(--border); border-radius: 4px; text-decoration: none; font-weight: bold; font-size: 1.1rem;
}
.portal-links a:hover { border-color: var(--accent); background-color: rgba(0,0,0,0.02); }

/* LOG AREA */
#status-log {
    background: #000; border: 1px solid #444; color: #fff;
    padding: 15px; height: 180px; overflow-y: auto;
    list-style: none; margin-top: 20px; font-family: monospace; font-size: 1rem;
}
#status-log li { padding: 8px 0; border-bottom: 1px solid #333; }

/* SHAKE ANIMATION */
@keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } }
.shake { animation: shake 0.3s ease-in-out; border-color: #ff4444 !important; }