/* =======================
   RESET
======================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* =======================
   BODY
======================= */

body{

font-family:
Arial,
Helvetica,
sans-serif;

background:#f5f6fa;

padding:15px;

color:#333;

line-height:1.5;

}

/* =======================
   CONTAINER
======================= */

.container{

max-width:1200px;
margin:auto;

}

/* =======================
   TEXT
======================= */

h1,h2,h3,h4{

margin-bottom:15px;

}

p{

margin-bottom:10px;

}

a{

text-decoration:none;

}

/* =======================
   FORM
======================= */

input,
select,
textarea{

width:100%;

padding:12px;

font-size:16px;

border:1px solid #ccc;

border-radius:8px;

background:white;

}

textarea{

min-height:100px;

}

/* =======================
   BUTTON
======================= */

button,
.btn{

padding:12px 16px;

border:none;

border-radius:8px;

cursor:pointer;

font-size:15px;

display:inline-block;

}

.btn-primary{

background:#0066cc;
color:white;

}

.btn-success{

background:#28a745;
color:white;

}

.btn-danger{

background:#dc3545;
color:white;

}

.btn-warning{

background:#ffc107;
color:black;

}

/* =======================
   CARD
======================= */

.card{

background:white;

padding:15px;

border-radius:12px;

box-shadow:
0 2px 8px rgba(0,0,0,.08);

margin-bottom:15px;

}

/* =======================
   TABLE
======================= */

.table-responsive{

overflow-x:auto;

}

table{

width:100%;

border-collapse:collapse;

background:white;

}

table th{

background:#0066cc;

color:white;

padding:10px;

text-align:left;

}

table td{

padding:10px;

border:1px solid #ddd;

}

table tr:nth-child(even){

background:#fafafa;

}

/* =======================
   ALERT
======================= */

.alert-success{

background:#d4edda;

padding:12px;

border-radius:8px;

margin-bottom:15px;

}

.alert-danger{

background:#f8d7da;

padding:12px;

border-radius:8px;

margin-bottom:15px;

}

/* =======================
   MENU CARD
======================= */

.menu-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(180px,1fr));

gap:15px;

}

.menu-card{

background:white;

padding:20px;

border-radius:12px;

text-align:center;

box-shadow:
0 2px 8px rgba(0,0,0,.08);

}

/* =======================
   MOBILE
======================= */

@media(max-width:768px){

body{

padding:10px;

}

h1{

font-size:24px;

}

h2{

font-size:22px;

}

h3{

font-size:18px;

}

button,
.btn{

width:100%;

margin-bottom:5px;

}

table{

font-size:14px;

}

input,
select,
textarea{

font-size:16px;

}

}