* {
box-sizing: border-box;
}
html {
background: #f5f7fb;
}
body {
margin: 0;
background: #f5f7fb;
color: #182230;
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
sans-serif;
min-height: 100vh;
}
/* =========================================================
DARK MODE
========================================================= */
html.dark {
background: #0d1117;
}
html.dark body {
background: #0d1117;
color: #f0f3f8;
}
/* =========================================================
HEADER
========================================================= */
header {
min-height: 68px;
background: #101827;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5vw;
gap: 20px;
}
html.dark header {
background: #05080d;
}
header a {
color: white;
text-decoration: none;
}
.brand {
font-weight: 800;
font-size: 1.25rem;
}
/* =========================================================
NAVIGATION
========================================================= */
nav {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
/* =========================================================
MAIN
========================================================= */
main {
max-width: 1180px;
margin: 36px auto;
padding: 0 20px;
}
/* =========================================================
CARDS
========================================================= */
.card,
.login-card,
.user-card {
background: white;
color: #182230;
border: 1px solid #e5e9f0;
box-shadow:
0 6px 20px rgba(0,0,0,.08);
}
html.dark .card,
html.dark .login-card,
html.dark .user-card {
background: #171e2b;
color: #f0f3f8;
border-color: #303a4a;
}
.card {
border-radius: 18px;
padding: 24px;
margin: 22px 0;
}
.login-card {
max-width: 440px;
margin: 10vh auto;
padding: 32px;
border-radius: 20px;
}
.user-card {
border-radius: 14px;
padding: 16px;
}
.narrow {
max-width: 620px;
}
/* =========================================================
HERO
========================================================= */
.hero {
padding: 26px 0 10px;
}
.hero h1 {
font-size: 2.3rem;
margin: 0 0 8px;
}
.hero p {
color: #687386;
}
html.dark .hero p {
color: #aab4c5;
}
/* =========================================================
GRID
========================================================= */
.grid {
display: grid;
gap: 22px;
}
.grid.two {
grid-template-columns:
repeat(
2,
minmax(0,1fr)
);
}
/* =========================================================
INPUT
========================================================= */
label {
display: block;
font-weight: 650;
margin: 13px 0 6px;
}
input,
select {
width: 100%;
padding: 12px 13px;
border:
1px solid #cfd6e2;
border-radius: 10px;
background: white;
color: #182230;
font: inherit;
}
html.dark input,
html.dark select {
background: #0f1622;
color: #f0f3f8;
border-color: #3a4658;
}
/* =========================================================
BUTTONS
========================================================= */
button {
margin-top: 14px;
border: 0;
background: #2d6cdf;
color: white;
padding:
11px 16px;
border-radius: 10px;
font-weight: 700;
cursor: pointer;
}
button:hover {
filter: brightness(1.1);
}
.theme-toggle {
margin: 0;
background: transparent;
color: white;
border:
1px solid
rgba(255,255,255,.35);
padding: 7px 12px;
}
.danger {
background: #c83e3e;
}
.secondary {
background: #5b6574;
}
.smallbtn {
margin: 0;
padding: 7px 10px;
}
/* =========================================================
TEXT
========================================================= */
.muted {
color: #687386;
}
html.dark .muted {
color: #aab4c5;
}
.small {
font-size: .9rem;
}
a {
color: #2d6cdf;
}
html.dark main a {
color: #79a7ff;
}
/* =========================================================
TABLE
========================================================= */
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
text-align: left;
padding: 10px;
border-bottom:
1px solid #e5e9f0;
}
html.dark th,
html.dark td {
border-color: #303a4a;
}
th {
color: #687386;
font-size: .9rem;
}
html.dark th {
color: #aab4c5;
}
/* =========================================================
LISTS
========================================================= */
.list-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.list-links a {
padding: 12px;
border:
1px solid #e5e9f0;
border-radius: 10px;
text-decoration: none;
font-weight: 650;
}
html.dark .list-links a {
border-color: #303a4a;
}
/* =========================================================
FEATURES
========================================================= */
.features {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.features span {
border:
1px solid #e5e9f0;
border-radius: 999px;
padding: 8px 11px;
}
html.dark .features span {
border-color: #303a4a;
}
/* =========================================================
PRICE CARDS
========================================================= */
.pricecards {
display: grid;
grid-template-columns:
repeat(
auto-fit,
minmax(150px,1fr)
);
gap: 12px;
}
.pricecard {
display: flex;
justify-content: space-between;
padding: 14px;
border:
1px solid #e5e9f0;
border-radius: 12px;
}
html.dark .pricecard {
border-color: #303a4a;
}
/* =========================================================
RECOMMENDATION
========================================================= */
.recommendation {
margin-top: 22px;
border:
2px solid #d1d8e3;
border-radius: 16px;
padding: 20px;
background: #fafcff;
}
html.dark .recommendation {
background: #111824;
border-color: #3a4658;
}
.badge {
display: inline-block;
border:
1px solid #d1d8e3;
color: #2d6cdf;
font-weight: 800;
padding: 7px 10px;
border-radius: 999px;
}
html.dark .badge {
border-color: #3a4658;
color: #79a7ff;
}
.bigprice {
font-size: 2rem;
font-weight: 850;
margin: 7px 0 18px;
}
/* =========================================================
MESSAGES
========================================================= */
.error {
background: #fff0f0;
color: #a12b2b;
padding: 10px 12px;
border-radius: 10px;
}
html.dark .error {
background: #3b1818;
color: #ffb4b4;
}
.success {
background: #e9f9ef;
color: #186a3b;
padding: 10px 12px;
border-radius: 10px;
}
html.dark .success {
background: #153221;
color: #8ee2ad;
}
/* =========================================================
HELPERS
========================================================= */
.row {
display: flex;
align-items: center;
gap: 12px;
}
.spread {
justify-content: space-between;
}
.wrap {
flex-wrap: wrap;
}
.back {
color: #687386;
text-decoration: none;
}
html.dark .back {
color: #aab4c5;
}
.scroll {
max-height: 520px;
overflow: auto;
}
.checkrow {
display: flex;
align-items: center;
gap: 8px;
}
.checkrow input {
width: auto;
}
.users-grid {
display: grid;
gap: 14px;
}
.inline-password {
display: grid;
grid-template-columns:
1fr auto;
gap: 10px;
margin-top: 14px;
}
.inline-password button {
margin: 0;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.grid.two {
grid-template-columns: 1fr;
}
header {
padding: 12px 18px;
align-items: flex-start;
}
nav {
gap: 10px;
font-size: .9rem;
justify-content: flex-end;
}
.hero h1 {
font-size: 1.8rem;
}
table {
font-size: .9rem;
}
.inline-password {
grid-template-columns: 1fr;
}
}
/* =========================================================
PRODUCT LIVE SEARCH
========================================================= */
.product-search-wrapper {
position: relative;
}
.product-suggestions {
display: none;
position: absolute;
left: 0;
right: 0;
top: calc(100% + 5px);
z-index: 1000;
max-height: 350px;
overflow-y: auto;
background: white;
border: 1px solid #cfd6e2;
border-radius: 10px;
box-shadow:
0 10px 30px
rgba(0,0,0,.15);
}
.product-suggestion {
width: 100%;
margin: 0;
padding: 11px 14px;
border: 0;
border-bottom:
1px solid #e5e9f0;
border-radius: 0;
background: white;
color: #182230;
text-align: left;
display: flex;
flex-direction: column;
gap: 3px;
cursor: pointer;
}
.product-suggestion:first-child {
border-radius:
10px 10px 0 0;
}
.product-suggestion:last-child {
border-bottom: 0;
border-radius:
0 0 10px 10px;
}
.product-suggestion:hover {
background: #eef4ff;
}
.product-suggestion-name {
font-weight: 700;
}
.product-suggestion-details {
font-size: .82rem;
color: #687386;
}
.product-suggestion-empty {
padding: 14px;
color: #687386;
}
.selected-product {
margin-top: 14px;
padding: 10px 12px;
border-radius: 10px;
background: #edf8f0;
color: #21683a;
}
/* DARK MODE */
html.dark .product-suggestions {
background: #171e2b;
border-color: #3a4658;
}
html.dark .product-suggestion {
background: #171e2b;
color: #f0f3f8;
border-color: #303a4a;
}
html.dark .product-suggestion:hover {
background: #222d3d;
}
html.dark .product-suggestion-details {
color: #aab4c5;
}
html.dark .product-suggestion-empty {
color: #aab4c5;
}
html.dark .selected-product {
background: #153221;
color: #8ee2ad;
}