:root {
        --gk-nav-height: 0px;
        --gk-nav-bg: #ffffff;
        --gk-nav-bg-soft: #f8fafc;
        --gk-nav-text: #0f172a;
        --gk-nav-muted: #64748b;
        --gk-nav-line: rgba(15, 23, 42, .12);
        --gk-nav-yellow: #fbbf24;
        --gk-nav-green: #22c55e;
        --gk-nav-red: #f43f5e;
      }

      * { box-sizing: border-box; }

      body {
        margin: 0;
        padding-top: 0 !important;
        overflow-x: hidden;
      }

      .gk-topbar {
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        min-height: 78px;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--gk-nav-text);
        background: linear-gradient(90deg, var(--gk-nav-bg), var(--gk-nav-bg-soft)) !important;
        border: 0;
        border-bottom: 1px solid var(--gk-nav-line);
        box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      }

      .gk-nav-inner {
        width: min(1560px, calc(100% - 32px));
        min-height: 78px;
        margin: 0 auto;
        padding: 9px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
      }

      .gk-nav-head { display: contents; }

      .gk-brand {
        min-width: 300px;
        display: inline-flex;
        align-items: center;
        gap: 13px;
        color: var(--gk-nav-text);
        text-decoration: none;
      }

      .gk-logo {
        width: 58px;
        height: 58px;
        flex: 0 0 auto;
        display: inline-grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid rgba(15, 23, 42, .10);
        border-radius: 17px;
        background: #fff;
        box-shadow: 0 9px 22px rgba(15, 23, 42, .10);
      }

      .gk-logo img {
        width: 53px;
        height: 53px;
        display: block;
        object-fit: contain;
      }

      .gk-brand-text {
        min-width: 0;
        line-height: 1.05;
      }

      .gk-brand-main {
        display: block;
        color: #0f172a;
        font-size: 25px;
        font-weight: 950;
        letter-spacing: -.6px;
        white-space: nowrap;
      }

      .gk-brand-sub {
        display: block;
        margin-top: 6px;
        color: var(--gk-nav-muted);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 2.6px;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .gk-nav-links {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: wrap;
      }

      .gk-pill {
        min-height: 43px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 15px;
        border: 1px solid rgba(15, 23, 42, .13);
        border-radius: 999px;
        color: #0f172a;
        background: #f8fafc;
        box-shadow: 0 5px 14px rgba(15, 23, 42, .04);
        font: inherit;
        font-size: 14px;
        font-weight: 850;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
      }

      .gk-pill:hover { background: #eef2f7; }

      .gk-pill.active {
        color: #111827;
        border-color: transparent;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        box-shadow: 0 11px 24px rgba(245, 158, 11, .20);
      }

      .gk-pill.primary {
        color: #fff;
        border-color: transparent;
        background: linear-gradient(135deg, #0f766e, #1f4e78);
      }

      .gk-pill.danger {
        color: #9f1239;
        border-color: #fecdd3;
        background: #fff1f2;
      }

      .gk-pill.danger:hover { background: #ffe4e6; }

      .gk-api {
        cursor: default;
        background: #fffbeb;
        border-color: #fde68a;
      }

      .gk-api-dot {
        width: 10px;
        height: 10px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: var(--gk-nav-yellow);
        box-shadow: 0 0 0 5px rgba(251, 191, 36, .15);
      }

      .gk-api.ok {
        background: #f0fdf4;
        border-color: #bbf7d0;
      }

      .gk-api.ok .gk-api-dot {
        background: var(--gk-nav-green);
        box-shadow: 0 0 0 5px rgba(34, 197, 94, .13);
      }

      .gk-api.err {
        background: #fff1f2;
        border-color: #fecdd3;
      }

      .gk-api.err .gk-api-dot {
        background: var(--gk-nav-red);
        box-shadow: 0 0 0 5px rgba(244, 63, 94, .13);
      }

      .gk-admin-menu {
        position: relative;
        display: none;
      }

      .gk-admin-menu.is-authorized { display: block; }
      .gk-admin-menu > summary { list-style: none; }
      .gk-admin-menu > summary::-webkit-details-marker { display: none; }
      .gk-admin-menu > summary::after { content: "▾"; font-size: 11px; }

      .gk-admin-dropdown {
        position: absolute;
        top: calc(100% + 9px);
        right: 0;
        z-index: 1100;
        width: 225px;
        padding: 8px;
        display: grid;
        gap: 5px;
        border: 1px solid var(--gk-nav-line);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 20px 45px rgba(15, 23, 42, .16);
      }

      .gk-admin-dropdown .gk-pill {
        width: 100%;
        justify-content: flex-start;
        border: 0;
        border-radius: 11px;
        box-shadow: none;
      }

      .gk-menu-toggle {
        display: none;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--gk-nav-line);
        border-radius: 13px;
        color: #0f172a;
        background: #fff;
        font-size: 23px;
        cursor: pointer;
      }

      .gk-page-toolbar {
        top: var(--gk-nav-height) !important;
        z-index: 900 !important;
      }

      body.gk-nav-page-login {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 0 !important;
      }

      body.gk-nav-page-login > main.shell {
        width: min(1080px, calc(100% - 48px));
        margin: 24px auto;
      }

      @media (max-width: 1180px) {
        .gk-nav-inner {
          width: calc(100% - 22px);
          min-height: 72px;
          display: block;
        }

        .gk-nav-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
        }

        .gk-brand { min-width: 0; }
        .gk-menu-toggle { display: inline-grid; place-items: center; flex: 0 0 auto; }

        .gk-nav-links {
          display: none;
          width: 100%;
          padding: 11px 0 4px;
          justify-content: flex-start;
          align-items: stretch;
        }

        .gk-topbar.menu-open .gk-nav-links { display: flex; }
        .gk-pill { min-height: 40px; }
        .gk-admin-menu { width: 100%; }
        .gk-admin-menu > summary { width: max-content; }

        .gk-admin-dropdown {
          position: static;
          width: min(100%, 420px);
          margin-top: 7px;
          box-shadow: none;
        }
      }

      @media (max-width: 640px) {
        .gk-brand-main { font-size: 21px; }
        .gk-brand-sub { font-size: 8px; letter-spacing: 1.7px; }
        .gk-logo { width: 51px; height: 51px; border-radius: 15px; }
        .gk-logo img { width: 47px; height: 47px; }
        .gk-nav-links { flex-direction: column; }
        .gk-pill { width: 100%; justify-content: flex-start; }
        .gk-api { width: max-content; }
        .gk-admin-menu > summary,
        .gk-admin-dropdown { width: 100%; }
      }