* {
box-sizing: border-box;
}
*::before {
box-sizing: border-box;
}
*::after {
box-sizing: border-box;
}
:root {
--bg-gradient: linear-gradient(
    105deg,
    rgba(0,0,0,1) 0%,
    rgba(34,34,34,1) 50%,
    rgba(0,0,0,1) 100%
);
--accent: #d4af37;
--accent-hover: rgba(212, 175, 55, 0.2);
--text: #f0e6d2;
--text-light: #ffffff;
--text-dark: #000000;
--primary-bg: var(--accent);
--primary-text: var(--text-dark);
--primary-hover: var(--accent-hover);
--secondary-bg: transparent;
--secondary-text: var(--accent);
--secondary-border: var(--accent);
--secondary-hover: rgba(212, 175, 55, 0.1);
--input-bg: rgba(255, 255, 255, 0.08);
--input-border: rgba(255, 255, 255, 0.3);
--input-text: var(--text-light);
--button-bg: rgba(0, 0, 0, 0.5);
--button-border: rgba(255, 255, 255, 0.3);
--button-hover: rgba(255, 255, 255, 0.1);
--footer-bg: rgba(0, 0, 0, 0.4);
--sidebar-bg: rgba(0, 0, 0, 0.7);
--border-radius: 8px;
--box-shadow: 0 8px 32px rgba(212, 175, 55, 0.2);
}
html, body {
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--bg-gradient) no-repeat fixed;
background-size: cover;
color: var(--text);
font-family: system-ui, sans-serif;
overflow: auto;
}
footer {
margin-top: auto;
padding: 12px 20px;
text-align: center;
background-color: var(--footer-bg);
color: var(--text-light);
font-size: 0.85em;
box-sizing: border-box;
}
.content a:link, .content a:visited, footer a:link, footer a:visited {
color: var(--text-light);
text-decoration: underline;
}
.content a:hover, footer a:hover {
color: var(--accent);
}
.glass-input {
display: block;
width: 100%;
padding: 0.5rem;
margin: 0.25rem 0 1rem;
background-color: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: 6px;
color: var(--text-light);
box-sizing: border-box;
}
.glass-button {
display: block;
width: 100%;
padding: 0.75rem;
margin: 0;
background-color: var(--button-bg);
border: 1px solid var(--button-border);
border-radius: 8px;
color: var(--text-light);
font-weight: bold;
text-align: center;
cursor: pointer;
transition: background 0.2s ease;
box-sizing: border-box;
}
.glass-button:hover {
background-color: var(--button-hover);
}
img.email-image {
vertical-align: middle;
margin-left: 0.5rem;
height: 1.5em;
}
.global-footer {
margin-top: 2rem;
font-size: 0.9rem;
color: #aaa;
text-align: center;
}
.alert-success {
background-color: #d1fae5;
color: #065f46;
padding: 1rem;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
.alert-error {
background-color: #fee2e2;
color: #991b1b;
padding: 1rem;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
.system-info {
background-color: #fef3c7;
color: #92400e;
padding: 1rem;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
.system-info-urgent {
background-color: #fecaca;
color: #7f1d1d;
padding: 1rem;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
a:link, a:visited {
color: var(--text-light);
}
a:hover, a:active {
color: var(--accent);
}
@media only screen and (max-width: 768px) {
html, body {
flex-direction: column;
}
.content {
padding: 12px;
}
table {
display: block;
width: 100%;
overflow-x: auto;
}
ul, ol {
padding-left: 1.25rem;
overflow-wrap: anywhere;
}
.project-list {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
}
.project-item {
padding: 0.75rem;
}
.glass-button {
padding: 0.5rem;
}
}