:root {
  --bg-deep: #060b16;
  --bg-panel: #0a1322;
  --bg-panel-2: #101d33;
  --line: rgba(150, 180, 220, 0.10);
  --gold: #f4c150;
  --gold-dim: #7a622a;
  --neon-blue: #3fd0ff;
  --neon-blue-dim: #1a4a63;
  --neon-green: #4dffb4;
  --text-hi: #f2f4f8;
  --text-mid: #a9b6cc;
  --text-low: #647089;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(63, 208, 255, 0.10), transparent 60%),
    radial-gradient(ellipse 700px 400px at 100% 0%, rgba(244, 193, 80, 0.06), transparent 55%),
    var(--bg-deep);
  color: var(--text-hi);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}

.stat-num, .money-num, .value-num {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.brand-word {
  font-family: 'Cinzel', serif;
}

/* ===== App Shell ===== */
.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: 96px;
  position: relative;
}

/* ===== Topbar / Header ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 10px;
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--line);
  font-size: 19px;
  position: relative;
  transition: transform .15s ease, border-color .15s ease;
  cursor: pointer;
}

.icon-btn:active {
  transform: scale(0.90);
}

.icon-btn.live::after {
  content: 'CANLI';
  position: absolute;
  top: -8px;
  right: -10px;
  background: #ff4d5e;
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 4px;
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(255, 77, 94, 0.7);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.brand-word {
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(180deg, #ffe9a8, var(--gold) 45%, #a97c1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 12px rgba(244, 193, 80, 0.35);
  letter-spacing: 1px;
}

.brand-sub {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--neon-blue);
  margin-top: 2px;
  opacity: 0.85;
}

/* ===== Economy Bars ===== */
.econ-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px 16px 14px;
}

.econ-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  position: relative;
  overflow: hidden;
}

.econ-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--pill-glow, transparent), transparent 40%);
  opacity: 0.12;
}

