:root {
      --void: #0D0303;
      --deep: #1E0808;
      --gold: #F7AA4F;
      --cream: #FFEFD9;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Montserrat', sans-serif;
      background: var(--void);
      color: var(--cream);
      min-height: 100vh;
      padding: 26px 18px;
    }

    .wrap {
      max-width: 860px;
      margin: 0 auto;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    .staff-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .role-admin-only {
      display: none;
    }

    a.back {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: rgba(255, 239, 217, .55);
      text-decoration: none;
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    a.back:hover {
      color: var(--gold);
    }

    h1 {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    h1 em {
      color: var(--gold);
      font-style: italic;
    }

    p.lead {
      font-size: 13px;
      line-height: 1.65;
      color: rgba(255, 239, 217, .72);
      margin-bottom: 14px;
    }

    .banner {
      padding: 12px 14px;
      border-radius: 4px;
      font-size: 13px;
      line-height: 1.5;
      margin-bottom: 14px;
    }

    .banner.warn {
      border: 1px solid rgba(232, 136, 136, .35);
      background: rgba(80, 20, 20, .25);
      color: #ebb;
    }

    .banner.ok {
      border: 1px solid rgba(247, 170, 79, .25);
      background: rgba(247, 170, 79, .06);
      color: rgba(255, 239, 217, .88);
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin: 16px 0 12px;
    }

    .filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .fbtn {
      border: 1px solid rgba(247, 170, 79, .22);
      background: rgba(247, 170, 79, .08);
      color: rgba(255, 239, 217, .8);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: 9px 12px;
      border-radius: 3px;
      cursor: pointer;
    }

    .fbtn:hover {
      background: rgba(247, 170, 79, .14);
      color: var(--gold);
    }

    .fbtn.active {
      background: linear-gradient(135deg, rgba(247, 170, 79, .9), rgba(247, 170, 79, .55));
      color: var(--void);
      border-color: transparent;
    }

    .logout {
      border: 1px solid rgba(255, 239, 217, .14);
      background: rgba(255, 239, 217, .06);
      color: rgba(255, 239, 217, .78);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: 9px 12px;
      border-radius: 3px;
      cursor: pointer;
      white-space: nowrap;
    }

    .logout:hover {
      border-color: var(--gold);
      color: var(--gold);
      background: rgba(247, 170, 79, .08);
    }

    .list {
      margin-top: 10px;
    }

    .order-card {
      border: 1px solid rgba(247, 170, 79, .12);
      background: rgba(30, 8, 8, .5);
      padding: 14px 16px;
      margin-bottom: 10px;
      border-radius: 4px;
    }

    .order-card .top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 8px;
    }

    .order-card .id {
      font-weight: 700;
      color: var(--gold);
      font-size: 13px;
      letter-spacing: .04em;
    }

    .order-card .st {
      font-size: 10px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 239, 217, .45);
      white-space: nowrap;
    }

    .meta {
      font-size: 12px;
      color: rgba(255, 239, 217, .55);
      line-height: 1.55;
    }

    .meta-pad {
      padding: 10px 2px;
    }

    .meta-created {
      margin-top: 6px;
    }

    .order-lines {
      font-size: 12px;
      line-height: 1.5;
      color: rgba(255, 239, 217, .55);
      margin: 10px 0 8px;
      padding-left: 0;
      list-style: none;
    }

    .order-lines li {
      padding: 2px 0;
    }

    .actions {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .actions button {
      font-family: inherit;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: 9px 12px;
      border: 1px solid rgba(247, 170, 79, .25);
      background: rgba(247, 170, 79, .1);
      color: var(--gold);
      cursor: pointer;
      border-radius: 2px;
    }

    .actions button:hover {
      background: rgba(247, 170, 79, .18);
    }

    .actions button:disabled {
      opacity: .35;
      cursor: default;
    }

    @media(max-width:520px) {
      body {
        padding: 20px 14px;
      }

      .staff-nav,
      .controls,
      .filters,
      .actions {
        width: 100%;
      }

      .fbtn,
      .logout,
      .actions button {
        width: 100%;
        text-align: center;
      }

      .order-card {
        padding: 12px 12px;
      }

      .order-card .top {
        flex-direction: column;
        align-items: flex-start;
      }
    }