:root {

  --page:
    #f5f7fb;

  --surface:
    #ffffff;

  --surface-soft:
    #f8fafc;

  --dark:
    #091421;

  --text:
    #172231;

  --muted:
    #697586;

  --border:
    #e4e9f0;

  --purple:
    #6558f5;

  --blue:
    #238eea;

  --cyan:
    #20bada;

  --green:
    #19a974;

  --amber:
    #c9902d;

  --shadow:
    0 18px 55px
    rgba(25,39,60,.08);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


* {
  box-sizing:
    border-box;
}


[hidden] {
  display:
    none !important;
}


html {
  min-height:
    100%;
}


body {

  margin:
    0;

  min-height:
    100vh;

  color:
    var(--text);

  background:
    linear-gradient(
      180deg,
      #f7f9fc,
      #f1f5fa
    );

  overflow-x:
    hidden;
}


button,
input,
select,
textarea {

  font:
    inherit;
}


button,
select {

  cursor:
    pointer;
}


/* =========================================
   BACKGROUND
   ========================================= */

.background-orb {

  position:
    fixed;

  border-radius:
    50%;

  filter:
    blur(100px);

  opacity:
    .15;

  pointer-events:
    none;

  z-index:
    -1;
}


.orb-one {

  width:
    520px;

  height:
    520px;

  background:
    #7767ff;

  top:
    -280px;

  left:
    -170px;
}


.orb-two {

  width:
    600px;

  height:
    600px;

  background:
    #38c5e9;

  right:
    -260px;

  bottom:
    -340px;
}


/* =========================================
   LAYOUT
   ========================================= */

.shell {

  width:
    min(
      1240px,
      calc(100% - 40px)
    );

  margin:
    0 auto;

  min-height:
    100vh;

  display:
    flex;

  flex-direction:
    column;
}


/* =========================================
   HEADER
   ========================================= */

.header {

  min-height:
    92px;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;
}


.brand {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  color:
    inherit;

  text-decoration:
    none;
}


.brand-logo {

  width:
    45px;

  height:
    45px;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  border-radius:
    14px;

  color:
    white;

  font-weight:
    800;

  background:
    linear-gradient(
      140deg,
      #6658f5,
      #1daee7
    );

  box-shadow:
    0 12px 28px
    rgba(101,88,245,.24);
}


.brand strong {

  display:
    block;

  font-size:
    15px;
}


.brand span {

  display:
    block;

  margin-top:
    1px;

  color:
    var(--muted);

  font-size:
    11px;
}


.header-actions {

  display:
    flex;

  gap:
    14px;

  align-items:
    center;
}


.user-chip {

  display:
    flex;

  gap:
    10px;

  align-items:
    center;
}


.avatar {

  width:
    39px;

  height:
    39px;

  border-radius:
    50%;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  color:
    white;

  font-size:
    11px;

  font-weight:
    800;

  background:
    linear-gradient(
      145deg,
      #6257ef,
      #239ee7
    );
}


.user-meta strong {

  display:
    block;

  font-size:
    12px;
}


.user-meta span {

  display:
    block;

  max-width:
    230px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(--muted);

  font-size:
    10px;

  margin-top:
    2px;
}


.secondary-button {

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

  padding:
    9px 14px;

  border-radius:
    9px;

  color:
    #485467;

  background:
    rgba(255,255,255,.8);
}


/* =========================================
   LOGIN
   ========================================= */

.login-page {

  flex:
    1;

  display:
    grid;

  grid-template-columns:
    1.1fr .9fr;

  gap:
    75px;

  align-items:
    center;

  padding:
    50px 0 95px;
}


.eyebrow {

  margin-bottom:
    15px;

  color:
    #665dd5;

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    1.7px;
}


.login-copy h1,
.workspace-intro h1 {

  margin:
    0;

  max-width:
    750px;

  color:
    #101b2b;

  font-size:
    clamp(
      43px,
      5.8vw,
      67px
    );

  line-height:
    1.03;

  letter-spacing:
    -2.8px;
}


.login-copy h1 span,
.workspace-intro h1 span {

  display:
    block;

  background:
    linear-gradient(
      95deg,
      #6558f5,
      #19acd9
    );

  background-clip:
    text;

  -webkit-background-clip:
    text;

  color:
    transparent;
}


.login-copy > p {

  max-width:
    630px;

  margin:
    24px 0 29px;

  color:
    var(--muted);

  font-size:
    17px;

  line-height:
    1.7;
}


.primary-button {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    28px;

  border-radius:
    12px;

  padding:
    14px 19px;

  color:
    white;

  text-decoration:
    none;

  font-weight:
    750;

  background:
    linear-gradient(
      135deg,
      #6257ef,
      #7667fb
    );

  box-shadow:
    0 14px 34px
    rgba(98,87,239,.24);

  transition:
    transform .18s ease;
}


.primary-button:hover {

  transform:
    translateY(-2px);
}


.login-button {

  min-width:
    245px;
}


.login-security {

  display:
    flex;

  gap:
    18px;

  flex-wrap:
    wrap;

  margin-top:
    28px;

  color:
    #748092;

  font-size:
    11px;
}


/* =========================================
   LOGIN INTEGRATION VISUAL
   ========================================= */

.login-integrations {

  padding:
    27px;

  border-radius:
    24px;

  color:
    white;

  background:
    linear-gradient(
      150deg,
      #0d1a2b,
      #07111d
    );

  box-shadow:
    0 35px 85px
    rgba(15,27,45,.23);
}


.preview-title {

  margin-bottom:
    20px;
}


.preview-title span {

  display:
    block;

  color:
    #8f9caf;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    1.4px;
}


.preview-title strong {

  display:
    block;

  margin-top:
    5px;

  font-size:
    24px;
}


.preview-card {

  display:
    grid;

  grid-template-columns:
    auto 1fr auto;

  gap:
    13px;

  align-items:
    center;

  margin-top:
    10px;

  padding:
    14px;

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

  border-radius:
    14px;

  background:
    rgba(255,255,255,.055);
}


.preview-card strong {

  display:
    block;

  font-size:
    12px;
}


.preview-card span {

  display:
    block;

  margin-top:
    2px;

  color:
    #94a4ba;

  font-size:
    10px;
}


.preview-state {

  padding:
    6px 8px;

  border-radius:
    999px;

  color:
    #a8dff7;

  background:
    rgba(45,162,214,.1);

  font-size:
    8px;

  font-weight:
    800;
}


.platform-flow {

  margin-top:
    23px;

  display:
    flex;

  justify-content:
    center;

  gap:
    8px;

  align-items:
    center;

  color:
    #94a2b5;

  font-size:
    9px;
}


.platform-flow span {

  padding:
    5px 7px;

  border-radius:
    6px;

  background:
    rgba(255,255,255,.055);
}


/* =========================================
   PROVIDER ICONS
   ========================================= */

.provider-icon {

  width:
    45px;

  height:
    45px;

  flex:
    0 0 45px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    13px;

  color:
    white;

  font-weight:
    850;

  font-size:
    15px;
}


.provider-icon.google {

  background:
    linear-gradient(
      145deg,
      #3489ef,
      #32c480
    );
}


.provider-icon.jira {

  background:
    linear-gradient(
      145deg,
      #1868db,
      #3f86ef
    );
}


.provider-icon.snowflake {

  background:
    linear-gradient(
      145deg,
      #1a9ed2,
      #54c6e8
    );
}


/* =========================================
   WORKSPACE INTRO
   ========================================= */

.workspace {

  padding:
    45px 0 80px;
}


.workspace-intro {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    40px;

  align-items:
    flex-end;
}


.workspace-intro h1 {

  font-size:
    clamp(
      39px,
      5vw,
      59px
    );
}


.workspace-intro p {

  margin:
    18px 0 0;

  max-width:
    680px;

  color:
    var(--muted);

  line-height:
    1.6;
}


.gateway-status {

  min-width:
    190px;

  display:
    flex;

  gap:
    11px;

  align-items:
    center;

  padding:
    13px;

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

  border-radius:
    12px;

  background:
    rgba(255,255,255,.75);
}


.online-dot {

  width:
    9px;

  height:
    9px;

  border-radius:
    50%;

  background:
    var(--green);

  box-shadow:
    0 0 0 5px
    rgba(25,169,116,.11);
}


.gateway-status small {

  display:
    block;

  color:
    var(--muted);

  font-size:
    8px;

  letter-spacing:
    1px;
}


.gateway-status strong {

  display:
    block;

  margin-top:
    2px;

  font-size:
    12px;
}


/* =========================================
   MCP SECTION
   ========================================= */

.mcp-section {

  margin-top:
    42px;
}


.section-heading {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  margin-bottom:
    15px;
}


.section-label {

  display:
    block;

  margin-bottom:
    4px;

  color:
    #7770d2;

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    1.4px;
}


.section-heading h2,
.active-provider-header h2 {

  margin:
    0;

  font-size:
    22px;

  letter-spacing:
    -.7px;
}


.section-note {

  color:
    var(--muted);

  font-size:
    10px;
}


.mcp-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    15px;
}


