/*
 * ==========================================================
 * VIBE WEB SHELL 2.0
 * ==========================================================
 */

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;
}

html{
  /*
   * VIBE_SHELL_STABLE_SCROLLBAR_V11
   *
   * Prevent the whole application from shifting horizontally
   * when one route is taller than another.
   */
  scrollbar-gutter:stable;
}

body{
  overflow-y:scroll;
}

body{
  background:
    radial-gradient(
      circle at 65% -10%,
      rgba(139,124,255,.075),
      transparent 34rem
    ),
    var(--vb-bg);

  color:var(--vb-text);

  font:
    13px/1.5
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

a{
  color:inherit;
  text-decoration:none;
}


/* ==========================================================
   ACCENT SPECTRUM
   ========================================================== */

[data-vb-accent="neutral"]{
  --vb-accent:#8b7cff;
  --vb-accent-soft:rgba(139,124,255,.13);
}

[data-vb-accent="economy"]{
  --vb-accent:#53e6ad;
  --vb-accent-soft:rgba(83,230,173,.12);
}

[data-vb-accent="market"]{
  --vb-accent:#aa78ff;
  --vb-accent-soft:rgba(170,120,255,.12);
}

[data-vb-accent="boss"]{
  --vb-accent:#ff685f;
  --vb-accent-soft:rgba(255,104,95,.12);
}

[data-vb-accent="xp"]{
  --vb-accent:#5db7ff;
  --vb-accent-soft:rgba(93,183,255,.12);
}

[data-vb-accent="vip"]{
  --vb-accent:#f6c768;
  --vb-accent-soft:rgba(246,199,104,.12);
}

[data-vb-accent="farm"]{
  --vb-accent:#8ee35d;
  --vb-accent-soft:rgba(142,227,93,.11);
}


/* ==========================================================
   SHELL
   ========================================================== */

/*
 * ==========================================================
 * VIBE SHELL LAYOUT TOKENS 1.2
 * ==========================================================
 *
 * These values control the visual rhythm of the entire shell.
 * Future pages should not invent their own outer page margins.
 */

:root{
  /*
   * VIBE_SHELL_RESPONSIVE_SPACING_V13
   *
   * Optical workspace spacing.
   * The gutter grows with the viewport instead of using
   * one fixed desktop value.
   */
  --vs-page-inline:
    clamp(
      28px,
      2.35vw,
      52px
    );

  --vs-page-top:
    clamp(
      30px,
      2.1vw,
      40px
    );

  --vs-page-bottom:72px;

  /*
   * Keep content from becoming excessively wide on
   * ultrawide displays, while avoiding the old
   * narrow centred-column effect.
   */
  --vs-page-max:1600px;
}


.vs-shell{
  min-height:100vh;

  display:grid;

  grid-template-columns:
    218px
    minmax(0,1fr);
}


.vs-sidebar{
  position:sticky;
  top:0;

  height:100vh;

  padding:
    18px
    13px;

  overflow-y:auto;

  border-right:
    1px solid
    var(--vb-border);

  background:
    rgba(8,10,15,.82);

  backdrop-filter:
    blur(22px);
}


.vs-brand{
  display:flex;
  align-items:center;
  gap:10px;

  min-height:42px;

  padding:
    0
    10px
    16px;

  font-size:15px;
  font-weight:900;
  letter-spacing:.08em;
}


.vs-brand-mark{
  width:27px;
  height:27px;

  display:grid;
  place-items:center;

  border-radius:9px;

  background:
    linear-gradient(
      135deg,
      #8b7cff,
      #ba74ff
    );

  box-shadow:
    0 8px 28px
    rgba(139,124,255,.22);

  color:white;
  font-size:11px;
}


.vs-nav-section{
  margin-top:17px;
}


.vs-nav-title{
  /*
   * VIBE_SIDEBAR_DIVIDER_V12
   *
   * Section labels are part of the global visual language:
   * accent marker + fading structural rule.
   */
  display:flex;
  align-items:center;
  gap:7px;

  min-height:16px;

  padding:
    0
    8px
    7px;

  color:
    rgba(180,188,204,.58);

  font-size:8px;
  font-weight:850;
  line-height:1;

  letter-spacing:.14em;
  text-transform:uppercase;

  white-space:nowrap;
}


.vs-nav-title::before{
  content:"";

  flex:
    0
    0
    3px;

  width:3px;
  height:3px;

  border-radius:999px;

  background:
    var(--vb-accent);

  box-shadow:
    0 0 8px
    var(--vb-accent-soft);

  opacity:.78;
}


.vs-nav-title::after{
  content:"";

  flex:1;

  min-width:14px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.105),
      rgba(255,255,255,.035) 52%,
      transparent
    );
}


