/* =========================
   Global App Styles (app.css)
   ========================= */
:root{
  --bg:#121212;
  --panel:#1e1e1e;
  --muted:#9aa0a6;
  --brand:#e53935;
  --brand-2:#ff7043;
  --ok:#28a745;
  --ring:#3a3a3a;
}
/* Header — fixed + lighter tone */
:root{ --header-h: 56px; }
/* Base */
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:#fff}

header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 18px;                 /* slightly slimmer */
  background: rgba(24,24,24,0.85);    /* lighter & a bit transparent */
  backdrop-filter: saturate(130%) blur(6px); /* subtle glass effect (optional) */
  border-bottom: 1px solid #2a2a2a;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  z-index: 70;                        /* below overlays (80+) */
}
/* Stronger background once you start scrolling */
header.scrolled{
  background: #181818;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Keep page content from sliding under the fixed header */
body{ padding-top: var(--header-h); }

/* Logo/Menu tweaks if needed */
.logo{ font-weight:700; background:#d32f2f; padding:5px 10px; border-radius:4px }
.menu{ font-size:22px; cursor:pointer }

/* Card */
.card{max-width:520px;margin:28px auto;background:var(--panel);border-radius:12px;padding:18px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.card h2{margin:4px 0 14px 0;text-align:center}
.hint{color:var(--muted);text-align:center;margin:0 0 14px 0;font-size:14px}

/* List */
.table{width:100%;border:1px solid #252525;border-radius:10px;overflow:hidden}
.row{
  display:grid; grid-template-columns:18px 1fr; gap:12px;
  padding:14px 12px;border-top:1px solid #242424;background:#1b1b1b;
}
.row:first-child{border-top:none}
.row:hover{background:#202020}
.bullet{width:8px;height:8px;margin-top:7px;border-radius:50%;background:#60646b}
.text{font-weight:600}
.choices{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.state{margin-top:8px;font-size:12px;color:var(--muted)}
.row.selected .bullet{background:var(--ok)}
.row.selected .state{color:var(--ok)}

/* Option buttons */
.opt-btn{
  background:#242424;border:1px solid #333;color:#eaeaea;border-radius:24px;
  padding:8px 14px;font-size:14px;cursor:pointer;transition:background .2s,border-color .2s,transform .02s;
}
.opt-btn:hover{background:#2b2b2b}
.opt-btn:active{transform:scale(.98)}
.opt-btn.chosen{
  border-color:var(--brand-2); background:#2a1e1e; color:#fff; box-shadow:0 0 0 2px rgba(255,112,67,.15) inset;
}

/* Actions + errors */
.actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.primary-btn{background:var(--brand);border:none;color:#fff;border-radius:8px;padding:12px 16px;font-size:15px;cursor:pointer}
.primary-btn[disabled]{opacity:.4;cursor:not-allowed}
.error{display:none;color:#ffb3b3;font-size:13px;text-align:center}
.error.show{display:block}

/* Overlay (generic) */
.overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); padding:16px; z-index:50;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.overlay.show{ opacity:1; pointer-events:auto; }

/* Spinner */
.spinner-wrap{ display:inline-grid; place-items:center; }
.spinner{ width:72px; height:72px; animation:spin 1s linear infinite;
          filter: drop-shadow(0 0 6px rgba(229,57,53,.35)); }
.spinner .ring{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:6; }
.spinner .arc{  fill:none; stroke:url(#spinGrad); stroke-width:6; stroke-linecap:round;
                stroke-dasharray:110 200; stroke-dashoffset:0; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Modal */
.modal-card{
  width:100%; max-width:380px; background:var(--panel); border-radius:12px; padding:18px;
  border:1px solid var(--ring); text-align:center;
  transform:scale(.92); opacity:0; transition:transform .35s ease, opacity .35s ease;
}
#modal.overlay.show .modal-card{ transform:scale(1); opacity:1; }
.modal-title{margin:4px 0 8px 0;font-size:18px}
.modal-text{color:#d3d3d3;font-size:14px;margin:0 0 12px 0}
.modal-actions{display:flex;gap:10px;justify-content:center;margin-top:10px}
.btn{border:none;border-radius:8px;padding:10px 16px;font-size:14px;cursor:pointer}
.btn.cancel{background:#2a2a2a;color:#fff}
.btn.ok{background:var(--brand);color:#fff}
.btn.cancel:hover{background:#333}
.btn.ok:hover{background:#c62828}

/* Modal calculation panel */
.calc{
  text-align:left; background:#181818; border:1px solid #2a2a2a; border-radius:10px;
  padding:12px; font-size:13px; line-height:1.5; color:#e7e7e7;
}
.calc .k{color:#9aa0a6}
.calc .v{font-weight:600}
.calc .total{margin-top:6px; padding-top:6px; border-top:1px dashed #2f2f2f; font-size:14px}
.calc .emph{font-weight:700}

/* Account Side Panel */
.sidepanel-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:80;
}
.sidepanel-overlay.show{ opacity:1; pointer-events:auto; }

.sidepanel{
  position:fixed; top:0; right:0; height:100%; width:360px; max-width:86vw;
  background:#1e1e1e; border-left:1px solid #2a2a2a; box-shadow:-8px 0 24px rgba(0,0,0,.35);
  transform:translateX(100%); transition:transform .28s ease; z-index:81; color:#eaeaea;
  display:flex; flex-direction:column;
}
.sidepanel-overlay.show .sidepanel{ transform:translateX(0); }

.sp-head{display:flex;align-items:center;gap:12px;padding:16px}
.avatar{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(ellipse at 30% 30%, #2b2b2b, #141414);
  border:1px solid #2a2a2a;
}
.u-block{flex:1}
.u-email{font-weight:700;font-size:16px}
.u-uid{color:#9aa0a6;font-size:12px;margin-top:2px;display:flex;gap:8px;align-items:center}

/* Badge */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-weight:700;
  background:#2a2633; border:1px solid #3a3150; color:#dcd3ff;
  padding:6px 10px; border-radius:10px;
}
.badge svg{width:16px;height:16px}

/* Panel body */
.sp-sep{height:1px;background:#2a2a2a;margin:8px 0}
.sp-body{padding:14px 16px}
.two-cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.col h4{margin:0 0 8px 0; color:#c9c9c9; font-size:13px; font-weight:700}
.item{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed #2a2a2a;}
.item:last-child{border-bottom:none}
.key{color:#9aa0a6;font-size:13px}
.val{font-weight:700}

.sp-close{
  position:absolute; top:10px; right:12px; background:#2a2a2a; color:#fff; border:none; border-radius:8px;
  padding:6px 10px; cursor:pointer;
}
.sp-close:hover{background:#333}

/* Responsive */
@media (max-width:540px){
  .card{margin:18px 12px}
}
.site-footer {
  background: #111;
  color: #ddd;
  padding: 20px 20px 20px;
  font-size: 13px;
  margin-top: 20px;
}

.footer-container {
  display: flex;
  justify-content: space-between; /* pushes left & right */
  align-items: flex-start;        /* align to top */
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.footer-col {
  flex: 1;
}

.footer-col h4 {
  color: #fff;
  margin-bottom: 12px;
  font-size: 16px;
  border-bottom: 2px solid #444;
  display: inline-block;
  padding-bottom: 5px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin: 6px 0;
}

.footer-col ul li a {
  color: #ddd;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-col ul li a:hover {
  color: #fff;
}

.socials a img {
  width: 22px;
  height: 22px;
  margin-right: 10px;
  filter: brightness(0) invert(1);
  transition: filter 0.3s;
}

.socials a:hover img {
  filter: brightness(1);
}

.footer-bottom {
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  border-top: 1px solid #333;
  padding-top: 5px;
  color: #aaa;
}
.contact-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  text-align:right;
}

.contact-inline a {
  color: #ddd;
  text-decoration: none;
  transition: color 0.3s;
  white-space: nowrap;
}

.contact-inline a:hover {
  color: #fff;
}
.footer-left {
  text-align: left;
}

.footer-right {
  text-align: right;
}
.footer-center {
  text-align: center;
}