:root{
  --bg:#0b0b0c;
  --panel:#0f0f10;
  --accent:#b30000;
  --muted:#9b9b9b;
  --text:#e6e6e6;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,#050505,#0b0b0c);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* screens */
.screen{min-height:100vh;}
.hidden{display:none}

/* center card (login) */
.center-card{
  max-width:380px;
  margin:120px auto;
  background:var(--panel);
  padding:24px;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
  text-align:center;
}
.center-card h2{margin:0 0 12px}
.center-card input{
  width:100%; padding:12px; margin:8px 0; border-radius:8px; background:#121213; border:1px solid #222;
  color:var(--text);
}
.center-card button{
  width:100%; padding:12px; margin-top:12px; background:var(--accent); color:#fff; border:none; border-radius:8px; cursor:pointer;
}
.center-card .hint{font-size:12px; color:var(--muted); margin-top:10px}

/* app layout */
.topbar{
  display:flex; justify-content:space-between; align-items:center; padding:14px 20px; background:#070707; border-bottom:1px solid #151515;
}
.topbar .title{font-weight:700}
.topbar .userinfo button{margin-left:10px; padding:6px 8px; border-radius:6px; background:#252525; color:var(--text); border:1px solid #333; cursor:pointer}

.layout{display:flex; min-height:calc(100vh - 120px)}
.sidebar{
  width:200px; background:#070707; padding:20px; border-right:1px solid #121212;
  display:flex; flex-direction:column; gap:8px;
}
.sidebar .navBtn{
  background:#111; color:var(--text); border:none; padding:10px; border-radius:8px; text-align:left; cursor:pointer;
}
.sidebar .navBtn:hover{background:#1a1a1a}

.content{flex:1; padding:24px}
.section{max-width:900px}
.card{background:var(--panel); padding:16px; border-radius:8px; margin-bottom:12px}

/* inputs & controls */
textarea, input{
  width:100%; padding:12px; background:#0b0b0c; color:var(--text); border:1px solid #222; border-radius:8px; margin:8px 0;
}
.row{display:flex; gap:12px; align-items:center}
.row button{flex:0 0 auto; padding:10px 14px; background:var(--accent); border:none; color:#fff; border-radius:8px; cursor:pointer}
.row button.secondary{background:#333}

/* prix list */
.price-list{background:#080808; padding:12px; border-radius:8px; margin-bottom:12px}
.price-item{display:flex; justify-content:space-between; padding:8px 6px; border-bottom:1px solid #111}
.price-item:last-child{border-bottom:0}
.coke-box{background:#0b0b0c; padding:10px; border-radius:8px; border:1px solid #111}

.footer{padding:16px; text-align:center; color:var(--muted)}