.vs-nav-link{
  min-height:34px;

  display:flex;
  align-items:center;

  margin:2px 0;

  padding:
    7px
    10px;

  border:
    1px solid
    transparent;

  border-radius:
    var(--vb-radius-sm);

  color:
    var(--vb-text-soft);

  font-weight:650;

  transition:
    background
      var(--vb-motion-fast)
      var(--vb-ease),
    color
      var(--vb-motion-fast)
      var(--vb-ease),
    border-color
      var(--vb-motion-fast)
      var(--vb-ease);
}


/*
 * ==========================================================
 * VIBE SIDEBAR ICON CORE 1.0
 * ==========================================================
 */

.vs-nav-link{
  gap:9px;
}


.vs-nav-icon{
  width:18px;
  height:18px;

  flex:
    0
    0
    18px;

  display:grid;
  place-items:center;

  color:
    rgba(174,183,199,.62);

  transition:
    color
      var(--vb-motion-fast)
      var(--vb-ease),
    opacity
      var(--vb-motion-fast)
      var(--vb-ease),
    transform
      var(--vb-motion-fast)
      var(--vb-ease),
    filter
      var(--vb-motion-fast)
      var(--vb-ease);
}


.vs-nav-icon svg{
  display:block;

  width:17px;
  height:17px;

  overflow:visible;
}


.vs-nav-label{
  min-width:0;

  overflow:hidden;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.vs-nav-link:hover
.vs-nav-icon{
  color:
    var(--vb-text);

  transform:
    translateX(1px);
}


.vs-nav-link.active
.vs-nav-icon{
  color:
    var(--vb-accent);

  filter:
    drop-shadow(
      0
      0
      5px
      var(--vb-accent-soft)
    );
}


.vs-nav-link:hover{
  background:
    var(--vb-surface-2);

  color:
    var(--vb-text);
}


.vs-nav-link.active{
  border-color:
    rgba(139,124,255,.20);

  background:
    var(--vb-accent-soft);

  color:
    var(--vb-text);
}


.vs-main{
  min-width:0;
}


.vs-topbar{
  position:sticky;
  top:0;
  z-index:20;

  min-height:58px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  padding:
    0
    var(--vs-page-inline);

  border-bottom:
    1px solid
    var(--vb-border);

  background:
    rgba(9,11,16,.80);

  backdrop-filter:
    blur(22px);
}


.vs-top-title{
  min-width:0;
}


.vs-top-title strong{
  display:block;

  font-size:13px;
}


.vs-top-path{
  margin-top:1px;

  color:
    var(--vb-muted);

  font-size:10px;
}


.vs-top-actions{
  display:flex;
  align-items:center;
  gap:8px;
}


.vs-page{
  /*
   * VIBE_SHELL_PAGE_INSET_V12
   *
   * Outer page rhythm is controlled entirely
   * through VIBE Shell layout tokens.
   */
  width:
    min(
      100%,
      var(--vs-page-max)
    );

  /*
   * Centre only on genuinely wide workspaces.
   * On normal desktop widths this still fills
   * the available application area.
   */
  margin:
    0
    auto;

  padding:
    var(--vs-page-top)
    var(--vs-page-inline)
    var(--vs-page-bottom);
}


.vs-page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;

  margin-bottom:22px;
}


.vs-eyebrow{
  margin-bottom:6px;

  color:
    var(--vb-accent);

  font-size:9px;
  font-weight:850;
  letter-spacing:.13em;
  text-transform:uppercase;
}


.vs-page h1{
  margin:0;

  font-size:
    clamp(
      24px,
      3vw,
      30px
    );

  line-height:1.1;

  letter-spacing:-.035em;
}


.vs-page-description{
  max-width:650px;

  margin:
    8px
    0
    0;

  color:
    var(--vb-muted);

  font-size:12px;
}


.vs-card-link{
  display:block;

  height:100%;
}


.vs-card-link .vb-card{
  height:100%;
}


.vs-route-arrow{
  margin-top:16px;

  color:
    var(--vb-accent);

  font-size:11px;
  font-weight:750;
}


.vs-component-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}


.vs-accent-preview{
  width:100%;
  height:4px;

  margin-top:14px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--vb-accent),
      transparent
    );

  box-shadow:
    0 0 20px
    var(--vb-accent-soft);
}


.vs-login{
  color:
    var(--vb-text-soft);

  font-size:11px;
}


.vs-dev-badge{
  display:inline-flex;
  align-items:center;

  min-height:24px;

  padding:
    4px
    8px;

  border:
    1px solid
    var(--vb-border);

  border-radius:
    var(--vb-radius-round);

  color:
    var(--vb-muted);

  font-size:9px;
  font-weight:800;
  letter-spacing:.09em;
}


