:root {
--tpu-black: #000000;
--tpu-white: #ffffff;
--tpu-red: #D10000;
--tpu-gray: #f2f2f2;
--tpu-border: 1px solid #000;
--tpu-serif: "Georgia", "Times New Roman", Times, serif;
--tpu-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
} .tpu-auth-container {
max-width: 400px;
margin: 50px auto;
border: var(--tpu-border);
padding: 30px;
background: var(--tpu-white);
}
.tpu-dashboard-wrapper {
display: flex;
max-width: 1200px;
margin: 30px auto;
border: var(--tpu-border);
min-height: 600px;
} .tpu-auth-tabs {
display: flex;
border-bottom: var(--tpu-border);
margin-bottom: 20px;
}
.tpu-tab-btn {
flex: 1;
background: none;
border: none;
padding: 10px;
font-family: var(--tpu-sans);
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
opacity: 0.5;
transition: 0.2s;
}
.tpu-tab-btn.active {
opacity: 1;
border-bottom: 3px solid var(--tpu-black);
}
.tpu-form { display: none; }
.tpu-form.active { display: block; } .tpu-header {
font-family: var(--tpu-serif);
font-size: 28px;
margin-bottom: 5px;
color: var(--tpu-black);
}
.tpu-subhead {
font-family: var(--tpu-sans);
font-size: 14px;
color: #555;
margin-bottom: 25px;
} .tpu-input-group { margin-bottom: 20px; }
.tpu-input-group label {
display: block;
font-family: var(--tpu-sans);
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 5px;
}
.tpu-input-group input[type="text"],
.tpu-input-group input[type="email"],
.tpu-input-group input[type="password"],
.tpu-input-group select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 0; font-family: var(--tpu-serif);
font-size: 16px;
transition: border 0.2s;
}
.tpu-input-group input:focus,
.tpu-input-group select:focus {
border: 1px solid var(--tpu-black);
outline: none;
}
.tpu-btn {
width: 100%;
background: var(--tpu-black);
color: var(--tpu-white);
padding: 12px;
border: none;
font-family: var(--tpu-sans);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: background 0.3s;
}
.tpu-btn:hover {
background: #333;
} .tpu-alert {
padding: 10px;
margin-bottom: 15px;
font-family: var(--tpu-sans);
font-size: 13px;
border-left: 4px solid var(--tpu-red);
background: #fff0f0;
} .tpu-sidebar {
width: 250px;
border-right: var(--tpu-border);
padding: 20px;
background: #f9f9f9;
}
.tpu-user-card {
text-align: center;
margin-bottom: 30px;
}
.tpu-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--tpu-black);
margin-bottom: 10px;
}
.tpu-username {
display: block;
font-family: var(--tpu-serif);
font-weight: bold;
font-size: 18px;
}
.tpu-nav-tabs li {
list-style: none;
padding: 10px 15px;
font-family: var(--tpu-sans);
cursor: pointer;
border-left: 3px solid transparent;
transition: 0.2s;
margin-bottom: 5px;
}
.tpu-nav-tabs li:hover { background: #eee; }
.tpu-nav-tabs li.active {
border-left: 3px solid var(--tpu-red);
font-weight: bold;
background: #fff;
}
.tpu-logout {
display: block;
margin-top: 30px;
font-family: var(--tpu-sans);
color: var(--tpu-red);
text-decoration: none;
font-size: 13px;
text-transform: uppercase;
} .tpu-content {
flex: 1;
padding: 40px;
}
.tpu-tab-content { display: none; }
.tpu-tab-content.active { display: block; }
.tpu-content h3 {
font-family: var(--tpu-serif);
font-size: 24px;
border-bottom: 2px solid var(--tpu-black);
padding-bottom: 10px;
margin-bottom: 30px;
}
.tpu-input-row {
display: flex;
gap: 20px;
}
.tpu-input-row .tpu-input-group { flex: 1; } .tpu-table {
width: 100%;
border-collapse: collapse;
font-family: var(--tpu-sans);
}
.tpu-table th {
text-align: left;
border-bottom: 2px solid var(--tpu-black);
padding: 10px;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
.tpu-table td {
border-bottom: 1px solid #ddd;
padding: 15px 10px;
}
.tpu-badge {
padding: 4px 8px;
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
border-radius: 2px;
}
.status-green { background: #e6ffe6; color: #006600; border: 1px solid #006600; }
.status-orange { background: #fff5e6; color: #cc6600; border: 1px solid #cc6600; }
.status-red { background: #ffe6e6; color: var(--tpu-red); border: 1px solid var(--tpu-red); }