:root {
  /* palette */
  --espresso: #1a120c;
  --coffee: #3d2a1f;
  --mocha: #6b4c35;
  --caramel: #a8724a;
  --latte: #c9a882;
  --cream: #f3ebe2;
  --foam: #faf6f1;
  --gold: #d4953a;
  --gold-light: #f0c878;
  --accent: #0d9668;
  --accent-dark: #087a55;
  --accent-soft: #e6f5ef;
  --danger: #c94a38;
  --danger-soft: #fceeea;
  --ink: #1c1612;
  --ink-soft: #3a322c;
  --muted: #7a6e64;
  --muted-light: #a89f96;
  --line: #e8ddd2;
  --line-soft: #f0e8df;
  --white: #ffffff;

  /* typography */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* elevation */
  --shadow-xs: 0 1px 2px rgba(26, 18, 12, 0.04);
  --shadow-sm: 0 2px 8px rgba(26, 18, 12, 0.06), 0 1px 2px rgba(26, 18, 12, 0.04);
  --shadow: 0 8px 24px rgba(26, 18, 12, 0.08), 0 2px 6px rgba(26, 18, 12, 0.04);
  --shadow-lg: 0 20px 48px rgba(26, 18, 12, 0.12), 0 8px 16px rgba(26, 18, 12, 0.06);
  --shadow-glow: 0 8px 28px rgba(212, 149, 58, 0.28);

  /* radius */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  /* motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.2s;

  /* pro blue sidebar palette */
  --vex-deep: #001D39;
  --vex-dark: #0A4174;
  --vex-mid: #49769F;
  --vex-teal: #4E8EA2;
  --vex-soft: #6EA2B3;
  --vex-accent: #7BBDE8;
  --vex-pale: #BDD8E9;
  --sidebar-w: 280px;
  --sidebar-grip-w: 26px;
}

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

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  height: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.011em;
  background: var(--foam);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: var(--text-base); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4c4b4; border-radius: 20px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #bfa894; background-clip: content-box; }

#app { display: flex; height: 100vh; overflow: hidden; position: relative; }

/* ---------- Sidebar (drawer + pro blue) ---------- */
#sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-w);
  z-index: 250;
  flex-shrink: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 120% 80% at 0% 0%, rgba(123, 189, 232, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, var(--vex-deep) 0%, var(--vex-dark) 42%, var(--vex-deep) 100%);
  border-right: 1px solid rgba(189, 216, 233, 0.14);
  box-shadow: 12px 0 48px rgba(0, 29, 57, 0.45);
  transform: translateX(0);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

body.sidebar-collapsed #sidebar {
  transform: translateX(calc(-1 * var(--sidebar-w)));
}

.sidebar-grip {
  position: fixed;
  top: 12px;
  left: calc(var(--sidebar-w) - 1px);
  width: var(--sidebar-grip-w);
  height: 68px;
  z-index: 260;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: 1px solid rgba(189, 216, 233, 0.22);
  border-left: none;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(180deg, var(--vex-dark) 0%, var(--vex-deep) 100%);
  box-shadow: 4px 0 20px rgba(0, 29, 57, 0.35);
  cursor: grab;
  transition: left 0.38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s, background 0.2s;
}
.sidebar-grip:active { cursor: grabbing; }
.sidebar-grip:hover {
  background: linear-gradient(180deg, var(--vex-mid) 0%, var(--vex-dark) 100%);
  box-shadow: 4px 0 24px rgba(123, 189, 232, 0.25);
}
body.sidebar-collapsed .sidebar-grip { left: 0; }

.sidebar-grip-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.sidebar-grip-lines i {
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--vex-accent);
  opacity: 0.85;
}

.sidebar-grip-arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--vex-pale);
  border-bottom: 2px solid var(--vex-pale);
  transform: rotate(135deg);
  margin-top: 2px;
  opacity: 0.7;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
body.sidebar-collapsed .sidebar-grip-arrow {
  transform: rotate(-45deg);
  margin-left: 2px;
}

/* ---------- Sidebar head & client brand ---------- */
.sidebar-head {
  flex-shrink: 0;
  padding: 16px 14px 12px;
  border-bottom: 1px solid rgba(189, 216, 233, 0.1);
  background: rgba(0, 29, 57, 0.35);
  max-height: 42vh;
  overflow-y: auto;
}

.client-brand-block {
  margin-bottom: 14px;
}

.client-logo-slot {
  min-height: 72px;
  max-height: 88px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.client-logo-img {
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
}

.client-logo-placeholder {
  text-align: center;
  color: #6b7280;
  line-height: 1.35;
}

.client-logo-ph-icon { display: block; font-size: 22px; margin-bottom: 4px; opacity: 0.7; }
.client-logo-ph-title { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #374151; }
.client-logo-placeholder small { font-size: 10px; color: #9ca3af; }

.client-brand-name {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.2;
}

.client-brand-tag {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(189, 216, 233, 0.55);
}

.sidebar-platform-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(123, 189, 232, 0.08);
  border: 1px solid rgba(189, 216, 233, 0.12);
}

.sidebar-platform-text { display: flex; flex-direction: column; line-height: 1.15; }
.sidebar-platform-name { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: rgba(255, 255, 255, 0.92); }
.sidebar-platform-name span { color: var(--vex-accent); }
.sidebar-platform-sub { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(189, 216, 233, 0.45); margin-top: 2px; }

/* Legacy brand (login etc.) */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 10px 28px;
}

.brand-logo {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.brand-name span { color: var(--gold-light); }

.brand-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(243, 235, 226, 0.55);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ---------- Accordion nav ---------- */
.nav-accordion {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 10px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(123, 189, 232, 0.45) transparent;
  scroll-behavior: smooth;
}

.nav-accordion::-webkit-scrollbar { width: 7px; }
.nav-accordion::-webkit-scrollbar-thumb {
  background: rgba(123, 189, 232, 0.45);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.nav-accordion::-webkit-scrollbar-thumb:hover { background: rgba(123, 189, 232, 0.7); background-clip: content-box; }
.nav-accordion::-webkit-scrollbar-track { background: transparent; }

.nav-section {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(189, 216, 233, 0.08);
  flex-shrink: 0;
}

.nav-section.open {
  background: rgba(123, 189, 232, 0.07);
  border-color: rgba(123, 189, 232, 0.22);
  box-shadow: inset 0 0 0 1px rgba(123, 189, 232, 0.06);
}

.nav-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 12px;
  border: none;
  background: transparent;
  color: rgba(189, 216, 233, 0.75);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-align: left;
}

.nav-section-head:hover {
  background: rgba(123, 189, 232, 0.08);
  color: #fff;
}

.nav-section-ic { font-size: 12px; opacity: 0.85; flex-shrink: 0; }
.nav-section-label { flex: 1; }
.nav-section-count {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(123, 189, 232, 0.12);
  color: rgba(189, 216, 233, 0.7);
  letter-spacing: 0;
}

.nav-section-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  opacity: 0.55;
  margin-left: 2px;
}

.nav-section.open .nav-section-chevron { transform: rotate(-135deg); margin-top: 4px; }

.nav-section-body {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 6px;
  transition: grid-template-rows 0.28s ease, padding 0.28s ease;
}

.nav-section.open .nav-section-body {
  grid-template-rows: 1fr;
  padding: 0 6px 8px;
}

.nav-section-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-section.open .nav-section-inner {
  overflow: visible;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  margin-bottom: 2px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: rgba(189, 216, 233, 0.78);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background 0.18s, color 0.18s, transform 0.15s;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
}

.nav-item-ic {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(123, 189, 232, 0.1);
  border: 1px solid rgba(189, 216, 233, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.nav-item-label { flex: 1; line-height: 1.25; }

.nav-item:hover {
  background: rgba(123, 189, 232, 0.1);
  color: #fff;
  transform: translateX(2px);
}

.nav-item:hover .nav-item-ic {
  background: rgba(123, 189, 232, 0.18);
  border-color: rgba(123, 189, 232, 0.25);
}

.nav-item.active {
  background: linear-gradient(135deg, var(--vex-accent) 0%, var(--vex-teal) 100%);
  color: var(--vex-deep);
  box-shadow: 0 6px 20px rgba(123, 189, 232, 0.35);
  font-weight: 700;
}

.nav-item.active .nav-item-ic {
  background: rgba(0, 29, 57, 0.12);
  border-color: transparent;
}

/* Legacy flat nav (fallback) */
.nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
  overflow-y: auto;
  flex: 1;
}

.nav-item .ic {
  font-size: 17px;
  width: 22px;
  text-align: center;
  opacity: 0.9;
}

.nav-sep {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(201, 168, 130, 0.45);
  text-transform: uppercase;
  padding: 20px 14px 8px;
}

.sidebar-foot {
  flex-shrink: 0;
  margin-top: auto;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(189, 216, 233, 0.1);
  background: rgba(0, 29, 57, 0.45);
}

.sidebar-foot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(189, 216, 233, 0.55);
  margin-bottom: 10px;
}

.sidebar-foot-row b { color: rgba(255, 255, 255, 0.9); font-weight: 700; }
.sidebar-foot-ic { font-size: 13px; opacity: 0.8; }

.sidebar-foot-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.sidebar-foot-link {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(189, 216, 233, 0.14);
  background: rgba(123, 189, 232, 0.08);
  color: rgba(189, 216, 233, 0.75);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.sidebar-foot-link:hover {
  color: #fff;
  border-color: rgba(123, 189, 232, 0.45);
  background: rgba(123, 189, 232, 0.15);
}

.sidebar-foot-meta {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(189, 216, 233, 0.35);
}

/* ---------- Topbar ---------- */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  margin-left: var(--sidebar-w);
  transition: margin-left 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(123, 189, 232, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(78, 142, 162, 0.04) 0%, transparent 50%),
    var(--foam);
}

body.sidebar-collapsed #main {
  margin-left: 0;
}

#topbar {
  min-height: 72px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  padding: 0;
}
.topbar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  min-height: 72px;
  flex: 1;
}
.top-lic-banner {
  width: 100%;
  padding: 8px 32px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
}
.top-lic-warn { background: #fff8e6; color: #b07b1a; }
.top-lic-danger { background: var(--danger-soft); color: var(--danger); }
.top-lic-info { background: #eef6ff; color: #2f6fb0; }
.top-lic-link {
  background: none; border: none; font: inherit; font-weight: 700;
  text-decoration: underline; cursor: pointer; color: inherit; padding: 0 4px;
}

.top-title h1 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
}

.top-title p {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: -0.005em;
}

.top-right { display: flex; align-items: center; gap: 12px; }

.top-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.top-nav-toggle {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vex-pale);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--vex-accent) 0%, var(--vex-teal) 100%);
  color: var(--vex-deep);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(123, 189, 232, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.top-nav-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(123, 189, 232, 0.45);
}

.chip-off { opacity: 0.65; }
.chip-off .dot { background: var(--muted); }

.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
  box-shadow: var(--shadow-xs);
}

.chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(13, 150, 104, 0.18);
  animation: pulse 2.4s ease infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--caramel), var(--mocha));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm);
}

#view {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px 36px;
}

#view.view-pos {
  overflow: hidden;
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---------- Generic UI ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.card:hover { box-shadow: var(--shadow); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 11px;
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
  transition: all var(--duration) var(--ease);
  box-shadow: var(--shadow-xs);
}

.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.btn-primary {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
}

.btn-primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 4px 14px rgba(13, 150, 104, 0.28);
}

.btn-coffee {
  background: linear-gradient(180deg, var(--mocha) 0%, var(--coffee) 100%);
  color: #fff;
}

.btn-coffee:hover {
  filter: brightness(1.06);
  box-shadow: 0 4px 14px rgba(107, 76, 53, 0.3);
}

.btn-ghost {
  background: var(--white);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  box-shadow: none;
}

.btn-ghost:hover { background: var(--cream); border-color: var(--latte); }

.btn-danger {
  background: var(--danger-soft);
  color: var(--danger);
  box-shadow: none;
}

.btn-danger:hover { background: #f9ddd8; }

.btn-block { width: 100%; }
.btn-lg { padding: 14px 22px; font-size: var(--text-base); border-radius: 13px; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.badge-green { background: var(--accent-soft); color: var(--accent-dark); }
.badge-gold { background: #fdf4e3; color: #9a6318; }
.badge-red { background: var(--danger-soft); color: var(--danger); }
.badge-gray { background: var(--cream); color: var(--muted); }

.input, select.input, textarea.input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--white);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  color: var(--ink);
  font-weight: 500;
  font-size: var(--text-sm);
}

.input::placeholder { color: var(--muted-light); font-weight: 400; }

.input:focus {
  outline: none;
  border-color: var(--caramel);
  box-shadow: 0 0 0 3px rgba(168, 114, 74, 0.12);
}

.field { margin-bottom: 16px; }

.field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 7px;
}

/* stat cards */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.stat {
  padding: 22px 22px 20px;
  position: relative;
  overflow: hidden;
}

.stat::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.08;
  transform: translate(30%, -30%);
}

.stat .ic {
  font-size: 20px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.stat h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.stat p {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  margin-top: 3px;
}

.stat .delta {
  font-size: var(--text-xs);
  font-weight: 700;
  margin-top: 10px;
  letter-spacing: 0.01em;
}

.delta.up { color: var(--accent-dark); }
.delta.down { color: var(--danger); }

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.02em;
}

.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; }
.row { display: flex; align-items: center; }
.spread { justify-content: space-between; }

/* tables */
table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--foam);
}

td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-sm);
  font-weight: 500;
}

tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--duration) var(--ease); }
tbody tr:hover { background: rgba(250, 246, 241, 0.8); }

/* ---------- POS Pro ---------- */
.pos-pro {
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 34vw);
  flex: 1;
  min-height: 0;
  height: 100%;
  max-height: calc(100vh - 72px - 28px);
  align-items: stretch;
}
.pos-pro .num, .pos-pro .pprice, .pos-pro .ci-price, .pos-pro .cart-total .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  font-weight: 600;
}

.pos-search-wrap {
  position: relative; margin-bottom: 14px;
}
.pos-search-right {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.pos-clock {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--ink-soft); min-width: 44px; text-align: right;
}
.pos-search-ic {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 14px; opacity: 0.45; pointer-events: none;
}
.pos-search {
  width: 100%; padding: 12px 120px 12px 42px; font-size: var(--text-sm);
  font-weight: 600; border-radius: var(--radius); border: 1.5px solid var(--line);
  background: var(--white); letter-spacing: -0.01em;
}
.pos-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(13,150,104,0.12); outline: none; }
.pos-search-hint {
  font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
}

.pos-cat-bar { padding-bottom: 14px; }

.pos-quickkeys {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px 10px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.pos-quickkeys.has-keys { display: flex; }
.pos-quickkeys-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-right: 6px;
  flex-shrink: 0;
}
.pos-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1.5px solid var(--line-soft);
  border-radius: 999px;
  background: var(--foam);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  max-width: 160px;
}
.pos-quick-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.pos-qk-emoji { font-size: 1rem; line-height: 1; }
.pos-qk-name {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.02em;
}
.pos-qk-price { font-size: 10px; font-weight: 700; color: var(--coffee); white-space: nowrap; }

.pay-tip-block {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--foam);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
}
.pay-tip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: var(--text-sm);
  font-weight: 700;
}
.pay-tip-chips { flex-wrap: wrap; }
.cart-line-tip { color: var(--gold-dark, #b07b1a); font-weight: 700; }

.sett-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.prod-pro .pname {
  font-weight: 700; font-size: var(--text-sm); line-height: 1.35;
  letter-spacing: -0.02em; color: var(--ink);
}
.prod-pro .pprice {
  font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700;
  color: var(--coffee); margin-top: 2px;
}
.pprice-vat {
  font-size: 9px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px;
}
.prod-vat-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  background: rgba(255,255,255,0.92); color: var(--mocha);
  padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line-soft);
}
.pos-empty-grid {
  grid-column: 1 / -1; text-align: center; padding: 48px 24px; color: var(--muted);
  background: var(--white); border-radius: var(--radius); border: 1px dashed var(--line);
}
.pos-empty-grid span { font-size: 2rem; display: block; margin-bottom: 8px; opacity: 0.4; }

.cart-pro {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  background: var(--white);
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr) auto;
  overflow: hidden;
}

.cart-pro .cart-head {
  flex-shrink: 0;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #fff 0%, var(--foam) 100%);
}

.cart-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.cart-live-total {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-dark);
  white-space: nowrap;
}

.cart-member-inline:not(.has-member) { display: none; }
.cart-member-inline.has-member { margin-bottom: 6px; }

.member-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 11px;
}
.member-chip-av {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark);
  font-weight: 800; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}
.member-chip-name { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-chip-meta { color: var(--muted); font-weight: 600; white-space: nowrap; }
.member-chip-coupon, .member-chip-x {
  border: none; background: none; cursor: pointer; padding: 2px 4px;
  font-size: 14px; line-height: 1; color: var(--muted);
}
.member-chip-x:hover { color: var(--danger); }

.cart-toolbar {
  display: flex;
  gap: 4px;
}
.cart-tool {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  font-size: 14px;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.cart-tool:hover { background: var(--foam); border-color: var(--line); }
.cart-tool-danger:hover { background: var(--danger-soft); border-color: var(--danger); }

.cart-pro .cart-items {
  min-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px 10px;
  background: var(--foam);
  -webkit-overflow-scrolling: touch;
}

.cart-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ci-compact {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto 24px;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  min-height: 44px;
}

.ci-emoji-sm {
  font-size: 1.15rem;
  line-height: 1;
  text-align: center;
}

.ci-compact-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cart-pro .ci-compact .ci-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-pro .ci-compact .ci-mod {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qty-inline {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--foam);
  border-radius: 6px;
  padding: 2px;
}
.qty-inline button {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: var(--white);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
  line-height: 1;
}
.qty-inline button:hover { background: var(--accent-soft); color: var(--accent-dark); }
.qty-inline .num {
  min-width: 18px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.cart-pro .ci-compact .ci-price {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--coffee);
  white-space: nowrap;
}

.ci-rm-inline {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.ci-rm-inline:hover { background: var(--danger-soft); color: var(--danger); }

.cart-pro .cart-foot {
  flex-shrink: 0;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--line-soft);
  background: var(--white);
}

.cart-foot-summary {
  max-height: 72px;
  overflow-y: auto;
  margin-bottom: 6px;
}

.cart-foot-summary .cart-line {
  margin-bottom: 2px;
  font-size: 11px;
}

.pos-tax-compact {
  margin: 4px 0 0;
  padding: 5px 8px;
  background: var(--foam);
  border: none;
  border-radius: 6px;
}

.pos-tax-compact .cart-line-sub,
.pos-tax-compact .cart-line-tax {
  font-size: 10px;
  margin-bottom: 1px;
  padding-left: 0;
}

.cart-foot-actions {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.btn-foot-sm {
  padding: 10px 10px !important;
  font-size: 12px !important;
  flex: 0 0 auto;
}

.cart-foot-actions .pos-pay-btn {
  flex: 1;
  min-width: 0;
  padding: 10px 12px !important;
  font-size: 13px !important;
}

.cart-pro .cart-empty {
  padding: 40px 20px;
  background: var(--white);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line);
}

.cart-pro .cart-empty b {
  display: block;
  font-size: var(--text-base);
  color: var(--ink);
  margin-bottom: 4px;
}

.cart-pro .cart-empty span:last-child {
  font-size: var(--text-sm);
  color: var(--muted);
}

.cart-pro .table-banner {
  margin: 0 0 6px;
  padding: 6px 8px;
  font-size: 11px;
}

.cart-pro .member-bar {
  margin: 0;
  padding: 10px 12px;
}

.cart-pro .cart-head-main { display: flex; flex-direction: column; gap: 2px; }
.cart-head-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted);
}
.cart-pro .cart-head h2 {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 800;
  letter-spacing: -0.03em; margin: 0;
}
.cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; vertical-align: middle;
}
.btn-pos-sm { padding: 7px 10px !important; font-size: 12px !important; min-width: 36px; }

.cart-line-sub { color: var(--ink-soft); font-weight: 600; }
.cart-line-tax { color: var(--muted); font-size: 12px; padding-left: 8px; }
.cart-line-disc { color: var(--accent-dark); font-weight: 700; }
.cart-rm-disc {
  border: none; background: none; color: var(--danger); font-weight: 800;
  cursor: pointer; padding: 0 4px; font-size: 14px;
}
.pos-tax-block {
  margin: 8px 0 4px; padding: 10px 12px;
  background: var(--white); border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
}
.cart-pro .cart-total {
  font-size: 1.2rem; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--line-soft);
}
.cart-pro .cart-total .num { color: var(--accent-dark); }
.pos-pay-btn {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  box-shadow: 0 6px 20px rgba(13,150,104,0.28);
}

.pay-tax-strip {
  padding: 10px 22px; background: var(--foam); border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
}
.pay-tax-inline { margin: 0; padding: 0; background: none; border: none; }
.pay-tax-inline .cart-line { margin-bottom: 4px; font-size: 12px; }

/* KDV settings */
.vat-settings-card { background: linear-gradient(180deg, var(--white) 0%, var(--foam) 100%); }
.vat-quick-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.vat-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;
}
.vat-cat-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.vat-cat-icon { font-size: 1.25rem; width: 28px; text-align: center; }
.vat-cat-name { flex: 1; min-width: 0; }
.vat-cat-name b { display: block; font-size: var(--text-sm); letter-spacing: -0.01em; }
.vat-cat-name small { font-size: 10px; color: var(--muted); font-weight: 600; }
.vat-cat-select { width: 88px; padding: 8px 10px !important; font-family: var(--font-mono); font-weight: 700; }

/* ---------- Settings Hub (Pro) ---------- */
.settings-hub { display: flex; flex-direction: column; gap: 18px; }