@media(max-width:820px){

  .vs-shell{
    display:block;
  }

  .vs-sidebar{
    position:relative;

    width:100%;
    height:auto;

    display:flex;

    padding:
      8px
      12px;

    overflow-x:auto;
    overflow-y:hidden;

    border-right:0;
    border-bottom:
      1px solid
      var(--vb-border);
  }

  .vs-brand{
    flex:0 0 auto;

    padding:
      0
      16px
      0
      0;
  }

  .vs-nav-section{
    display:flex;

    flex:0 0 auto;

    margin:0;
  }

  .vs-nav-title{
    display:none;
  }

  .vs-nav-link{
    white-space:nowrap;
  }

  .vs-topbar{
    padding:
      0
      16px;
  }

  .vs-page{
    width:100%;

    padding:
      24px
      16px
      52px;
  }

}


@media(max-width:560px){

  .vs-top-path{
    display:none;
  }

  .vs-page-head{
    display:block;
  }

}


/*
 * ==========================================================
 * VIBE HUD SCALE 0.6
 * ==========================================================
 */

/* VIBE_HUD_SCALE_V20 */

:root{

  --vs-hud-scale:.60;

  --vs-sidebar-width:148px;

  --vs-topbar-height:40px;

  --vs-nav-row-height:28px;

  --vs-nav-icon-size:14px;

  --vs-hud-font:11px;

  --vs-hud-section-font:10px;
}


.vs-shell{
  grid-template-columns:
    var(--vs-sidebar-width)
    minmax(0,1fr);
}


.vs-sidebar{
  padding:
    10px
    8px;
}


.vs-brand{
  min-height:34px;

  padding:
    5px
    6px;
}


.vs-brand-mark{
  width:22px;
  height:22px;
}


.vs-brand-name{
  font-size:13px;
}


.vs-nav-section{
  margin-top:7px;
}


.vs-nav-title{
  min-height:13px;

  padding:
    0
    6px;

  font-size:
    var(--vs-hud-section-font);

  line-height:1.1;
}


.vs-nav-title::before{
  width:2px;
  height:5px;

  border-radius:999px;
}


.vs-nav-link{
  min-height:
    var(--vs-nav-row-height);

  gap:6px;

  padding:
    4px
    6px;

  font-size:
    var(--vs-hud-font);

  line-height:1.2;
}


.vs-nav-label{
  font-size:
    var(--vs-hud-font);
}


.vs-nav-icon{
  width:
    var(--vs-nav-icon-size);

  height:
    var(--vs-nav-icon-size);

  flex:
    0 0
    var(--vs-nav-icon-size);
}


.vs-nav-icon svg{
  width:
    var(--vs-nav-icon-size);

  height:
    var(--vs-nav-icon-size);
}


.vs-topbar{
  min-height:
    var(--vs-topbar-height);
}


.vs-topbar-title{
  font-size:12px;
}


.vs-topbar-subtitle{
  font-size:11px;
}


.vs-page h1{
  font-size:
    clamp(
      28px,
      2.6vw,
      36px
    );
}


.vs-page-description{
  max-width:760px;

  font-size:14px;

  line-height:1.55;
}


@media(max-width:820px){

  .vs-shell{
    grid-template-columns:1fr;
  }


  .vs-sidebar{
    width:100%;
    height:auto;

    padding:
      7px
      10px;
  }


  .vs-topbar{
    min-height:42px;
  }


  .vs-nav-link{
    min-height:30px;
  }

}

/* ==========================================================
 * VIBE_SIDEBAR_SIZE_V1
 * Larger desktop navigation.
 * Mobile layout remains owned by existing responsive CSS.
 * ========================================================== */

@media (min-width: 1000px){

  #vibeShell{
    grid-template-columns:
      288px
      minmax(0,1fr)
      !important;
  }

  .vs-sidebar{
    width:288px !important;
    min-width:288px !important;
    flex:0 0 288px !important;
  }

  .vs-sidebar nav a{
    min-height:44px;
    padding:10px 12px;
    font-size:14px;
  }

  .vs-sidebar .vs-brand{
    min-height:54px;
  }

}

/* ==========================================================
 * VIBE_SIDEBAR_TABS_V2
 * Larger actual navigation tabs, not only sidebar width.
 * ========================================================== */

@media (min-width:1000px){

  .vs-sidebar{
    width:288px !important;
    min-width:288px !important;
  }

  /*
   * Actual clickable sidebar tabs.
   * Exclude only the VIBE logo.
   */
  .vs-sidebar a[href]:not(.vs-brand){
    min-height:50px !important;
    padding:12px 15px !important;

    font-size:15px !important;
    line-height:1.25 !important;
    font-weight:600;

    gap:12px !important;

    border-radius:12px !important;

    display:flex;
    align-items:center;
  }


  /*
   * Icons inside navigation tabs.
   */
  .vs-sidebar a[href]:not(.vs-brand) svg{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
  }

  .vs-sidebar a[href]:not(.vs-brand) img{
    width:20px !important;
    height:20px !important;
  }


  /*
   * Group labels such as ACTIVITY / ECONOMY.
   */
  .vs-sidebar :is(
    .vs-nav-title,
    .vs-section-title,
    .vs-nav-group-title
  ){
    font-size:11px !important;
    letter-spacing:.08em;
    margin-top:14px;
    margin-bottom:6px;
  }

}

