:root{
      --bgTop:#111111;
      --bgMid:#111111;
      --bgDeep:#111111;
      --line:rgba(255,255,255,0.08);
      --line2:rgba(255,255,255,0.12);
      --line3:rgba(255,255,255,0.14);
      --text:#ffffff;
      --muted:rgba(255,255,255,0.72);
      --chip:#151515;
      --chipBorder:rgba(255,255,255,0.08);
      --shadow:0 18px 50px rgba(0,0,0,0.42);
      --topbar-h:68px;
      --padX:clamp(16px,2.4vw,30px);
      --max:1180px;
      --filtersW:268px;
      --gap:34px;
      --jobsW:878px;
      --layoutW:calc(var(--filtersW) + var(--gap) + var(--jobsW));
    }

    *{box-sizing:border-box;}
    html,body{height:100%;}

    body{
      margin:0;
      color:var(--text);
      font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;
      background:#111111;
      background-attachment:fixed;
    }

    body.careers-page{
      --topBg:#111111;
      --topBg2:#111111;
      --topPanel:#171717;
      --topPanelHover:#202020;
      --topPanelSelected:#292929;
      --topBorder:#2b2b2b;
      --topDarkCard:#171717;
      --topDarkCard2:#111111;
    }

    body.careers-page .topHeader{
      background:linear-gradient(180deg,rgba(17,17,17,.96),rgba(17,17,17,.90));
      backdrop-filter:blur(18px) saturate(100%);
      -webkit-backdrop-filter:blur(18px) saturate(100%);
    }

    a{color:inherit;text-decoration:none;}
    button,input{font:inherit;}

    .container{
      width:min(var(--max), calc(100% - (var(--padX) * 2)));
      margin:0 auto;
    }

    .page{
      padding:34px 0 90px;
    }

    .heroWrap{
      width:min(var(--layoutW), 100%);
      margin:0 auto 54px;
    }

    .heroCard{
      position:relative;
      min-height:clamp(380px, 48vw, 660px);
      border-radius:8px;
      overflow:hidden;
      background:
        linear-gradient(rgba(10,13,20,0.66), rgba(10,13,20,0.66)),
        url("https://cdn.midwesternroleplay.com/images/careers-image.png") center center / cover no-repeat;
      box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,0.04);
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:40px 24px;
      isolation:isolate;
    }

    .heroCard::after{
      content:"";
      position:absolute;
      inset:0;
      background:rgba(120,130,150,0.14);
      mix-blend-mode:luminosity;
      pointer-events:none;
      z-index:0;
    }

    .heroInner{
      position:relative;
      z-index:1;
      width:min(860px, 100%);
      margin:0 auto;
    }

    .heroTitle{
      margin:0;
      font-size:clamp(42px, 6.2vw, 74px);
      line-height:0.98;
      font-weight:500;
      letter-spacing:-0.05em;
      color:#fff;
    }

    .heroSearch{
      width:min(490px, 100%);
      margin:34px auto 0;
      display:flex;
      align-items:center;
      gap:10px;
      min-height:50px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,0.08);
      background:#151515;
      box-shadow:0 10px 24px rgba(0,0,0,0.22);
      padding:0 14px;
    }

    .heroSearchInput{
      width:100%;
      height:48px;
      background:transparent;
      border:0;
      outline:none;
      color:#fff;
      font-size:15px;
    }

    .heroSearchInput::placeholder{
      color:rgba(255,255,255,0.46);
    }

    .heroSearchIcon{
      width:18px;
      height:18px;
      flex:0 0 auto;
      color:rgba(255,255,255,0.82);
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }

    .heroSearchIcon svg{
      width:18px;
      height:18px;
      display:block;
    }

    .layout{
      width:min(var(--layoutW), 100%);
      margin:0 auto;
      display:grid;
      grid-template-columns:var(--filtersW) minmax(0, var(--jobsW));
      gap:var(--gap);
      align-items:start;
    }

    .filtersCol{
      position:sticky;
      top:calc(var(--topbar-h) + 18px);
      z-index:20;
    }

    .filtersHeader{
      display:flex;
      align-items:center;
      min-height:24px;
      margin-bottom:16px;
    }

    .filtersTitle{
      font-size:22px;
      font-weight:800;
      letter-spacing:-0.02em;
      line-height:1;
    }

    .filtersHeader.hasActiveFilters .filtersTitle{
      padding-right:14px;
      margin-right:14px;
      border-right:1px solid var(--line3);
    }

    .clearAllBtn{
      display:none;
      border:0;
      background:none;
      color:#fff;
      padding:0;
      font-size:14px;
      font-weight:700;
      cursor:pointer;
      opacity:.92;
      line-height:1;
      min-height:24px;
      align-items:center;
    }

    .filtersHeader.hasActiveFilters .clearAllBtn{
      display:inline-flex;
    }

    .clearAllBtn:hover{
      opacity:1;
    }

    .filtersStack{
      display:flex;
      flex-direction:column;
      gap:10px;
      position:relative;
      z-index:30;
    }

    .filterDropdown{
      position:relative;
      z-index:1;
    }

    .filterDropdown.open{
      z-index:1000;
    }

    .filterTrigger{
      width:100%;
      min-height:54px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:0 16px;
      border-radius:12px;
      border:1px solid var(--line2);
      background:#151515;
      color:#fff;
      cursor:pointer;
      box-shadow:var(--shadow);
    }

    .filterTriggerLabel{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .filterTriggerText{
      font-size:14px;
      font-weight:500;
      white-space:nowrap;
    }

    .filterCountBadge{
      min-width:22px;
      height:22px;
      padding:0 7px;
      border-radius:7px;
      background:rgba(255,255,255,0.06);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
      font-weight:800;
      color:#fff;
    }

    .filterCountBadge.isHidden{
      display:none;
    }

    .filterChevron{
      width:10px;
      height:10px;
      border-right:1.5px solid rgba(255,255,255,0.72);
      border-bottom:1.5px solid rgba(255,255,255,0.72);
      transform:rotate(45deg);
      margin-top:-4px;
      transition:transform .16s ease;
      flex:0 0 auto;
    }

    .filterDropdown.open .filterChevron{
      transform:rotate(225deg);
      margin-top:4px;
    }

    .filterMenu{
      position:absolute;
      top:100%;
      left:0;
      right:0;
      margin-top:8px;
      max-height:220px;
      overflow:auto;
      border-radius:12px;
      border:1px solid var(--line2);
      background:#151515;
      box-shadow:var(--shadow);
      padding:8px;
      display:none;
      z-index:2000;
    }

    .filterDropdown.open .filterMenu{
      display:block;
    }

    .filterOption{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 8px;
      border-radius:10px;
      cursor:pointer;
      user-select:none;
      color:rgba(255,255,255,0.95);
    }

    .filterOption:hover{
      background:rgba(255,255,255,0.04);
    }

    .filterOption input{
      accent-color:#fff;
      width:15px;
      height:15px;
      margin:0;
      cursor:pointer;
    }

    .jobsCol{
      min-width:0;
    }

    .jobsToolbar{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      margin-bottom:6px;
    }

    .chipsWrap{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      min-height:40px;
      padding-top:4px;
    }

    .chip{
      display:inline-flex;
      align-items:center;
      gap:10px;
      height:34px;
      padding:0 12px 0 10px;
      border-radius:8px;
      border:1px solid var(--chipBorder);
      background:var(--chip);
      color:#fff;
      font-size:13px;
      font-weight:800;
      letter-spacing:-0.01em;
      white-space:nowrap;
    }

    .chipX{
      width:22px;
      height:22px;
      border-radius:6px;
      border:1px solid rgba(255,255,255,0.12);
      background:transparent;
      color:rgba(255,255,255,0.7);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      line-height:1;
      padding:0;
      flex:0 0 auto;
    }

    .chipX:hover{
      color:#fff;
      border-color:rgba(255,255,255,0.24);
    }

    .resultsCount{
      flex:0 0 auto;
      padding-top:6px;
      font-size:14px;
      color:#fff;
      white-space:nowrap;
    }

    .jobsList{
      border-top:1px solid rgba(255,255,255,0.08);
    }

    .jobsSectionHeader{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:12px;
      padding:18px 0 14px;
      border-bottom:1px solid rgba(255,255,255,0.08);
    }

    .jobsSectionTitle{
      font-size:16px;
      font-weight:800;
      color:rgba(255,255,255,0.92);
      letter-spacing:.01em;
    }

    .jobRow{
      display:grid;
      grid-template-columns:minmax(0, 1fr) 300px 54px;
      gap:18px;
      align-items:center;
      min-height:102px;
      border-bottom:1px solid rgba(255,255,255,0.08);
    }

    .jobMain{
      min-width:0;
      padding:22px 0;
    }

    .jobTitleRow{
      display:flex;
      align-items:center;
      gap:3px;
      flex-wrap:wrap;
    }

    .jobSource{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      position:relative;
      width:18px;
      height:18px;
      color:#fff;
      flex:0 0 auto;
      cursor:default;
    }

    .jobSource .material-symbols-outlined{
      display:block;
      font-size:18px;
      line-height:1;
      font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 20;
    }

    .jobSource::after{
      content:attr(data-tooltip);
      position:absolute;
      left:50%;
      bottom:calc(100% + 10px);
      z-index:50;
      padding:10px 12px;
      border-radius:5px;
      background:#f4f4f5;
      color:#101014;
      font-size:13px;
      font-weight:600;
      line-height:1;
      white-space:nowrap;
      box-shadow:0 8px 24px rgba(0,0,0,.24);
      opacity:0;
      pointer-events:none;
      transform:translate(-50%,5px);
      transition:opacity .14s ease,transform .14s ease;
    }

    .jobSource::before{
      content:'';
      position:absolute;
      left:50%;
      bottom:calc(100% + 5px);
      z-index:51;
      width:10px;
      height:10px;
      background:#f4f4f5;
      opacity:0;
      pointer-events:none;
      transform:translate(-50%,5px) rotate(45deg);
      transition:opacity .14s ease,transform .14s ease;
    }

    .jobSource:hover::after,
    .jobSource:hover::before,
    .jobSource:focus-visible::after,
    .jobSource:focus-visible::before{
      opacity:1;
    }

    .jobSource:hover::after,
    .jobSource:focus-visible::after{
      transform:translate(-50%,0);
    }

    .jobSource:hover::before,
    .jobSource:focus-visible::before{
      transform:translate(-50%,0) rotate(45deg);
    }

    .jobTitle{
      font-size:18px;
      line-height:1.3;
      font-weight:600;
      color:#fff;
      letter-spacing:-0.02em;
    }

    .jobTitle:hover{
      color:rgba(255,255,255,0.84);
    }

    .jobMeta{
      margin-top:8px;
      font-size:15px;
      font-weight:500;
      color:rgba(255,255,255,0.78);
      letter-spacing:0;
      word-spacing:0;
      font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;
    }

    .jobGroup{
      font-size:15px;
      color:#dce3ff;
      letter-spacing:.05em;
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .jobAction{
      display:flex;
      justify-content:flex-end;
    }

    .shareBtn{
      width:34px;
      height:34px;
      border-radius:4px;
      border:1px solid rgba(255,255,255,0.14);
      background:transparent;
      color:rgba(255,255,255,0.88);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      padding:0;
    }

    .shareBtn:hover{
      background:rgba(255,255,255,0.04);
      border-color:rgba(255,255,255,0.22);
    }

    .shareBtn svg{
      width:16px;
      height:16px;
      display:block;
    }

    .emptyState{
      padding:36px 0;
      color:var(--muted);
      font-size:14px;
      line-height:1.6;
      border-bottom:1px solid rgba(255,255,255,0.08);
    }

    .paginationWrap{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      margin:28px auto 0;
      width:100%;
      flex-wrap:wrap;
    }

    .pageBtn{
      min-width:36px;
      height:36px;
      padding:0 12px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,0.12);
      background:rgba(255,255,255,0.03);
      color:rgba(255,255,255,0.82);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      font-size:13px;
      font-weight:800;
    }

    .pageBtn:hover{
      background:rgba(255,255,255,0.07);
      color:#fff;
      border-color:rgba(255,255,255,0.22);
    }

    .pageBtn.isActive{
      background:#fff;
      color:#080b10;
      border-color:#fff;
    }

    .pageBtn:disabled{
      opacity:.42;
      cursor:not-allowed;
    }

    .pageDots{
      min-width:24px;
      height:36px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:rgba(255,255,255,0.45);
      font-weight:800;
    }

    @media (max-width: 1200px){
      .layout,
      .heroWrap{
        width:100%;
      }

      .layout{
        grid-template-columns:240px minmax(0, 1fr);
        gap:24px;
      }
    }

    @media (max-width: 980px){
      .layout{
        grid-template-columns:1fr;
      }

      .filtersCol{
        position:static;
      }

      .heroCard{
        min-height:420px;
      }

      .jobRow{
        grid-template-columns:minmax(0, 1fr) 220px 54px;
      }
    }

    @media (max-width: 760px){
      .page{
        padding-top:22px;
      }

      .heroWrap{
        margin-bottom:34px;
      }

      .heroCard{
        min-height:340px;
        padding:28px 18px;
      }

      .heroTitle{
        font-size:clamp(34px, 11vw, 56px);
      }

      .heroSearch{
        margin-top:24px;
      }

      .jobsToolbar{
        flex-direction:column;
        align-items:flex-start;
      }

      .resultsCount{
        padding-top:0;
      }

      .jobRow{
        grid-template-columns:1fr;
        gap:10px;
        padding:18px 0;
        min-height:0;
      }

      .jobMain{
        padding:0;
      }

      .jobGroup{
        white-space:normal;
      }

      .jobAction{
        justify-content:flex-start;
      }
    }