.settings-hero {
  position: relative; border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 45%, #0f1419 100%);
  color: #f8fafc; border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 50px rgba(15,23,42,.25);
}
.settings-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, color-mix(in srgb, var(--sett-accent, #0d9668) 35%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(37,99,235,.15) 0%, transparent 50%),
    repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(255,255,255,.02) 48px, rgba(255,255,255,.02) 49px);
}
.settings-hero-inner {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 24px 28px; flex-wrap: wrap;
}
.settings-hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 8px;
}
.settings-hero-title {
  margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800; letter-spacing: -.03em; color: #fff;
}
.settings-hero-sub { margin: 0; font-size: var(--text-sm); color: rgba(255,255,255,.6); max-width: 480px; }
.settings-hero-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.settings-hero-kpi {
  min-width: 88px; padding: 12px 16px; text-align: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; backdrop-filter: blur(4px);
}
.settings-hero-kpi span { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.45); margin-bottom: 4px; }
.settings-hero-kpi b { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: #fff; line-height: 1.1; }
.settings-hero-kpi em { display: block; font-size: 9px; font-style: normal; font-weight: 600; color: rgba(255,255,255,.4); margin-top: 2px; text-transform: uppercase; }

.settings-pro {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.settings-nav {
  display: flex; flex-direction: column;
  position: sticky; top: 8px;
  max-height: calc(100vh - 100px);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 32px rgba(26,18,12,.08), 0 2px 8px rgba(26,18,12,.04);
}

.settings-nav-brand {
  flex-shrink: 0;
  padding: 16px 14px 12px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #f8fafc;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.settings-nav-brand .settings-nav-label {
  display: block; font-size: 9px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 4px;
}
.settings-nav-brand b {
  display: block; font-family: var(--font-display); font-size: 1.1rem;
  font-weight: 800; letter-spacing: -.03em; color: #fff;
}
.settings-nav-count {
  display: block; margin-top: 5px; font-size: 10px; font-weight: 600; color: rgba(255,255,255,.4);
}

.settings-nav-scroll {
  flex: 1 1 auto;
  overflow-y: auto; overflow-x: hidden;
  padding: 8px 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin; scrollbar-color: rgba(15,23,42,.3) transparent;
}
.settings-nav-scroll::-webkit-scrollbar { width: 6px; }
.settings-nav-scroll::-webkit-scrollbar-thumb { background: rgba(15,23,42,.25); border-radius: 6px; }

/* Düz liste — tüm sekmeler her zaman görünür */
.settings-nav-section { flex-shrink: 0; }
.settings-nav-section-tag {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; margin-bottom: 4px;
  font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sg-c, #64748b);
  background: var(--sg-bg, #f1f5f9);
  border-radius: 8px;
  border-left: 4px solid var(--sg-c, #64748b);
}
.settings-nav-section-tag span { font-size: 11px; }
.settings-nav-section-list {
  display: flex; flex-direction: column; gap: 3px;
  padding-left: 2px;
}

.settings-nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px;
  border: none; border-radius: 10px;
  border-left: 4px solid var(--tab-c, #64748b);
  background: #fff;
  cursor: pointer; text-align: left; font-family: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: background .12s, box-shadow .12s, transform .1s;
  position: relative; z-index: 1;
}
.settings-nav-item:hover {
  background: var(--tab-bg, #f8fafc);
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  transform: translateX(2px);
}
.settings-nav-item.active {
  background: var(--tab-bg, #f0fdf4);
  border-left-width: 5px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tab-c) 25%, transparent);
}
.settings-nav-ic {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: color-mix(in srgb, var(--tab-c) 18%, #fff);
  border: 1px solid color-mix(in srgb, var(--tab-c) 30%, transparent);
}
.settings-nav-item.active .settings-nav-ic {
  background: var(--tab-c);
  border-color: var(--tab-c);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--tab-c) 40%, transparent);
}
.settings-nav-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.settings-nav-text b { font-size: 13px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.25; }
.settings-nav-text small { font-size: 10px; color: var(--muted); font-weight: 600; line-height: 1.25; }
.settings-nav-item.active .settings-nav-text b { color: var(--tab-c); }

.settings-nav-foot {
  flex-shrink: 0; padding: 10px 12px;
  background: #f8fafc; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px;
}
.settings-nav-sync { font-size: 11px; font-weight: 700; color: #0d9668; }

/* legacy divider — kept for kasa panel internals */
.settings-nav-divider {
  padding: 10px 16px 6px; font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
}

.settings-content { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.settings-panel-wrap {
  position: relative; overflow: hidden;
  padding: 24px 26px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(26,18,12,.07), 0 2px 8px rgba(26,18,12,.04);
}
.settings-panel-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--sett-accent, #0d9668), color-mix(in srgb, var(--sett-accent, #0d9668) 60%, #fff));
}

.sett-panel-head {
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.sett-panel-head h2 {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em;
  margin: 0 0 6px; color: var(--ink);
}
.sett-panel-head p { margin: 0; font-size: var(--text-sm); color: var(--muted); line-height: 1.55; }

.sett-card {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(26,18,12,.04);
  transition: box-shadow .15s, border-color .15s;
}
.sett-card:hover { box-shadow: 0 6px 20px rgba(26,18,12,.07); border-color: var(--line); }
.sett-card-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--coffee);
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 2px solid var(--foam);
}
.sett-card-title::before {
  content: ""; width: 4px; height: 14px; border-radius: 2px;
  background: var(--accent); flex-shrink: 0;
}

.settings-savebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 20px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15,23,42,.2);
  color: #f8fafc;
}
.settings-savebar-left { display: flex; align-items: center; gap: 12px; }
.settings-savebar-ic {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
}
.settings-savebar-left b { display: block; font-size: 14px; font-weight: 700; color: #fff; }
.settings-savebar-left .li-sub { color: rgba(255,255,255,.45); font-size: 11px; }
.settings-save-btn {
  padding: 12px 24px !important; font-weight: 800 !important;
  box-shadow: 0 4px 16px rgba(13,150,104,.35) !important;
}

.sett-term-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--line-soft); }
.sett-term-table { width: 100%; font-size: var(--text-sm); border-collapse: collapse; }
.sett-term-table th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
}
.sett-term-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.sett-term-table tr:hover td { background: var(--foam); }
.sett-term-id { font-size: 11px; color: var(--mocha); font-weight: 600; }
.sett-term-input { padding: 8px 10px !important; font-size: 13px !important; min-width: 0; }
.sett-term-toggle { flex-shrink: 0; }
.sett-receipt-mock {
  max-width: 280px; margin: 0 auto; padding: 16px;
  background: var(--white); border: 1px dashed var(--line);
  border-radius: var(--radius-sm); font-size: 12px;
}
.sett-field { margin-bottom: 14px; }
.sett-field:last-child { margin-bottom: 0; }
.sett-hint { font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.4; }
.sett-textarea { resize: vertical; min-height: 56px; font-family: inherit; }
.sett-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.sett-row:last-child { border-bottom: none; padding-bottom: 0; }
.sett-row-text b { font-size: var(--text-sm); display: block; margin-bottom: 2px; }
.sett-inline { display: flex; align-items: center; gap: 10px; }
.sett-grid { align-items: stretch; gap: 16px !important; }
.sett-vat-foot { gap: 12px; margin-top: 16px; align-items: flex-end; flex-wrap: wrap; }
.sett-info { font-size: 12px; border-radius: 10px; }
.sett-preview { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-soft); }
.sett-stamp-preview { max-width: 200px; margin-bottom: 6px; }
.sett-api-status { margin-bottom: 14px; }
.sett-api-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sett-api-metric {
  padding: 12px; background: var(--foam); border-radius: 10px;
  text-align: center; border: 1px solid var(--line-soft);
}
.sett-api-metric span { display: block; font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
.sett-api-metric b { font-size: var(--text-sm); }

@media (max-width: 960px) {
  .settings-pro { grid-template-columns: 1fr; }
  .settings-nav { position: static; max-height: none; }
  .settings-nav-scroll { max-height: 420px; }
  .settings-hero-kpis { width: 100%; justify-content: space-between; }
  .settings-savebar { flex-direction: column; align-items: stretch; text-align: center; }
  .settings-savebar-left { justify-content: center; }
}

/* ---------- Roadmap Pro ---------- */
.roadmap-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--white) 0%, var(--foam) 55%, #e8f5ef 100%);
}
.roadmap-hero-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.roadmap-hero-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 4px 0 6px;
}
.roadmap-hero-ring { position: relative; width: 88px; height: 88px; flex-shrink: 0; }
.roadmap-ring-svg { width: 100%; height: 100%; }
.roadmap-ring-val {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.roadmap-ring-val b { font-family: var(--font-display); font-size: 1.25rem; color: var(--accent-dark); }
.roadmap-ring-val small { font-size: 9px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.roadmap-stats { margin-bottom: 18px; }
.roadmap-mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.roadmap-mod-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: all var(--duration) var(--ease);
  box-shadow: var(--shadow-xs);
}
.roadmap-mod-card:hover { border-color: var(--latte); box-shadow: var(--shadow-sm); }
.roadmap-mod-card.active { border-color: var(--accent); background: var(--accent-soft); }
.roadmap-mod-go {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-dark);
  opacity: 0.85;
}
.roadmap-mod-ic { font-size: 1.5rem; flex-shrink: 0; }
.roadmap-mod-body { flex: 1; min-width: 0; }
.roadmap-mod-body b { font-size: var(--text-sm); display: block; letter-spacing: -0.02em; }
.roadmap-mod-pct { font-size: 13px; font-weight: 700; color: var(--accent-dark); flex-shrink: 0; }
.roadmap-toolbar { flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.roadmap-search { max-width: 280px; min-width: 180px; flex: 1; }
.roadmap-table-wrap { padding: 0; overflow: auto; max-height: 520px; }
.roadmap-table { width: 100%; }
.roadmap-desc { max-width: 320px; line-height: 1.45; font-size: 12px; }
.roadmap-where { font-size: 12px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.roadmap-empty { text-align: center; padding: 48px 24px !important; color: var(--muted); }
.roadmap-legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.roadmap-legend-grid > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--foam);
  border-radius: var(--radius-sm);
}