/* VIBE_SIDEBAR_WIDTH_V3 */
@media (min-width:1000px){

  #vibeShell{
    grid-template-columns:
      260px
      minmax(0,1fr)
      !important;
  }

  .vs-sidebar{
    width:260px !important;
    min-width:260px !important;
    flex:0 0 260px !important;
  }

}

/* ==========================================================
 * VIBE_SIDEBAR_COMPACT_V4
 *
 * Compact but still comfortable desktop navigation.
 * ========================================================== */

@media (min-width:1000px){

  /*
   * Navigation item
   */

  .vs-sidebar a[href]:not(.vs-brand){
    min-height:42px !important;

    padding:
      8px
      12px
      !important;

    margin:
      2px
      6px
      !important;

    gap:10px !important;

    border:
      1px solid
      transparent;

    border-radius:
      10px !important;

    font-size:
      14px !important;

    line-height:
      1.15 !important;

    font-weight:
      500;

    transition:
      background-color .14s ease,
      border-color .14s ease,
      color .14s ease,
      transform .14s ease;
  }


  /*
   * Icons
   */

  .vs-sidebar
  a[href]:not(.vs-brand)
  svg{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;

    opacity:.86;
  }


  /*
   * Hover
   */

  .vs-sidebar
  a[href]:not(.vs-brand):hover{
    background:
      rgba(
        255,
        255,
        255,
        .045
      );

    border-color:
      rgba(
        255,
        255,
        255,
        .07
      );

    transform:
      translateX(2px);
  }


  /*
   * Active route.
   *
   * Existing page accent/background remains,
   * this only gives the active tab more structure.
   */

  .vs-sidebar
  a[href][aria-current="page"]:not(.vs-brand),

  .vs-sidebar
  a[href].is-active:not(.vs-brand),

  .vs-sidebar
  a[href].active:not(.vs-brand){

    border-color:
      currentColor;

    box-shadow:
      inset 3px 0 0
      currentColor;

    font-weight:
      600;
  }


  /*
   * Less empty vertical space
   * between navigation groups.
   */

  .vs-sidebar :is(
    .vs-nav-title,
    .vs-section-title,
    .vs-nav-group-title
  ){
    margin-top:
      10px !important;

    margin-bottom:
      4px !important;

    font-size:
      10px !important;

    line-height:
      1.1 !important;
  }


  /*
   * Keep logo separate from nav density.
   */

  .vs-brand{
    margin-bottom:
      10px !important;
  }

}

/* ==========================================================
 * VIBE_SIDEBAR_CLASSIC_PLUS_V5
 *
 * Original compact VIBE navigation,
 * only slightly larger for readability.
 * ========================================================== */

@media (min-width:1000px){

  .vs-sidebar a[href]:not(.vs-brand){
    min-height:36px !important;

    padding:
      6px
      10px
      !important;

    margin:
      1px
      4px
      !important;

    gap:
      9px !important;

    font-size:
      13px !important;

    line-height:
      1.15 !important;

    font-weight:
      400 !important;

    border-radius:
      8px !important;

    border-color:
      transparent !important;

    box-shadow:
      none !important;

    transform:
      none !important;

    transition:
      background-color .12s ease,
      color .12s ease;
  }


  .vs-sidebar
  a[href]:not(.vs-brand)
  svg{
    width:
      17px !important;

    height:
      17px !important;

    min-width:
      17px !important;

    opacity:
      .82;
  }


  /*
   * Hover remains subtle.
   */

  .vs-sidebar
  a[href]:not(.vs-brand):hover{
    transform:
      none !important;

    border-color:
      transparent !important;

    box-shadow:
      none !important;
  }


  /*
   * Remove the V4 white/currentColor outline.
   * Existing original active background remains.
   */

  .vs-sidebar
  a[href][aria-current="page"]:not(.vs-brand),

  .vs-sidebar
  a[href].is-active:not(.vs-brand),

  .vs-sidebar
  a[href].active:not(.vs-brand){
    border-color:
      transparent !important;

    box-shadow:
      none !important;

    font-weight:
      500 !important;
  }


  /*
   * Compact category spacing.
   */

  .vs-sidebar :is(
    .vs-nav-title,
    .vs-section-title,
    .vs-nav-group-title
  ){
    margin-top:
      8px !important;

    margin-bottom:
      3px !important;

    font-size:
      10px !important;

    line-height:
      1 !important;
  }


  .vs-brand{
    margin-bottom:
      8px !important;
  }

}

