/* VINAR Pro Shell — Premium SaaS layout (4-section topbar) */



.app-bg-ambient.hidden { display: none !important; }



@media (min-width: 1024px) {

  body.shell-pro-active {

    background: var(--bg);

  }



  body.shell-pro-active .app-shell {

    max-width: none;

    margin: 0;

    min-height: 100dvh;

    display: flex;

    flex-direction: column;

  }



  .shell-pro {

    display: grid;

    flex: 1;

    width: 100%;

    min-height: 100dvh;

    background: var(--bg);

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

    grid-template-rows: auto 1fr;

    grid-template-areas:

      "topbar"

      "main";

  }



  .shell-pro-topbar {
    grid-area: topbar;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 0 0 0 20px;
    background: var(--s1);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: var(--topbar-h, 56px);
    width: 100%;
  }

  /* §1 Logo */

  .shell-pro-logo {

    font-size: 15px;

    font-weight: 700;

    color: var(--text-1);

    text-decoration: none;

    flex-shrink: 0;

    letter-spacing: -0.02em;

  }



  .shell-pro-logo:hover {

    color: var(--brand-primary);

  }



  /* §2 Ecosystem pills */

  .shell-pro-topbar-eco {

    flex-shrink: 0;

  }



  .shell-pro-topbar-eco .ecosystem-nav {

    border: none;

    background: transparent;

    padding: 0;

    min-height: auto;

  }



  /* §3 Submenu */

  .shell-pro-topbar-sub {

    flex: 1;

    min-width: 0;

    display: flex;

    align-items: center;

  }



  .shell-subnav {

    display: flex;

    align-items: center;

    gap: 2px;

    overflow-x: auto;

    scrollbar-width: none;

    -ms-overflow-style: none;

    padding: 2px 0;

  }



  .shell-subnav::-webkit-scrollbar { display: none; }



  .shell-subnav-item {

    flex-shrink: 0;

    font-size: 13px;

    font-weight: 500;

    color: var(--text-2);

    text-decoration: none;

    padding: 7px 12px;

    border-radius: var(--r-pill);

    white-space: nowrap;

    transition:
      transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
      background 160ms ease,
      color 160ms ease;

  }



  .shell-subnav-item:active {

    transform: scale(0.97);

  }



  .shell-subnav-item:hover {

    background: var(--s2);

    color: var(--text-1);

  }



  .shell-subnav-item.is-active {

    background: var(--brand-primary-dim);

    color: var(--brand-primary);

    font-weight: 600;

  }



  .shell-subnav--vela .shell-subnav-item.is-active {

    background: #FFF4EB;

    color: #9A4E12;

  }



  .shell-subnav--wallet .shell-subnav-item.is-active {

    background: #ECFDF5;

    color: #047857;

  }

  /* Subnav overflow (More) — returning-user IA */
  .shell-subnav-more {
    position: relative;
    flex-shrink: 0;
  }

  .shell-subnav-more-trigger {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    background: transparent;
    border: 1px solid transparent;
    padding: 7px 12px;
    border-radius: var(--r-pill);
    white-space: nowrap;
    cursor: pointer;
    transition:
      transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
      background 160ms ease,
      color 160ms ease,
      border-color 160ms ease;
  }

  .shell-subnav-more-trigger:hover,
  .shell-subnav-more-trigger.is-active {
    background: var(--s2);
    color: var(--text-1);
  }

  .shell-subnav-more-trigger.is-active {
    font-weight: 600;
  }

  .shell-subnav-overflow-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 120;
    min-width: 168px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: var(--s1);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    transform-origin: top right;
    animation: subnavOverflowIn 180ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }

  @keyframes subnavOverflowIn {
    from {
      opacity: 0;
      transform: translateY(-4px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .shell-subnav-overflow-panel[hidden] {
    display: none !important;
    animation: none;
  }

  .shell-subnav-more-trigger:active {
    transform: scale(0.97);
  }

  .shell-subnav-overflow-panel .shell-subnav-item {
    display: block;
    width: 100%;
    text-align: left;
  }

  .ecosystem-nav-sticky-wrap .shell-subnav-more {
    position: static;
  }

  .ecosystem-nav-sticky-wrap .shell-subnav-overflow-panel {
    position: fixed;
    right: 12px;
    top: auto;
  }



  /* §4 Utilities — always flush right */
  .shell-pro-topbar-utils {
    grid-column: 4;
    justify-self: end;
    flex-shrink: 0;
    padding-right: 20px;
    padding-left: 8px;
    background: var(--s1);
  }

  .shell-utilities {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }

  .shell-util-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--s1);
    color: var(--text-2);
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
  }

  .shell-util-btn--icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.75;
  }

  .shell-util-btn--link {
    text-decoration: none;
  }

  .shell-util-btn:hover {
    background: var(--s2);
    color: var(--text-1);
  }

  .shell-util-btn--lang .shell-util-lang-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  /* Interaction polish — transitions, pressed + focus rings */
  .shell-util-btn {
    transition:
      background 150ms ease,
      color 150ms ease,
      border-color 150ms ease,
      transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .shell-util-btn:active {
    transform: scale(0.94);
  }

  .shell-pro-logo:focus-visible,
  .shell-subnav-item:focus-visible,
  .shell-subnav-more-trigger:focus-visible,
  .shell-util-btn:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: var(--r-pill);
  }

  .shell-pro-main {

    grid-area: main;

    overflow-y: auto;

    min-height: 0;

    padding: 20px 24px 32px;

    background: var(--bg);

  }



  .shell-pro--app .shell-pro-main {

    padding: 0;

  }



  body.shell-pro-active.shell-pro-app .back-header {

    display: none;

  }



  .shell-pro-active .bottom-nav {

    display: none !important;

  }



  /* Legacy sidebar hidden — nav moved to top subnav */
  .shell-pro-left { display: none !important; }

  body.shell-standalone-topbar {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  body.shell-standalone-topbar .shell-pro-topbar--standalone {
    position: sticky;
    top: 0;
    flex-shrink: 0;
  }

  body.shell-standalone-topbar > #ecosystem-nav-mount,
  body.shell-standalone-topbar > .journey-breadcrumb {
    display: none !important;
  }

  body.shell-standalone-topbar > .microapp-host__workspace {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  body.shell-standalone-topbar > .microapp-host__workspace > .shell {
    flex: 1;
    min-height: 0;
  }
}



@media (max-width: 1023px) {

  .shell-pro { display: none !important; }

}



/* ==========================================================================
   Skip-to-content link (a11y) — visually hidden until keyboard-focused.
   Usage: place as the first focusable element inside <body>, e.g.
     <a class="skip-to-content" href="#main-content">ข้ามไปเนื้อหาหลัก</a>
   and give the primary content region a matching id (id="main-content").
   ========================================================================== */
.skip-to-content,
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 10px 16px;
  margin: 8px;
  border-radius: 8px;
  background: var(--accent, #6d5efc);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  /* Hidden until focused, without removing it from the accessibility tree. */
  transform: translateY(-150%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.skip-to-content:focus,
.skip-to-content:focus-visible,
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .skip-to-content,
  .skip-link {
    transition: none;
  }
}