.mcp-card {

  position:
    relative;

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

  border-radius:
    18px;

  padding:
    20px;

  text-align:
    left;

  color:
    inherit;

  background:
    rgba(255,255,255,.81);

  box-shadow:
    0 9px 30px
    rgba(20,35,55,.04);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}


.mcp-card:hover {

  transform:
    translateY(-3px);

  box-shadow:
    var(--shadow);
}


.mcp-card.active {

  border-color:
    #756af0;

  box-shadow:
    0 18px 50px
    rgba(101,88,245,.13);
}


.mcp-card.active::after {

  content:
    "";

  position:
    absolute;

  left:
    18px;

  right:
    18px;

  bottom:
    -1px;

  height:
    3px;

  border-radius:
    3px 3px 0 0;

  background:
    linear-gradient(
      90deg,
      #6459f1,
      #23b5de
    );
}


.mcp-card-top {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;
}


.connection-status {

  padding:
    5px 8px;

  border-radius:
    999px;

  color:
    #7c8795;

  background:
    #f0f3f6;

  font-size:
    8px;

  font-weight:
    750;
}


.connection-status.available {

  color:
    #11784f;

  background:
    #eaf9f2;
}


.connection-status.pending {

  color:
    #956b23;

  background:
    #fff6e4;
}


.mcp-card-body {

  margin-top:
    18px;
}