/* ==========================================================
 * VIBE_SIDEBAR_FONT_V6
 * Same compact geometry, stronger typography.
 * ========================================================== */

@media (min-width:1000px){

  .vs-sidebar
  a[href]:not(.vs-brand){
    font-size:
      14px !important;

    font-weight:
      600 !important;

    letter-spacing:
      -.01em;
  }


  .vs-sidebar
  a[href][aria-current="page"]:not(.vs-brand),

  .vs-sidebar
  a[href].is-active:not(.vs-brand),

  .vs-sidebar
  a[href].active:not(.vs-brand){
    font-weight:
      700 !important;
  }


  .vs-sidebar :is(
    .vs-nav-title,
    .vs-section-title,
    .vs-nav-group-title
  ){
    font-size:
      11px !important;

    font-weight:
      700 !important;

    letter-spacing:
      .075em;
  }

}

/* ==========================================================
 * VIBE_SIDEBAR_MONO_V7
 * Larger compact monospace-style navigation.
 * ========================================================== */

@media (min-width:1000px){

  .vs-sidebar
  a[href]:not(.vs-brand){

    font-family:
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
      !important;

    font-size:
      15.5px !important;

    font-weight:
      600 !important;

    letter-spacing:
      -0.025em !important;

    line-height:
      1.1 !important;
  }


  .vs-sidebar
  a[href][aria-current="page"]:not(.vs-brand),

  .vs-sidebar
  a[href].is-active:not(.vs-brand),

  .vs-sidebar
  a[href].active:not(.vs-brand){

    font-weight:
      700 !important;
  }


  /*
   * Section labels
   */

  .vs-sidebar :is(
    .vs-nav-title,
    .vs-section-title,
    .vs-nav-group-title
  ){

    font-family:
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      monospace
      !important;

    font-size:
      11.5px !important;

    font-weight:
      700 !important;

    letter-spacing:
      .08em !important;
  }


  /*
   * Slightly larger icons to match text,
   * while keeping the 36px compact tab height.
   */

  .vs-sidebar
  a[href]:not(.vs-brand)
  svg{

    width:
      18px !important;

    height:
      18px !important;

    min-width:
      18px !important;
  }

}

/* ==========================================================
 * VIBE_SIDEBAR_MONO_V8
 *
 * Narrower sidebar + larger monospace typography.
 * ========================================================== */

@media (min-width:1000px){

  /*
   * Width:
   * 260px -> 232px
   */

  #vibeShell{
    grid-template-columns:
      232px
      minmax(0,1fr)
      !important;
  }

  .vs-sidebar{
    width:
      232px !important;

    min-width:
      232px !important;

    flex:
      0 0 232px !important;
  }


  /*
   * Navigation typography.
   */

  .vs-sidebar
  a[href]:not(.vs-brand){

    font-family:
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      monospace
      !important;

    font-size:
      18px !important;

    font-weight:
      650 !important;

    letter-spacing:
      -0.035em !important;

    line-height:
      1.05 !important;

    /*
     * Preserve compact vertical rhythm.
     */

    min-height:
      36px !important;

    padding:
      5px 8px
      !important;

    margin:
      1px 3px
      !important;

    gap:
      8px !important;
  }


  /*
   * Active tab.
   */

  .vs-sidebar
  a[href][aria-current="page"]:not(.vs-brand),

  .vs-sidebar
  a[href].is-active:not(.vs-brand),

  .vs-sidebar
  a[href].active:not(.vs-brand){

    font-weight:
      750 !important;
  }


  /*
   * Icons slightly larger to balance 18px text.
   */

  .vs-sidebar
  a[href]:not(.vs-brand)
  svg{

    width:
      19px !important;

    height:
      19px !important;

    min-width:
      19px !important;
  }


  /*
   * Category headers.
   */

  .vs-sidebar :is(
    .vs-nav-title,
    .vs-section-title,
    .vs-nav-group-title
  ){

    font-family:
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      monospace
      !important;

    font-size:
      12px !important;

    font-weight:
      700 !important;

    letter-spacing:
      .055em !important;
  }

}

/* VIBE_SDK_UI_TOKENS_BEGIN */

/*
 * GENERATED FROM:
 * /opt/vibe-sdk/src/vibe_sdk/ui/tokens.json
 *
 * Do not tune these values here.
 * Change SDK tokens and regenerate.
 */

