/* Purple theme on top of Bootstrap 5 (dark mode). */
:root, [data-bs-theme="dark"] {
  --bs-body-bg: #0b0a12;
  --bs-body-color: #e9e6f5;
  --bs-secondary-color: #9a94b8;
  --bs-border-color: #2a2540;
  --bs-primary: #8b5cff;
  --bs-primary-rgb: 139, 92, 255;
  --bs-link-color: #b79bff;
  --bs-link-hover-color: #d3c2ff;
  --bs-card-bg: #14111f;
  --pyro-magenta: #ee5fe6;
  --pyro-panel: #14111f;
}
body { background: radial-gradient(900px 500px at 85% -10%, rgba(139,92,255,.22), transparent 60%),
                   radial-gradient(700px 400px at -10% 10%, rgba(238,95,230,.10), transparent 60%), var(--bs-body-bg);
       background-attachment: fixed; min-height: 100vh; }
.btn-primary { --bs-btn-bg: #8b5cff; --bs-btn-border-color: #8b5cff; --bs-btn-hover-bg: #9d77ff; --bs-btn-hover-border-color: #9d77ff;
               --bs-btn-active-bg: #7443f0; --bs-btn-active-border-color: #7443f0; --bs-btn-disabled-bg: #8b5cff; --bs-btn-disabled-border-color: #8b5cff; }
.btn-outline-primary { --bs-btn-color: #b79bff; --bs-btn-border-color: #5b3fb5; --bs-btn-hover-bg: #8b5cff; --bs-btn-hover-border-color: #8b5cff; --bs-btn-hover-color: #fff; }
.form-control, .form-control:focus { background: #0f0c19; color: var(--bs-body-color); border-color: var(--bs-border-color); }
.form-control:focus { border-color: #8b5cff; box-shadow: 0 0 0 .2rem rgba(139,92,255,.25); }
.card { background: var(--pyro-panel); border-color: var(--bs-border-color); border-radius: 14px; }
.navbar { background: rgba(11,10,18,.7); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bs-border-color); }
.brand { font-weight: 800; letter-spacing: .28em; background: linear-gradient(90deg, var(--pyro-magenta), #8b5cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.badge-logo { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; font-weight: 800; color: #fff;
              background: linear-gradient(135deg, #8b5cff, var(--pyro-magenta)); }
.hero h1 { font-weight: 800; letter-spacing: -.02em; }
.hero h1 span { background: linear-gradient(90deg, #b79bff, var(--pyro-magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(139,92,255,.18); color: #b79bff; font-weight: 700; flex: none; }
.accordion { --bs-accordion-bg: var(--pyro-panel); --bs-accordion-border-color: var(--bs-border-color); --bs-accordion-btn-bg: var(--pyro-panel);
             --bs-accordion-active-bg: #1b1630; --bs-accordion-active-color: #e9e6f5; --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(139,92,255,.25); }
.nav-pills .nav-link { color: var(--bs-secondary-color); }
.nav-pills .nav-link.active { background: #8b5cff; color: #fff; }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(139,92,255,.07); --bs-table-border-color: var(--bs-border-color); }
.table th { color: var(--bs-secondary-color); font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.table td { vertical-align: middle; }
.days-input { width: 74px; }
.hidden { display: none !important; }
footer { color: var(--bs-secondary-color); font-size: .9rem; }

/* ---- 3D menu preview ------------------------------------------------------------------------ */
.showcase { max-width: 860px; margin: 0 auto; }
.tilt-stage { perspective: 1400px; padding: 28px 0; }
.tilt-card { transform-style: preserve-3d; will-change: transform; transform: rotateX(6deg) rotateY(-10deg);
             border-radius: 14px; box-shadow: 0 40px 80px -20px rgba(139,92,255,.45), 0 0 0 1px rgba(139,92,255,.35); }
.showcase-cap { text-align: center; color: var(--bs-secondary-color); font-size: .8rem; margin-top: 4px; }
.menu-shot { width: 100%; display: block; border-radius: 14px; }
.menu-mock { display: flex; min-height: 360px; background: #0b0a11; border-radius: 14px; overflow: hidden; font-size: 12px; color: #ede9fa; text-align: left; user-select: none; }
.m-side { width: 150px; background: #08070d; border-right: 1px solid #2b2640; padding: 14px 0; display: flex; flex-direction: column; flex: none; }
.m-logo { display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.m-logo b { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg,#8b5cff,#ee5fe6); color: #fff; }
.m-logo span { font-weight: 800; letter-spacing: .22em; background: linear-gradient(90deg,#ee5fe6,#8b5cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m-sub { padding: 6px 14px 12px; color: #8f87ad; font-size: 10px; letter-spacing: .12em; }
.m-tab { padding: 8px 14px; display: flex; flex-direction: column; border-left: 3px solid transparent; color: #8f87ad; }
.m-tab { padding: 12px 14px; } .m-tab b { font-weight: 600; font-size: 13px; }
.m-tab.on { background: rgba(139,92,255,.14); border-left-color: #8b5cff; color: #ede9fa; }
.m-grow { flex: 1; } .m-pill { margin: 0 14px 6px; padding: 5px 10px; border-radius: 12px; background: rgba(92,220,143,.13); color: #5cdc8f; font-size: 11px; }
.m-dim { padding: 0 14px; color: #8f87ad; font-size: 11px; }
.m-body { flex: 1; padding: 14px 16px; min-width: 0; }
.m-title { font-size: 20px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid #2b2640; }
.m-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m-panel { background: rgba(19,15,28,.8); border: 1px solid #2b2640; border-radius: 10px; padding: 10px 12px; }
.m-section { color: #8b5cff; font-size: 10px; font-weight: 700; letter-spacing: .14em; margin: 8px 0 6px; }
.m-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.m-box { width: 14px; height: 14px; border-radius: 4px; background: #15111f; border: 1px solid #2b2640; flex: none; }
.m-box.on { background: #8b5cff; border-color: #ee5fe6; }
.m-slider { position: relative; height: 20px; margin: 5px 0; border-radius: 6px; background: #15111f; border: 1px solid #2b2640; overflow: hidden; }
.m-slider i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg,#6d45e8,#8b5cff); opacity: .75; }
.m-slider span { position: relative; padding-left: 8px; line-height: 18px; font-size: 11px; }
@media (max-width: 620px) { .m-side { width: 96px; } .m-tab small, .m-sub { display: none; } .m-cols { grid-template-columns: 1fr; } .m-logo span { display: none; } }