* { box-sizing: border-box; }
html, body { max-width: 100%; }
body { margin: 0; font-family: "Cairo", Tahoma, sans-serif; background: #f6f3ee; color: #1c1917; }
.shell { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); min-height: 100vh; }
.side { background: #1c1917; color: #f6f3ee; padding: 1rem; display: grid; align-content: start; gap: .35rem; }
.side a, .side button { color: #f6f3ee; text-decoration: none; background: transparent; border: 0; text-align: start; padding: .35rem 0; cursor: pointer; }
.main { padding: 1rem 1.2rem 3rem; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { border-bottom: 1px solid #e6dfd6; padding: .55rem; text-align: start; vertical-align: top; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.card, form.box, .box { background: white; border-radius: 14px; padding: .9rem; }
form.box, .stack { display: grid; gap: .6rem; }
input, select, textarea { width: 100%; padding: .55rem; border: 1px solid #e6dfd6; border-radius: 10px; font: inherit; }
button, .btn { background: #1c1917; color: white; border: 0; border-radius: 999px; padding: .45rem .8rem; cursor: pointer; text-decoration: none; display: inline-block; }
.alert { padding: .6rem .8rem; border-radius: 10px; background: #f3e7d8; }
.alert-error { background: #f8e4e1; }
.alert-ok { background: #e5f0ea; }
.login { width: min(420px, calc(100% - 1.5rem)); margin: 8vh auto; }
.login h1 { overflow-wrap: anywhere; font-size: clamp(1.25rem, 5vw, 1.8rem); }
@media (max-width: 900px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .side { display: flex; gap: .8rem; overflow-x: auto; white-space: nowrap; min-width: 0; max-width: 100%; }
    .side a, .side form, .side button { white-space: nowrap; }
    .main { min-width: 0; padding: .8rem; }
    .cards { grid-template-columns: 1fr 1fr; }
    table { display: block; overflow-x: auto; }
}
@media (max-width: 520px) { .cards { grid-template-columns: 1fr; } }