@media (min-width:1000px){

  #vibeShell{
    grid-template-columns:
      232px
      minmax(0,1fr)
      !important;
  }

  .vs-sidebar{
    width:
      232px
      !important;

    min-width:
      232px
      !important;

    flex:
      0 0 232px
      !important;
  }


  /*
   * Actual visible navigation text.
   */

  .vs-sidebar
  .vs-nav-link
  .vs-nav-label{
    font-family:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace
      !important;

    font-size:
      18px
      !important;

    font-weight:
      800
      !important;

    line-height:
      1.05
      !important;

    letter-spacing:
      -.035em
      !important;
  }


  /*
   * Compact clickable row.
   */

  .vs-sidebar
  .vs-nav-link{
    min-height:
      36px
      !important;

    padding:
      5px 8px
      !important;

    gap:
      8px
      !important;
  }


  /*
   * Active label.
   */

  .vs-sidebar
  .vs-nav-link.active
  .vs-nav-label{
    font-weight:
      850
      !important;
  }


  /*
   * Icons.
   */

  .vs-sidebar
  .vs-nav-icon,
  .vs-sidebar
  .vs-nav-icon svg{
    width:
      18px
      !important;

    height:
      18px
      !important;
  }


  /*
   * Section headings.
   */

  .vs-sidebar
  .vs-nav-title{
    font-family:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace
      !important;

    font-size:
      12px
      !important;

    font-weight:
      800
      !important;

    letter-spacing:
      .07em
      !important;
  }

}

/* VIBE_SDK_UI_TOKENS_END */

/* VIBE_SDK_NEON_BEGIN */

/*
 * Generated from VIBE UI SDK.
 *
 * Neon typography for shared
 * Web / Desktop / Android visual language.
 */

@media (min-width:1000px){

  /*
   * Normal navigation.
   */

  .vs-sidebar
  .vs-nav-link
  .vs-nav-label{
    color:
      #f4f2ff
      !important;

    text-shadow:
      0 0 2px rgba(255,255,255,.30), 0 0 7px rgba(139,124,255,.30)
      !important;

    transition:
      color .14s ease,
      text-shadow .14s ease
      !important;
  }


  /*
   * Hover.
   */

  .vs-sidebar
  .vs-nav-link:hover
  .vs-nav-label{
    color:
      #ffffff
      !important;

    text-shadow:
      0 0 2px rgba(255,255,255,.55), 0 0 8px rgba(139,124,255,.55)
      !important;
  }


  /*
   * Active route:
   * stronger neon tube effect.
   */

  .vs-sidebar
  .vs-nav-link.active
  .vs-nav-label{
    color:
      #d9d3ff
      !important;

    text-shadow:
      0 0 2px rgba(255,255,255,.95), 0 0 7px rgba(139,124,255,.90), 0 0 15px rgba(139,124,255,.58)
      !important;
  }


  /*
   * Icons glow too.
   */

  .vs-sidebar
  .vs-nav-icon{
    filter:
      drop-shadow(0 0 4px rgba(139,124,255,.30))
      !important;

    transition:
      color .14s ease,
      filter .14s ease
      !important;
  }


  .vs-sidebar
  .vs-nav-link:hover
  .vs-nav-icon{
    filter:
      drop-shadow(
        0 0 5px
        rgba(139,124,255,.55)
      )
      !important;
  }


  .vs-sidebar
  .vs-nav-link.active
  .vs-nav-icon{
    filter:
      drop-shadow(0 0 5px rgba(139,124,255,.90)) drop-shadow(0 0 11px rgba(139,124,255,.45))
      !important;
  }


  /*
   * Section names get a much softer glow,
   * otherwise the sidebar becomes noisy.
   */

  .vs-sidebar
  .vs-nav-title{
    text-shadow:
      0 0 7px
      rgba(139,124,255,.22);
  }

}

/* VIBE_SDK_NEON_END */

/* VIBE_SDK_SECTION_NEON_BEGIN */

/*
 * Section neon v2:
 * - much tighter text glow
 * - less outer blur to avoid clipping
 * - hover and active always follow section accent
 */