.econ-pill.gold { --pill-glow: var(--gold); border-color: rgba(244, 193, 80, 0.25); }
.econ-pill.diamond { --pill-glow: #b98bff; border-color: rgba(185, 139, 255, 0.25); }
.econ-pill.ingot { --pill-glow: #ffd77a; border-color: rgba(255, 215, 122, 0.2); }
.econ-pill.cash { --pill-glow: var(--neon-green); border-color: rgba(77, 255, 180, 0.28); grid-column: 1 / -1; }

.econ-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.econ-pill.gold .econ-icon { background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 60%, #8a6a1c); }
.econ-pill.diamond .econ-icon { background: radial-gradient(circle at 35% 30%, #eadfff, #b98bff 60%, #6d3fc4); }
.econ-pill.ingot .econ-icon { background: radial-gradient(circle at 35% 30%, #fff3cf, #ffd77a 60%, #b98a2c); }
.econ-pill.cash .econ-icon { background: radial-gradient(circle at 35% 30%, #baffe0, var(--neon-green) 60%, #1c9e6e); }

.econ-val { font-size: 17px; }
.econ-label { font-size: 8px; color: var(--text-low); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }

.econ-add {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--neon-green);
  color: #06301f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  margin-left: auto;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(77, 255, 180, 0.6);
  cursor: pointer;
}

/* ===== Panels Shared ===== */
.panel {
  margin: 14px 16px 0;
  background: linear-gradient(180deg, var(--bg-panel-2) 0%, var(--bg-panel) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 16px 20px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.panel-title { font-size: 17px; font-weight: 700; }

.rule {
  height: 2px;
  width: 52px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-top: 6px;
}

/* ===== Profile Card ===== */
.profile-panel { display: flex; flex-direction: column; gap: 16px; }
.profile-top { display: flex; gap: 14px; align-items: flex-start; }
.avatar-wrap { position: relative; flex-shrink: 0; width: 98px; height: 98px; }
.avatar-wrap::before, .avatar-wrap::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; }
.avatar-wrap::before { inset: 0; padding: 7px; background: linear-gradient(135deg, #fff2aa, #c48313 45%, #fff0a1 70%, #a86508); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 9px rgba(244,193,80,.72)); }
.avatar-wrap::after { inset: -5px; border: 2px solid rgba(255,224,122,.62); box-shadow: 0 0 22px rgba(244,193,80,.38), inset 0 0 9px rgba(244,193,80,.18); }

.avatar {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(244, 193, 80, 0.12), 0 0 18px rgba(244, 193, 80, 0.25);
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

.avatar-online {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--neon-green);
  border: 2px solid var(--bg-panel);
  box-shadow: 0 0 8px var(--neon-green);
  z-index: 3;
}

.profile-info { flex: 1; min-width: 0; }
.company-name { font-size: 19px; font-weight: 800; letter-spacing: 0.3px; cursor: pointer; }
.company-value { font-size: 12.5px; color: var(--text-mid); margin-top: 2px; }
.company-value b { color: var(--neon-blue); font-family: 'Rajdhani', sans-serif; font-weight: 700; }
.vip-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

.vip-tag {
  background: linear-gradient(180deg, #ffe9a8, var(--gold));
  color: #3a2a04;
  font-weight: 800;
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(244, 193, 80, 0.35);
}

.ceo-title { font-size: 13.5px; font-weight: 600; color: var(--text-hi); }
.profile-frame-cta { margin: -5px 0 -4px 112px; }
.profile-frame-open { padding: 4px 8px; border: 1px solid rgba(244,193,80,.48); border-radius: 8px; background: rgba(244,193,80,.1); color: #ffe09a; font: 800 10px Inter,sans-serif; cursor: pointer; }
.profile-frame-open:active { transform: scale(.96); }

/* Profil çerçeve koleksiyonu */
.frame-bordo-mavi::before, .frame-bordo-mavi.avatar-wrap::before { background: conic-gradient(from -45deg, #7b1736 0 50%, #0b2b68 50% 100%); filter: drop-shadow(0 0 10px rgba(52,143,255,.75)); }
.frame-bordo-mavi::after, .frame-bordo-mavi.avatar-wrap::after { border-color: #79c6ff; box-shadow: 0 0 22px rgba(30,129,247,.7), inset 0 0 8px rgba(126,28,62,.5); }
.frame-bordo-mavi.avatar-wrap .avatar { border-color: #e5b1c0; box-shadow: 0 0 0 3px #571128, 0 0 0 6px #163d86; }
.frame-sari-kirmizi::before, .frame-sari-kirmizi.avatar-wrap::before { background: conic-gradient(from -45deg, #ffd23f 0 50%, #cb1e32 50% 100%); filter: drop-shadow(0 0 10px rgba(255,193,38,.78)); }
.frame-sari-kirmizi::after, .frame-sari-kirmizi.avatar-wrap::after { border-color: #ffe36d; box-shadow: 0 0 22px rgba(237,47,59,.65), inset 0 0 8px rgba(255,209,48,.42); }
.frame-sari-kirmizi.avatar-wrap .avatar { border-color: #fff0a2; box-shadow: 0 0 0 3px #9a1428, 0 0 0 6px #e5ae19; }
.frame-emerald::before, .frame-emerald.avatar-wrap::before { background: linear-gradient(135deg, #d8ffd8, #19b98a 43%, #065e56 68%, #8effcf); filter: drop-shadow(0 0 8px rgba(43,229,162,.5)); }
.frame-emerald::after, .frame-emerald.avatar-wrap::after { border-color: rgba(98,255,186,.68); box-shadow: 0 0 16px rgba(35,219,149,.48); }
.frame-neon::before, .frame-neon.avatar-wrap::before { background: conic-gradient(#63e8ff, #1461ef, #be5bff, #63e8ff); filter: drop-shadow(0 0 9px rgba(75,211,255,.72)); }
.frame-neon::after, .frame-neon.avatar-wrap::after { border-color: rgba(98,229,255,.8); box-shadow: 0 0 18px rgba(63,208,255,.65); }
.frame-gold.avatar-wrap::after { box-shadow: 0 0 16px rgba(244,193,80,.46); }

.profile-frame-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: end center; padding: 18px; background: rgba(2,8,18,.72); backdrop-filter: blur(5px); }
.profile-frame-modal[hidden] { display: none; }
.profile-frame-dialog { width: min(100%, 430px); position: relative; border: 1px solid #4c7ca6; border-radius: 22px; padding: 21px; background: linear-gradient(160deg, #183353, #0c1a30 68%); box-shadow: 0 -8px 36px rgba(0,0,0,.45); animation: frame-pop .2s ease-out; }
.frame-dialog-kicker { color: var(--neon-blue); font: 800 10px Inter,sans-serif; letter-spacing: 1.3px; }
.profile-frame-dialog h2 { margin: 5px 30px 4px 0; font-size: 21px; color: #fff; }
.profile-frame-dialog p { margin: 0 0 16px; color: #9fb6cf; font-size: 12px; }
.avatar-placeholder { display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 28%, #527ca9 0 18%, #1b3557 19% 53%, #0c1a31 54%); font-size:34px; }
.profile-frame-close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border: 1px solid #426889; border-radius: 10px; background: #102540; color: #fff; font-size: 25px; line-height: 1; cursor: pointer; }
.frame-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.frame-choice { min-height: 78px; display: grid; grid-template-columns: 48px 1fr; align-items: center; column-gap: 9px; text-align: left; border: 1px solid #355776; border-radius: 14px; padding: 9px; background: rgba(8,24,45,.78); color: #f4f7fc; cursor: pointer; }
.frame-choice b { font-size: 12px; }
.frame-choice small { grid-column: 2; margin-top: -15px; color: #9eb2c8; font-size: 9px; }
.frame-choice.selected { border-color: #ffd668; background: rgba(244,193,80,.13); box-shadow: inset 0 0 0 1px rgba(255,214,104,.24); }
.frame-preview { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: transparent; background: #172b47; z-index: 0; }
.frame-preview::before, .frame-preview::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.frame-preview::before { inset: -5px; padding: 4px; background: linear-gradient(135deg, #fff2aa, #c48313 45%, #fff0a1 70%, #a86508); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.frame-preview::after { inset: -8px; border: 1px solid rgba(255,224,122,.62); }
@keyframes frame-pop { from { transform: translateY(18px); opacity: .2; } to { transform: translateY(0); opacity: 1; } }

/* Kullanıcının gönderdiği işlemeli tasarıma göre: ince değil, taşlı ve taçlı gerçek SVG çerçeve. */
.royal-frame { width: 100px; height: 100px; filter: drop-shadow(0 5px 10px rgba(0,0,0,.5)); }
.royal-frame::before, .royal-frame::after { display: none; }
.royal-frame .avatar { width: 68px; height: 68px; left: 16px; top: 16px; border: 0; box-shadow: none; z-index: 1; }
.royal-frame-image { position:absolute; inset:-8px; width:116px; height:116px; z-index:2; pointer-events:none; object-fit:contain; filter:brightness(.72) saturate(1.24) contrast(1.14); }
.royal-frame .avatar-online { right: 4px; bottom: 4px; z-index:3; }
.royal-frame { --m1:#fff6d5; --m2:#d8a52c; --m3:#573a08; --g1:#fff; --g2:#ab173a; --glow:rgba(225,179,59,.5); }
.theme-bordo-mavi { --m1:#e8e7ff; --m2:#4664b5; --m3:#34122e; --g1:#ffc4dc; --g2:#7b1233; --glow:rgba(82,143,255,.62); }
.theme-sari-kirmizi { --m1:#fff6cf; --m2:#f2bd19; --m3:#9e1428; --g1:#fff0aa; --g2:#c71d35; --glow:rgba(247,185,21,.62); }
.theme-kirmizi-siyah { --m1:#e7e7e7; --m2:#3b3b46; --m3:#050509; --g1:#ff9298; --g2:#a50e1c; --glow:rgba(224,35,54,.62); }
.theme-mor { --m1:#fff5ff; --m2:#ab78dc; --m3:#33204f; --g1:#f4c6ff; --g2:#7728b9; --glow:rgba(174,101,250,.65); }
.royal-frame .m1 { stop-color:var(--m1); }.royal-frame .m2 { stop-color:var(--m2); }.royal-frame .m3 { stop-color:var(--m3); }.royal-frame .g1 { stop-color:var(--g1); }.royal-frame .g2 { stop-color:var(--g2); }
.royal-glow { fill:none; stroke:var(--glow); stroke-width:10; filter:blur(5px); }.royal-ring { fill:none; stroke:url(#royalMetal); stroke-width:27; }.royal-inner { fill:none; stroke:var(--m1); stroke-width:3; }.royal-rope { fill:none; stroke:var(--m3); stroke-width:6; stroke-dasharray:4 3; }
.royal-leaves path { fill:url(#royalMetal); stroke:var(--m3); stroke-width:2; }.royal-gems path,.royal-gems circle,.royal-crown path,.royal-crown circle { fill:url(#royalGem); stroke:var(--m1); stroke-width:2; }.royal-crown path { fill:url(#royalMetal); stroke:var(--m3); }.royal-crown circle { fill:url(#royalGem); }
.frame-preview.frame-bordo-mavi::before { background:linear-gradient(135deg,#7c1739 0 50%,#0a326f 50%); }.frame-preview.frame-sari-kirmizi::before { background:linear-gradient(135deg,#ffd33f 0 50%,#c71d35 50%); }.frame-preview.frame-kirmizi-siyah::before { background:linear-gradient(135deg,#dd263c 0 50%,#08080d 50%); }.frame-preview.frame-mor::before { background:linear-gradient(135deg,#e9c7ff,#6f24b1); }

.xp-block { margin-top: 2px; }

.xp-track {
  height: 10px;
  border-radius: 999px;
  background: #0c1626;
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}

.xp-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-blue-dim), var(--neon-blue));
  box-shadow: 0 0 10px rgba(63, 208, 255, 0.65);
  width: 0%;
  transition: width 1.1s cubic-bezier(.2, .8, .2, 1);
  position: relative;
}

.xp-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  width: 40px;
  animation: xp-shine 2.4s ease-in-out infinite;
}

@keyframes xp-shine {
  0% { transform: translateX(-40px); }
  100% { transform: translateX(220px); }
}

.xp-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--text-low);
  font-weight: 500;
}

.xp-labels b { color: var(--text-mid); font-family: 'Rajdhani', sans-serif; }

/* ===== İş Yerlerim Grid ===== */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.biz-card {
  background: radial-gradient(120% 100% at 30% 0%, var(--tint, rgba(63, 208, 255, 0.10)), transparent 60%), var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 8px 10px;
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.biz-card:active { transform: scale(0.94); }
.biz-card:hover { border-color: rgba(63, 208, 255, 0.4); box-shadow: 0 0 16px rgba(63, 208, 255, 0.12); }

.biz-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(6, 11, 22, 0.75);
  border: 1px solid var(--line);
  color: var(--gold);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
}

.biz-badge.new::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4d5e;
  box-shadow: 0 0 6px #ff4d5e;
}

.biz-icon { font-size: 30px; display: block; margin: 6px 0 8px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
.biz-name { font-size: 12.5px; font-weight: 600; color: var(--text-hi); }

/* ===== Action Cards ===== */
.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 16px 0;
}

.action-card {
  border-radius: var(--radius-md);
  padding: 16px 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 22px;
  cursor: pointer;
  border: 1px solid var(--line);
  transition: transform .15s ease;
}

.action-card:active { transform: scale(0.96); }
.action-card .emoji { font-size: 26px; }
.action-card .a-name { font-size: 14px; font-weight: 700; }
.action-card .a-sub { font-size: 9.5px; color: rgba(255, 255, 255, 0.55); font-weight: 500; margin-top: 2px; }

.action-card.notify::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff4d5e;
  box-shadow: 0 0 8px #ff4d5e;
}

.a-realestate { background: linear-gradient(145deg, #132a3d, #0c1a28); }
.a-realestate::before { content: ''; position: absolute; right: -20px; bottom: -20px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(63, 208, 255, 0.25), transparent 70%); }
.a-port { background: linear-gradient(145deg, #0f2b2a, #0b1a1c); }
.a-port::before { content: ''; position: absolute; right: -20px; bottom: -20px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(77, 255, 180, 0.22), transparent 70%); }
.a-side { background: linear-gradient(145deg, #2a2312, #1a160c); }
.a-side::before { content: ''; position: absolute; right: -20px; bottom: -20px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(244, 193, 80, 0.22), transparent 70%); }
.a-tender { background: linear-gradient(145deg, #231230, #160c1c); }
.a-tender::before { content: ''; position: absolute; right: -20px; bottom: -20px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(185, 139, 255, 0.22), transparent 70%); }

/* ===== Performans ===== */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat-box {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 12px 11px;
}

.stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.stat-label { font-size: 12px; color: var(--text-mid); font-weight: 500; }

.stat-info {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-low);
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
}

.stat-bottom { display: flex; align-items: center; justify-content: space-between; }
.stat-num { font-size: 17px; }

.stat-delta {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--neon-green);
  font-size: 11px;
  font-weight: 600;
}

.stat-delta .arrow {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(77, 255, 180, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}

/* ===== Chart Panel ===== */
.chart-panel { margin-top: 14px; }
.chart-wrap { height: 230px; margin-top: 6px; }

/* ===== Bottom Nav ===== */
.navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(10, 19, 34, 0.65), rgba(6, 11, 22, 0.97));
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  z-index: 50;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text-low);
  font-size: 10px;
  font-weight: 600;
  position: relative;
  padding: 4px 6px;
  transition: color .15s ease, transform .15s ease;
  cursor: pointer;
}

.nav-item .n-icon { font-size: 21px; filter: grayscale(0.4) opacity(0.8); transition: filter .15s ease; }
.nav-item.active { color: var(--neon-blue); }
.nav-item.active .n-icon { filter: none; }

.nav-item.active::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: var(--neon-blue);
  box-shadow: 0 0 8px var(--neon-blue);
}

.nav-item:active { transform: scale(0.9); }

.nav-item .n-badge {
  position: absolute;
  top: -2px;
  right: 0;
  background: #ff4d5e;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(255, 77, 94, 0.7);
}

.nav-center {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6fe4ff, var(--neon-blue) 55%, #146a8c);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 5px rgba(63, 208, 255, 0.12), 0 4px 18px rgba(63, 208, 255, 0.5);
  margin-top: -28px;
  font-size: 22px;
  transition: transform .15s ease;
  cursor: pointer;
}

.nav-center:active { transform: scale(0.9); }

/* Ripple Effect Element */
.ripple { position: relative; overflow: hidden; }

.ripple-el {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple-anim .55s ease-out;
  pointer-events: none;
}

@keyframes ripple-anim {
  to { transform: scale(2.6); opacity: 0; }
}

::-webkit-scrollbar { display: none; }

@media (max-width: 360px) {
  .biz-icon { font-size: 26px; }
  .company-name { font-size: 17px; }
}

.biz-card[data-route], .action-card[data-route] { cursor: pointer; }
.biz-card[data-route]:active, .action-card[data-route]:active { transform: scale(0.97); }