:root {
  --fk-safe-top: env(safe-area-inset-top, 0px);
  --fk-safe-right: env(safe-area-inset-right, 0px);
  --fk-safe-bottom: env(safe-area-inset-bottom, 0px);
  --fk-safe-left: env(safe-area-inset-left, 0px);
  --fk-tab-height: 66px;
}

html.fk-native {
  background: #08090d;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html.fk-native body {
  padding-top: var(--fk-safe-top);
  padding-bottom: calc(var(--fk-tab-height) + var(--fk-safe-bottom));
  overscroll-behavior-y: none;
}

html.fk-native .nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000;
  min-height: 58px !important;
  grid-template-columns: 48px minmax(0, 1fr) 48px !important;
  grid-template-rows: 48px !important;
  padding: 5px max(8px, var(--fk-safe-right)) 5px max(8px, var(--fk-safe-left)) !important;
  background: rgba(8, 9, 13, .94) !important;
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

html.fk-native .nav > .brand {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
}

html.fk-native .nav-language-corner {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

html.fk-native .nav-logout-corner,
html.fk-native .nav-corner-placeholder {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

html.fk-native .nav-links { display: none !important; }
html.fk-native .brand-mark { width: 34px !important; height: 34px !important; border-radius: 11px !important; }
html.fk-native .brand-word { font-size: 17px !important; }
html.fk-native #language-button,
html.fk-native .nav-logout-corner,
html.fk-native .nav-logout-corner > button { width: 40px !important; min-width: 40px !important; height: 40px !important; }
html.fk-native #language-menu { top: calc(var(--fk-safe-top) + 54px) !important; }

html.fk-native a,
html.fk-native button { touch-action: manipulation; }
html.fk-native input,
html.fk-native select,
html.fk-native textarea { font-size: 16px !important; }
html.fk-native input[type=file] { min-height: 48px; }
html.fk-native .container {
  width: min(100% - 20px, 1180px) !important;
  margin: 14px auto 24px !important;
  padding-bottom: 18px;
}
html.fk-native .hero,
html.fk-native .card,
html.fk-native .glass-card { border-radius: 22px; }

.fk-network-banner {
  position: fixed;
  left: max(12px, var(--fk-safe-left));
  right: max(12px, var(--fk-safe-right));
  bottom: calc(var(--fk-tab-height) + 12px + var(--fk-safe-bottom));
  z-index: 15000;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background: #171a22;
  color: #fff;
  text-align: center;
  font-weight: 800;
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  transform: translateY(180%);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.fk-network-banner.is-visible { transform: translateY(0); opacity: 1; }

.fk-native-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 14000;
  display: grid;
  grid-template-columns: repeat(var(--fk-tab-count, 5), minmax(0, 1fr));
  min-height: calc(var(--fk-tab-height) + var(--fk-safe-bottom));
  padding: 6px max(6px, var(--fk-safe-right)) var(--fk-safe-bottom) max(6px, var(--fk-safe-left));
  border-top: 1px solid rgba(238, 211, 166, .14);
  background: rgba(9, 10, 15, .94);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  box-shadow: 0 -18px 48px rgba(0, 0, 0, .28);
}

.fk-native-tab {
  display: flex;
  min-width: 0;
  min-height: 54px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #8f8b98;
  text-decoration: none;
  box-shadow: none;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  padding: 4px 2px;
}
.fk-native-tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fk-native-tab.is-active { color: #f3d19c; background: rgba(217,160,102,.11); }
.fk-native-tab:active { transform: scale(.96); }

.fk-native-more-sheet[hidden] { display:none; }
.fk-native-more-sheet { position:fixed; inset:0; z-index:14500; display:grid; align-items:end; }
.fk-native-more-backdrop { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; border-radius:0; background:rgba(0,0,0,.62); box-shadow:none; }
.fk-native-more-panel { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:12px max(14px,var(--fk-safe-right)) calc(18px + var(--fk-safe-bottom)) max(14px,var(--fk-safe-left)); border:1px solid rgba(238,211,166,.16); border-radius:24px 24px 0 0; background:#12141d; box-shadow:0 -24px 70px rgba(0,0,0,.5); }
.fk-native-more-handle { grid-column:1/-1; justify-self:center; width:42px; height:5px; margin:0 0 6px; border-radius:999px; background:rgba(255,255,255,.24); }
.fk-native-more-panel a { min-height:48px; display:flex; align-items:center; justify-content:center; padding:10px; border:1px solid rgba(238,211,166,.14); border-radius:15px; background:rgba(255,255,255,.045); color:#f7f3ec; text-align:center; text-decoration:none; font-size:13px; font-weight:850; }
body.fk-more-open { overflow:hidden; }

.fk-loading-bar {
  position: fixed;
  top: var(--fk-safe-top);
  left: 0;
  z-index: 20000;
  width: 0;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, #d9a066, #f3d19c);
  box-shadow: 0 0 12px rgba(243,209,156,.7);
  transition: width .18s ease, opacity .18s ease;
}
.fk-loading-bar.is-loading { width: 72%; opacity: 1; }
.fk-loading-bar.is-complete { width: 100%; opacity: 0; }

@media (orientation: landscape) and (max-height: 520px) {
  :root { --fk-tab-height: 56px; }
  .fk-native-tab { min-height: 46px; flex-direction: row; gap: 5px; }
  .fk-native-tab svg { width: 19px; height: 19px; }
  html.fk-native .nav { position: relative !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fk-network-banner, .fk-loading-bar, .fk-native-tab { transition: none !important; }
}