.provider-kicker {

  color:
    #7b8796;

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    1.2px;
}


.mcp-card h3 {

  margin:
    4px 0 8px;

  font-size:
    18px;

  letter-spacing:
    -.6px;
}


.mcp-card p {

  min-height:
    43px;

  margin:
    0;

  color:
    var(--muted);

  font-size:
    11px;

  line-height:
    1.5;
}


.mcp-services {

  display:
    flex;

  gap:
    6px;

  margin-top:
    16px;
}


.mcp-services span {

  padding:
    5px 7px;

  border-radius:
    6px;

  color:
    #5d6979;

  background:
    #f3f5f8;

  font-size:
    8px;
}


.mcp-card-footer {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  margin-top:
    18px;

  padding-top:
    13px;

  border-top:
    1px solid #edf0f4;
}


.mcp-card-footer span {

  color:
    var(--muted);

  font-size:
    9px;
}


.mcp-card-footer strong {

  font-size:
    22px;

  letter-spacing:
    -1px;
}


/* =========================================
   ACTIVE WORKSPACE
   ========================================= */

.active-workspace {

  margin-top:
    28px;
}


.active-provider-header {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  margin-bottom:
    14px;
}


.active-provider-badge {

  padding:
    7px 10px;

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

  border-radius:
    999px;

  color:
    var(--muted);

  background:
    white;

  font-size:
    9px;
}


.provider-empty {

  padding:
    55px 25px;

  text-align:
    center;

  border:
    1px dashed #ccd4df;

  border-radius:
    17px;

  background:
    rgba(255,255,255,.6);
}


.empty-provider-icon {

  width:
    48px;

  height:
    48px;

  margin:
    0 auto 12px;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  border-radius:
    13px;

  color:
    #6e64dd;

  background:
    #eeecff;
}


.provider-empty h3 {

  margin:
    0 0 6px;
}


.provider-empty p {

  max-width:
    460px;

  margin:
    auto;

  color:
    var(--muted);

  font-size:
    11px;

  line-height:
    1.55;
}


/* =========================================
   TOOL WORKSPACE
   ========================================= */

.tool-workspace {

  display:
    grid;

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

  gap:
    15px;
}


.tool-panel,
.result-panel {

  min-height:
    500px;

  padding:
    23px;

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

  border-radius:
    18px;

  background:
    rgba(255,255,255,.91);

  box-shadow:
    var(--shadow);
}


.panel-heading {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    15px;

  margin-bottom:
    22px;
}


.panel-label {

  display:
    block;

  color:
    #746bd1;

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    1.3px;
}


.panel-heading h3 {

  margin:
    4px 0 0;

  font-size:
    18px;
}


.provider-pill {

  padding:
    6px 9px;

  border-radius:
    999px;

  color:
    #426178;

  background:
    #edf6fb;

  font-size:
    9px;

  font-weight:
    700;
}


label {

  display:
    block;

  margin-bottom:
    7px;

  color:
    #425065;

  font-size:
    11px;

  font-weight:
    700;
}