/* —— Gider & Finans Merkezi —— */
.exp-pro { display: flex; flex-direction: column; gap: 16px; }
.exp-hero { padding: 22px 24px; background: linear-gradient(135deg, var(--foam) 0%, #fff 55%, var(--cream) 100%); border-color: var(--line); }
.exp-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.exp-hero-eyebrow { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 4px; }
.exp-hero-title { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; color: var(--ink); }
.exp-hero-sub { margin: 0; font-size: var(--text-sm); color: var(--muted); max-width: 520px; line-height: 1.5; }
.exp-hero-actions { display: flex; gap: 8px; flex-shrink: 0; }
.exp-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.exp-kpi { padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line-soft); }
.exp-kpi-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.exp-kpi-value { display: block; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.exp-kpi-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.exp-kpi-danger { border-color: #f0d4cf; background: #fdf8f7; }
.exp-kpi-danger .exp-kpi-value { color: var(--danger); }
.exp-kpi-accent { border-color: #cce8dc; background: #f7fcfa; }
.exp-kpi-accent .exp-kpi-value { color: var(--accent-dark); }
.exp-kpi-warn { border-color: #f5e6c8; background: #fffcf5; }
.exp-kpi-warn .exp-kpi-value { color: #b07b1a; }
.exp-alert-banner { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: var(--text-sm); font-weight: 600; }
.exp-toolbar { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.exp-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.exp-cat-select { width: auto; min-width: 160px; padding: 7px 10px !important; font-size: 12px !important; }
.report-chip.sm { padding: 5px 10px !important; font-size: 11px !important; }
.exp-grid-top { align-items: stretch; }
.exp-panel { padding: 20px 22px; }
.exp-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.exp-panel-head b { font-size: var(--text-sm); }
.exp-cat-list { display: flex; flex-direction: column; gap: 14px; }
.exp-cat-row { display: flex; flex-direction: column; gap: 6px; }
.exp-cat-meta { font-size: var(--text-sm); }
.exp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.exp-bar-track { height: 8px; background: var(--cream); border-radius: 6px; overflow: hidden; }
.exp-bar-track.lg { height: 10px; margin-top: 8px; }
.exp-bar-track.sm { height: 6px; min-width: 80px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.exp-bar-fill { height: 100%; border-radius: 6px; transition: width .3s ease; }
.exp-budget-line { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.exp-budget-line.over { color: var(--danger); font-weight: 700; }
.exp-pl-rows { display: flex; flex-direction: column; gap: 0; }
.exp-pl-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--text-sm); }
.exp-pl-row.total { font-size: var(--text-base); font-weight: 800; border-bottom: none; padding-top: 14px; }
.exp-pl-row.danger b { color: var(--danger); }
.exp-pl-row.accent b { color: var(--accent-dark); }
.exp-budget-gauge { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-soft); }
.exp-budget-gauge.alert .exp-bar-fill { background: var(--danger) !important; }
.exp-ledger { padding: 0; overflow: hidden; }
.exp-ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.exp-table-wrap { overflow-x: auto; }
.exp-table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.exp-table th { text-align: left; padding: 10px 14px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--foam); border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.exp-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.exp-table tr:last-child td { border-bottom: none; }
.exp-row-pending { background: #fffdf5; }
.exp-row-over { background: #fdf8f7; }
.exp-tag { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
.exp-actions { white-space: nowrap; display: flex; gap: 4px; }
.exp-metric-big { padding: 8px 0; }
.exp-metric-big span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.exp-metric-big b { font-size: 1.4rem; }
.exp-branch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.exp-branch-card { padding: 14px; border-radius: 10px; background: var(--foam); border: 1px solid var(--line-soft); }
.exp-branch-card b { display: block; margin: 4px 0; }
.exp-branch-card small { color: var(--muted); font-size: 11px; }
.exp-config-strip { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.exp-config-metrics { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 16px; }
.exp-empty-inline { text-align: center; color: var(--muted); font-size: 13px; padding: 24px; }
.exp-modal-body { padding-top: 4px; }
.exp-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.exp-modal-full { grid-column: 1 / -1; }
.exp-modal-hint { margin-top: 14px; font-size: 12px; }
.danger-text { color: var(--danger); font-weight: 700; }
.accent-text { color: var(--accent-dark); font-weight: 700; }
.exp-sett-table td { vertical-align: middle; }

@media (max-width: 1100px) {
  .exp-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .exp-config-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .exp-kpi-grid { grid-template-columns: 1fr; }
  .exp-modal-grid { grid-template-columns: 1fr; }
  .exp-config-metrics { grid-template-columns: 1fr; }
}

/* —— Personel & İK Merkezi —— */
.stf-pro { display: flex; flex-direction: column; gap: 16px; }
.stf-hero { padding: 22px 24px; background: linear-gradient(135deg, #eef4fb 0%, #fff 55%, var(--foam) 100%); border-color: var(--line); }
.stf-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.stf-hero-eyebrow { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #2f6fb0; margin-bottom: 4px; }
.stf-hero-title { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; color: var(--ink); }
.stf-hero-sub { margin: 0; font-size: var(--text-sm); color: var(--muted); max-width: 520px; line-height: 1.5; }
.stf-hero-actions { display: flex; gap: 8px; flex-shrink: 0; }
.stf-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stf-kpi { padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line-soft); }
.stf-kpi-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.stf-kpi-value { display: block; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.stf-kpi-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.stf-kpi-blue { border-color: #cfe0f5; background: #f7faff; }
.stf-kpi-blue .stf-kpi-value { color: #2f6fb0; }
.stf-kpi-accent { border-color: #cce8dc; background: #f7fcfa; }
.stf-kpi-accent .stf-kpi-value { color: var(--accent-dark); }
.stf-kpi-warn { border-color: #f5e6c8; background: #fffcf5; }
.stf-kpi-warn .stf-kpi-value { color: #b07b1a; }
.stf-kpi-danger { border-color: #f0d4cf; background: #fdf8f7; }
.stf-kpi-danger .stf-kpi-value { color: var(--danger); }
.stf-alert-banner { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: #fff8e6; color: #b07b1a; font-size: var(--text-sm); font-weight: 600; }
.stf-toolbar { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stf-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stf-filter-select { width: auto; min-width: 150px; padding: 7px 10px !important; font-size: 12px !important; }
.stf-grid-top { align-items: stretch; }
.stf-panel { padding: 20px 22px; }
.stf-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.stf-panel-head b { font-size: var(--text-sm); }
.stf-live-list { display: flex; flex-direction: column; gap: 10px; }
.stf-live-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--foam); border: 1px solid var(--line-soft); }
.stf-live-av { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.stf-live-body { flex: 1; min-width: 0; }
.stf-live-body b { display: block; font-size: var(--text-sm); margin-bottom: 2px; }
.stf-live-hours { font-weight: 800; font-size: var(--text-sm); color: var(--accent-dark); }
.stf-role-list { display: flex; flex-direction: column; gap: 12px; }
.stf-role-row { display: flex; flex-direction: column; gap: 6px; }
.stf-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.stf-bar-track { height: 8px; background: var(--cream); border-radius: 6px; overflow: hidden; }
.stf-bar-track.lg { height: 10px; margin-top: 8px; }
.stf-bar-fill { height: 100%; border-radius: 6px; transition: width .3s ease; }
.stf-hour-gauge { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-soft); }
.stf-tag { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 10px; font-weight: 700; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); margin-left: 4px; }
.stf-tag.sm { font-size: 9px; padding: 1px 6px; }
.stf-roster { padding: 0; overflow: hidden; }
.stf-roster-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.stf-table-wrap { overflow-x: auto; }
.stf-table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.stf-table th { text-align: left; padding: 10px 14px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--foam); border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.stf-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.stf-table.compact td, .stf-table.compact th { padding: 8px 12px; }
.stf-table tr:last-child td { border-bottom: none; }
.stf-row-active { background: #f7fcfa; }
.stf-person { display: flex; align-items: center; gap: 10px; }
.stf-av { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.stf-actions { white-space: nowrap; display: flex; gap: 4px; }
.stf-payroll-big { padding: 8px 0; }
.stf-payroll-big span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.stf-payroll-big b { font-size: 1.5rem; color: var(--danger); }
.stf-config-strip { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.stf-config-metrics { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 16px; }
.stf-empty-inline { text-align: center; color: var(--muted); font-size: 13px; padding: 20px; }
.stf-modal-body { padding-top: 4px; }
.stf-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.stf-modal-full { grid-column: 1 / -1; }
.stf-sett-table td { vertical-align: middle; }

/* —— Satın Alma, Reçete, Rezervasyon, Paket Pro —— */
.proc-table, .rcp-table, .res-table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.proc-table th, .rcp-table th, .res-table th { text-align: left; padding: 10px 14px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--muted); background: var(--foam); border-bottom: 1px solid var(--line-soft); }
.proc-table td, .rcp-table td, .res-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.rcp-row-warn { background: #fffdf5; }
.res-row-evening { background: #faf5ff; }
.dlv-int-card { padding: 18px 20px; }
.dlv-map-wrap { padding: 20px 22px; }
.dlv-map-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.dlv-map { position: relative; height: 280px; border-radius: 14px; background: linear-gradient(145deg, #e8f4ea 0%, #dce8f0 50%, #f5efe6 100%); border: 1px solid var(--line-soft); overflow: hidden; }
.dlv-map-store { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; padding: 10px 14px; border-radius: 10px; font-weight: 800; font-size: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.08); z-index: 2; }
.dlv-map-pin { position: absolute; transform: translate(-50%, -50%); text-align: center; z-index: 3; }
.dlv-map-pin span { display: block; font-size: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
.dlv-map-pin small { display: block; font-size: 10px; background: #fff; padding: 4px 6px; border-radius: 6px; margin-top: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.08); line-height: 1.3; }
.dlv-map-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.dlv-map-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.dlv-map-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--foam); border-radius: 8px; font-size: 12.5px; }
.dlv-map-row b { min-width: 72px; }
.dlv-map-row .li-sub { flex: 1; }

@media (max-width: 1100px) {
  .stf-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .stf-config-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .stf-kpi-grid { grid-template-columns: 1fr; }
  .stf-modal-grid { grid-template-columns: 1fr; }
  .stf-config-metrics { grid-template-columns: 1fr; }
}

/* Delivery board */
.dlv-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.dlv-col {
  background: var(--foam);
  border-radius: var(--radius);
  padding: 12px;
  min-height: 320px;
}
.dlv-col-head {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mocha);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.dlv-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-xs);
}
.dlv-customer { font-weight: 700; font-size: var(--text-sm); margin: 6px 0 2px; }
.dlv-addr { font-size: 11px; line-height: 1.4; margin-bottom: 6px; }
.dlv-items { font-size: 12px; color: var(--ink-soft); margin-bottom: 8px; }
.dlv-foot { margin-top: 6px; }
.dlv-note { font-size: 11px; color: var(--muted); margin-top: 6px; padding: 6px 8px; background: var(--foam); border-radius: 6px; }
.dlv-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.dlv-actions .btn { padding: 8px 10px !important; font-size: 12px !important; }
.dlv-empty { text-align: center; color: var(--muted); font-size: 12px; padding: 24px 12px; }

@media (max-width: 1100px) {
  .dlv-board { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .sett-api-metrics { grid-template-columns: 1fr; }
}

@media (max-width: 1280px) {
  .pos-pro { grid-template-columns: minmax(0, 1fr) 400px; }
}

@media (max-width: 1100px) {
  #view.view-pos { overflow-y: auto; }
  .pos-pro {
    grid-template-columns: 1fr;
    max-height: none;
    height: auto;
  }
  .cart-pro {
    min-height: 520px;
    max-height: min(75vh, calc(100vh - 160px));
    grid-template-rows: auto minmax(300px, 1fr) auto;
  }
}

/* ---------- POS (base) ---------- */
.pos {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 22px;
  height: 100%;
  min-height: 0;
}

.pos-left { display: flex; flex-direction: column; min-height: 0; }

.cat-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 16px;
  scrollbar-width: none;
}

.cat-bar::-webkit-scrollbar { display: none; }

.cat-btn {
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--white);
  border: 1.5px solid var(--line);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  letter-spacing: -0.01em;
  transition: all var(--duration) var(--ease);
  box-shadow: var(--shadow-xs);
}

.cat-btn:hover { border-color: var(--latte); background: var(--cream); }

.cat-btn.active {
  background: linear-gradient(135deg, var(--mocha), var(--coffee));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(61, 42, 31, 0.25);
}

.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 14px;
  overflow-y: auto;
  padding: 2px;
  align-content: start;
}

.prod {
  background: var(--white);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  text-align: left;
  transition: all 0.22s var(--ease);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
}

.prod:hover {
  border-color: var(--caramel);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.prod-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--cream), var(--latte));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.prod-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.prod:hover .prod-img img { transform: scale(1.07); }
.prod-emoji { font-size: 2.4rem; opacity: 0.7; }
.prod-tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 1;
  background: rgba(26, 18, 12, 0.62);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}
.prod-info { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 4px; }
.prod .pname {
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.prod .pprice {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--mocha);
  letter-spacing: -0.02em;
}

/* thumbnails (tables / app) */
.thumb {
  width: 42px; height: 42px; border-radius: 10px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream); flex-shrink: 0; font-size: 20px;
  position: relative;
}
.thumb-emoji, .app-thumb .thumb-emoji {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: inherit; z-index: 0;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.app-thumb {
  width: 46px; height: 46px; border-radius: 12px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream); flex-shrink: 0; font-size: 22px;
  position: relative;
}
.app-thumb img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }

/* modal hero image */
.modal-hero {
  position: relative; height: 168px; overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(135deg, var(--mocha), var(--coffee));
  display: flex; align-items: center; justify-content: center;
}
.modal-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.modal-hero-emoji { font-size: 3.4rem; opacity: 0.85; }
.modal-hero-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 26px 22px 14px; color: #fff; font-family: var(--font-display); font-size: 1.25rem;
  background: linear-gradient(to top, rgba(26,18,12,0.78), transparent);
}
.x-over { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(255,255,255,0.92); }
.x-over:hover { background: #fff; }

/* cart */
.cart {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.cart-head {
  padding: 20px 22px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, var(--white) 0%, var(--foam) 100%);
}

.cart-head h2 {
  font-size: var(--text-lg);
  font-weight: 700;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px;
  min-height: 140px;
}

.cart-empty {
  text-align: center;
  color: var(--muted);
  padding: 56px 24px;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.6;
}

.cart-empty .big {
  font-size: 3rem;
  display: block;
  margin-bottom: 12px;
  opacity: 0.35;
}

.ci {
  display: flex;
  gap: 12px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--line-soft);
}

.ci-emoji { font-size: 1.5rem; }

.ci-body { flex: 1; min-width: 0; }

.ci-name {
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
}

.ci-mod {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 2px;
  font-weight: 500;
}

.ci-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--mocha);
}

.qty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.qty button {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--cream);
  border: 1px solid var(--line);
  font-weight: 700;
  color: var(--ink-soft);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration) var(--ease);
}

.qty button:hover { background: var(--latte); }

.qty span {
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.cart-foot {
  padding: 18px 22px 22px;
  border-top: 1px solid var(--line-soft);
  background: var(--foam);
}

.cart-line {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 8px;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  margin: 12px 0 16px;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* gift card */
.giftcard {
  border-radius: var(--radius-xl);
  padding: 24px;
  color: #fff;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a120c 0%, #6b4c35 55%, #a8724a 100%);
  box-shadow: var(--shadow-lg);
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.giftcard::after {
  content: "";
  position: absolute;
  right: -50px;
  top: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(240, 200, 120, 0.15);
}

.giftcard.theme-gold { background: linear-gradient(135deg, #6b5018 0%, #c4842e 55%, #f0c878 100%); color: #1a120c; }
.giftcard.theme-emerald { background: linear-gradient(135deg, #064e3b 0%, #087a55 60%, #0d9668 100%); }
.giftcard.theme-rose { background: linear-gradient(135deg, #4a1528 0%, #9e3a5c 60%, #d4849e 100%); }

.gc-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.gc-brand { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.02em; }
.gc-amount { font-family: var(--font-display); font-size: 2.125rem; font-weight: 800; position: relative; z-index: 1; letter-spacing: -0.03em; }
.gc-bal { font-size: var(--text-xs); font-weight: 500; opacity: 0.85; letter-spacing: 0.02em; }
.gc-bottom { display: flex; justify-content: space-between; align-items: flex-end; position: relative; z-index: 1; }
.gc-code { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.12em; font-weight: 600; }
.gc-to { font-size: var(--text-xs); opacity: 0.9; font-weight: 500; }
.qr { width: 64px; height: 64px; background: #fff; border-radius: 10px; padding: 5px; }
.qr canvas { width: 100%; height: 100%; }

.empty-state {
  text-align: center;
  padding: 72px 24px;
  color: var(--muted);
  font-weight: 500;
}

.empty-state .big {
  font-size: 3.5rem;
  opacity: 0.3;
  display: block;
  margin-bottom: 16px;
}

.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.toolbar .grow { flex: 1; }

.search { position: relative; max-width: 360px; flex: 1; }
.search input { padding-left: 40px; }
.search .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 15px; }

/* modal */
#modal-root {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

#modal-root.open { display: flex; }

.modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(26, 18, 12, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 500px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: pop 0.28s var(--ease);
  border: 1px solid var(--line-soft);
}

.modal.wide { width: 720px; }
.modal.member-modal-wide { width: 780px; }

/* Member form modal */
.member-modal-head { align-items: flex-start; }
.member-modal-body { padding: 0; }
.member-form-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 420px;
}
.member-form-preview {
  background: linear-gradient(175deg, var(--espresso) 0%, #2a1d15 100%);
  padding: 28px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.member-preview-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-xl);
  padding: 20px;
  width: 100%;
  color: #fff;
  backdrop-filter: blur(8px);
}
.mpc-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; opacity: 0.85; margin-bottom: 16px; }
.mpc-user { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.mpc-avatar {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, var(--gold), var(--caramel));
  color: var(--espresso); font-weight: 800; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.mpc-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.mpc-phone { font-size: 12px; opacity: 0.75; margin-top: 2px; }
.mpc-stats { display: flex; gap: 20px; margin-bottom: 16px; }
.mpc-val { display: block; font-weight: 800; font-size: 1.1rem; }
.mpc-lbl { font-size: 10px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em; }
.mpc-barcode { background: #fff; border-radius: 10px; padding: 8px; }
.mpc-barcode canvas { width: 100%; height: auto; display: block; }
.mpc-code { text-align: center; font-size: 10px; color: var(--espresso); margin-top: 5px; letter-spacing: 0.1em; }
.mpc-fav { font-size: 11px; opacity: 0.8; margin-top: 10px; text-align: center; }
.member-form-fields { padding: 24px 26px; overflow-y: auto; max-height: 520px; }
.form-section { margin-bottom: 22px; }
.form-section-title {
  font-size: var(--text-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--mocha); margin-bottom: 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
}
.form-section-legal { background: var(--foam); margin: 0 -26px -24px; padding: 18px 26px 24px; border-top: 1px solid var(--line-soft); }
.field-hint { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; font-weight: 500; }
.phone-row { display: flex; gap: 8px; }
.phone-row .input { flex: 1; }
.legal-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--text-sm); line-height: 1.45; color: var(--ink-soft);
  margin-bottom: 10px; cursor: pointer; font-weight: 500;
}
.legal-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.member-modal-foot { justify-content: space-between; }
.member-modal-foot .btn-primary { min-width: 220px; }

@media (max-width: 700px) {
  .member-form-grid { grid-template-columns: 1fr; }
  .member-form-preview { padding: 20px; }
}

@keyframes pop {
  from { transform: scale(0.96) translateY(8px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-head {
  padding: 22px 26px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-head h2 {
  font-size: var(--text-lg);
  font-weight: 700;
}

.modal-body { padding: 24px 26px; }
.modal-foot {
  padding: 18px 26px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  background: var(--foam);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.x-btn {
  font-size: 1.25rem;
  color: var(--muted);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration) var(--ease);
}

.x-btn:hover { background: var(--cream); color: var(--ink); }

/* modifier chips */
.mod-group { margin-bottom: 18px; }

.mod-group h4 {
  font-size: var(--text-xs);
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.opt {
  padding: 9px 15px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--white);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
  transition: all var(--duration) var(--ease);
}

.opt:hover { border-color: var(--latte); background: var(--cream); }

.opt.sel {
  background: linear-gradient(135deg, var(--mocha), var(--coffee));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(61, 42, 31, 0.2);
}

.opt small { opacity: 0.85; font-weight: 500; }

/* toast */
#toast-root {
  position: fixed;
  bottom: 28px;
  right: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 200;
}

.toast {
  background: var(--espresso);
  color: #fff;
  padding: 14px 20px;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slidein 0.32s var(--ease);
  letter-spacing: -0.01em;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.toast.success { background: linear-gradient(135deg, var(--accent-dark), var(--accent)); }
.toast.error { background: linear-gradient(135deg, #a83828, var(--danger)); }

@keyframes slidein {
  from { transform: translateX(48px) scale(0.96); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}

/* payment grid */
.pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 10px 0 6px;
}

.pay-opt {
  padding: 20px 16px;
  border-radius: var(--radius);
  border: 2px solid var(--line);
  background: var(--white);
  text-align: center;
  transition: all var(--duration) var(--ease);
}

.pay-opt:hover { border-color: var(--caramel); background: var(--foam); }

.pay-opt.sel {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(13, 150, 104, 0.1);
}

.pay-opt .ic { font-size: 1.625rem; display: block; margin-bottom: 8px; }
.pay-opt .lbl { font-weight: 700; font-size: var(--text-sm); letter-spacing: -0.01em; }

.bars {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 180px;
  padding-top: 12px;
}

.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }

.bar {
  width: 100%;
  max-width: 44px;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--caramel) 50%, var(--mocha) 100%);
  border-radius: 8px 8px 4px 4px;
  transition: height 0.5s var(--ease);
  min-height: 8px;
}

.bar-lbl {
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.list-row:last-child { border-bottom: none; }

.li-ic {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.li-main { flex: 1; min-width: 0; }

.li-title {
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.li-sub {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 500;
  line-height: 1.5;
  margin-top: 2px;
}

/* phone mockup */
.phone {
  width: 330px;
  background: linear-gradient(145deg, #0f0c0a, #2a2018);
  border-radius: 44px;
  padding: 13px;
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  position: relative;
}

.phone-notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 26px;
  background: #0f0c0a;
  border-radius: 0 0 18px 18px;
  z-index: 3;
}

.phone-screen {
  background: var(--foam);
  border-radius: 34px;
  padding: 28px 18px 18px;
  height: 660px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.app-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-base);
  font-weight: 700;
  padding: 4px 2px 2px;
  letter-spacing: -0.02em;
}

.app-hi {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 12px 2px 16px;
  letter-spacing: -0.03em;
}

.app-card {
  background: linear-gradient(145deg, #1a120c 0%, #4a3326 45%, #8b6040 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: 0 12px 32px rgba(26, 18, 12, 0.28);
}

.app-barcode {
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  margin-top: 16px;
}

.app-barcode canvas { width: 100%; height: auto; display: block; }

.app-barcode + div,
.app-barcode ~ div {
  font-family: var(--font-mono);
}

.app-stamp {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin: 14px 0;
  box-shadow: var(--shadow-xs);
}

.stamp-cup {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: var(--cream);
  color: var(--muted-light);
  border: 1.5px dashed var(--line);
  transition: all var(--duration) var(--ease);
}

.stamp-cup.on {
  background: linear-gradient(145deg, #fdf4e3, #f5e0b8);
  border-style: solid;
  border-color: var(--gold);
  color: var(--mocha);
  box-shadow: 0 2px 8px rgba(212, 149, 58, 0.2);
}

.app-menu { display: flex; flex-direction: column; gap: 8px; flex: 1; }

.app-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color var(--duration) var(--ease);
}

.app-item:hover { border-color: var(--latte); }

.app-nav {
  display: flex;
  justify-content: space-around;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 6px;
  margin-top: auto;
  box-shadow: var(--shadow-sm);
}

.app-nav-btn {
  font-size: 1.125rem;
  padding: 10px 22px;
  border-radius: 12px;
  opacity: 0.38;
  transition: all var(--duration) var(--ease);
  font-weight: 600;
}

.app-nav-btn.on {
  opacity: 1;
  background: var(--cream);
  box-shadow: var(--shadow-xs);
}

.app-cat-bar {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 4px;
  scrollbar-width: none;
}

.app-cat-bar::-webkit-scrollbar { display: none; }

.app-cat {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--white);
  border: 1.5px solid var(--line);
  font-size: 17px;
  transition: all var(--duration) var(--ease);
}

.app-cat.on {
  background: linear-gradient(135deg, var(--mocha), var(--coffee));
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(107, 76, 53, 0.28);
}

/* member bar in cart */
.member-bar {
  margin: 0 16px 10px;
  background: linear-gradient(135deg, var(--cream) 0%, #fff 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-xs);
}

.stamp-track {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}

.stamp-track div {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  transition: background var(--duration) var(--ease);
}

.stamp-track div.filled { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }

.mono { font-family: var(--font-mono); letter-spacing: 0.06em; }

@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .pos { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  #view { padding: 20px; }
  #topbar { padding: 0 20px; }
}

@media (max-width: 640px) {
  body:not(.sidebar-collapsed) #main::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 29, 57, 0.45);
    z-index: 240;
    pointer-events: none;
  }
  .stat-grid { grid-template-columns: 1fr; }
}

/* ===================== Branch switcher (topbar) ===================== */
.branch-switch {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 7px 12px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.branch-switch:hover { border-color: var(--caramel); }
.branch-switch .bs-ic { font-size: 16px; }
.bs-info { display: flex; flex-direction: column; line-height: 1.15; }
.bs-label { font-size: 0.625rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.bs-name { font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.bs-arrow { color: var(--muted); font-size: 11px; }
.branch-switch select {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

/* ===================== User menu (topbar) ===================== */
.user-menu { display: flex; align-items: center; gap: 10px; }
.um-info { display: flex; flex-direction: column; line-height: 1.2; }
.um-name { font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.um-role { font-size: 0.625rem; color: var(--muted); font-weight: 600; }
.um-logout {
  width: 34px; height: 34px; border-radius: 10px; background: var(--cream);
  color: var(--muted); font-size: 15px; transition: all var(--duration) var(--ease);
}
.um-logout:hover { background: var(--danger-soft); color: var(--danger); }

/* ===================== Branches view ===================== */
.branch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.branch-card { overflow: hidden; transition: all 0.22s var(--ease); }
.branch-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.branch-card.current { border-color: var(--gold); box-shadow: var(--shadow-glow); }
.branch-banner {
  position: relative;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--espresso), var(--mocha) 90%);
  color: #fff;
}
.branch-banner::after {
  content: ""; position: absolute; right: -30px; top: -30px;
  width: 130px; height: 130px; border-radius: 50%; background: rgba(212, 149, 58, 0.18);
}
.branch-banner-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; position: relative; z-index: 1; }
.branch-banner-city { font-size: var(--text-xs); opacity: 0.85; margin-top: 2px; position: relative; z-index: 1; }
.branch-status {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  font-size: 0.625rem; font-weight: 700; padding: 4px 9px; border-radius: 20px;
  background: rgba(255,255,255,0.16); backdrop-filter: blur(4px);
}
.branch-active-tag {
  position: absolute; top: 16px; right: 84px; z-index: 1;
  font-size: 0.625rem; font-weight: 700; padding: 4px 9px; border-radius: 20px;
  background: var(--gold); color: var(--espresso);
}
.branch-body { padding: 18px 20px; }
.branch-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  background: var(--foam); border-radius: 12px; padding: 12px 8px;
}
.branch-metrics > div { text-align: center; display: flex; flex-direction: column; gap: 1px; }
.branch-metrics span { font-size: 15px; }
.branch-metrics b { font-size: var(--text-base); font-family: var(--font-display); }
.branch-metrics small { font-size: 0.625rem; color: var(--muted); }

/* ===================== Branch HQ (Şube Merkezi) ===================== */
.stat-grid-6 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 1100px) { .stat-grid-6 { grid-template-columns: repeat(6, 1fr); } }

.branch-hq-hero {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 22px; gap: 16px; flex-wrap: wrap;
}
.branch-hq-title {
  font-family: var(--font-display); font-size: 1.65rem; font-weight: 800;
  color: var(--ink); margin: 0;
}
.branch-hq-sub { color: var(--muted); font-size: var(--text-sm); margin-top: 6px; font-weight: 500; }

.branch-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; margin-bottom: 20px; flex-wrap: wrap;
}
.branch-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.branch-hq-top { margin-bottom: 0; }
.branch-map-card { padding: 20px; overflow: hidden; }
.branch-map {
  position: relative; height: 280px; margin-top: 12px;
  background: linear-gradient(180deg, #e8f4fc 0%, #dceef8 40%, #d4e8d4 100%);
  border-radius: var(--radius-lg); border: 1px solid var(--line-soft); overflow: hidden;
}
.branch-map-bg {
  position: absolute; inset: 0; opacity: 0.35;
  background-image: radial-gradient(circle at 30% 40%, rgba(47,111,176,0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(19,128,99,0.12) 0%, transparent 45%);
}
.branch-pin {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: transform 0.2s var(--ease);
}
.branch-pin:hover { transform: translate(-50%, -50%) scale(1.08); z-index: 3; }
.pin-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(19,128,99,0.4);
}
.branch-pin.closed .pin-dot { background: var(--danger); box-shadow: 0 2px 8px rgba(214,87,69,0.35); }
.branch-pin.active-pin .pin-dot {
  width: 18px; height: 18px; background: var(--gold);
  box-shadow: 0 0 0 4px rgba(212,149,58,0.35), 0 2px 10px rgba(0,0,0,0.2);
}
.pin-label {
  font-size: 9px; font-weight: 700; color: var(--ink);
  background: rgba(255,255,255,0.92); padding: 2px 6px; border-radius: 6px;
  white-space: nowrap; box-shadow: var(--shadow-sm);
}
.branch-map-legend {
  display: flex; gap: 16px; margin-top: 12px; font-size: 11px; color: var(--muted); font-weight: 600;
}
.branch-map-legend .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle;
}
.branch-map-legend .dot.open { background: var(--accent); }
.branch-map-legend .dot.closed { background: var(--danger); }
.branch-map-legend .dot.active { background: var(--gold); }

.branch-alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: 12px; margin-bottom: 8px;
  background: var(--foam); border: 1px solid var(--line-soft); font-size: var(--text-sm);
}
.branch-alert.warn { background: #fdf8ec; border-color: #f0dfa8; }
.branch-alert.danger { background: var(--danger-soft); border-color: #f0c4bc; }

.branch-leader {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; background: linear-gradient(135deg, #fdf8ec, #fff);
  border-radius: var(--radius-lg); border: 1px solid #f0dfa8;
}
.bl-medal { font-size: 28px; }

.branch-card-pro { cursor: pointer; }
.branch-card-pro .branch-today-amt {
  font-size: var(--text-xl); font-weight: 800; font-family: var(--font-display);
}
.branch-code {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
  background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.9);
}

.branch-spark {
  display: flex; align-items: flex-end; gap: 3px; height: 40px;
}
.bs-bar {
  flex: 1; background: var(--line); border-radius: 3px 3px 0 0;
  min-height: 4px; transition: height 0.3s var(--ease);
}
.bs-bar.today { background: linear-gradient(180deg, var(--gold), var(--caramel)); }

.goal-bar {
  height: 7px; background: var(--cream); border-radius: 6px; overflow: hidden;
}
.goal-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--accent), #0d9668);
  transition: width 0.4s var(--ease);
}

.branch-table th.sort-th { cursor: pointer; user-select: none; white-space: nowrap; }
.branch-table th.sort-th:hover { color: var(--accent); }
.branch-table th.sorted { color: var(--accent); }
.branch-table tr.current-row { background: rgba(212,149,58,0.08); }

.branch-perf-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px;
}
.branch-perf-card { padding: 20px; }

.branch-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.bd-panel {
  background: var(--foam); border-radius: var(--radius-lg);
  padding: 18px; border: 1px solid var(--line-soft);
}
.bd-kpi-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bd-kpi {
  background: var(--white); border-radius: 12px; padding: 14px; text-align: center;
  border: 1px solid var(--line-soft);
}
.bd-kpi span { font-size: 18px; }
.bd-kpi b { display: block; font-size: 1.1rem; font-family: var(--font-display); margin: 4px 0 2px; }
.bd-kpi small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bd-info-list { display: flex; flex-direction: column; gap: 10px; }
.bd-info-list div { display: flex; flex-direction: column; gap: 2px; }
.bd-info-list span { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.bd-info-list b { font-size: var(--text-sm); }

@media (max-width: 768px) {
  .branch-detail-grid { grid-template-columns: 1fr; }
  .branch-toolbar { flex-direction: column; align-items: stretch; }
  .stat-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .branch-form-grid { grid-template-columns: 1fr !important; }
}

.branch-form-grid { min-height: 480px !important; }
.branch-form-preview { background: linear-gradient(175deg, var(--espresso) 0%, #2a1d15 100%); }
.branch-preview-card {
  width: 100%; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12); color: #fff;
}
.bpc-banner {
  padding: 18px; background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent);
  position: relative;
}
.bpc-code { font-size: 10px; opacity: 0.85; }
.bpc-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-top: 10px; }
.bpc-loc { font-size: 11px; opacity: 0.8; margin-top: 4px; }
.bpc-body { padding: 16px 18px; background: rgba(0,0,0,0.2); font-size: var(--text-sm); }
.branch-svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.branch-card .btn-ghost[data-edit-branch] { border-color: var(--line); font-weight: 600; }

/* Table add form — kişilik seçimi */
.table-form-grid { min-height: 420px !important; }
.table-form-preview { background: linear-gradient(175deg, #ebe0d4 0%, #f5ebe0 100%); }
.tf-preview { text-align: center; width: 100%; color: var(--ink); }
.tf-preview-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 16px; }
.tf-preview-stage {
  height: 160px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.5); border-radius: 14px; border: 1px dashed var(--line); margin-bottom: 14px;
}
.tf-preview-table { position: relative; width: 100px; height: 90px; }
.tf-preview-table .fp-surface { inset: 22%; }
.tf-preview-table.shape-round .fp-surface { border-radius: 50%; }
.tf-preview-table.shape-square .fp-surface { border-radius: 10px; inset: 18%; }
.tf-preview-table.shape-rect .fp-surface { border-radius: 8px; inset: 16% 8%; }
.tf-preview-table.shape-booth .fp-surface { border-radius: 12px 12px 6px 6px; inset: 14% 6% 22% 6%; }
.tf-preview-cap b { font-family: var(--font-display); font-size: 1.1rem; color: var(--espresso); }
.tf-preview-chairs { font-size: 11px; color: var(--muted); margin-top: 4px; }
.form-section-capacity {
  background: linear-gradient(135deg, #fdf8ec, #fff); border: 1.5px solid #f0dfa8;
  border-radius: var(--radius-lg); padding: 16px; margin-bottom: 18px;
}
.seat-preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 600px) { .seat-preset-grid { grid-template-columns: repeat(2, 1fr); } }
.seat-preset {
  display: flex; flex-direction: column; align-items: center; padding: 12px 8px;
  border-radius: 12px; border: 1.5px solid var(--line); background: var(--white);
  cursor: pointer; transition: all 0.18s var(--ease);
}
.seat-preset:hover { border-color: var(--caramel); transform: translateY(-1px); }
.seat-preset.active { border-color: var(--gold); background: linear-gradient(160deg, #fff, var(--cream)); box-shadow: var(--shadow-glow); }
.seat-preset .sp-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--espresso); line-height: 1; }
.seat-preset .sp-label { font-size: 11px; font-weight: 700; margin-top: 4px; }
.seat-preset .sp-sub { font-size: 9px; color: var(--muted); margin-top: 2px; line-height: 1.2; }

/* ===================== Login screen ===================== */
#login {
  position: fixed; inset: 0; z-index: 500;
  display: grid; grid-template-columns: 1.1fr 1fr;
  background: var(--foam);
  animation: fadeIn 0.3s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.login-art {
  background: linear-gradient(160deg, var(--espresso) 0%, #2a1d15 50%, var(--coffee) 100%);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  padding: 48px; position: relative; overflow: hidden;
}
.login-art::before {
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,149,58,0.22), transparent 70%);
}
.login-art::after {
  content: "☕"; position: absolute; font-size: 360px; right: -60px; bottom: -100px;
  opacity: 0.04; transform: rotate(-15deg);
}
.login-art-inner { position: relative; z-index: 1; max-width: 420px; }
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 48px; }
.login-brand .brand-logo { width: 52px; height: 52px; }
.login-brand-name { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; line-height: 1; }
.login-brand-name span { color: var(--gold); }
.login-brand-tag { font-size: 0.625rem; letter-spacing: 0.28em; color: var(--latte); margin-top: 4px; }
.login-headline { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.login-sub { color: var(--latte); font-size: var(--text-lg); margin-top: 16px; line-height: 1.6; }
.login-features { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; }
.login-feat { display: flex; align-items: center; gap: 12px; font-size: var(--text-base); font-weight: 600; color: var(--cream); }
.login-feat span {
  width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); font-size: 18px;
}
.login-foot { position: absolute; bottom: 40px; font-size: var(--text-xs); color: var(--muted-light); }

.login-form-wrap { display: flex; align-items: center; justify-content: center; padding: 40px; overflow-y: auto; }
.login-form { width: 100%; max-width: 380px; }
.login-title { font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; }
.login-desc { color: var(--muted); margin: 6px 0 26px; }
.login-users { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.login-user {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--white);
  transition: all var(--duration) var(--ease); text-align: left; width: 100%;
}
.login-user:hover { border-color: var(--caramel); }
.login-user.sel { border-color: var(--accent); background: var(--accent-soft); }
.lu-info { display: flex; flex-direction: column; flex: 1; line-height: 1.25; }
.lu-name { font-weight: 700; font-size: var(--text-base); }
.lu-role { font-size: var(--text-xs); color: var(--muted); }
.lu-check { color: var(--accent-dark); font-weight: 800; font-size: 18px; }

.pin-display { display: flex; gap: 12px; padding: 4px 0; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); transition: all var(--duration) var(--ease); }
.pin-dot.filled { background: var(--accent); border-color: var(--accent); transform: scale(1.1); }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 18px; }
.key {
  padding: 16px 0; border-radius: 13px; background: var(--white);
  border: 1.5px solid var(--line); font-size: var(--text-xl); font-weight: 700; color: var(--ink);
  font-family: var(--font-display); transition: all var(--duration) var(--ease);
}
.key:hover { border-color: var(--caramel); background: var(--cream); }
.key:active { transform: scale(0.96); }
.key-clear { color: var(--muted); font-size: var(--text-lg); }
.key-go { background: var(--accent); color: #fff; border-color: var(--accent); font-size: var(--text-base); font-family: var(--font-sans); }
.key-go:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.login-hint { font-size: var(--text-xs); color: var(--muted); text-align: center; background: var(--cream); padding: 10px; border-radius: 10px; }

@media (max-width: 880px) {
  #login { grid-template-columns: 1fr; }
  .login-art { display: none; }
}

/* ===================== Mobile order / pickup ===================== */
.app-add {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: var(--mocha); color: #fff; font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--duration) var(--ease);
}
.app-add:hover { background: var(--coffee); transform: scale(1.08); }
.mq { display: flex; align-items: center; gap: 8px; }
.mq button { width: 26px; height: 26px; border-radius: 8px; background: var(--cream); font-weight: 800; color: var(--coffee); font-size: 15px; }
.mq span { font-weight: 700; min-width: 16px; text-align: center; font-size: 13px; }

.m-cart-bar {
  width: 100%; margin: 10px 0; padding: 13px 16px; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff; font-weight: 700; font-size: var(--text-sm);
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 6px 16px rgba(13, 150, 104, 0.32);
}
.m-cart-n { background: rgba(255,255,255,0.25); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }

.nav-badge {
  position: absolute; transform: translate(8px, -10px);
  background: var(--danger); color: #fff; font-size: 9px; font-weight: 800;
  min-width: 15px; height: 15px; border-radius: 8px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
}
.app-nav-btn { position: relative; }

.order-card {
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px;
}
.order-card.ready { border-color: var(--accent); box-shadow: 0 4px 16px rgba(13,150,104,0.14); }
.order-steps { display: flex; align-items: center; margin: 12px 0 4px; }
.ostep { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ostep small { font-size: 9px; color: var(--muted); font-weight: 600; }
.ostep.done small { color: var(--ink); }
.odot {
  width: 22px; height: 22px; border-radius: 50%; background: var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; font-weight: 800;
}
.ostep.done .odot { background: var(--accent); }
.oline { flex: 1; height: 2px; background: var(--line); margin: 0 2px; margin-bottom: 14px; }

.pickup-box { text-align: center; background: var(--accent-soft); border-radius: 14px; padding: 16px; margin-top: 12px; }
.pickup-code { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; letter-spacing: 0.12em; color: var(--accent-dark); margin: 4px 0 10px; }
.pickup-qr { background: #fff; border-radius: 12px; padding: 6px; box-shadow: var(--shadow-xs); }
.delivered-box { text-align: center; background: var(--cream); border-radius: 14px; padding: 20px; color: var(--muted); }
.delivered-box b { color: var(--ink); display: block; font-size: 15px; margin: 2px 0; }
.order-card.done { opacity: 0.82; }

/* ===================== Payment tabs / split ===================== */
.pay-tabs { display: flex; gap: 8px; padding: 14px 24px 0; }
.pay-tab { flex: 1; padding: 11px; border-radius: 12px; background: var(--cream); font-weight: 700; font-size: var(--text-sm); color: var(--coffee); transition: all var(--duration) var(--ease); }
.pay-tab.sel { background: var(--mocha); color: #fff; box-shadow: var(--shadow-sm); }
.split-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--foam); border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.split-head b { font-family: var(--font-display); font-size: var(--text-lg); }
.split-list { background: var(--white); border: 1px solid var(--line-soft); border-radius: 12px; padding: 4px 12px; margin-bottom: 6px; }
.split-done { text-align: center; background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; padding: 22px; border-radius: 14px; }

/* ===================== Tables / Adisyon ===================== */
/* ===================== Tables — Professional Floor Plan ===================== */
.table-grid { display: none; } /* legacy hidden */

.tables-pro { max-width: 100%; }
.tables-pro-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.tables-pro-title { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; margin: 0; }
.tables-pro-sub { color: var(--muted); font-size: var(--text-sm); margin-top: 5px; }
.btn.active-design { background: var(--gold-soft); border-color: var(--gold); color: var(--espresso); }

.floor-tabs {
  display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}
.floor-tab {
  flex: 1; min-width: 180px; text-align: left; padding: 14px 18px;
  border-radius: var(--radius-lg); border: 1.5px solid var(--line);
  background: var(--white); cursor: pointer; transition: all 0.2s var(--ease);
  box-shadow: var(--shadow-xs);
}
.floor-tab:hover { border-color: var(--caramel); transform: translateY(-1px); }
.floor-tab.active {
  border-color: var(--gold); background: linear-gradient(160deg, #fff, var(--cream));
  box-shadow: var(--shadow-glow);
}
.ft-name { display: block; font-weight: 800; font-size: var(--text-sm); color: var(--ink); }
.ft-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.ft-badge {
  display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 20px; background: var(--foam); color: var(--mocha);
}
.floor-tab.active .ft-badge { background: var(--gold-soft); color: var(--espresso); }

.tables-pro-body {
  display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start;
}
@media (max-width: 960px) { .tables-pro-body { grid-template-columns: 1fr; } }

.floor-plan-wrap {
  background: var(--white); border-radius: var(--radius-xl);
  border: 1px solid var(--line-soft); overflow: hidden; box-shadow: var(--shadow-sm);
}
.floor-plan-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
  background: var(--foam); font-weight: 700; font-size: var(--text-sm);
}
.floor-plan {
  position: relative; height: 520px; margin: 0;
  background:
    linear-gradient(rgba(107,76,53,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,76,53,0.04) 1px, transparent 1px),
    linear-gradient(165deg, #f5ebe0 0%, #ebe0d4 35%, #e8dccf 100%);
  background-size: 24px 24px, 24px 24px, 100% 100%;
  overflow: hidden;
}
.fp-grid { position: absolute; inset: 0; pointer-events: none; }
.fp-zone {
  position: absolute; pointer-events: none; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: rgba(107,76,53,0.35);
  padding: 6px 10px; border: 1px dashed rgba(107,76,53,0.15); border-radius: 8px;
}
.fp-zone-bar { top: 4%; left: 3%; width: 18%; height: 10%; }
.fp-zone-entry { bottom: 4%; right: 3%; width: 16%; height: 10%; }

.fp-table {
  position: absolute; padding: 0; border: none; background: none; cursor: pointer;
  z-index: 2; transition: transform 0.15s var(--ease), filter 0.15s;
}
.fp-table:hover { z-index: 5; transform: scale(1.04); }
.fp-table.selected { z-index: 6; filter: drop-shadow(0 0 8px rgba(212,149,58,0.55)); }
.fp-table.active-session .fp-surface { outline: 2px solid var(--accent); outline-offset: 2px; }
.fp-table.dragging { z-index: 10; cursor: grabbing; opacity: 0.92; }
.fp-table.designable { cursor: grab; }

.fp-surface {
  position: absolute; inset: 18%; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: linear-gradient(145deg, #8b6914 0%, #6b4c35 45%, #5a4030 100%);
  border: 2px solid rgba(255,255,255,0.25);
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.12), 0 4px 12px rgba(43,28,20,0.25);
  transition: background 0.2s;
}
.fp-table.shape-round .fp-surface { border-radius: 50%; }
.fp-table.shape-square .fp-surface { border-radius: 10px; inset: 16%; }
.fp-table.shape-rect .fp-surface { border-radius: 8px; inset: 14% 8%; }
.fp-table.shape-booth .fp-surface {
  border-radius: 14px 14px 8px 8px; inset: 12% 6% 20% 6%;
  background: linear-gradient(145deg, #7a5c42, #4a3528);
}

.fp-table.status-free .fp-surface { background: linear-gradient(145deg, #a8824f, #7a5c42); }
.fp-table.status-occupied .fp-surface {
  background: linear-gradient(145deg, #c45c3e, #8b3a28);
  box-shadow: inset 0 0 0 2px rgba(255,200,100,0.3), 0 4px 14px rgba(196,92,62,0.35);
}
.fp-table.status-reserved .fp-surface {
  background: linear-gradient(145deg, #5b6b7a, #374151);
}
.fp-table.status-inactive { opacity: 0.55; cursor: not-allowed; }
.fp-table.status-inactive .fp-surface {
  background: linear-gradient(145deg, #9ca3af, #6b7280);
  filter: grayscale(0.6);
}
.fp-table:disabled { pointer-events: auto; }

.fp-res { font-size: 9px; font-weight: 800; color: #fcd34d; letter-spacing: 0.02em; }
.fp-res-name { font-size: 7px; color: rgba(255,255,255,0.85); max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-off { font-size: 7px; font-weight: 800; color: rgba(255,255,255,0.7); letter-spacing: 0.06em; }

.floor-tab-add {
  flex: 0 0 56px !important; min-width: 56px !important; max-width: 56px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 300; color: var(--muted);
  border-style: dashed !important;
}
.floor-tab-add:hover { color: var(--accent); border-color: var(--accent) !important; }

.floor-legend .leg.inactive { background: #9ca3af; }

.ti-reservation {
  background: linear-gradient(135deg, #f0f4f8, #fff);
  border: 1px solid #d0dbe8; border-radius: 12px; padding: 14px; margin-bottom: 14px;
}
.ti-res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.ti-res-grid div { display: flex; flex-direction: column; gap: 2px; }
.ti-res-grid span { font-size: 10px; color: var(--muted); text-transform: uppercase; font-weight: 600; }
.ti-res-grid b { font-size: var(--text-sm); }
.ti-res-note { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ti-res-note span { font-size: 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.ti-res-note p { font-size: var(--text-sm); margin-top: 4px; line-height: 1.45; color: var(--ink-soft); }
.ti-stat.res b { color: #5b6b7a; }
.ti-stat.off b { color: var(--muted); }
.ti-member {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: var(--foam); border-radius: 10px; font-size: var(--text-sm); margin-bottom: 10px;
}
.ti-mod { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ti-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0 4px; margin-top: 8px; border-top: 2px solid var(--espresso);
  font-size: var(--text-base);
}
.ti-total b { font-family: var(--font-display); font-size: 1.25rem; color: var(--espresso); }
.ti-lines { max-height: 200px; overflow-y: auto; margin-bottom: 12px; }

.fp-num {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(11px, 1.4vw, 16px);
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.35); line-height: 1;
}
.fp-amt { font-size: 9px; font-weight: 700; color: #ffe8c8; margin-top: 2px; white-space: nowrap; }
.fp-items { font-size: 8px; color: rgba(255,255,255,0.75); }
.fp-res { font-size: 8px; font-weight: 800; color: #fcd34d; letter-spacing: 0.05em; }
.fp-seats {
  position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  font-size: 8px; font-weight: 600; color: var(--muted); white-space: nowrap;
  background: rgba(255,255,255,0.9); padding: 1px 5px; border-radius: 4px;
}

.fp-chair {
  position: absolute; width: 22%; height: 22%; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d4c4b0, #9a8472);
  border: 1px solid rgba(107,76,53,0.35);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.fp-table.shape-round .fp-chair.c0 { top: -4%; left: 50%; transform: translateX(-50%); }
.fp-table.shape-round .fp-chair.c1 { bottom: -4%; left: 50%; transform: translateX(-50%); }
.fp-table.shape-round .fp-chair.c2 { top: 50%; left: -6%; transform: translateY(-50%); }
.fp-table.shape-round .fp-chair.c3 { top: 50%; right: -6%; transform: translateY(-50%); }
.fp-table.shape-square .fp-chair.c0, .fp-table.shape-rect .fp-chair.c0 { top: -6%; left: 20%; }
.fp-table.shape-square .fp-chair.c1, .fp-table.shape-rect .fp-chair.c1 { top: -6%; right: 20%; }
.fp-table.shape-square .fp-chair.c2, .fp-table.shape-rect .fp-chair.c2 { bottom: -6%; left: 20%; }
.fp-table.shape-square .fp-chair.c3, .fp-table.shape-rect .fp-chair.c3 { bottom: -6%; right: 20%; }
.fp-table.shape-booth .fp-chair.c0 { top: -5%; left: 25%; }
.fp-table.shape-booth .fp-chair.c1 { top: -5%; right: 25%; }
.fp-table.shape-booth .fp-chair.c2 { bottom: 2%; left: 20%; }
.fp-table.shape-booth .fp-chair.c3 { bottom: 2%; right: 20%; }

.floor-legend {
  display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--line-soft);
  font-size: 11px; color: var(--muted); font-weight: 600; flex-wrap: wrap;
}
.floor-legend .leg {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle;
}
.floor-legend .leg.free { background: #7a5c42; }
.floor-legend .leg.busy { background: #c45c3e; }
.floor-legend .leg.reserved { background: #6b7280; }
.floor-legend .leg.selected { background: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }

.table-inspector {
  background: var(--white); border-radius: var(--radius-xl);
  border: 1px solid var(--line-soft); padding: 20px;
  box-shadow: var(--shadow-sm); position: sticky; top: 12px;
  min-height: 400px;
}
.ti-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.ti-num {
  display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--espresso), var(--mocha)); color: #fff;
  border-radius: 10px; font-weight: 800; font-family: var(--font-display); margin-bottom: 8px;
}
.ti-head h3 { margin: 0; font-size: 1.15rem; font-family: var(--font-display); }
.ti-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ti-kpi div { background: var(--foam); border-radius: 10px; padding: 10px; text-align: center; }
.ti-kpi span { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; }
.ti-kpi b { font-size: var(--text-sm); }
.ti-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--text-sm); }
.ti-free-msg {
  padding: 16px; background: var(--foam); border-radius: 12px; font-size: var(--text-sm);
  color: var(--ink-soft); line-height: 1.5; margin-bottom: 14px;
}
.ti-actions { display: flex; flex-direction: column; gap: 8px; }
.ti-empty { text-align: center; padding: 20px 8px; }
.ti-floor-icon {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 16px;
  background: linear-gradient(135deg, var(--cream), var(--foam));
  border: 1px solid var(--line); position: relative;
}
.ti-floor-icon::after {
  content: ""; position: absolute; inset: 12px;
  background: linear-gradient(135deg, rgba(107,76,53,0.15), transparent);
  border-radius: 8px; border: 1px dashed rgba(107,76,53,0.2);
}
.ti-stats { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.ti-stat { padding: 12px 16px; background: var(--foam); border-radius: 12px; min-width: 70px; }
.ti-stat b { display: block; font-size: 1.25rem; font-family: var(--font-display); }
.ti-stat span { font-size: 10px; color: var(--muted); text-transform: uppercase; }
.ti-stat.free b { color: var(--accent); }
.ti-stat.busy b { color: var(--danger); }

.table-banner {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 16px 8px; padding: 9px 14px;
  background: linear-gradient(135deg, var(--caramel), var(--mocha));
  color: #fff; border-radius: 12px; font-size: var(--text-sm);
}


/* ===================== Receipt ===================== */
.receipt { background: #fff; border: 1px dashed var(--line); border-radius: 10px; padding: 18px 20px; font-family: var(--font-mono); font-size: 12.5px; color: #1a120c; max-width: 320px; margin: 0 auto; }
.receipt .r-center { text-align: center; }
.receipt .r-logo { font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.receipt .r-sub { font-size: 11px; color: #777; }
.receipt .r-title { text-align: center; font-weight: 700; margin: 12px 0; letter-spacing: 1px; }
.receipt .r-line { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.receipt .r-line span:last-child { white-space: nowrap; }
.receipt .r-big { font-weight: 800; font-size: 14px; }
.receipt .r-hr { border-top: 1px dashed #bbb; margin: 8px 0; }
.receipt-pro { max-width: 360px; padding: 22px 24px; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }

/* ===================== Inventory ===================== */
.inv-alert {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 20px; margin-bottom: 20px;
  background: linear-gradient(135deg, #fff5f3, #fceeea);
  border: 1px solid #f5d0c8; border-left: 4px solid var(--danger);
  border-radius: var(--radius-lg);
}
.inv-alert.var-plus { background: linear-gradient(135deg, #f0faf4, #e6f5ef); border-color: #b8e6d0; border-left-color: var(--accent); }
.inv-alert.var-minus { background: linear-gradient(135deg, #fff5f3, #fceeea); border-color: #f5d0c8; border-left-color: var(--danger); }
.inv-alert-ic { font-size: 1.375rem; line-height: 1; }
.inv-count-card { background: var(--foam); border: 1px solid var(--line-soft); }
.stock-meter {
  height: 8px; background: var(--cream); border-radius: 999px; overflow: hidden;
}
.stock-meter-fill {
  height: 100%; border-radius: 999px; transition: width 0.4s var(--ease);
}
.stock-meter-fill.ok { background: linear-gradient(90deg, var(--accent), #1bc48a); }
.stock-meter-fill.low { background: linear-gradient(90deg, var(--gold-light), var(--gold)); }
.stock-meter-fill.critical { background: linear-gradient(90deg, #e07060, var(--danger)); }
.stock-cell { min-width: 140px; }

/* ===================== Reports & Shift ===================== */
.report-chip {
  padding: 8px 16px; border-radius: 999px; font-size: var(--text-sm); font-weight: 700;
  border: 1.5px solid var(--line); background: var(--white); color: var(--muted);
  transition: all var(--duration) var(--ease);
}
.report-chip:hover { border-color: var(--latte); color: var(--ink-soft); }
.report-chip.active {
  background: linear-gradient(135deg, #0A4174, #4E8EA2);
  color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(10, 65, 116, 0.28);
}
.report-panel { padding: 22px 24px; }
.report-foot {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: var(--text-sm); color: var(--muted); font-weight: 500;
}
.bar-val { font-size: 10px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.pay-bar-row { margin-bottom: 14px; }
.pay-bar-head { font-size: var(--text-sm); margin-bottom: 6px; }
.pay-bar-pct { font-size: var(--text-xs); color: var(--muted); font-weight: 600; margin-left: 4px; }
.pay-bar-track {
  height: 9px; background: var(--cream); border-radius: 999px; overflow: hidden;
}
.pay-bar-fill { height: 100%; border-radius: 999px; transition: width 0.5s var(--ease); min-width: 2px; }
.rank-row {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px;
}
.rank-no {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: var(--cream); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 800; color: var(--mocha);
}
.metric-list { display: flex; flex-direction: column; gap: 0; }
.metric-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-sm);
}
.metric-row:last-child { border-bottom: none; }
.metric-row span { color: var(--muted); font-weight: 500; }
.metric-row b { font-weight: 700; color: var(--ink); text-align: right; }
.metric-row.highlight { background: var(--foam); margin: 0 -8px; padding: 12px 8px; border-radius: 10px; border: none; }
.var-plus-row b { color: var(--accent-dark); }
.var-minus-row b { color: var(--danger); }
.row-muted { opacity: 0.55; }

/* ===================== Reports Pro ===================== */
.reports-pro { display: flex; flex-direction: column; gap: 18px; }
.reports-hero {
  padding: 22px 26px;
  background: linear-gradient(135deg, #001D39 0%, #0A4174 55%, #49769F 100%);
  color: #fff;
  border: none;
  overflow: hidden;
  position: relative;
}
.reports-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(123, 189, 232, 0.22), transparent 55%);
  pointer-events: none;
}
.reports-hero-main, .reports-hero-kpis { position: relative; z-index: 1; }
.reports-hero-main { margin-bottom: 18px; }
.reports-hero-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #7BBDE8; display: block; margin-bottom: 8px;
}
.reports-hero-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }
.reports-hero-sub { font-size: 13px; color: rgba(189, 216, 233, 0.75); }
.reports-hero-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.reports-kpi {
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(189, 216, 233, 0.15);
}
.reports-kpi span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(189, 216, 233, 0.65); margin-bottom: 4px; }
.reports-kpi b { font-size: 1.15rem; font-weight: 800; }
.reports-kpi.accent { background: rgba(123, 189, 232, 0.15); border-color: rgba(123, 189, 232, 0.35); }

.reports-toolbar {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-xs);
}
.reports-tab-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.reports-tab {
  padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--line); background: var(--foam); color: var(--muted);
  transition: all 0.15s;
}
.reports-tab:hover { border-color: #7BBDE8; color: #0A4174; }
.reports-tab.active {
  background: linear-gradient(135deg, #7BBDE8, #4E8EA2);
  color: #001D39; border-color: transparent;
  box-shadow: 0 4px 14px rgba(123, 189, 232, 0.35);
}
.reports-toolbar-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.reports-toolbar-actions .grow { flex: 1; }
.reports-chart-wrap { height: 200px; margin-top: 8px; }
.reports-chart-wrap .dash-area-chart { width: 100%; height: 100%; }
.reports-hour-bars { margin-top: 12px; }
.reports-table-scroll { overflow-x: auto; margin: 0 -4px; }
.reports-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.reports-table th {
  text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid var(--line-soft); white-space: nowrap;
}
.reports-table td {
  padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle;
}
.reports-table tbody tr:hover { background: var(--foam); }
.reports-total-row { background: #dbeafe !important; font-weight: 700; }
.reports-total-row td { border-bottom: none; }
.reports-row-active { background: rgba(123, 189, 232, 0.12) !important; }

@media (max-width: 900px) {
  .reports-hero-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .reports-tab-row { gap: 6px; }
  .reports-tab { font-size: 11px; padding: 7px 10px; }
  .reports-toolbar-actions { flex-direction: column; align-items: stretch; }
}

/* Report PDF document */
.report-pdf-preview { background: var(--foam); padding: 20px; max-height: 70vh; overflow: auto; border-radius: 0 0 var(--radius) var(--radius); }
.report-doc { background: #fff; max-width: 780px; margin: 0 auto; padding: 32px 36px; font-family: var(--font-body); color: #0f172a; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }
.rd-header { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 3px solid #0A4174; }
.rd-logo { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: #001D39; margin-bottom: 4px; }
.rd-legal { font-size: 12px; font-weight: 600; color: #334155; }
.rd-meta { font-size: 11px; color: #64748b; margin-top: 3px; line-height: 1.45; }
.rd-title-block { text-align: right; flex-shrink: 0; }
.rd-title-block h1 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: #0A4174; margin: 0 0 6px; }
.rd-title-block p { font-size: 12px; color: #475569; margin: 2px 0; }
.rd-date { font-weight: 600; color: #001D39 !important; }
.rd-user { font-size: 11px !important; color: #94a3b8 !important; }
.rd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.rd-kpi { padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, #f0f9ff, #e0f2fe); border: 1px solid #bae6fd; }
.rd-kpi span { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 4px; }
.rd-kpi b { font-size: 1.05rem; font-weight: 800; color: #0A4174; }
.rd-section { margin-bottom: 22px; }
.rd-section h2 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #49769F; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.rd-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rd-table th { text-align: left; padding: 9px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; background: #f8fafc; border-bottom: 2px solid #e2e8f0; }
.rd-table td { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.rd-table tr.rd-total td { background: #dbeafe; font-weight: 800; border-bottom: none; }
.rd-table tr.rd-active td { background: rgba(123, 189, 232, 0.15); }
.rd-empty { font-size: 13px; color: #94a3b8; padding: 12px 0; }
.rd-footer { margin-top: 28px; padding-top: 16px; border-top: 1px dashed #cbd5e1; text-align: center; }
.rd-footer p { font-size: 10px; color: #94a3b8; margin: 3px 0; }
.rd-disclaimer { font-style: italic; }
.rd-schedule-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rd-schedule-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 8px 10px; background: var(--foam); border: 1px solid var(--line-soft); border-radius: 10px; cursor: pointer; }
.rd-schedule-check input { accent-color: #0A4174; }
@media (max-width: 640px) {
  .rd-header { flex-direction: column; }
  .rd-title-block { text-align: left; }
  .rd-kpis { grid-template-columns: repeat(2, 1fr); }
  .rd-schedule-grid { grid-template-columns: 1fr; }
}

/* Shift panel */
.shift-panel { padding: 24px; }
.shift-header {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 18px; margin-bottom: 6px; border-bottom: 1px solid var(--line-soft);
}
.shift-status-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: var(--muted-light);
}
.shift-header.open .shift-status-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(13, 150, 104, 0.18);
  animation: pulse 2.4s ease infinite;
}
.shift-header.closed .shift-status-dot { background: var(--danger); }
.shift-total-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--line-soft);
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800;
}
.shift-total-row b { color: var(--accent-dark); }

/* Matrix / Marketing / API */
.mkt-hero { margin-bottom: 18px; }
.mkt-guide { padding: 20px 22px; margin-bottom: 18px; background: linear-gradient(135deg, #fdf8f0 0%, #f5ebe0 100%); border-color: var(--line); }
.mkt-guide-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 12px; }
@media (max-width: 800px) { .mkt-guide-steps { grid-template-columns: 1fr; } }
.mkt-guide-step { display: flex; gap: 12px; align-items: flex-start; }
.mkt-step-n {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.mkt-quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mkt-quick-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px; border-radius: var(--radius); border: 1px solid var(--line-soft);
  background: var(--foam); cursor: pointer; text-align: left; transition: border-color 0.15s, box-shadow 0.15s;
}
.mkt-quick-btn:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.mkt-quick-btn span { font-size: 22px; }
.mkt-quick-btn b { font-size: var(--text-sm); }
.mkt-quick-btn small { font-size: 11px; color: var(--muted); }
.mkt-seg-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.mkt-seg-row:last-child { border-bottom: none; }
.mkt-seg-ic { font-size: 20px; width: 32px; text-align: center; }
.mkt-seg-ic-lg { font-size: 28px; }
.mkt-seg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.mkt-seg-card { padding: 20px; }
.mkt-seg-name { font-family: var(--font-display); font-size: 1.05rem; margin: 10px 0 6px; }
.mkt-seg-meta { display: flex; gap: 24px; margin: 12px 0; }
.mkt-seg-meta b { font-family: var(--font-display); font-size: 1.1rem; display: block; }
.mkt-seg-meta small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mkt-seg-hint { font-size: 12px; color: var(--accent-dark); background: var(--foam); padding: 8px 10px; border-radius: 8px; margin: 0; }
.mkt-member-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mkt-chip {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--cream); border: 1px solid var(--line-soft);
}
.mkt-chip.ok { background: #e3f5ee; border-color: #b8e6d4; color: #138063; }
.mkt-chip.warn { background: #fdf0db; border-color: #f0d4a8; color: #b07b1a; }
.mkt-ref-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.mkt-ref-rank {
  width: 24px; height: 24px; border-radius: 50%; background: var(--gold-light);
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.mkt-log-mini { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.mkt-log-mini:last-child { border-bottom: none; }
.mkt-tpl-card { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.mkt-tpl-card:last-child { border-bottom: none; }
.mkt-tip { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.mkt-tip:last-child { border-bottom: none; }
.mkt-tip span { font-size: 20px; }
.mkt-auto-card {
  padding: 16px; border-radius: var(--radius); border: 1px solid var(--line-soft);
  background: var(--foam); opacity: 0.85;
}
.mkt-auto-card.on { opacity: 1; border-color: rgba(19,128,99,0.25); background: #f8fcfa; }
.mkt-history-table { font-size: var(--text-sm); width: 100%; }
.mkt-wizard-body { max-height: 70vh; overflow-y: auto; }
.mkt-wiz-steps {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px;
  font-size: 11px; font-weight: 700; color: var(--muted);
}
.mkt-wiz-steps span { padding: 6px 12px; border-radius: 999px; background: var(--cream); }
.mkt-wiz-steps span.on { background: var(--accent); color: #fff; }
.mkt-wiz-grid { align-items: start; }
.mkt-wiz-seg { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--foam); border-radius: var(--radius); margin-top: 8px; }
.mkt-wiz-stats { display: flex; gap: 16px; margin-top: 12px; }
.mkt-wiz-stats b { font-family: var(--font-display); font-size: 1.2rem; display: block; }
.mkt-wiz-stats small { font-size: 10px; color: var(--muted); }
.mkt-phone {
  width: 220px; margin: 0 auto; background: #1a120c; border-radius: 28px;
  padding: 10px 8px 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.mkt-phone-notch { width: 60px; height: 5px; background: #333; border-radius: 999px; margin: 0 auto 8px; }
.mkt-phone-screen { background: linear-gradient(180deg, #2a1f18, #1a120c); border-radius: 20px; padding: 16px 12px; min-height: 200px; }
.mkt-phone-time { font-size: 10px; color: rgba(255,255,255,0.5); text-align: center; margin-bottom: 16px; }
.mkt-push-card {
  background: rgba(255,255,255,0.95); border-radius: 14px; padding: 12px;
  font-size: 12px; color: var(--ink); box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.mkt-push-app { font-size: 10px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.mkt-push-card b { display: block; font-size: 13px; margin-bottom: 4px; }
.mkt-push-card p { margin: 0 0 8px; line-height: 1.4; color: var(--mocha); font-size: 11.5px; }
.mkt-push-cta { font-size: 10px; font-weight: 700; color: var(--accent); }
.mkt-sms-tag { font-size: 10px; background: var(--gold-light); padding: 2px 8px; border-radius: 6px; font-weight: 700; }
.toggle { position: relative; display: inline-flex; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle span {
  width: 44px; height: 24px; background: var(--line); border-radius: 999px;
  transition: background 0.2s; position: relative;
}
.toggle span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle input:checked + span { background: var(--accent); }
.toggle input:checked + span::after { transform: translateX(20px); }

.matrix-table { font-size: var(--text-sm); }
.matrix-table th { background: var(--foam); position: sticky; top: 0; z-index: 1; }
.matrix-mod { font-size: var(--text-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.seg-card { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.seg-card:last-child { border-bottom: none; }
.api-status { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--foam); border-radius: var(--radius); border: 1px solid var(--line-soft); }
.api-status.connected .shift-status-dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(13, 150, 104, 0.15); }

/* Mobile gate & secure QR */
.gate-screen { padding: 24px 8px; max-width: 360px; margin: 0 auto; }
.gate-logo { margin-bottom: 12px; }
.gate-title { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; }
.gate-sub { color: var(--muted); font-size: var(--text-sm); margin: 8px 0 20px; line-height: 1.5; }
.kvkk-box { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; font-size: var(--text-sm); line-height: 1.55; margin-bottom: 14px; }
.kvkk-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-sm); margin-bottom: 10px; cursor: pointer; }
.secure-qr-wrap { position: relative; }
.secure-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; margin-bottom: 8px; }
.qr-timer { font-size: 11px; text-align: center; opacity: 0.8; margin-top: 6px; }
.screenshot-shield { display: none; position: absolute; inset: 0; background: rgba(26, 18, 12, 0.92); color: #fff; border-radius: inherit; align-items: center; justify-content: center; text-align: center; padding: 20px; font-size: 13px; font-weight: 700; z-index: 5; }
.screenshot-shield.show { display: flex; }
.stamp-progress { height: 8px; background: rgba(255,255,255,0.2); border-radius: 999px; overflow: hidden; }
.stamp-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold-light), var(--gold)); border-radius: 999px; transition: width 0.5s ease; }
.coupon-banner { background: linear-gradient(135deg, #fdf4e3, #f5e0b8); border: 1px solid var(--gold); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; font-size: var(--text-sm); }
.wallet-card { background: linear-gradient(145deg, var(--espresso), var(--mocha)); color: #fff; border-radius: var(--radius-xl); padding: 22px; }
.wallet-amt { font-family: var(--font-display); font-size: 2rem; font-weight: 800; margin-top: 6px; }
.hist-row { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.nutri-row { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--text-sm); font-weight: 600; color: var(--mocha); margin-bottom: 12px; }
.allergen-box { background: #fff5f3; border: 1px solid #f5d0c8; border-radius: 10px; padding: 10px 12px; font-size: var(--text-sm); margin-bottom: 14px; color: var(--danger); }
.app-link { width: 100%; cursor: pointer; border: none; background: none; text-align: left; }

#print-area { display: none; }
@media print {
  body > * { display: none !important; }
  #print-area { display: block !important; }
  #print-area .receipt { border: none; max-width: 100%; }
  #print-area .report-doc { border: none; box-shadow: none; max-width: 100%; padding: 0; font-size: 11px; }
  #print-area .rd-header { page-break-after: avoid; }
  #print-area .rd-section { page-break-inside: avoid; }
  #print-area .rd-table th { background: #f1f5f9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-area .rd-kpi { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===================== Loyalty member 360° ===================== */
.md-hero { background: linear-gradient(150deg, var(--espresso), var(--mocha)); padding: 22px 24px; position: relative; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.md-bar { background: rgba(0,0,0,.18); border-radius: 12px; padding: 8px; margin-top: 16px; }
.md-bar canvas { width: 100%; height: auto; display: block; background: transparent; }
.md-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; background: var(--foam); border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 8px; margin-bottom: 14px; }
.md-kpis > div { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.md-k { font-family: var(--font-display); font-weight: 800; font-size: var(--text-base); }
.md-kpis small { font-size: 0.625rem; color: var(--muted); }
.md-next { background: var(--foam); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.md-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.md-info { background: var(--foam); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.md-info b { font-size: var(--text-sm); }
.md-hist { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.md-hist:last-child { border-bottom: none; }
@media (max-width: 760px) { .md-kpis { grid-template-columns: repeat(2, 1fr); } .md-grid { grid-template-columns: 1fr; } }

/* ===================== Geri Bildirim Merkezi ===================== */
.fb-pro { display: flex; flex-direction: column; gap: 16px; }
.fb-hero { padding: 22px 24px; background: linear-gradient(135deg, #f0f7ff 0%, #fff 55%, var(--cream) 100%); border-color: var(--line); }
.fb-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.fb-hero-eyebrow { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #2f6fb0; margin-bottom: 4px; }
.fb-hero-title { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; color: var(--ink); }
.fb-hero-sub { margin: 0; font-size: var(--text-sm); color: var(--muted); max-width: 560px; line-height: 1.5; }
.fb-hero-actions { display: flex; gap: 8px; flex-shrink: 0; }
.fb-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fb-kpi { padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line-soft); }
.fb-kpi-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.fb-kpi-value { display: block; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.fb-kpi-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.fb-kpi-accent { border-color: #cce8dc; background: #f7fcfa; }
.fb-kpi-accent .fb-kpi-value { color: var(--accent-dark); }
.fb-kpi-warn { border-color: #f5e6c8; background: #fffcf5; }
.fb-kpi-warn .fb-kpi-value { color: #b07b1a; }
.fb-kpi-danger { border-color: #f0d4cf; background: #fdf8f7; }
.fb-kpi-danger .fb-kpi-value { color: var(--danger); }
.fb-kpi-blue { border-color: #cfe0f5; background: #f7faff; }
.fb-kpi-blue .fb-kpi-value { color: #2f6fb0; }
.fb-alert-banner { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: var(--text-sm); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-toolbar { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fb-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.fb-search { min-width: 200px; max-width: 280px; padding: 7px 10px !important; font-size: 12px !important; }
.fb-filter-select { width: auto; min-width: 150px; padding: 7px 10px !important; font-size: 12px !important; }
.fb-grid-top { align-items: stretch; }
.fb-grid-mid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.fb-panel { padding: 20px 22px; }
.fb-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.fb-panel-head b { font-size: var(--text-sm); }
.fb-bar-row { margin-bottom: 12px; }
.fb-bar-meta { font-size: var(--text-sm); margin-bottom: 4px; }
.fb-bar-track { height: 9px; background: var(--cream); border-radius: 6px; overflow: hidden; }
.fb-bar-track.lg { height: 11px; }
.fb-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--gold), var(--caramel)); transition: width .3s ease; }
.fb-bar-fill.fb-bar-qr { background: linear-gradient(90deg, #b07b1a, #d4a04a); }
.fb-bar-fill.fb-bar-app { background: linear-gradient(90deg, var(--accent), var(--accent-dark)); }
.fb-bar-fill.fb-bar-google { background: linear-gradient(90deg, #6b7280, #9ca3af); }
.fb-nps-rows { display: flex; flex-direction: column; gap: 0; }
.fb-nps-row { padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--text-sm); }
.fb-nps-stack { display: flex; height: 12px; border-radius: 8px; overflow: hidden; margin: 14px 0 6px; background: var(--cream); }
.fb-nps-total { font-size: var(--text-lg); margin-top: 6px; }
.fb-nps-score.fb-nps-accent { color: var(--accent-dark); }
.fb-nps-score.fb-nps-warn { color: #b07b1a; }
.fb-nps-score.fb-nps-danger { color: var(--danger); }
.fb-stars { color: var(--gold); letter-spacing: 1px; }
.fb-stars-dim { color: var(--line); }
.fb-topic { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); margin-left: 4px; vertical-align: middle; }
.fb-topic-row { padding: 6px 0; font-size: var(--text-sm); }
.fb-branch-row { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.fb-branch-row:last-child { border-bottom: none; }
.fb-empty-inline { font-size: var(--text-sm); color: var(--muted); padding: 8px 0; }
.fb-inbox-list { display: flex; flex-direction: column; gap: 12px; }
.fb-inbox-card { padding: 16px 20px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line-soft); }
.fb-inbox-urgent { border-left: 4px solid var(--danger); background: #fffcfb; }
.fb-inbox-top { display: flex; gap: 12px; align-items: flex-start; }
.fb-inbox-av { width: 40px; height: 40px; border-radius: 10px; background: var(--foam); border: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--mocha); flex-shrink: 0; }
.fb-inbox-meta { flex: 1; min-width: 0; }
.fb-inbox-comment { margin: 10px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.fb-inbox-reply { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--foam); border: 1px solid var(--line-soft); font-size: var(--text-sm); }
.fb-inbox-reply p { margin: 6px 0 0; color: var(--ink-soft); line-height: 1.5; }
.fb-metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fb-metric { padding: 10px 12px; border-radius: 8px; background: var(--foam); border: 1px solid var(--line-soft); }
.fb-metric b { display: block; font-size: 1.1rem; margin-top: 4px; }
.fb-goal-row { margin-bottom: 16px; font-size: var(--text-sm); }
.fb-goal-row > span:first-child { display: block; margin-bottom: 4px; color: var(--muted); }
.fb-goal-row b { margin-right: 8px; }
.fb-topic-table { display: flex; flex-direction: column; gap: 8px; }
.fb-topic-stat { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--text-sm); }
.fb-topic-stat:last-child { border-bottom: none; }
.fb-reply-preview { padding: 14px; margin-bottom: 14px; }
.fb-reply-comment { margin: 8px 0; font-size: 14px; line-height: 1.5; }
@media (max-width: 1100px) { .fb-kpi-grid { grid-template-columns: repeat(2, 1fr); } .fb-grid-mid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .fb-kpi-grid { grid-template-columns: 1fr; } .fb-toolbar { flex-direction: column; align-items: stretch; } }

/* ===================== Genel Bakış — Executive Dashboard ===================== */
.dash-pro { display: flex; flex-direction: column; gap: 18px; margin: -4px -2px 0; }
.dash-hero {
  position: relative; border-radius: 20px; overflow: hidden;
  background: linear-gradient(135deg, #1a120c 0%, #2d1f16 42%, #3d2a1f 100%);
  color: #fff; border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 20px 50px rgba(26,18,12,.22), 0 4px 12px rgba(26,18,12,.12);
}
.dash-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(212,149,58,.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 80% at 0% 100%, rgba(13,150,104,.12) 0%, transparent 50%),
    repeating-linear-gradient(105deg, transparent, transparent 40px, rgba(255,255,255,.015) 40px, rgba(255,255,255,.015) 41px);
}
.dash-hero-inner {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 28px 32px; flex-wrap: wrap;
}
.dash-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 8px;
}
.dash-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 0 3px rgba(52,211,153,.25); animation: dash-pulse 2s ease infinite;
}
@keyframes dash-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.dash-hero-title {
  margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
}
.dash-hero-sub { margin: 0; font-size: var(--text-sm); color: rgba(255,255,255,.65); line-height: 1.5; }
.dash-hero-sub b { color: rgba(255,255,255,.9); }
.dash-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.dash-chip {
  padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.85);
}
.dash-hero-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.dash-health { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.dash-health-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.dash-health-track { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 8; }
.dash-health-fill { fill: none; stroke: #34d399; stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.dash-health-great .dash-health-fill { stroke: #34d399; }
.dash-health-good .dash-health-fill { stroke: #d4953a; }
.dash-health-warn .dash-health-fill { stroke: #f87171; }
.dash-health-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dash-health-center b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; line-height: 1; }
.dash-health-center small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.5); margin-top: 2px; }
.dash-hero-stat-col { display: flex; flex-direction: column; gap: 10px; }
.dash-hero-stat { display: flex; flex-direction: column; gap: 2px; }
.dash-hero-stat span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.45); }
.dash-hero-stat b { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; }

.dash-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dash-kpi {
  padding: 18px 18px 16px; border-radius: 16px; background: #fff;
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-xs);
  position: relative; overflow: hidden;
}
.dash-kpi::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--dash-accent, var(--accent)); opacity: .85;
}
.dash-kpi-revenue { --dash-accent: #138063; }
.dash-kpi-orders { --dash-accent: #b07b1a; }
.dash-kpi-basket { --dash-accent: #7a5cc2; }
.dash-kpi-branches { --dash-accent: #2f6fb0; }
.dash-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.dash-kpi-icon { font-size: 1.25rem; line-height: 1; }
.dash-spark { display: block; opacity: .85; }
.dash-kpi-value {
  display: block; font-family: var(--font-display); font-size: 1.45rem; font-weight: 800;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.dash-kpi-of { font-size: .85em; font-weight: 600; color: var(--muted); }
.dash-kpi-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: 4px; }
.dash-kpi-delta { display: block; font-size: 11px; font-weight: 700; margin-top: 8px; }
.dash-kpi-delta em { font-style: normal; font-weight: 500; color: var(--muted); margin-left: 4px; }
.dash-kpi-delta.up { color: var(--accent-dark); }
.dash-kpi-delta.down { color: var(--danger); }
.dash-kpi-delta.neutral { color: var(--muted); font-weight: 500; }

.dash-main-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 16px; align-items: stretch; }
.dash-mid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dash-bottom-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.dash-panel { padding: 22px 24px; border-radius: 16px; }
.dash-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.dash-panel-head b { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; display: block; }
.dash-panel-head .li-sub { display: block; margin-top: 2px; }
.dash-pill {
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.dash-pill.up { background: var(--accent-soft); color: var(--accent-dark); }
.dash-pill.down { background: var(--danger-soft); color: var(--danger); }

.dash-chart-wrap { position: relative; height: 220px; padding-left: 36px; }
.dash-area-chart { width: 100%; height: 100%; display: block; overflow: visible; }
.dash-chart-grid { stroke: var(--line-soft); stroke-width: .4; vector-effect: non-scaling-stroke; }
.dash-chart-area { fill: url(#dashAreaGrad); opacity: .9; }
.dash-chart-line { fill: none; stroke: var(--accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.dash-chart-dot { fill: #fff; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash-chart-lbl { font-size: 3.2px; fill: var(--muted); font-weight: 700; font-family: var(--font-sans); }
.dash-chart-yaxis {
  position: absolute; left: 0; top: 12px; bottom: 28px; width: 32px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 10px; font-weight: 700; color: var(--muted); text-align: right; padding-right: 6px;
}

.dash-donut-wrap { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.dash-donut { flex-shrink: 0; filter: drop-shadow(0 4px 8px rgba(26,18,12,.08)); }
.dash-donut-pct { font-size: 14px; font-weight: 800; fill: var(--ink); font-family: var(--font-display); }
.dash-donut-sub { font-size: 6px; font-weight: 700; fill: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dash-donut-legend { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.dash-legend-row { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.dash-legend-row b { margin-left: auto; font-variant-numeric: tabular-nums; }
.dash-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dash-mini-goal { padding-top: 14px; border-top: 1px dashed var(--line-soft); }
.dash-goal-track { height: 8px; background: var(--cream); border-radius: 6px; overflow: hidden; margin: 8px 0 6px; }
.dash-goal-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), #34d399); transition: width .5s ease; }

.dash-podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin-bottom: 20px; padding: 0 8px; min-height: 130px; }
.dash-podium-item { flex: 1; max-width: 110px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.dash-podium-bar {
  width: 100%; border-radius: 12px 12px 6px 6px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; padding: 10px 8px 12px; margin-bottom: 8px;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%);
  box-shadow: 0 8px 20px rgba(212,149,58,.25);
}
.dash-podium-1 .dash-podium-bar { background: linear-gradient(180deg, #ffe082 0%, #d4953a 100%); }
.dash-podium-2 .dash-podium-bar { background: linear-gradient(180deg, #e8e8e8 0%, #b0b0b0 100%); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.dash-podium-3 .dash-podium-bar { background: linear-gradient(180deg, #f0c8a0 0%, #a8724a 100%); box-shadow: 0 6px 16px rgba(168,114,74,.2); }
.dash-podium-medal { font-size: 1.1rem; margin-bottom: 4px; }
.dash-podium-bar b { font-size: 11px; font-weight: 800; color: var(--ink); line-height: 1.2; word-break: break-word; }
.dash-podium-name { font-size: 12px; font-weight: 700; }
.dash-podium-sub { font-size: 10px; color: var(--muted); }
.dash-branch-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.dash-branch-row { display: grid; grid-template-columns: 16px 1fr auto; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; }
.dash-branch-rank { color: var(--muted); font-size: 10px; }
.dash-branch-info b { display: block; font-size: var(--text-sm); }
.dash-branch-amt { font-weight: 800; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.dash-branch-bar { grid-column: 2 / -1; height: 5px; background: var(--cream); border-radius: 4px; overflow: hidden; }
.dash-branch-bar div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--caramel)); }

.dash-heatmap { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 8px 4px 0; }
.dash-heat-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 6px; }
.dash-heat-bar { width: 100%; max-width: 28px; border-radius: 6px 6px 3px 3px; min-height: 4px; transition: height .3s ease; }
.dash-heat-low { background: linear-gradient(180deg, #cce8dc, var(--accent)); opacity: .55; }
.dash-heat-mid { background: linear-gradient(180deg, #f5e6c8, var(--gold)); opacity: .8; }
.dash-heat-hot { background: linear-gradient(180deg, #f0c878, #c94a38); opacity: .95; }
.dash-heat-lbl { font-size: 9px; font-weight: 700; color: var(--muted); }
.dash-peak-note { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--foam); font-size: var(--text-sm); }

.dash-products { display: flex; flex-direction: column; gap: 14px; }
.dash-product-row { display: flex; gap: 12px; align-items: flex-start; }
.dash-product-rank {
  width: 26px; height: 26px; border-radius: 8px; background: var(--espresso); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.dash-product-body { flex: 1; min-width: 0; }
.dash-product-bar { height: 6px; background: var(--cream); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.dash-product-bar div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--caramel), var(--mocha)); }
.dash-product-delta { font-style: normal; font-size: 10px; font-weight: 700; margin-left: 6px; }
.dash-product-delta.up { color: var(--accent-dark); }
.dash-product-delta.down { color: var(--danger); }

.dash-live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--accent-dark); }
.dash-feed { display: flex; flex-direction: column; gap: 0; }
.dash-feed-item {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 0; position: relative;
}
.dash-feed-line {
  position: absolute; left: 17px; top: 36px; bottom: -12px; width: 2px;
  background: linear-gradient(180deg, var(--line) 0%, transparent 100%);
}
.dash-feed-line.last { display: none; }
.dash-feed-icon {
  width: 36px; height: 36px; border-radius: 10px; background: var(--foam); border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center; font-size: 16px; position: relative; z-index: 1;
}
.dash-feed-sales .dash-feed-icon { background: #e6f5ef; }
.dash-feed-loyalty .dash-feed-icon { background: #fdf0db; }
.dash-feed-delivery .dash-feed-icon { background: #e6f1fb; }
.dash-feed-feedback .dash-feed-icon { background: #f0e9ff; }
.dash-feed-alert .dash-feed-icon { background: #fceeea; }
.dash-feed-body b { display: block; font-size: var(--text-sm); margin-bottom: 2px; }
.dash-feed-meta { text-align: right; }
.dash-feed-meta b { display: block; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.dash-feed-meta span { font-size: 10px; color: var(--muted); }

.dash-insights { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.dash-insight {
  display: flex; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--line-soft);
}
.dash-insight > span { font-size: 1.25rem; flex-shrink: 0; line-height: 1; }
.dash-insight b { display: block; font-size: var(--text-sm); margin-bottom: 4px; }
.dash-insight p { margin: 0 0 8px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.dash-insight-warn { background: #fffcf5; border-color: #f5e6c8; }
.dash-insight-ok { background: #f7fcfa; border-color: #cce8dc; }
.dash-insight-info { background: var(--foam); }
.btn-sm-dash { padding: 5px 10px !important; font-size: 11px !important; }
.dash-quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dash-action {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px;
  border-radius: 12px; border: 1px solid var(--line-soft); background: var(--foam);
  cursor: pointer; font-size: 11px; font-weight: 700; color: var(--ink-soft);
  transition: background .15s, border-color .15s, transform .1s;
}
.dash-action span { font-size: 1.35rem; line-height: 1; }
.dash-action:hover { background: #fff; border-color: var(--line); transform: translateY(-1px); }
.dash-link-btn { margin-top: 4px; font-size: 12px !important; }

@media (max-width: 1200px) {
  .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-main-grid, .dash-bottom-grid { grid-template-columns: 1fr; }
  .dash-mid-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .dash-hero-inner { padding: 22px 20px; }
  .dash-hero-right { width: 100%; justify-content: space-between; }
  .dash-kpi-grid { grid-template-columns: 1fr; }
  .dash-donut-wrap { flex-direction: column; text-align: center; }
  .dash-quick-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ===================== Barista (KDS) pro ===================== */
.kds-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.kds-col { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; max-height: calc(100vh - 280px); }
.kds-col-head { font-family: var(--font-display); font-weight: 800; font-size: 1rem; padding: 16px 18px 10px; }
.kds-col-body { padding: 0 14px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.kds-empty { text-align: center; color: var(--muted-light); font-size: 13px; padding: 30px 0; }
.kds-card { background: var(--foam); border: 1px solid var(--line-soft); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 14px; }
.kds-id { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; }
.kds-time { font-size: 0.6875rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.kds-items { margin: 8px 0 12px; display: flex; flex-direction: column; gap: 4px; }
.kds-item { font-size: 13.5px; color: var(--ink); display: flex; gap: 8px; align-items: baseline; }
.kds-qty { font-weight: 800; color: var(--mocha); font-family: var(--font-display); min-width: 22px; }
.kds-btn { margin-top: 4px; }
.kds-wait { margin-top: 4px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--mocha); background: var(--cream); padding: 9px; border-radius: 10px; }
@media (max-width: 1000px) { .kds-board { grid-template-columns: 1fr; } .kds-col { max-height: none; } }

/* ===================== Tema Presetleri ===================== */
html[data-theme="midnight"] {
  --espresso: #0c0e14; --coffee: #151820; --mocha: #3a4050; --caramel: #6b7280; --latte: #9ca3af;
  --cream: #1a1f2e; --foam: #222838; --gold: #d4953a; --gold-light: #f0c878;
  --accent: #34d399; --accent-dark: #10b981; --accent-soft: #0d2e24;
  --ink: #eef0f4; --ink-soft: #c8cdd8; --muted: #8b93a7; --muted-light: #6b7280;
  --line: #353b4f; --line-soft: #2a3040; --white: #252a38;
}
html[data-theme="sage"] {
  --espresso: #1a241c; --coffee: #2a382e; --mocha: #4a6354; --caramel: #6b8f72;
  --cream: #eef4ef; --foam: #f7faf8; --accent: #2d8a5e; --accent-dark: #1f6b47; --accent-soft: #dceee4;
  --gold: #a8a060; --gold-light: #d4c878;
}
html[data-theme="slate"] {
  --espresso: #1c2333; --coffee: #2d3748; --mocha: #4a5568; --caramel: #64748b;
  --cream: #f1f5f9; --foam: #f8fafc; --accent: #3b82f6; --accent-dark: #2563eb; --accent-soft: #dbeafe;
  --gold: #6366f1; --gold-light: #a5b4fc;
}
html[data-theme="rose"] {
  --espresso: #2a1818; --coffee: #3d2424; --mocha: #6b4545; --caramel: #a87272;
  --cream: #faf0ee; --foam: #fdf8f7; --accent: #c45c5c; --accent-dark: #a84848; --accent-soft: #fce8e8;
  --gold: #d4953a;
}
html.ui-compact .card { padding: 14px 16px; }
html.ui-compact #view { padding: 14px 18px; }
html.ui-compact .stat { padding: 16px; }
html.ui-sidebar-compact #sidebar { width: 248px; }
html.ui-sidebar-compact .nav-item { padding: 8px 10px; font-size: 12px; }
html.ui-sidebar-compact .nav-item-ic { width: 24px; height: 24px; font-size: 12px; }
html.ui-sidebar-compact .client-logo-slot { min-height: 60px; }
html.ui-reduce-motion *, html.ui-reduce-motion *::before, html.ui-reduce-motion *::after {
  animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;
}

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.theme-card {
  text-align: left; padding: 14px; border-radius: 14px; border: 2px solid var(--line-soft);
  background: var(--foam); cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.theme-card:hover { border-color: var(--line); box-shadow: var(--shadow-sm); }
.theme-card.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.theme-card b { display: block; font-size: var(--text-sm); margin: 8px 0 4px; }
.theme-swatch { display: flex; gap: 4px; height: 28px; border-radius: 8px; overflow: hidden; }
.theme-swatch span { flex: 1; }
.theme-preview { padding: 16px; background: var(--foam); border: 1px solid var(--line-soft); }
.theme-preview-bar { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--espresso), var(--accent)); margin-bottom: 12px; }
.theme-preview-body { display: flex; gap: 8px; margin-bottom: 10px; }
.theme-preview-kpi { flex: 1; height: 36px; border-radius: 8px; background: var(--white); border: 1px solid var(--line-soft); }
.theme-preview-kpi.accent { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

/* ===================== Matris — bölüm grupları ===================== */
.roadmap-section-block { margin-bottom: 20px; }
.roadmap-section-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 2px solid var(--line-soft);
}
.roadmap-section-head b { font-family: var(--font-display); font-size: var(--text-base); }
.roadmap-nav-tag {
  display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent-dark); background: var(--accent-soft); padding: 2px 6px; border-radius: 4px; margin-top: 2px;
}
.roadmap-nav-tag.muted { color: var(--muted); background: var(--cream); }

/* ===================== Reçete Merkezi ===================== */
.rcp-pro { display: flex; flex-direction: column; gap: 16px; }
.rcp-hero { padding: 22px 24px; background: linear-gradient(135deg, #f5f0ff 0%, #fff 55%, var(--cream) 100%); border-color: var(--line); }
.rcp-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.rcp-hero-eyebrow { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7a5cc2; margin-bottom: 4px; }
.rcp-hero-title { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; color: var(--ink); }
.rcp-hero-sub { margin: 0; font-size: var(--text-sm); color: var(--muted); max-width: 520px; line-height: 1.5; }
.rcp-hero-actions { display: flex; gap: 8px; flex-shrink: 0; }
.rcp-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rcp-kpi { padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line-soft); }
.rcp-kpi-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.rcp-kpi-value { display: block; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rcp-kpi-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.rcp-kpi-purple { border-color: #e0d4f5; background: #faf8ff; }
.rcp-kpi-purple .rcp-kpi-value { color: #7a5cc2; }
.rcp-kpi-accent { border-color: #cce8dc; background: #f7fcfa; }
.rcp-kpi-accent .rcp-kpi-value { color: var(--accent-dark); }
.rcp-kpi-warn { border-color: #f5e6c8; background: #fffcf5; }
.rcp-kpi-warn .rcp-kpi-value { color: #b07b1a; }
.rcp-kpi-blue { border-color: #cfe0f5; background: #f7faff; }
.rcp-kpi-blue .rcp-kpi-value { color: #2f6fb0; }
.rcp-alert-banner { padding: 10px 14px; border-radius: 10px; background: #fff8e6; color: #b07b1a; font-size: var(--text-sm); font-weight: 600; }
.rcp-toolbar { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rcp-search { width: auto; min-width: 180px; max-width: 240px; padding: 7px 10px !important; font-size: 12px !important; }
.rcp-grid-top { align-items: stretch; }
.rcp-panel { padding: 20px 22px; }
.rcp-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.rcp-panel-head b { font-size: var(--text-sm); }
.rcp-bar-row { margin-bottom: 12px; }
.rcp-bar-meta { font-size: var(--text-sm); margin-bottom: 4px; }
.rcp-bar-track { height: 8px; background: var(--cream); border-radius: 6px; overflow: hidden; }
.rcp-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--gold), var(--caramel)); }
.rcp-bar-fill.warn { background: linear-gradient(90deg, #f0c878, var(--danger)); }
.rcp-bar-fill.accent { background: linear-gradient(90deg, var(--accent), var(--accent-dark)); }
.rcp-summary-box { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-soft); display: flex; flex-direction: column; gap: 8px; font-size: var(--text-sm); }
.rcp-bom-list { display: flex; flex-direction: column; gap: 12px; }
.rcp-bom-card { padding: 18px 20px; border-radius: 14px; }
.rcp-bom-warn { border-left: 4px solid var(--gold); background: #fffcf5; }
.rcp-bom-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.rcp-bom-metrics { display: flex; gap: 16px; flex-wrap: wrap; }
.rcp-bom-metrics span { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.rcp-bom-metrics em { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.rcp-bom-lines { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.rcp-line-row { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--ink-soft); }
.rcp-table-wrap { padding: 0; overflow: hidden; }
.rcp-table-pro th { position: sticky; top: 0; z-index: 1; }
.rcp-ing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.rcp-ing-card { padding: 12px 14px; border-radius: 10px; background: var(--foam); border: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 4px; }
.rcp-ing-cost { font-weight: 800; color: var(--accent-dark); margin-top: 4px; }
@media (max-width: 1100px) { .rcp-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .rcp-kpi-grid { grid-template-columns: 1fr; } .theme-grid { grid-template-columns: 1fr; } }

/* ============================ ABOUT PAGE ============================ */
.sidebar-about-link {
  background: none; border: none; padding: 0; margin: 4px 0 2px;
  font: inherit; font-size: 11px; font-weight: 600; color: var(--latte);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.sidebar-about-link:hover { color: var(--gold-light); }

.brand-settings-card { border: 1px solid var(--line-soft); }
.brand-upload-layout { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: start; }
.brand-upload-preview-wrap {
  min-height: 100px; padding: 16px; border-radius: var(--radius);
  background: var(--foam); border: 1px dashed var(--line-soft);
  display: flex; align-items: center; justify-content: center;
}
.brand-upload-preview { max-width: 100%; max-height: 72px; object-fit: contain; }
.brand-upload-empty { font-size: 12px; color: var(--muted); font-weight: 600; text-align: center; }
.brand-file-input { font-size: 12px; padding: 8px !important; }
@media (max-width: 760px) { .brand-upload-layout { grid-template-columns: 1fr; } }

.about-pro {
  display: flex;
  flex-direction: column;
  margin: -28px -32px 0;
  background: var(--foam);
}

.about-hero {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  color: #fbf7f1;
}
.about-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 20%, rgba(212, 149, 58, 0.35), transparent 55%),
    radial-gradient(ellipse 50% 80% at 10% 80%, rgba(13, 150, 104, 0.22), transparent 50%),
    linear-gradient(145deg, #1a120c 0%, #2b1c14 38%, #3d2a1f 72%, #1a120c 100%);
}
.about-hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.about-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 48px 64px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.about-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 16px;
}
.about-hero-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.about-hero-brand-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.about-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}
.about-hero-title em {
  font-style: italic;
  color: var(--gold-light);
}
.about-hero-lead {
  font-size: var(--text-lg);
  line-height: 1.65;
  color: rgba(251, 247, 241, 0.82);
  max-width: 540px;
  margin-bottom: 28px;
}
.about-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.about-hero-metrics {
  display: flex;
  gap: 24px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.about-hero-metrics span { font-size: 12px; opacity: 0.75; }
.about-hero-metrics b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--gold-light);
  opacity: 1;
  margin-bottom: 2px;
}
.about-hero-ghost {
  color: #fbf7f1 !important;
  border-color: rgba(251, 247, 241, 0.35) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.about-hero-visual { position: relative; min-height: 320px; }
.about-hero-card {
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-lg);
}
.about-hero-card-main {
  position: absolute;
  top: 0;
  right: 0;
  left: 12%;
  z-index: 2;
}
.about-hero-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; }
.about-hero-card-val {
  display: block;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  margin: 8px 0 4px;
  color: var(--gold-light);
}
.about-hero-card-sub { font-size: var(--text-sm); opacity: 0.7; }
.about-hero-card-side {
  position: absolute;
  bottom: 24px;
  left: 0;
  width: 58%;
  z-index: 1;
  background: rgba(13, 150, 104, 0.22);
  border-color: rgba(13, 150, 104, 0.35);
}
.about-hero-card-side b { display: block; font-size: var(--text-xl); margin: 4px 0; }
.about-hero-card-side small { font-size: 11px; opacity: 0.8; }
.about-hero-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  animation: about-orbit-spin 24s linear infinite;
}
.about-hero-orbit span {
  position: absolute;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  font-size: 16px;
}
.about-hero-orbit span:nth-child(1) { top: -18px; left: 50%; transform: translateX(-50%); }
.about-hero-orbit span:nth-child(2) { right: -18px; top: 50%; transform: translateY(-50%); }
.about-hero-orbit span:nth-child(3) { bottom: -18px; left: 50%; transform: translateX(-50%); }
.about-hero-orbit span:nth-child(4) { left: -18px; top: 50%; transform: translateY(-50%); }
@keyframes about-orbit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.about-subnav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 4px;
  padding: 10px 48px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.about-subnav::-webkit-scrollbar { display: none; }
.about-nav-item {
  flex-shrink: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--duration), color var(--duration);
}
.about-nav-item:hover { background: var(--cream); color: var(--ink); }

.about-stats-band {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.about-stat {
  background: var(--white);
  padding: 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.about-stat-val {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--coffee);
  letter-spacing: -0.02em;
}
.about-stat-label { font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.about-stat-sub { font-size: 11px; color: var(--muted); }

.about-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 48px 0;
}
.about-section { margin-bottom: 72px; scroll-margin-top: 56px; }
.about-section-head { margin-bottom: 32px; }
.about-section-head.center { text-align: center; }
.about-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 8px;
  line-height: 1.2;
}
.about-section-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 5px 12px;
  border-radius: 999px;
}

.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.about-story-photo {
  height: 360px;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, transparent 40%, rgba(26, 18, 12, 0.75)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23a8724a'/%3E%3Cstop offset='100%25' stop-color='%233d2a1f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23g)' width='600' height='400'/%3E%3Ccircle cx='480' cy='80' r='120' fill='%23d4953a' opacity='0.25'/%3E%3C/svg%3E") center/cover;
  box-shadow: var(--shadow-lg);
}
.about-story-quote {
  margin-top: -48px;
  margin-left: 24px;
  margin-right: 24px;
  position: relative;
  z-index: 1;
  padding: 24px 28px;
  background: var(--white);
  border-radius: var(--radius);
  border-left: 4px solid var(--gold);
  box-shadow: var(--shadow);
}
.about-story-quote blockquote {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 10px;
}
.about-story-quote cite { font-size: var(--text-sm); color: var(--muted); font-style: normal; font-weight: 600; }
.about-story-text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 16px;
}
.about-story-text p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.about-checklist {
  list-style: none;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.about-checklist li {
  padding-left: 28px;
  position: relative;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
}
.about-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-dark);
  font-weight: 800;
}

.about-mvv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.about-mvv-card {
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-xs);
}
.about-mvv-featured {
  background: linear-gradient(145deg, var(--coffee), var(--espresso));
  color: #fbf7f1;
  border-color: transparent;
  box-shadow: var(--shadow);
}
.about-mvv-featured p { color: rgba(251, 247, 241, 0.82); }
.about-mvv-ic { font-size: 28px; display: block; margin-bottom: 12px; }
.about-mvv-card h3 { font-size: var(--text-lg); font-weight: 800; margin-bottom: 10px; }
.about-mvv-card p { font-size: var(--text-sm); line-height: 1.6; color: var(--muted); }

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.about-value-card {
  padding: 22px 20px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line-soft);
  transition: transform var(--duration), box-shadow var(--duration);
}
.about-value-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.about-value-ic { font-size: 24px; display: block; margin-bottom: 10px; }
.about-value-card h4 { font-size: var(--text-sm); font-weight: 800; margin-bottom: 6px; }
.about-value-card p { font-size: 12px; line-height: 1.55; color: var(--muted); }

.about-timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0;
}
.about-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), var(--line));
  transform: translateX(-50%);
}
.about-tl-item {
  position: relative;
  width: 50%;
  padding: 0 32px 36px;
}
.about-tl-item.left { left: 0; text-align: right; padding-right: 40px; }
.about-tl-item.right { left: 50%; padding-left: 40px; }
.about-tl-dot {
  position: absolute;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--gold);
}
.about-tl-item.left .about-tl-dot { right: -7px; }
.about-tl-item.right .about-tl-dot { left: -7px; }
.about-tl-card {
  display: inline-block;
  text-align: left;
  padding: 18px 20px;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-xs);
  max-width: 100%;
}
.about-tl-year {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.06em;
}
.about-tl-card h4 { font-size: var(--text-sm); font-weight: 800; margin: 6px 0 4px; }
.about-tl-card p { font-size: 12px; line-height: 1.55; color: var(--muted); }

.about-exec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.about-person {
  padding: 24px 20px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line-soft);
  text-align: center;
}
.about-person-avatar {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--text-sm);
  color: #fff;
}
.about-person-ceo .about-person-avatar { background: linear-gradient(135deg, var(--caramel), var(--mocha)); }
.about-person-ops .about-person-avatar { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.about-person-tech .about-person-avatar { background: linear-gradient(135deg, #4a6fa5, #2f4f7a); }
.about-person-brand .about-person-avatar { background: linear-gradient(135deg, var(--gold), #b07b1a); }
.about-person h4 { font-size: var(--text-sm); font-weight: 800; margin-bottom: 4px; }
.about-person-role { display: block; font-size: 11px; font-weight: 700; color: var(--accent-dark); margin-bottom: 10px; }
.about-person p { font-size: 12px; line-height: 1.55; color: var(--muted); text-align: left; }

.about-managers-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.about-manager-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: var(--text-sm);
}
.about-manager-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--mocha);
}
.about-manager-chip b { display: block; font-size: 12px; }
.about-manager-chip span { font-size: 10px; color: var(--muted); }

.about-tech-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  padding: 36px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--espresso) 0%, #2b1c14 100%);
  color: #fbf7f1;
}
.about-tech-copy h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  margin: 10px 0 14px;
}
.about-tech-copy p { font-size: var(--text-sm); line-height: 1.65; opacity: 0.85; margin-bottom: 20px; }
.about-tech-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.about-tech-highlights div {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.about-tech-highlights b { display: block; font-size: var(--text-sm); margin-bottom: 2px; }
.about-tech-highlights span { font-size: 11px; opacity: 0.7; }
.about-tech-modules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.about-mod-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.about-mod-ic { font-size: 22px; }
.about-mod-card b { display: block; font-size: 12px; }
.about-mod-card span { font-size: 10px; opacity: 0.65; }

.about-branch-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.about-branch-card {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line-soft);
  transition: box-shadow var(--duration);
}
.about-branch-card:hover { box-shadow: var(--shadow-sm); }
.about-branch-card.closed { opacity: 0.72; }
.about-branch-top { display: flex; justify-content: space-between; margin-bottom: 10px; }
.about-branch-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: 4px;
}
.about-branch-status { font-size: 11px; font-weight: 600; color: var(--muted); }
.about-branch-card h4 { font-size: var(--text-base); font-weight: 800; margin-bottom: 4px; }
.about-branch-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.about-branch-note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
  padding: 8px 10px;
  background: #fffcf5;
  border-radius: 8px;
}

.about-trust-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.about-trust-card {
  padding: 20px 16px;
  text-align: center;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line-soft);
}
.about-trust-ic { font-size: 26px; display: block; margin-bottom: 8px; }
.about-trust-card b { display: block; font-size: 12px; font-weight: 800; margin-bottom: 4px; }
.about-trust-card small { font-size: 10px; color: var(--muted); line-height: 1.4; display: block; }

.about-contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  padding: 36px;
  border-radius: var(--radius-xl);
  background: var(--white);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
}
.about-contact-info h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  margin: 10px 0 12px;
}
.about-contact-list { display: flex; flex-direction: column; gap: 16px; margin: 24px 0; }
.about-contact-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: var(--text-sm);
}
.about-contact-row span:first-child { font-size: 20px; line-height: 1; }
.about-contact-row em {
  display: block;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 2px;
}
.about-map-placeholder {
  height: 100%;
  min-height: 320px;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--cream), var(--line-soft));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  gap: 8px;
}
.about-map-pin { font-size: 40px; }
.about-map-placeholder b { font-size: var(--text-lg); font-weight: 800; }
.about-map-placeholder p { font-size: var(--text-sm); color: var(--muted); margin-bottom: 8px; }

.about-footer {
  margin: 0 -48px;
  padding: 32px 48px 40px;
  background: var(--espresso);
  color: rgba(251, 247, 241, 0.75);
}
.about-footer-inner { max-width: 1280px; margin: 0 auto; text-align: center; }
.about-footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: #fbf7f1;
  margin-bottom: 10px;
}
.about-footer p { font-size: 12px; }

/* — expanded sections — */
.about-marquee {
  overflow: hidden;
  background: var(--coffee);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 0;
}
.about-marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: about-marquee 32s linear infinite;
}
.about-marquee-track span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--latte);
  white-space: nowrap;
}
.about-marquee-track span::before { content: "◆ "; color: var(--gold); opacity: 0.7; }
@keyframes about-marquee { to { transform: translateX(-50%); } }

.about-craft-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.about-craft-step {
  position: relative;
  padding: 22px 18px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line-soft);
  text-align: center;
}
.about-craft-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.about-craft-ic { font-size: 28px; display: block; margin-bottom: 10px; }
.about-craft-step h4 { font-size: var(--text-sm); font-weight: 800; margin-bottom: 6px; }
.about-craft-step p { font-size: 11px; line-height: 1.55; color: var(--muted); }
.about-craft-arrow {
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--latte);
  font-size: 18px;
  font-weight: 700;
  z-index: 1;
}
.about-origin-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.about-origin-card {
  padding: 18px 16px;
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--cream), var(--white));
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.about-origin-card b { font-size: var(--text-sm); font-weight: 800; }
.about-origin-card span:last-child { font-size: 11px; color: var(--muted); line-height: 1.45; }
.about-origin-flag { font-size: 22px; margin-bottom: 4px; }
.about-origin-blend { background: linear-gradient(145deg, var(--espresso), var(--coffee)); color: #fbf7f1; border-color: transparent; }
.about-origin-blend span:last-child { color: rgba(251, 247, 241, 0.75); }

.about-impact-band {
  margin: 0 -48px 72px;
  padding: 56px 48px;
  background: linear-gradient(135deg, #0d9668 0%, #087a55 45%, #065a3f 100%);
  color: #fbf7f1;
}
.about-impact-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
}
.about-impact-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  margin: 12px 0 14px;
  line-height: 1.2;
}
.about-impact-copy p { font-size: var(--text-sm); line-height: 1.65; opacity: 0.88; }
.about-tag-light { background: rgba(255, 255, 255, 0.15) !important; color: #fff !important; }
.about-impact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.about-impact-stat {
  padding: 22px 20px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
}
.about-impact-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  margin-bottom: 4px;
}
.about-impact-stat span { display: block; font-size: var(--text-sm); font-weight: 700; }
.about-impact-stat small { font-size: 11px; opacity: 0.75; }

.about-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.about-review-card {
  padding: 22px 20px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow var(--duration), transform var(--duration);
}
.about-review-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.about-review-stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; }
.about-review-text {
  flex: 1;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--ink-soft);
  font-style: italic;
}
.about-review-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.about-review-foot b { display: block; font-size: 12px; }
.about-review-foot span { font-size: 10px; color: var(--muted); }
.about-review-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  white-space: nowrap;
}

.about-daily-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.about-daily-item {
  padding: 20px 18px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--gold);
}
.about-daily-time {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 10px;
}
.about-daily-body h4 { font-size: var(--text-sm); font-weight: 800; margin-bottom: 6px; }
.about-daily-body p { font-size: 11px; line-height: 1.55; color: var(--muted); }

.about-academy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.about-academy-card {
  padding: 26px 22px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-xs);
}
.about-academy-ic { font-size: 32px; display: block; margin-bottom: 14px; }
.about-academy-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  gap: 10px;
}
.about-academy-meta b { font-size: var(--text-base); font-weight: 800; }
.about-academy-meta span { font-size: 11px; color: var(--accent-dark); font-weight: 700; }
.about-academy-card p { font-size: var(--text-sm); line-height: 1.6; color: var(--muted); }

.about-awards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.about-award-card {
  padding: 22px 18px;
  text-align: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fffcf5, var(--white));
  border: 1px solid #f5e6c8;
}
.about-award-ic { font-size: 28px; display: block; margin-bottom: 8px; }
.about-award-year { font-size: 10px; font-weight: 700; color: var(--gold); letter-spacing: 0.06em; }
.about-award-card b { display: block; font-size: var(--text-sm); font-weight: 800; margin: 6px 0 4px; }
.about-award-card small { font-size: 10px; color: var(--muted); }
.about-press-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.about-press-quote {
  padding: 22px 20px;
  border-radius: var(--radius);
  background: var(--white);
  border-left: 4px solid var(--coffee);
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--coffee);
}
.about-press-quote p { font-size: var(--text-sm); line-height: 1.6; color: var(--ink-soft); font-style: italic; margin-bottom: 10px; }
.about-press-quote cite { font-size: 11px; font-weight: 700; color: var(--muted); font-style: normal; }

.about-gallery-band {
  margin: 0 -48px 72px;
  overflow: hidden;
}
.about-gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  min-height: 220px;
}
.about-gallery-tile {
  display: flex;
  align-items: flex-end;
  padding: 20px;
  min-height: 220px;
  position: relative;
  overflow: hidden;
}
.about-gallery-tile span {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.about-gallery-a { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.6)), linear-gradient(135deg, #6b4c35, #3d2a1f); }
.about-gallery-b { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.6)), linear-gradient(135deg, #a8724a, #6b4c35); }
.about-gallery-c { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.6)), linear-gradient(135deg, #0d9668, #087a55); }
.about-gallery-d { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.6)), linear-gradient(135deg, #d4953a, #a8724a); }
.about-gallery-e { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.6)), linear-gradient(135deg, #2b1c14, #6b4c35); }
.about-gallery-f { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.6)), linear-gradient(135deg, #4a6fa5, #2f4f7a); }

.about-partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.about-partner-card {
  padding: 32px 28px;
  border-radius: var(--radius-xl);
  background: var(--white);
  border: 1px solid var(--line-soft);
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration), transform var(--duration);
}
.about-partner-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.about-partner-ic { font-size: 36px; display: block; margin-bottom: 14px; }
.about-partner-card h4 { font-size: var(--text-lg); font-weight: 800; margin-bottom: 10px; }
.about-partner-card p { font-size: var(--text-sm); line-height: 1.6; color: var(--muted); margin-bottom: 18px; }
.about-partner-cta { width: 100%; }

.about-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 900px;
}
.about-faq-item {
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.about-faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.about-faq-icon {
  font-style: normal;
  font-size: 20px;
  font-weight: 400;
  color: var(--gold);
  transition: transform var(--duration);
  flex-shrink: 0;
}
.about-faq-item.open .about-faq-icon { transform: rotate(45deg); }
.about-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease);
}
.about-faq-item.open .about-faq-a { max-height: 200px; }
.about-faq-a p {
  padding: 0 22px 18px;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--muted);
}

.about-careers-sec { margin-bottom: 72px; }
.about-careers-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 40px;
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, var(--espresso), #2b1c14);
  color: #fbf7f1;
}
.about-careers-copy h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  margin: 12px 0 14px;
}
.about-careers-copy p { font-size: var(--text-sm); opacity: 0.85; margin-bottom: 22px; line-height: 1.6; }
.about-roles-list { display: flex; flex-direction: column; gap: 8px; }
.about-role-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.about-role-row b { display: block; font-size: var(--text-sm); }
.about-role-row span { font-size: 11px; opacity: 0.7; }
.about-role-type {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(212, 149, 58, 0.25);
  color: var(--gold-light);
  white-space: nowrap;
}

.about-nav-item.active {
  background: var(--coffee);
  color: #fbf7f1;
}

@media (max-width: 1100px) {
  .about-hero-inner { grid-template-columns: 1fr; padding: 40px 32px 48px; }
  .about-hero-visual { min-height: 260px; }
  .about-stats-band { grid-template-columns: repeat(3, 1fr); }
  .about-story-grid,
  .about-tech-layout,
  .about-contact-grid { grid-template-columns: 1fr; }
  .about-mvv-grid,
  .about-exec-grid { grid-template-columns: repeat(2, 1fr); }
  .about-values-grid { grid-template-columns: repeat(2, 1fr); }
  .about-trust-grid { grid-template-columns: repeat(3, 1fr); }
  .about-craft-flow { grid-template-columns: repeat(2, 1fr); }
  .about-craft-arrow { display: none; }
  .about-origin-grid { grid-template-columns: repeat(2, 1fr); }
  .about-impact-inner { grid-template-columns: 1fr; }
  .about-impact-band { margin: 0 -32px 56px; padding: 40px 32px; }
  .about-reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .about-daily-track { grid-template-columns: repeat(2, 1fr); }
  .about-academy-grid { grid-template-columns: 1fr; }
  .about-awards-grid { grid-template-columns: repeat(2, 1fr); }
  .about-press-row { grid-template-columns: 1fr; }
  .about-gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .about-partners-grid { grid-template-columns: 1fr; }
  .about-careers-layout { grid-template-columns: 1fr; padding: 32px; }
  .about-gallery-band { margin: 0 -32px 56px; }
  .about-tl-item,
  .about-tl-item.left,
  .about-tl-item.right { width: 100%; left: 0; padding-left: 32px; padding-right: 0; text-align: left; }
  .about-timeline::before { left: 8px; }
  .about-tl-dot { left: 1px !important; right: auto !important; }
}
@media (max-width: 760px) {
  .about-pro { margin: -20px -20px 0; }
  .about-body { padding: 32px 20px 0; }
  .about-subnav { padding: 10px 20px; }
  .about-stats-band { grid-template-columns: repeat(2, 1fr); }
  .about-mvv-grid,
  .about-exec-grid,
  .about-values-grid,
  .about-trust-grid,
  .about-tech-modules { grid-template-columns: 1fr; }
  .about-tech-highlights { grid-template-columns: 1fr; }
  .about-footer { margin: 0 -20px; padding: 28px 20px 36px; }
  .about-craft-flow,
  .about-reviews-grid,
  .about-daily-track,
  .about-awards-grid,
  .about-gallery-grid { grid-template-columns: 1fr; }
  .about-origin-grid { grid-template-columns: 1fr; }
  .about-impact-band { margin: 0 -20px 48px; padding: 32px 20px; }
  .about-impact-grid { grid-template-columns: 1fr; }
  .about-gallery-band { margin: 0 -20px 48px; }
  .about-gallery-tile { min-height: 140px; }
}

/* ============================ LICENSE CENTER ============================ */
.lic-pro { display: flex; flex-direction: column; gap: 0; margin: -28px -32px 0; }
.lic-hero {
  position: relative; padding: 40px 48px 44px; color: #fbf7f1; overflow: hidden;
}
.lic-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #0a1628 0%, #1a2d4a 40%, #0d9668 100%);
}
.lic-hero-inner {
  position: relative; z-index: 1; max-width: 1280px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
}
.lic-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; display: flex; align-items: center; gap: 8px; }
.lic-hero h1 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; margin: 10px 0 8px; }
.lic-hero p { font-size: var(--text-sm); opacity: 0.85; max-width: 560px; line-height: 1.6; }
.lic-hero-badges { display: flex; gap: 12px; }
.lic-hero-badge { padding: 16px 20px; border-radius: var(--radius); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); text-align: center; min-width: 120px; }
.lic-hero-badge b { display: block; font-size: var(--text-lg); font-weight: 800; }
.lic-hero-badge span { font-size: 11px; opacity: 0.75; }

.lic-tabs {
  display: flex; gap: 4px; padding: 10px 48px; background: var(--white);
  border-bottom: 1px solid var(--line-soft); overflow-x: auto; flex-shrink: 0;
}
.lic-tab {
  flex-shrink: 0; padding: 8px 16px; border: none; border-radius: 999px;
  background: transparent; font: inherit; font-size: var(--text-sm); font-weight: 600;
  color: var(--muted); cursor: pointer;
}
.lic-tab.active { background: #1a2d4a; color: #fff; }
.lic-body { padding: 28px 48px 48px; max-width: 1280px; margin: 0 auto; width: 100%; }

.lic-grid-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px; }
.lic-status-card {
  display: flex; gap: 24px; align-items: center; padding: 28px;
  border-radius: var(--radius-xl); background: var(--white); border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
}
.lic-status-ok { border-left: 4px solid var(--accent); }
.lic-status-warn { border-left: 4px solid var(--gold); }
.lic-status-bad { border-left: 4px solid var(--danger); }
.lic-status-ring-wrap { position: relative; width: 100px; height: 100px; flex-shrink: 0; }
.lic-status-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.lic-ring-track { fill: none; stroke: var(--cream); stroke-width: 8; }
.lic-ring-fill { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; }
.lic-status-warn .lic-ring-fill { stroke: var(--gold); }
.lic-status-bad .lic-ring-fill { stroke: var(--danger); }
.lic-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lic-ring-center b { font-size: var(--text-2xl); font-weight: 800; line-height: 1; }
.lic-ring-center small { font-size: 10px; color: var(--muted); font-weight: 700; }
.lic-edition-badge { display: inline-block; padding: 4px 10px; border-radius: 6px; color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.lic-status-meta h2 { font-size: var(--text-xl); font-weight: 800; margin-bottom: 6px; }
.lic-key-display { font-size: 11px; color: var(--muted); word-break: break-all; margin-bottom: 10px; }
.lic-status-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lic-status-chips span { font-size: 11px; font-weight: 600; padding: 4px 10px; background: var(--foam); border-radius: 999px; color: var(--ink-soft); }

.lic-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lic-kpi { padding: 20px; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line-soft); text-align: center; }
.lic-kpi b { display: block; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: #1a2d4a; }
.lic-kpi span { font-size: 11px; font-weight: 600; color: var(--muted); }

.lic-panel { padding: 22px 24px; }
.lic-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.lic-panel-head b { font-size: var(--text-sm); font-weight: 800; }
.lic-detail-grid { align-items: stretch; margin-bottom: 0; }
.lic-info-rows { display: flex; flex-direction: column; gap: 10px; }
.lic-info-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-sm); }
.lic-info-row span { color: var(--muted); font-weight: 600; }
.lic-security-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.lic-sec-item { display: flex; justify-content: space-between; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--foam); font-size: var(--text-sm); }
.lic-sec-item.ok { border-left: 3px solid var(--accent); }
.lic-sec-item.warn { border-left: 3px solid var(--gold); }
.lic-sec-item.bad { border-left: 3px solid var(--danger); }
.lic-actions-row { display: flex; gap: 8px; flex-wrap: wrap; }

.lic-activate-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 16px; }
.lic-field-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 12px 0 6px; }
.lic-key-input { font-size: 13px !important; letter-spacing: 0.04em; }
.lic-demo-keys { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.lic-demo-key { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--foam); font-size: 11px; font-weight: 700; cursor: pointer; }
.lic-demo-key:hover { background: var(--accent-soft); border-color: var(--accent); }
.lic-tier-table { display: flex; flex-direction: column; gap: 8px; }
.lic-tier-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-soft); font-size: var(--text-sm); }
.lic-tier-row.current { background: var(--accent-soft); border-color: var(--accent); }
.lic-tier-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.lic-tier-row div { flex: 1; }
.lic-tier-row small { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }

.lic-ent-table-wrap { overflow: auto; }
.lic-ent-table { font-size: var(--text-sm); }
.lic-ent-off { opacity: 0.55; }
.lic-ent-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.lic-ent-badge.on { background: var(--accent-soft); color: var(--accent-dark); }
.lic-ent-badge.off { background: var(--cream); color: var(--muted); }

.lic-devices-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.lic-device-card { padding: 20px; }
.lic-device-card.inactive { opacity: 0.6; }
.lic-device-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lic-device-meta { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); margin: 10px 0; }
.lic-primary-tag { font-size: 10px; font-weight: 700; color: var(--accent-dark); background: var(--accent-soft); padding: 4px 8px; border-radius: 6px; display: inline-block; }
.lic-device-add { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; border: 2px dashed var(--line); background: var(--foam); gap: 8px; }

.lic-audit-wrap { overflow: auto; }
.lic-audit-table { font-size: 12px; }
.lic-audit-ok { color: var(--accent-dark); font-weight: 800; }
.lic-audit-bad { color: var(--danger); font-weight: 800; }

.lic-crypto-stack { display: flex; flex-direction: column; gap: 8px; }
.lic-crypto-layer { display: grid; grid-template-columns: 36px 1fr; gap: 4px 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--foam); font-size: var(--text-sm); }
.lic-crypto-layer span { grid-row: span 2; font-family: var(--font-mono); font-size: 10px; font-weight: 800; color: #1a2d4a; background: #eef2f8; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.lic-crypto-layer small { grid-column: 2; font-size: 11px; color: var(--muted); }
.lic-sig-block { font-size: 10px; padding: 14px; background: var(--espresso); color: #a8e6cf; border-radius: var(--radius-sm); overflow-x: auto; word-break: break-all; line-height: 1.5; max-height: 120px; }

/* ============================ HELP CENTER PRO ============================ */
.help-pro { display: flex; flex-direction: column; margin: -28px -32px 0; min-height: calc(100vh - 72px); }

/* Tone palette */
.help-tone-emerald { --ht: #10b981; --ht-bg: rgba(16,185,129,.12); --ht-border: rgba(16,185,129,.35); }
.help-tone-blue { --ht: #3b82f6; --ht-bg: rgba(59,130,246,.12); --ht-border: rgba(59,130,246,.35); }
.help-tone-gold { --ht: #f59e0b; --ht-bg: rgba(245,158,11,.14); --ht-border: rgba(245,158,11,.4); }
.help-tone-amber { --ht: #d97706; --ht-bg: rgba(217,119,6,.12); --ht-border: rgba(217,119,6,.35); }
.help-tone-violet { --ht: #8b5cf6; --ht-bg: rgba(139,92,246,.12); --ht-border: rgba(139,92,246,.35); }
.help-tone-indigo { --ht: #6366f1; --ht-bg: rgba(99,102,241,.12); --ht-border: rgba(99,102,241,.35); }
.help-tone-navy { --ht: #1e40af; --ht-bg: rgba(30,64,175,.1); --ht-border: rgba(30,64,175,.3); }
.help-tone-cyan { --ht: #06b6d4; --ht-bg: rgba(6,182,212,.12); --ht-border: rgba(6,182,212,.35); }
.help-tone-rose { --ht: #f43f5e; --ht-bg: rgba(244,63,94,.1); --ht-border: rgba(244,63,94,.3); }

.help-hero-pro {
  position: relative; overflow: hidden;
  padding: 48px 48px 44px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #312e81 100%);
  border-bottom: none;
}
.help-hero-mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(16,185,129,.25) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 20%, rgba(99,102,241,.3) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(245,158,11,.08) 0%, transparent 60%);
  pointer-events: none;
}
.help-hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: .5; }
.help-glow-a { width: 280px; height: 280px; top: -60px; right: 10%; background: #10b981; }
.help-glow-b { width: 220px; height: 220px; bottom: -40px; left: 5%; background: #6366f1; }
.help-hero-pro .help-hero-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.help-hero-pro .help-hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); padding: 6px 14px; border-radius: 999px;
}
.help-hero-pro h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; margin: 14px 0 10px; color: #fff; }
.help-hero-pro p { font-size: var(--text-base); color: rgba(255,255,255,.72); max-width: 560px; line-height: 1.65; }
.help-hero-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.help-hero-stat {
  min-width: 88px; padding: 16px 20px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px); text-align: center;
}
.help-hero-stat b { display: block; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--ht, #fff); }
.help-hero-stat span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.55); }

.help-tabs-pro {
  display: flex; gap: 6px; padding: 12px 48px;
  background: var(--white); border-bottom: 1px solid var(--line-soft);
  overflow-x: auto; position: sticky; top: 0; z-index: 10;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.help-tab {
  flex-shrink: 0; padding: 9px 16px; border: none; border-radius: 999px;
  background: transparent; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted); cursor: pointer; white-space: nowrap; transition: all .2s;
}
.help-tab:hover { background: var(--foam); color: var(--ink); }
.help-tab.active { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; box-shadow: 0 2px 8px rgba(16,185,129,.3); }
.help-body { padding: 32px 48px 56px; max-width: 1280px; margin: 0 auto; width: 100%; flex: 1; }

.help-section { margin-bottom: 36px; }
.help-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.help-section-head h3 { font-size: var(--text-lg); font-weight: 800; margin: 0; }

.help-search-pro { position: relative; margin-bottom: 8px; }
.help-search-ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 20px; pointer-events: none; }
.help-search-input {
  width: 100%; padding: 16px 120px 16px 52px !important;
  font-size: var(--text-base) !important; border-radius: var(--radius-lg) !important;
  border: 2px solid var(--line-soft) !important; box-shadow: 0 4px 20px rgba(15,23,42,.06);
  transition: border-color .2s, box-shadow .2s;
}
.help-search-input:focus { border-color: var(--accent) !important; box-shadow: 0 4px 24px rgba(16,185,129,.15); }
.help-search-hint { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.help-search-result { font-size: var(--text-sm); color: var(--accent-dark); margin-bottom: 20px; font-weight: 700; }

.help-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.help-quick-card {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-radius: var(--radius-lg); border: 1px solid var(--ht-border, var(--line-soft));
  background: linear-gradient(135deg, var(--ht-bg, var(--white)), var(--white));
  cursor: pointer; transition: transform .2s, box-shadow .2s; font: inherit; text-align: left;
}
.help-quick-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(15,23,42,.08); }
.help-quick-ic { font-size: 26px; flex-shrink: 0; }
.help-quick-card b { display: block; font-size: 12px; font-weight: 800; color: var(--ink); }
.help-quick-card small { font-size: 10px; color: var(--muted); font-weight: 600; }

.help-path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.help-path-card {
  padding: 20px; border-radius: var(--radius-lg);
  border: 1px solid var(--ht-border); background: var(--white);
  border-top: 4px solid var(--ht);
}
.help-path-top { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.help-path-top span { font-size: 32px; }
.help-path-top b { display: block; font-size: var(--text-base); font-weight: 800; }
.help-path-top small { font-size: 11px; color: var(--muted); }
.help-path-steps { display: flex; flex-direction: column; gap: 6px; }
.help-path-step {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--line-soft); background: var(--foam);
  cursor: pointer; font: inherit; text-align: left; width: 100%; transition: background .15s;
}
.help-path-step:hover { background: var(--ht-bg); border-color: var(--ht-border); }
.help-path-step em { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--ht); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.help-path-step span { font-size: 12px; font-weight: 600; color: var(--ink-soft); }

.help-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.help-cat-card {
  padding: 22px 20px; border-radius: var(--radius-lg);
  border: 1px solid var(--ht-border); background: linear-gradient(160deg, var(--ht-bg) 0%, var(--white) 70%);
  text-align: left; cursor: pointer; font: inherit;
  transition: transform .2s, box-shadow .2s; border-top: 3px solid var(--ht);
}
.help-cat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15,23,42,.07); }
.help-cat-ic { font-size: 30px; display: block; margin-bottom: 10px; }
.help-cat-card b { display: block; font-size: var(--text-sm); font-weight: 800; margin-bottom: 4px; color: var(--ht); }
.help-cat-card small { display: block; font-size: 11px; color: var(--muted); line-height: 1.45; margin-bottom: 10px; }
.help-cat-card em { font-style: normal; font-size: 10px; font-weight: 800; color: var(--ht); }

.help-home-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.help-article-list { display: flex; flex-direction: column; gap: 8px; }
.help-article-link {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--white);
  border-left: 3px solid var(--ht, var(--accent)); cursor: pointer; font: inherit; text-align: left; width: 100%;
  transition: background .15s, box-shadow .15s;
}
.help-article-link:hover { background: var(--ht-bg, var(--foam)); box-shadow: var(--shadow-xs); }
.help-article-link span:first-child { font-size: 22px; }
.help-article-link div { flex: 1; }
.help-article-link b { display: block; font-size: var(--text-sm); font-weight: 700; }
.help-article-link small { font-size: 11px; color: var(--muted); }
.help-article-link em { color: var(--ht, var(--muted)); font-style: normal; font-weight: 700; }

.help-faq-list { display: flex; flex-direction: column; gap: 8px; }
.help-faq-item { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.help-faq-item summary { padding: 14px 18px; font-size: var(--text-sm); font-weight: 700; cursor: pointer; list-style: none; }
.help-faq-item summary::-webkit-details-marker { display: none; }
.help-faq-item[open] summary { background: var(--accent-soft); color: var(--accent-dark); }
.help-faq-item p { padding: 0 18px 14px; margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-soft); }

.help-academy-strip {
  padding: 28px 32px; border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #1e293b 0%, #312e81 50%, #1e40af 100%);
  color: #fff;
}
.help-academy-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.help-academy-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #fbbf24; }
.help-academy-strip h3 { font-size: var(--text-xl); font-weight: 800; margin: 8px 0 6px; }
.help-academy-strip p { font-size: 13px; color: rgba(255,255,255,.7); margin: 0; max-width: 380px; }
.help-academy-cards { display: flex; gap: 12px; flex-wrap: wrap; }
.help-academy-card {
  padding: 16px 20px; border-radius: var(--radius); background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15); text-align: center; min-width: 120px;
}
.help-academy-card span { font-size: 20px; color: #fbbf24; display: block; margin-bottom: 6px; }
.help-academy-card b { display: block; font-size: 12px; font-weight: 800; }
.help-academy-card small { font-size: 10px; color: rgba(255,255,255,.6); }

.help-updates-timeline { display: flex; flex-direction: column; gap: 8px; }
.help-update-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--white);
  border-left: 4px solid var(--ht, var(--accent));
}
.help-update-date { font-size: 11px; font-weight: 700; color: var(--muted); min-width: 90px; }
.help-update-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--ht-bg); color: var(--ht); }
.help-update-row b { flex: 1; font-size: var(--text-sm); font-weight: 700; }

.help-cat-view-pro .help-cat-hero {
  display: flex; align-items: center; gap: 20px; padding: 24px 28px; margin: 16px 0 24px;
  border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--ht-bg), var(--white));
  border: 1px solid var(--ht-border);
}
.help-cat-hero-ic { font-size: 48px; }
.help-cat-hero h2 { font-size: var(--text-2xl); font-weight: 800; margin: 0 0 4px; color: var(--ht); }
.help-cat-hero em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ht); }

.help-cat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--ht-bg); color: var(--ht); }
.help-article-pro { padding: 36px 40px; max-width: 860px; }
.help-article-head { margin-bottom: 24px; }
.help-level-badge { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 4px; background: var(--ht-bg); color: var(--ht); margin-bottom: 10px; }
.help-article-pro h1 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; margin-bottom: 12px; }
.help-article-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--text-sm); color: var(--muted); padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.help-article-meta em { font-style: normal; background: var(--foam); padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.help-article-body { font-size: var(--text-base); line-height: 1.75; color: var(--ink-soft); }
.help-article-body p { margin-bottom: 12px; }
.help-article-body code { font-family: var(--font-mono); font-size: 12px; background: var(--foam); padding: 2px 8px; border-radius: 4px; color: var(--accent-dark); }
.help-steps { padding: 18px 20px; margin: 16px 0; border-radius: var(--radius); background: var(--foam); border-left: 4px solid var(--accent); }
.help-steps ol { margin: 8px 0 0 18px; padding: 0; }
.help-steps li { margin-bottom: 6px; font-size: 14px; }
.help-tip { padding: 14px 18px; margin: 16px 0; border-radius: var(--radius); background: linear-gradient(90deg, rgba(245,158,11,.12), rgba(245,158,11,.04)); border: 1px solid rgba(245,158,11,.3); font-size: 14px; }
.help-related { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.help-related h4 { font-size: var(--text-sm); font-weight: 800; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.help-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.help-related-link {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--line-soft); background: var(--white);
  cursor: pointer; font: inherit; text-align: left; transition: background .15s;
}
.help-related-link:hover { background: var(--foam); }
.help-related-link b { display: block; font-size: 12px; font-weight: 700; }
.help-related-link small { font-size: 10px; color: var(--muted); }
.help-article-foot { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.help-foot-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

.help-support-intro { margin-bottom: 24px; }
.help-support-intro h2 { font-size: var(--text-2xl); font-weight: 800; margin-bottom: 8px; }
.help-support-intro p { color: var(--muted); max-width: 560px; margin-bottom: 16px; }
.help-support-kpis { display: flex; gap: 24px; }
.help-support-kpis div { text-align: center; }
.help-support-kpis b { display: block; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: var(--accent-dark); }
.help-support-kpis span { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; }

.help-support-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.help-tier-card {
  position: relative; padding: 28px 22px; border-radius: var(--radius-lg);
  border: 1px solid var(--ht-border); background: var(--white); text-align: center;
  border-top: 4px solid var(--ht);
}
.help-tier-card.featured { background: linear-gradient(180deg, var(--ht-bg), var(--white)); box-shadow: 0 8px 32px rgba(59,130,246,.15); transform: scale(1.02); }
.help-tier-ribbon { position: absolute; top: 12px; right: 12px; font-size: 9px; font-weight: 800; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--ht); color: #fff; }
.help-tier-ic { font-size: 36px; display: block; margin-bottom: 10px; }
.help-tier-card b { display: block; font-size: var(--text-base); font-weight: 800; }
.help-tier-price { display: block; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: var(--ht); margin: 8px 0; }
.help-tier-card small { display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.help-tier-card em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-soft); }

.help-ticket-card h3, .help-contact-card h3 { font-size: var(--text-lg); font-weight: 800; margin-bottom: 8px; }
.help-ticket-area { resize: vertical; min-height: 100px; }
.help-contact-rows { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.help-contact-rows > div { display: flex; gap: 14px; font-size: var(--text-sm); }
.help-contact-rows em { display: block; font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.help-contact-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.help-status-hero {
  display: flex; align-items: center; gap: 14px; padding: 22px 28px;
  border-radius: var(--radius-lg); margin-bottom: 20px;
}
.help-status-hero.ok { background: linear-gradient(90deg, rgba(16,185,129,.15), rgba(16,185,129,.05)); border: 1px solid rgba(16,185,129,.4); }
.help-status-hero.warn { background: linear-gradient(90deg, rgba(245,158,11,.15), rgba(245,158,11,.05)); border: 1px solid var(--gold); }
.help-status-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); animation: dash-pulse 2s ease infinite; flex-shrink: 0; }
.help-status-hero > div { flex: 1; }
.help-status-hero b { display: block; font-size: var(--text-base); font-weight: 800; }
.help-status-hero span { font-size: 12px; color: var(--muted); }
.help-status-uptime-badge { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; color: var(--accent-dark); padding: 8px 16px; background: rgba(16,185,129,.12); border-radius: var(--radius); }
.help-status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
.help-status-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--line-soft); font-size: var(--text-sm); }
.help-status-row > div { flex: 1; }
.help-status-row b { display: block; font-weight: 700; }
.help-status-row small { font-size: 10px; color: var(--muted); }
.help-st-operational { color: var(--accent); font-size: 14px; }
.help-uptime-bar { display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: var(--white); border-radius: var(--radius); border: 1px solid var(--line-soft); font-size: var(--text-sm); margin-bottom: 20px; }
.help-uptime-track { flex: 1; display: flex; gap: 3px; align-items: center; }
.help-uptime-track i { flex: 1; height: 28px; border-radius: 4px; background: var(--accent); display: block; }
.help-uptime-track i.warn { background: var(--gold); }
.help-incidents h4 { font-size: var(--text-sm); font-weight: 800; margin-bottom: 12px; }
.help-incident { display: flex; gap: 14px; padding: 14px 18px; border-radius: var(--radius); margin-bottom: 8px; border: 1px solid var(--line-soft); background: var(--white); }
.help-incident.ok { border-left: 4px solid var(--accent); }
.help-incident.warn { border-left: 4px solid var(--gold); }
.help-incident span { font-size: 18px; flex-shrink: 0; }
.help-incident b { display: block; font-size: var(--text-sm); font-weight: 700; }
.help-incident small { font-size: 11px; color: var(--muted); }

.help-prereq { padding: 16px 20px; margin: 16px 0; border-radius: var(--radius); background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.25); font-size: 14px; }
.help-prereq ul { margin: 8px 0 0 18px; }
.help-checklist ul { margin: 8px 0 0; padding: 0; list-style: none; }
.help-checklist li { padding: 6px 0; font-size: 14px; border-bottom: 1px dashed var(--line-soft); }
.help-warn { padding: 14px 18px; margin: 16px 0; border-radius: var(--radius); background: rgba(244,63,94,.08); border: 1px solid rgba(244,63,94,.3); font-size: 14px; }
.help-table-wrap { overflow-x: auto; margin: 16px 0; }
.help-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.help-table th, .help-table td { padding: 10px 14px; border: 1px solid var(--line-soft); text-align: left; }
.help-table th { background: var(--foam); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.help-table tr:nth-child(even) td { background: rgba(0,0,0,.02); }

.help-playbook-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.help-playbook-card {
  padding: 18px 20px; border-radius: var(--radius-lg); border: 1px solid var(--ht-border);
  background: linear-gradient(160deg, var(--ht-bg), var(--white)); text-align: left;
  cursor: pointer; font: inherit; border-top: 3px solid var(--ht); transition: transform .2s, box-shadow .2s;
}
.help-playbook-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15,23,42,.08); }
.help-playbook-ic { font-size: 28px; display: block; margin-bottom: 8px; }
.help-playbook-card b { display: block; font-size: var(--text-sm); font-weight: 800; }
.help-playbook-card small { font-size: 10px; color: var(--muted); font-weight: 600; }
.help-playbook-steps { margin: 12px 0 0; padding: 0; list-style: none; }
.help-playbook-steps li { font-size: 11px; color: var(--ink-soft); padding: 4px 0; border-top: 1px dashed var(--line-soft); }
.help-playbook-steps li:first-child { border-top: none; }

.help-glossary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.help-glossary-full { grid-template-columns: repeat(3, 1fr); }
.help-glossary-card { padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--white); }
.help-glossary-card b { display: block; font-size: 13px; font-weight: 800; color: var(--accent-dark); margin-bottom: 6px; }
.help-glossary-card p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-soft); }

@media (max-width: 1100px) {
  .lic-body, .help-body { padding: 24px 32px 40px; }
  .lic-hero, .help-hero-pro { padding: 32px; }
  .lic-tabs, .help-tabs-pro { padding: 10px 32px; }
  .lic-grid-top, .lic-activate-layout { grid-template-columns: 1fr; }
  .help-quick-grid { grid-template-columns: repeat(3, 1fr); }
  .help-cat-grid, .help-path-grid { grid-template-columns: repeat(2, 1fr); }
  .help-playbook-grid, .help-glossary-full { grid-template-columns: repeat(2, 1fr); }
  .help-home-split { grid-template-columns: 1fr; }
  .help-related-grid { grid-template-columns: 1fr; }
  .help-support-tiers { grid-template-columns: 1fr; }
  .help-tier-card.featured { transform: none; }
}
@media (max-width: 760px) {
  .lic-pro, .help-pro { margin: -20px -20px 0; }
  .lic-body, .help-body { padding: 20px; }
  .help-quick-grid, .help-cat-grid, .help-status-grid, .help-path-grid, .help-playbook-grid, .help-glossary-grid, .help-glossary-full { grid-template-columns: 1fr; }
  .help-hero-stats { width: 100%; justify-content: space-around; }
  .topbar-main { padding: 0 20px; }
}

/* ============================================================
   LİSANS & DOĞRULAMA MERKEZİ — PRO / CANLI TEMA (scoped .lic-pro)
   ============================================================ */
.lic-pro { --lic-cyan:#22d3ee; --lic-indigo:#6366f1; --lic-violet:#a855f7; --lic-emerald:#10b981; --lic-amber:#f59e0b; --lic-rose:#f43f5e; --lic-ink:#0b1020; }

.lic-pro .lic-hero{ position:relative; overflow:hidden; border-radius:var(--radius-xl); padding:32px 34px; margin-bottom:22px;
  background:linear-gradient(120deg,#0b1020,#161a3a 40%,#241046 70%,#0b1020); color:#eaf2ff;
  box-shadow:0 20px 60px rgba(76,29,149,.35), inset 0 1px 0 rgba(255,255,255,.06); }
.lic-pro .lic-hero::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(700px 280px at 12% -10%, rgba(34,211,238,.30), transparent 60%),
            radial-gradient(620px 300px at 100% 120%, rgba(168,85,247,.32), transparent 60%);
  animation:licHueShift 9s ease-in-out infinite alternate; }
.lic-pro .lic-hero::after{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:34px 34px; -webkit-mask-image:radial-gradient(circle at 50% 0%, #000, transparent 75%); mask-image:radial-gradient(circle at 50% 0%, #000, transparent 75%); }
@keyframes licHueShift{ 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(40deg)} }
.lic-pro .lic-hero-inner{ position:relative; z-index:1; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center; }
.lic-pro .lic-hero h1{ font-family:var(--font-display); font-size:2rem; font-weight:800; margin:8px 0 8px; color:#fff;
  background:linear-gradient(90deg,#fff,#a5b4fc,#67e8f9); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lic-pro .lic-hero p{ color:#b9c4e6; max-width:640px; font-size:13.5px; line-height:1.6; }
.lic-pro .lic-hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#67e8f9; background:rgba(34,211,238,.10); border:1px solid rgba(34,211,238,.35); padding:6px 12px; border-radius:999px; }
.lic-pro .dash-live-dot, .lic-pro .lic-hero-eyebrow .dash-live-dot{ width:8px; height:8px; border-radius:50%; background:#22d3ee; box-shadow:0 0 0 0 rgba(34,211,238,.7); animation:licPulse 1.6s infinite; }
@keyframes licPulse{ 0%{box-shadow:0 0 0 0 rgba(34,211,238,.6)} 70%{box-shadow:0 0 0 10px rgba(34,211,238,0)} 100%{box-shadow:0 0 0 0 rgba(34,211,238,0)} }
.lic-pro .lic-hero-badges{ display:flex; gap:12px; }
.lic-pro .lic-hero-badge{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-radius:16px; padding:14px 18px; text-align:center; min-width:120px; transition:.25s; }
.lic-pro .lic-hero-badge:hover{ transform:translateY(-3px); border-color:rgba(103,232,249,.5); box-shadow:0 10px 30px rgba(34,211,238,.25); }
.lic-pro .lic-hero-badge b{ display:block; font-family:var(--font-display); font-size:1.15rem; color:#fff; }
.lic-pro .lic-hero-badge span{ font-size:11px; color:#9fb0da; }

.lic-pro .lic-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; background:var(--white); padding:6px; border-radius:14px; border:1px solid var(--line-soft); box-shadow:var(--shadow-sm); }
.lic-pro .lic-tab{ padding:10px 16px; border-radius:10px; font-weight:700; font-size:13px; color:var(--muted); transition:.2s; position:relative; }
.lic-pro .lic-tab:hover{ color:var(--ink); background:var(--foam); }
.lic-pro .lic-tab.active{ color:#fff; background:linear-gradient(135deg,var(--lic-indigo),var(--lic-violet)); box-shadow:0 8px 20px rgba(99,102,241,.4); }

.lic-pro .lic-grid-top{ display:grid; grid-template-columns:1.5fr 1fr; gap:18px; margin-bottom:18px; }
.lic-pro .lic-status-card{ position:relative; display:flex; gap:24px; align-items:center; padding:26px; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(135deg,#0f1530,#1a1f44); color:#eaf2ff; border:1px solid rgba(255,255,255,.08); }
.lic-pro .lic-status-card::after{ content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; filter:blur(10px); opacity:.5; }
.lic-pro .lic-status-ok::after{ background:radial-gradient(circle,var(--lic-emerald),transparent 70%); }
.lic-pro .lic-status-warn::after{ background:radial-gradient(circle,var(--lic-amber),transparent 70%); }
.lic-pro .lic-status-bad::after{ background:radial-gradient(circle,var(--lic-rose),transparent 70%); }
.lic-pro .lic-status-ring-wrap{ position:relative; width:128px; height:128px; flex-shrink:0; }
.lic-pro .lic-status-ring{ width:128px; height:128px; transform:rotate(-90deg); }
.lic-pro .lic-ring-track{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:8; }
.lic-pro .lic-ring-fill{ fill:none; stroke-width:8; stroke-linecap:round; stroke:var(--lic-emerald); filter:drop-shadow(0 0 6px rgba(16,185,129,.8)); animation:licRing 1.2s var(--ease) both; }
.lic-pro .lic-status-warn .lic-ring-fill{ stroke:var(--lic-amber); filter:drop-shadow(0 0 6px rgba(245,158,11,.8)); }
.lic-pro .lic-status-bad .lic-ring-fill{ stroke:var(--lic-rose); filter:drop-shadow(0 0 6px rgba(244,63,94,.8)); }
@keyframes licRing{ from{ stroke-dasharray:0 264; } }
.lic-pro .lic-ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.lic-pro .lic-ring-center b{ font-family:var(--font-display); font-size:2rem; color:#fff; line-height:1; }
.lic-pro .lic-ring-center small{ font-size:10px; color:#9fb0da; letter-spacing:.1em; text-transform:uppercase; }
.lic-pro .lic-edition-badge{ display:inline-block; color:#fff; font-weight:800; font-size:12px; padding:5px 12px; border-radius:999px; position:relative; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.3); }
.lic-pro .lic-edition-badge::after{ content:""; position:absolute; top:0; left:-60%; width:50%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation:licShine 3.2s infinite; }
@keyframes licShine{ 0%{left:-60%} 60%,100%{left:140%} }
.lic-pro .lic-status-meta h2{ font-family:var(--font-display); font-size:1.5rem; color:#fff; margin:8px 0 6px; }
.lic-pro .lic-key-display{ font-size:13px; color:#67e8f9; letter-spacing:1px; background:rgba(34,211,238,.08); border:1px dashed rgba(34,211,238,.35); padding:6px 10px; border-radius:8px; display:inline-block; position:relative; overflow:hidden; }
.lic-pro .lic-key-display::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(103,232,249,.25),transparent); transform:translateX(-100%); animation:licSweep 2.6s infinite; }
@keyframes licSweep{ to{ transform:translateX(100%); } }
.lic-pro .lic-status-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.lic-pro .lic-status-chips span{ font-size:11.5px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); padding:5px 11px; border-radius:999px; color:#cdd8f5; }

.lic-pro .lic-kpi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lic-pro .lic-kpi{ background:var(--white); border:1px solid var(--line-soft); border-radius:16px; padding:18px; text-align:center; position:relative; overflow:hidden; transition:.25s; }
.lic-pro .lic-kpi::before{ content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:linear-gradient(90deg,var(--lic-cyan),var(--lic-indigo),var(--lic-violet)); }
.lic-pro .lic-kpi:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(99,102,241,.18); border-color:rgba(99,102,241,.35); }
.lic-pro .lic-kpi b{ display:block; font-family:var(--font-display); font-size:1.7rem; background:linear-gradient(135deg,var(--lic-indigo),var(--lic-violet)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lic-pro .lic-kpi span{ font-size:12px; color:var(--muted); font-weight:600; }

.lic-pro .lic-panel{ padding:20px; }
.lic-pro .lic-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-size:15px; }
.lic-pro .lic-info-row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.lic-pro .lic-info-row:last-child{ border-bottom:none; }

.lic-pro .lic-sec-item{ display:flex; justify-content:space-between; align-items:center; padding:11px 14px; border-radius:12px; margin-bottom:8px; font-size:13px; font-weight:600; border-left:4px solid var(--line); background:var(--foam); }
.lic-pro .lic-sec-item.ok{ border-left-color:var(--lic-emerald); background:linear-gradient(90deg,rgba(16,185,129,.10),transparent); }
.lic-pro .lic-sec-item.warn{ border-left-color:var(--lic-amber); background:linear-gradient(90deg,rgba(245,158,11,.10),transparent); }
.lic-pro .lic-sec-item.bad{ border-left-color:var(--lic-rose); background:linear-gradient(90deg,rgba(244,63,94,.12),transparent); animation:licBadBlink 1.4s infinite; }
@keyframes licBadBlink{ 50%{ background:linear-gradient(90deg,rgba(244,63,94,.22),transparent); } }

.lic-pro .btn-primary{ background:linear-gradient(135deg,var(--lic-indigo),var(--lic-violet)); border:none; box-shadow:0 8px 22px rgba(124,58,237,.35); }
.lic-pro .btn-primary:hover{ filter:brightness(1.08); transform:translateY(-2px); box-shadow:0 12px 28px rgba(124,58,237,.45); }
.lic-pro .btn-sm{ padding:7px 13px; font-size:12.5px; border-radius:9px; }
.lic-pro .lic-demo-key{ border:1px solid var(--line); background:var(--foam); padding:7px 12px; border-radius:999px; font-size:12px; font-weight:700; font-family:var(--font-mono); transition:.2s; }
.lic-pro .lic-demo-key:hover{ border-color:var(--lic-indigo); color:var(--lic-indigo); box-shadow:0 4px 12px rgba(99,102,241,.2); }
.lic-pro .lic-key-input{ border:2px solid var(--line); transition:.2s; }
.lic-pro .lic-key-input:focus{ border-color:var(--lic-cyan); box-shadow:0 0 0 4px rgba(34,211,238,.18); outline:none; }

.lic-pro .lic-tier-row{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; border:1px solid var(--line-soft); margin-bottom:8px; transition:.2s; }
.lic-pro .lic-tier-row.current{ border-color:var(--lic-violet); background:linear-gradient(90deg,rgba(168,85,247,.10),transparent); box-shadow:0 6px 18px rgba(168,85,247,.15); }
.lic-pro .lic-tier-dot{ width:12px; height:12px; border-radius:50%; box-shadow:0 0 8px currentColor; }
.lic-pro .lic-tier-row div{ flex:1; }
.lic-pro .lic-tier-row small{ display:block; color:var(--muted); font-size:11.5px; }
.lic-pro .lic-ent-badge{ font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; }
.lic-pro .lic-ent-badge.on{ background:rgba(16,185,129,.15); color:#0d9668; }
.lic-pro .lic-ent-badge.off{ background:var(--cream); color:var(--muted); }
.lic-pro .lic-ent-off{ opacity:.55; }
.lic-pro .lic-device-card{ padding:16px; border-radius:16px; transition:.25s; border:1px solid var(--line-soft); }
.lic-pro .lic-device-card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.1); border-color:var(--lic-indigo); }
.lic-pro .lic-devices-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.lic-pro .lic-device-add{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:2px dashed var(--line); border-radius:16px; padding:18px; text-align:center; }
.lic-pro .lic-primary-tag{ display:inline-block; margin-top:8px; font-size:11px; font-weight:800; color:var(--lic-violet); background:rgba(168,85,247,.12); padding:4px 10px; border-radius:999px; }

.lic-pro .lic-crypto-layer{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:12px; margin-bottom:10px; color:#eaf2ff;
  background:linear-gradient(135deg,#10183a,#1b1f48); border:1px solid rgba(255,255,255,.06); animation:licFadeUp .5s var(--ease) both; transition:.2s; }
.lic-pro .lic-crypto-layer:hover{ transform:translateX(6px); border-color:rgba(103,232,249,.4); }
.lic-pro .lic-crypto-layer:nth-child(1){animation-delay:.05s}
.lic-pro .lic-crypto-layer:nth-child(2){animation-delay:.12s}
.lic-pro .lic-crypto-layer:nth-child(3){animation-delay:.19s}
.lic-pro .lic-crypto-layer:nth-child(4){animation-delay:.26s}
.lic-pro .lic-crypto-layer:nth-child(5){animation-delay:.33s}
@keyframes licFadeUp{ from{ opacity:0; transform:translateY(10px); } }
.lic-pro .lic-crypto-layer span{ font-family:var(--font-mono); font-weight:800; color:#67e8f9; background:rgba(34,211,238,.12); width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:13px; }
.lic-pro .lic-crypto-layer b{ color:#fff; font-size:13.5px; }
.lic-pro .lic-crypto-layer small{ display:block; color:#9fb0da; font-size:11.5px; }
.lic-pro .lic-sig-block{ background:var(--lic-ink); color:#67e8f9; border-radius:12px; padding:14px; font-size:11px; line-height:1.6; overflow-x:auto; border:1px solid rgba(103,232,249,.2); word-break:break-all; white-space:pre-wrap; }

.lic-pro .lic-audit-table td{ font-size:12.5px; }
.lic-pro .lic-audit-ok{ color:#0d9668; font-weight:800; }
.lic-pro .lic-audit-bad{ color:var(--lic-rose); font-weight:800; }

@media (max-width:1000px){ .lic-pro .lic-grid-top{ grid-template-columns:1fr; } .lic-pro .lic-kpi-grid{ grid-template-columns:1fr 1fr; } }

/* cart-head ikon butonları — ortala + sayı rozeti (taşma düzeltmesi) */
.cart-tool { position: relative; display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; }
.cart-tool-badge { position: absolute; top: -5px; right: -5px; background: var(--gold); color: #fff; font-size: 9px; font-weight: 800; min-width: 15px; height: 15px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.cart-toolbar { flex-wrap: nowrap; }

/* ─── Dashboard hero: kahve çekirdeği arka plan ─── */
.dash-hero-beans {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.25;
  background: url("../assets/images/coffee-beans.svg") center right / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 35%, rgba(0,0,0,.85) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 35%, rgba(0,0,0,.85) 100%);
}

/* ─── Döviz & Mali Terminal (FX Pro) ─── */
.fx-pro {
  margin-bottom: 20px; border-radius: 16px; overflow: hidden;
  background: #0f1419; border: 1px solid #1e293b;
  box-shadow: 0 20px 50px rgba(15,20,25,.35), 0 0 0 1px rgba(255,255,255,.04) inset;
  color: #e2e8f0;
}
.fx-pro-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 22px; background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #0f1419 100%);
  border-bottom: 1px solid #334155;
}
.fx-pro-head-left { display: flex; flex-direction: column; gap: 4px; }
.fx-pro-badge {
  display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #94a3b8; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid #334155;
}
.fx-pro-title { margin: 4px 0 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: #f8fafc; letter-spacing: -.02em; }
.fx-pro-ts { font-size: 11px; color: #64748b; font-family: var(--font-mono, monospace); }
.fx-pro-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fx-pro-live-tag {
  font-size: 9px; font-weight: 800; letter-spacing: .1em; padding: 4px 10px; border-radius: 6px;
  background: rgba(52,211,153,.15); color: #34d399; border: 1px solid rgba(52,211,153,.35);
  animation: fx-live-pulse 2.5s ease infinite;
}
@keyframes fx-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: .65; } }
.fx-pro-auto-tag { font-size: 11px; color: #94a3b8; font-weight: 600; padding: 6px 12px; background: rgba(255,255,255,.05); border-radius: 8px; }

.fx-pro-pills {
  display: flex; gap: 8px; padding: 14px 18px; overflow-x: auto;
  background: #111827; border-bottom: 1px solid #1f2937;
  scrollbar-width: thin; scrollbar-color: #334155 transparent;
}
.fx-pro-pill {
  flex: 0 0 auto; min-width: 108px; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 2px solid #334155; background: #1e293b; color: #e2e8f0;
  text-align: left; transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.fx-pro-pill:hover { border-color: var(--fx-c); background: color-mix(in srgb, var(--fx-bg) 25%, #1e293b); transform: translateY(-1px); }
.fx-pro-pill.active {
  border-color: var(--fx-c); background: color-mix(in srgb, var(--fx-bg) 35%, #1e293b);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-c) 25%, transparent), 0 8px 20px rgba(0,0,0,.3);
}
.fx-pro-pill-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.fx-pro-pill-top b { font-size: 13px; font-weight: 800; color: var(--fx-c); }
.fx-pro-flag { font-size: 14px; }
.fx-pro-pill-ch { margin-left: auto; font-size: 9px; font-weight: 800; font-style: normal; }
.fx-pro-pill-ch.up { color: #34d399; }
.fx-pro-pill-ch.down { color: #f87171; }
.fx-pro-pill-rate { display: block; font-size: 15px; font-weight: 700; color: #f8fafc; margin-bottom: 6px; }
.fx-pro-pill-spark { display: block; opacity: .85; }
.fx-pro-pill-spark .dash-spark { width: 100%; height: 28px; }

.fx-pro-main {
  display: grid; grid-template-columns: 1fr 280px; gap: 0;
  background: #0f1419;
}
.fx-pro-chart-card {
  padding: 18px 20px; border-right: 1px solid #1f2937;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fx-bg) 8%, #0f1419) 0%, #0f1419 100%);
}
.fx-pro-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fx-pro-chart-pair { display: block; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.fx-pro-chart-rate { display: block; font-size: 1.65rem; font-weight: 800; color: var(--fx-accent); line-height: 1.1; }
.fx-pro-chart-ch { display: inline-block; margin-left: 10px; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; vertical-align: middle; }
.fx-pro-chart-ch.up { background: rgba(52,211,153,.15); color: #34d399; }
.fx-pro-chart-ch.down { background: rgba(248,113,113,.15); color: #f87171; }
.fx-pro-chart-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: #64748b; align-items: baseline; }
.fx-pro-chart-meta b { color: #e2e8f0; font-size: 13px; margin-left: 4px; }
.fx-pro-chart-meta span:not(:first-child) { padding-left: 14px; border-left: 1px solid #334155; }
.fx-pro-chart-wrap { height: 180px; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.25); border: 1px solid #1f2937; margin-bottom: 12px; }
.fx-pro-chart { width: 100%; height: 100%; display: block; }
.fx-chart-grid { stroke: #1f2937; stroke-width: .4; vector-effect: non-scaling-stroke; }
.fx-chart-lbl { fill: #64748b; font-size: 5.5px; font-weight: 600; }
.fx-pro-chart-foot {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px;
}
.fx-pro-chart-foot > div { padding: 8px 10px; background: #1e293b; border-radius: 8px; border: 1px solid #334155; }
.fx-pro-chart-foot span { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin-bottom: 3px; }
.fx-pro-chart-foot b { font-size: 13px; color: #f1f5f9; }

.fx-pro-side { display: flex; flex-direction: column; gap: 0; }
.fx-pro-side-card { padding: 16px 18px; border-bottom: 1px solid #1f2937; flex: 1; }
.fx-pro-side-card:last-child { border-bottom: none; }
.fx-pro-side-head { margin-bottom: 12px; }
.fx-pro-side-head b { display: block; font-size: 13px; color: #f1f5f9; margin-bottom: 2px; }
.fx-pro-mali-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fx-pro-mali-item { padding: 8px 10px; background: #1e293b; border-radius: 8px; border: 1px solid #334155; }
.fx-pro-mali-item span { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin-bottom: 3px; }
.fx-pro-mali-item b { font-size: 13px; color: #f8fafc; }
.fx-pro-ind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fx-pro-ind { padding: 7px 9px; background: #1e293b; border-radius: 7px; border: 1px solid #334155; }
.fx-pro-ind span { display: block; font-size: 9px; color: #64748b; font-weight: 600; }
.fx-pro-ind b { display: block; font-size: 12px; color: #e2e8f0; margin: 2px 0; }
.fx-pro-ind em { font-size: 10px; font-weight: 700; font-style: normal; }
.fx-pro-ind em.up { color: #34d399; }
.fx-pro-ind em.down { color: #f87171; }

.fx-pro-table-card { background: #111827; border-top: 1px solid #1f2937; padding: 16px 18px; }
.fx-pro-table-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fx-pro-table-head b { color: #f1f5f9; font-size: 13px; }
.fx-pro-table-scroll { overflow-x: auto; border-radius: 10px; border: 1px solid #334155; }
.fx-pro-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 860px; }
.fx-pro-table thead { background: #1e293b; position: sticky; top: 0; }
.fx-pro-table th {
  padding: 10px 12px; text-align: left; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; border-bottom: 1px solid #334155;
}
.fx-pro-table td { padding: 10px 12px; border-bottom: 1px solid #1f2937; color: #cbd5e1; vertical-align: middle; }
.fx-pro-tr { cursor: pointer; transition: background .12s; }
.fx-pro-tr:hover { background: rgba(255,255,255,.04); }
.fx-pro-tr-active { background: rgba(37,99,235,.12) !important; box-shadow: inset 3px 0 0 var(--fx-c, #2563eb); }
.fx-pro-td-cur { display: flex; align-items: center; gap: 8px; }
.fx-pro-td-cur span:first-child { font-size: 16px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--fx-bg); border: 1px solid color-mix(in srgb, var(--fx-c) 40%, transparent); }
.fx-pro-td-cur b { display: block; font-size: 13px; color: var(--fx-c); font-weight: 800; }
.fx-pro-td-cur small { display: block; font-size: 10px; color: #64748b; }
.fx-pro-muted { color: #64748b !important; }
.fx-pro-spark-cell { width: 96px; }
.fx-pro-spark-cell .dash-spark { display: block; }
.fx-up { color: #34d399 !important; font-weight: 700; }
.fx-down { color: #f87171 !important; font-weight: 700; }
.fx-pro-footnote { margin-top: 10px; font-size: 10px; color: #475569; font-family: var(--font-mono, monospace); }

.fx-pro-compact { margin-bottom: 14px; }
.fx-pro-compact .fx-pro-pills { padding: 10px 14px; }
.fx-pro-compact .fx-pro-mali-grid { padding: 0 14px 14px; }

@media (max-width: 960px) {
  .fx-pro-main { grid-template-columns: 1fr; }
  .fx-pro-chart-card { border-right: none; border-bottom: 1px solid #1f2937; }
  .fx-pro-side { flex-direction: row; flex-wrap: wrap; }
  .fx-pro-side-card { flex: 1 1 240px; }
}

@media (max-width: 600px) {
  .fx-pro-pill { min-width: 96px; }
  .fx-pro-chart-wrap { height: 140px; }
  .fx-pro-mali-grid, .fx-pro-ind-grid { grid-template-columns: 1fr; }
}

/* ─── Kasa Merkezi (Cash Hub) ─── */
.kasa-pro { display: flex; flex-direction: column; gap: 0; }
.kasa-hero {
  position: relative; border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, #1a120c 0%, #2d4a35 50%, #1a3028 100%);
  color: #fff; border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 40px rgba(26,18,12,.18);
}
.kasa-hero::before {
  content: ""; position: absolute; inset: 0; opacity: 0.25; pointer-events: none;
  background: url("../assets/images/coffee-beans.svg") center / cover no-repeat;
}
.kasa-hero-inner {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 26px 28px; flex-wrap: wrap;
}
.kasa-hero-tag {
  display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 6px;
}
.kasa-hero h1 { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(1.4rem, 2.5vw, 1.85rem); font-weight: 800; }
.kasa-hero p { margin: 0; font-size: var(--text-sm); color: rgba(255,255,255,.65); max-width: 520px; }
.kasa-hero-stats { display: flex; gap: 20px; }
.kasa-hero-stats > div { text-align: center; padding: 10px 16px; background: rgba(255,255,255,.08); border-radius: 12px; border: 1px solid rgba(255,255,255,.1); }
.kasa-hero-stats b { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; }
.kasa-hero-stats span { font-size: 10px; color: rgba(255,255,255,.55); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.kasa-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 0 0; border-bottom: 1px solid var(--line); margin-bottom: 18px;
}
.kasa-tab {
  padding: 8px 16px; border: 1px solid transparent; border-radius: 10px 10px 0 0;
  background: transparent; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.kasa-tab:hover { color: var(--ink); background: var(--foam); }
.kasa-tab.active { color: var(--coffee); background: var(--card); border-color: var(--line); border-bottom-color: var(--card); margin-bottom: -1px; }

.kasa-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.kasa-kpi {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; text-align: center;
}
.kasa-kpi span { font-size: 1.4rem; }
.kasa-kpi b { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; }
.kasa-kpi em { font-size: 10px; color: var(--muted); font-style: normal; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

.kasa-panel { padding: 18px; }
.kasa-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.kasa-panel-head b { font-size: 15px; }
.kasa-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.kasa-fx-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kasa-fx-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--foam); border-radius: 8px; font-size: 13px; }
.kasa-fx-row em { font-size: 11px; font-weight: 700; font-style: normal; }
.kasa-fx-row em.up { color: #0d9668; }
.kasa-fx-row em.down { color: #dc2626; }

.kasa-fx-table { width: 100%; font-size: 13px; }
.kasa-fx-table .fx-up { color: #0d9668; font-weight: 700; }
.kasa-fx-table .fx-down { color: #dc2626; font-weight: 700; }
.kasa-fx-note { margin-top: 12px; font-size: 11px; color: var(--muted); }

.kasa-plat-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.kasa-plat-intro p { margin: 0; color: var(--muted); font-size: 13px; }
.kasa-plat-group { margin-bottom: 22px; }
.kasa-plat-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.kasa-plat-group-head b { font-size: 14px; }
.kasa-plat-group-head em { margin-left: auto; font-size: 11px; color: var(--muted); font-style: normal; }
.kasa-plat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.kasa-plat-card { padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.kasa-plat-ok { border-left: 3px solid #0d9668; }
.kasa-plat-warn { border-left: 3px solid #d4953a; }
.kasa-plat-off { border-left: 3px solid var(--muted); opacity: .65; }
.kasa-plat-ready { border-left: 3px solid #2f6fb0; }
.kasa-plat-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.kasa-plat-ic { font-size: 1.4rem; flex-shrink: 0; }
.kasa-plat-top b { display: block; font-size: 13px; }
.kasa-plat-top small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.kasa-plat-badge { margin-left: auto; font-size: 9px; font-weight: 800; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--foam); color: var(--muted); flex-shrink: 0; }
.kasa-plat-meta { display: flex; gap: 12px; font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.kasa-plat-actions { display: flex; gap: 6px; }

.kasa-term-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.kasa-term-card { padding: 16px; border-radius: 12px; }
.kasa-term-card.active { border-left: 3px solid #0d9668; }
.kasa-term-card.inactive { opacity: .7; }
.kasa-term-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.kasa-term-head code { margin-left: auto; font-size: 10px; }
.kasa-term-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.kasa-term-actions { display: flex; align-items: center; gap: 10px; }
.kasa-term-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #0d9668; }

/* Ayarlar → Kasa Merkezi */
.sett-kasa-divider {
  display: flex; align-items: center; gap: 12px; margin: 28px 0 18px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.sett-kasa-divider::before, .sett-kasa-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.kasa-sett-plat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.kasa-sett-plat {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--foam);
  transition: border-color .15s, background .15s;
}
.kasa-sett-plat:has(input:checked) { border-color: #0d9668; background: #e3f5ee; }
.kasa-sett-plat input { flex-shrink: 0; }
.kasa-sett-plat-ic { font-size: 1.2rem; }
.kasa-sett-plat-body b { display: block; font-size: 12px; }
.kasa-sett-plat-body small { font-size: 10px; color: var(--muted); }

@media (max-width: 768px) {
  .kasa-hero-stats { width: 100%; justify-content: space-around; }
  .kasa-plat-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   SIDEBAR / AKORDEON — PRO override (üst üste binme + okunabilirlik)
   ============================================================ */
/* açık bölüm gövdesi: kırpılmayı önle (10+ öğe sığsın), düzgün animasyon */
.nav-section-body { display: flex; flex-direction: column; gap: 2px; }
.nav-section.open .nav-section-body { max-height: 1400px !important; padding: 2px 6px 8px !important; }

/* öğeler net yükseklik — asla iç içe geçmesin */
.nav-item { min-height: 38px; align-items: center; }
.nav-item-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item-ic { flex-shrink: 0; }

/* bölümler arası net ayrım + pro his */
.nav-section { transition: background 0.2s, box-shadow 0.2s; }
.nav-section.open { background: rgba(255,255,255,0.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); }
.nav-section-head { white-space: nowrap; }
.nav-section-label { overflow: hidden; text-overflow: ellipsis; }
.nav-section-count { flex-shrink: 0; }
.nav-section-chevron { flex-shrink: 0; }

/* aktif öğe — canlı altın gradyan + glow */
.nav-item.active {
  background: linear-gradient(135deg, var(--gold) 0%, #c4842e 100%) !important;
  color: var(--espresso) !important;
  box-shadow: 0 6px 18px rgba(212,149,58,0.35);
  font-weight: 700;
}
.nav-item.active .nav-item-ic { background: rgba(0,0,0,0.12) !important; }

/* ---- HERO (Firma logosu) — opak, okunaklı, pro ---- */
.sidebar-head { position: relative; }
.client-logo-slot {
  position: relative; overflow: hidden; border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #f3ebe2);
  min-height: 96px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(0,0,0,0.04);
}
/* opsiyonel arka plan görseli: Ayarlar marka görseli verince --client-hero-bg ile gelir; okunabilirlik için karartma katmanı */
.client-logo-slot[style*="--client-hero-bg"]::before,
.client-logo-slot.has-hero-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--client-hero-bg); background-size: cover; background-position: center;
}
.client-logo-slot[style*="--client-hero-bg"]::after,
.client-logo-slot.has-hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(26,18,12,0.35), rgba(26,18,12,0.62));
}
.client-logo-slot > * { position: relative; z-index: 2; }
.client-logo-img { max-width: 78%; max-height: 70px; object-fit: contain; }
.client-logo-placeholder { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; color: var(--coffee); }
.client-logo-ph-icon { font-size: 26px; opacity: 0.5; }
.client-logo-ph-title { font-weight: 800; font-size: 12px; letter-spacing: 0.06em; color: var(--coffee); }
.client-logo-placeholder small { font-size: 10px; color: var(--muted); }
/* hero üstünde görsel varsa yazılar beyaz okunur */
.client-logo-slot.has-hero-bg .client-logo-ph-title,
.client-logo-slot.has-hero-bg .client-logo-placeholder small { color: #fff; }

.client-brand-name { font-weight: 800; font-size: 14px; color: var(--cream); margin-top: 10px; text-align: center; }
.client-brand-tag { font-size: 11px; color: rgba(243,235,226,0.55); text-align: center; }

/* platform şeridi (VexPOS) — markadan net ayrılsın */