@media (min-width:1000px){

  /*
   * Base label:
   * mostly neutral, very soft accent hint.
   */

  .vs-sidebar
  .vs-nav-link
  .vs-nav-label{
    color:
      var(--vb-text-soft)
      !important;

    text-shadow:
      0 0 1px
      rgba(255,255,255,.10),

      0 0 4px
      color-mix(
        in srgb,
        var(--vb-accent) 12%,
        transparent
      )
      !important;
  }


  /*
   * Hover:
   * accent color of current section,
   * not fixed purple.
   */

  .vs-sidebar
  .vs-nav-link:hover
  .vs-nav-label{
    color:
      color-mix(
        in srgb,
        var(--vb-accent) 42%,
        white
      )
      !important;

    text-shadow:
      0 0 1px
      rgba(255,255,255,.45),

      0 0 4px
      color-mix(
        in srgb,
        var(--vb-accent) 42%,
        transparent
      ),

      0 0 7px
      color-mix(
        in srgb,
        var(--vb-accent) 22%,
        transparent
      )
      !important;
  }


  /*
   * Active:
   * bright text tube effect,
   * but without huge external haze.
   */

  .vs-sidebar
  .vs-nav-link.active
  .vs-nav-label,

  .vs-sidebar
  .vs-nav-link[aria-current="page"]
  .vs-nav-label{
    color:
      color-mix(
        in srgb,
        var(--vb-accent) 62%,
        white
      )
      !important;

    text-shadow:
      0 0 1px
      rgba(255,255,255,.92),

      0 0 3px
      color-mix(
        in srgb,
        var(--vb-accent) 78%,
        white 8%
      ),

      0 0 6px
      color-mix(
        in srgb,
        var(--vb-accent) 42%,
        transparent
      )
      !important;
  }


  /*
   * Icons:
   * much smaller glow than text.
   */

  .vs-sidebar
  .vs-nav-icon{
    filter:
      drop-shadow(
        0 0 2px
        color-mix(
          in srgb,
          var(--vb-accent) 10%,
          transparent
        )
      )
      !important;
  }


  .vs-sidebar
  .vs-nav-link:hover
  .vs-nav-icon{
    color:
      var(--vb-accent)
      !important;

    filter:
      drop-shadow(
        0 0 3px
        color-mix(
          in srgb,
          var(--vb-accent) 38%,
          transparent
        )
      )
      !important;
  }


  .vs-sidebar
  .vs-nav-link.active
  .vs-nav-icon,

  .vs-sidebar
  .vs-nav-link[aria-current="page"]
  .vs-nav-icon{
    color:
      var(--vb-accent)
      !important;

    filter:
      drop-shadow(
        0 0 3px
        color-mix(
          in srgb,
          var(--vb-accent) 55%,
          transparent
        )
      )
      !important;
  }


  /*
   * Keep active background tinted by section accent,
   * but subtle.
   */

  .vs-sidebar
  .vs-nav-link.active,

  .vs-sidebar
  .vs-nav-link[aria-current="page"]{
    background:
      color-mix(
        in srgb,
        var(--vb-accent) 10%,
        transparent
      )
      !important;

    border-color:
      color-mix(
        in srgb,
        var(--vb-accent) 14%,
        transparent
      )
      !important;
  }

}

/* VIBE_SDK_SECTION_NEON_END */


/* VIBE_SDK_SECTION_NEON_SAFETY_V2 */
@media (min-width:1000px){

  .vs-sidebar
  .vs-nav-link:hover
  .vs-nav-label,

  .vs-sidebar
  .vs-nav-link.active
  .vs-nav-label,

  .vs-sidebar
  .vs-nav-link[aria-current="page"]
  .vs-nav-label{
    text-shadow: inherit !important;
  }

}

/* VIBE_APP_UI_SDK_WEB_V1_BEGIN */

/*
 * Shared Web adapter generated from
 * /opt/vibe-sdk/src/vibe_sdk/ui
 *
 * Scope:
 *   .vui-app
 *
 * Platform-neutral contracts remain in SDK.
 */


/* ==========================================================
 * APPLICATION SURFACE
 * ========================================================== */

.vui-app{
  --vui-surface-radius:
    20px;

  --vui-surface-padding:
    18px;

  --vui-section-gap:
    12px;

  --vui-resource-radius:
    14px;

  --vui-progress-height:
    8px;

  padding-bottom:24px;
}


.vui-app .vb-card{
  overflow:hidden;

  border-radius:
    var(--vui-surface-radius)
    !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--vb-accent,#8b7cff) 14%,
      rgba(255,255,255,.07)
    )
    !important;

  background:
    linear-gradient(
      155deg,
      color-mix(
        in srgb,
        var(--vb-accent,#8b7cff) 4%,
        rgba(255,255,255,.022)
      ),
      rgba(255,255,255,.012)
    )
    !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.035),
    0 10px 28px
      rgba(0,0,0,.10);
}


.vui-app .vb-card-body{
  padding:
    var(--vui-surface-padding)
    !important;
}


/* ==========================================================
 * TYPOGRAPHY
 * ========================================================== */

