.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.app > .main { flex: 1; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding: env(safe-area-inset-top, 0px) max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--border);
  background: rgb(8 8 8 / 95%);
}
.brand, .logo { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; color: var(--text); font: 30px var(--font-title); text-decoration: none; }
.brand svg, .logo svg { width: 40px; height: 48px; color: var(--bronze); }
.topnav { display: flex; align-items: stretch; justify-content: flex-end; gap: 10px; align-self: stretch; }
.nav-item, .tabbar-item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 60px;
  min-height: 44px;
  padding: 8px 6px 12px;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font: .8125rem var(--font-body);
  text-decoration: none;
}
button.nav-item { cursor: pointer; }
.nav-item svg, .tabbar-item svg { width: 23px; height: 23px; color: var(--bronze); }
.nav-item[aria-current="page"], .tabbar-item[aria-current="page"] { color: var(--gold-soft); }
.nav-item[aria-current="page"]::before { content: ""; position: absolute; bottom: 0; left: 6px; right: 6px; height: 2px; background: var(--gold); }
.nav-item[aria-current="page"]::after { content: ""; position: absolute; bottom: -3px; left: calc(50% - 4px); width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }
.nav-item[aria-disabled="true"] { color: var(--muted); opacity: .55; cursor: default; }
.nav-item[aria-disabled="true"] svg { color: var(--muted); }
.main { width: 100%; min-width: 0; padding: 24px max(24px, env(safe-area-inset-right, 0px)) 32px max(24px, env(safe-area-inset-left, 0px)); }
.cols-3, .cols-2 { display: grid; align-items: start; gap: 20px; min-width: 0; }
.cols-3 { grid-template-columns: minmax(0, 28fr) minmax(0, 41fr) minmax(0, 28fr); }
.cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cols-3 > *, .cols-2 > * { min-width: 0; }
.tabbar { display: none; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.grow { flex: 1; min-width: 0; }
.backdrop { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / 75%); }
.sheet, .modal {
  position: fixed;
  z-index: 51;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--bronze);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 12px 60px #000;
}
.sheet {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 720px);
  max-height: 90vh;
  max-height: 90dvh;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: 12px 12px 0 0;
}
.modal { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 32px)); max-height: 90vh; max-height: 90dvh; border-radius: 4px; }
@media (min-width: 760px) and (max-width: 1099px) {
  .cols-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .cols-3 > :nth-child(3) { display: none; }
  .topbar { gap: 12px; padding-right: 16px; padding-left: 16px; }
  .brand, .logo { font-size: 24px; gap: 6px; }
  .topnav { gap: 2px; flex-wrap: wrap; }
  .nav-item { min-width: 44px; padding-right: 4px; padding-left: 4px; font-size: .6875rem; }
  .main { padding-right: 16px; padding-left: 16px; }
}
@media (max-width: 759px) {
  .app { height: 100vh; height: 100dvh; height: var(--app-height, 100dvh); min-height: 0; }
  .keyboard-open .tabbar, .keyboard-open .ai-badge { display: none; }
  .app > .main { flex: 1 1 0; }
  .app > .topbar, .app > .tabbar, .app > .ai-badge { flex-shrink: 0; }
  .topbar { min-height: calc(60px + env(safe-area-inset-top, 0px)); gap: 10px; padding-right: max(12px, env(safe-area-inset-right, 0px)); padding-left: max(12px, env(safe-area-inset-left, 0px)); }
  .brand, .logo { min-width: 0; flex-shrink: 1; font-size: 20px; gap: 8px; }
  .brand svg, .logo svg { width: 32px; height: 40px; flex-shrink: 0; }
  .topnav { display: none; }
  .main { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: 16px max(12px, env(safe-area-inset-right, 0px)) 24px max(12px, env(safe-area-inset-left, 0px)); }
  .cols-3, .cols-2 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tabbar {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    border-top: 1px solid var(--border);
    background: #0b0b0b;
  }
  .tabbar-item { min-width: 0; min-height: 44px; height: 56px; gap: 2px; padding: 4px 2px; font-size: .6875rem; }
  .tabbar-item svg { width: 22px; height: 22px; }
  .tabbar-guide svg {
    width: 48px;
    height: 48px;
    padding: 12px;
    margin-top: -21px;
    border: 1px solid var(--bronze);
    border-radius: 50%;
    background: linear-gradient(180deg, #30200e, #15110a);
    box-shadow: 0 -4px 16px rgb(0 0 0 / 60%);
    color: var(--gold-soft);
  }
  .sheet { padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); }
  .toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

.ai-badge { margin: 0; padding: 6px 24px; border-bottom: 1px solid var(--border); background: var(--panel-raised); color: var(--gold-soft); font-size: .8125rem; text-align: center; }
.more-nav { display: grid; gap: 4px; padding: 8px 16px 16px; }
.more-nav .nav-item { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 52px; padding: 8px 12px; font-size: 1rem; border: 1px solid transparent; }
.more-nav .nav-item[aria-current="page"]::before, .more-nav .nav-item[aria-current="page"]::after { display: none; }
.view-content { display: grid; gap: 20px; min-width: 0; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 16px; border: 1px solid var(--bronze); border-radius: 3px; background: transparent; color: var(--gold); }
.button:hover { background: rgb(196 159 108 / 12%); }
.nav-soon { cursor: default; }
@media (min-width: 760px) { .tabbar-item { display: none; } .topnav .nav-item { flex-shrink: 0; } }
@media (max-width: 759px) { .ai-badge { padding: 6px 12px; } }