select,
input,
textarea {

  width:
    100%;

  padding:
    11px 12px;

  border:
    1px solid #dbe2e9;

  border-radius:
    9px;

  outline:
    none;

  color:
    var(--text);

  background:
    #fbfcfe;
}


select:focus,
input:focus,
textarea:focus {

  border-color:
    #746af0;

  box-shadow:
    0 0 0 3px
    rgba(116,106,240,.09);
}


textarea {

  min-height:
    120px;

  resize:
    vertical;
}


.tool-description {

  margin-top:
    11px;

  padding:
    12px;

  max-height:
    150px;

  overflow:
    auto;

  border-radius:
    9px;

  color:
    #647184;

  background:
    #f7f8fa;

  font-size:
    10px;

  line-height:
    1.5;
}


.form-divider {

  height:
    1px;

  margin:
    20px 0;

  background:
    #edf0f4;
}


.field {

  margin-bottom:
    16px;
}


.field small {

  display:
    block;

  margin-top:
    5px;

  color:
    #7c8796;

  font-size:
    9px;

  line-height:
    1.4;
}


.tool-form button {

  width:
    100%;

  border:
    0;

  margin-top:
    4px;

  padding:
    12px;

  border-radius:
    10px;

  color:
    white;

  font-weight:
    750;

  background:
    linear-gradient(
      135deg,
      #6258ef,
      #7667fa
    );
}


/* =========================================
   RESULT
   ========================================= */

.copy-button {

  padding:
    6px 9px;

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

  border-radius:
    7px;

  color:
    #536073;

  background:
    white;

  font-size:
    9px;
}


.result-empty {

  min-height:
    360px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


.result-symbol {

  width:
    48px;

  height:
    48px;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  border-radius:
    13px;

  color:
    #6258e9;

  background:
    #eeedff;

  font-size:
    21px;
}


.result-empty strong {

  margin-top:
    12px;

  font-size:
    13px;
}


.result-empty p {

  max-width:
    300px;

  margin:
    5px 0 0;

  color:
    var(--muted);

  font-size:
    10px;

  line-height:
    1.5;
}


.result-output {

  min-height:
    360px;

  max-height:
    620px;

  overflow:
    auto;

  margin:
    0;

  padding:
    16px;

  border-radius:
    12px;

  color:
    #d8e4f1;

  background:
    #0b1625;

  font-size:
    10px;

  line-height:
    1.6;

  white-space:
    pre-wrap;

  word-break:
    break-word;
}


/* =========================================
   SECURITY
   ========================================= */

.security-strip {

  display:
    grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:
    1px;

  margin-top:
    18px;

  overflow:
    hidden;

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

  border-radius:
    13px;

  background:
    var(--border);
}


.security-strip div {

  padding:
    14px;

  background:
    rgba(255,255,255,.84);
}


.security-strip span {

  display:
    block;

  color:
    #8993a0;

  font-size:
    7px;

  font-weight:
    850;

  letter-spacing:
    1px;
}


.security-strip strong {

  display:
    block;

  margin-top:
    3px;

  font-size:
    10px;
}


/* =========================================
   ERROR / FOOTER
   ========================================= */

.error-view {

  margin:
    30px 0;

  padding:
    18px;

  border:
    1px solid #ffd3d3;

  border-radius:
    12px;

  color:
    #922;

  background:
    #fff2f2;
}


.error-view pre {

  white-space:
    pre-wrap;
}


footer {

  display:
    flex;

  justify-content:
    space-between;

  margin-top:
    auto;

  padding:
    25px 0 27px;

  color:
    #909aa7;

  font-size:
    9px;
}


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

@media (
  max-width: 930px
) {

  .login-page,
  .tool-workspace {

    grid-template-columns:
      1fr;
  }


  .mcp-grid {

    grid-template-columns:
      1fr;
  }


  .workspace-intro {

    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .gateway-status {

    width:
      100%;
  }


  .security-strip {

    grid-template-columns:
      repeat(2,1fr);
  }

}


@media (
  max-width: 600px
) {

  .shell {

    width:
      calc(100% - 24px);
  }


  .header {

    min-height:
      75px;
  }


  .brand span,
  .user-meta {

    display:
      none;
  }


  .login-copy h1,
  .workspace-intro h1 {

    letter-spacing:
      -1.8px;
  }


  .section-heading {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      5px;
  }


  .security-strip {

    grid-template-columns:
      1fr;
  }


  footer {

    flex-direction:
      column;

    gap:
      5px;
  }

}