.vui-app .vsys-card-title{
  color:
    var(--vb-text,#f4f6fb);

  font-size:
    15px
    !important;

  font-weight:
    850
    !important;

  letter-spacing:-.015em;
}


.vui-app .vsys-card-sub{
  color:
    var(--vb-text-soft,#929bad);

  font-size:
    12px;

  line-height:1.5;
}


/* ==========================================================
 * SHARED CONTROLS
 * ========================================================== */

.vui-app .vb-input,
.vui-app .vb-select{
  min-height:46px;

  border-radius:12px
    !important;

  border:
    1px solid
    rgba(255,255,255,.08)
    !important;

  background:
    rgba(0,0,0,.18)
    !important;

  color:
    var(--vb-text,#f4f6fb);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:14px;
  font-weight:750;
}


.vui-app .vb-input:focus,
.vui-app .vb-select:focus{
  outline:none;

  border-color:
    color-mix(
      in srgb,
      var(--vb-accent,#8b7cff) 50%,
      transparent
    )
    !important;

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--vb-accent,#8b7cff) 10%,
      transparent
    );
}


.vui-app .vb-button{
  min-height:44px;

  border-radius:13px
    !important;

  font-weight:800
    !important;

  transition:
    transform .12s ease,
    filter .12s ease,
    border-color .12s ease;
}


.vui-app .vb-button:hover{
  filter:brightness(1.05);
}


.vui-app .vb-button:active{
  transform:scale(.985);
}


/* ==========================================================
 * FARM RESOURCE TILES
 * ========================================================== */

.vui-farm .vfarm-resources{
  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        118px,
        1fr
      )
    );

  gap:8px;
}


.vui-farm
.vfarm-resources
>*{
  min-height:
    68px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:
    12px;

  border:
    1px solid
    rgba(255,255,255,.055);

  border-radius:
    var(--vui-resource-radius);

  background:
    rgba(0,0,0,.13);
}


.vui-farm
.vfarm-resource-label{
  color:
    var(--vb-text-soft,#929bad);

  font-size:
    10px;

  font-weight:800;

  letter-spacing:.05em;

  text-transform:uppercase;
}


.vui-farm
.vfarm-resource-value{
  margin-top:3px;

  color:
    var(--vb-text,#f4f6fb);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:
    17px;

  font-weight:
    850;
}


/* ==========================================================
 * FARM PLOTS
 * ========================================================== */

.vui-farm .vfarm-plots{
  gap:10px
    !important;
}


.vui-farm .vfarm-plot{
  overflow:hidden;

  border-radius:16px
    !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--vb-accent,#8b7cff) 13%,
      rgba(255,255,255,.065)
    )
    !important;

  background:
    color-mix(
      in srgb,
      var(--vb-accent,#8b7cff) 3%,
      rgba(0,0,0,.14)
    )
    !important;

  transition:
    transform .12s ease,
    border-color .12s ease,
    background .12s ease;
}


.vui-farm
.vfarm-plot:hover{
  transform:
    translateY(-1px);

  border-color:
    color-mix(
      in srgb,
      var(--vb-accent,#8b7cff) 25%,
      transparent
    )
    !important;
}


.vui-farm
.vfarm-status{
  color:
    var(--vb-text-soft,#929bad);

  font-size:11px;
  font-weight:700;
}


/* ==========================================================
 * FARM BUILDINGS / JOBS
 * ========================================================== */

.vui-farm
.vfarm-buildings{
  gap:10px
    !important;
}


.vui-farm
.vfarm-buildings
>*{
  border-radius:15px
    !important;
}


/* ==========================================================
 * MONEY PRINTERS
 * ========================================================== */

.vui-printers
.vsys-grid-2{
  gap:14px
    !important;
}


.vui-printers
.vsys-grid-2
>.vb-card{
  min-height:100%;
}


.vui-printers
[data-printer-buy],
.vui-printers
[data-printer-collect]{
  min-height:44px;

  border-radius:13px
    !important;

  font-weight:850
    !important;
}


.vui-printers
[data-printer-collect]{
  width:100%;
}


/* ==========================================================
 * BADGE CONTRACT
 * ========================================================== */

.vui-badge{
  min-height:
    26px;

  display:inline-flex;
  align-items:center;

  padding:
    0
    9px;

  border-radius:
    999px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--vb-accent,#8b7cff) 20%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--vb-accent,#8b7cff) 8%,
      transparent
    );

  color:
    color-mix(
      in srgb,
      var(--vb-accent,#8b7cff) 54%,
      white
    );

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:.05em;

  text-transform:uppercase;
}


/* ==========================================================
 * SHARED PROGRESS
 * ========================================================== */

.vui-progress{
  height:
    var(--vui-progress-height);

  overflow:hidden;

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.06
    );
}


.vui-progress>span{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    color-mix(
      in srgb,
      var(--vb-accent,#8b7cff)
      72%,
      transparent
    );
}


/* ==========================================================
 * RESPONSIVE
 * ========================================================== */

@media (max-width:760px){

  .vui-app{
    padding-bottom:18px;
  }


  .vui-app .vb-card-body{
    padding:15px
      !important;
  }


  .vui-farm
  .vfarm-resources{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .vui-printers
  .vsys-grid-2{
    grid-template-columns:1fr
      !important;
  }

}


@media (
  prefers-reduced-motion:
  reduce
){

  .vui-app *,
  .vui-app *::before,
  .vui-app *::after{
    scroll-behavior:auto
      !important;

    transition-duration:.01ms
      !important;

    animation-duration:.01ms
      !important;
  }

}

/* VIBE_APP_UI_SDK_WEB_V1_END */