:root {
  /* Keep the app directory on the same solid-surface palette as the My ID page. */
  --surface-card: var(--color-card-prime);
  --surface-card-hover: var(--color-card-prime);
  --surface-field: var(--color-card-mid);
}

#hero {
  display: block;

  & > .app-console {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
    overflow: hidden;
    border: var(--border-card);
    border-radius: var(--radius-card);
    background: var(--surface-card);
  }

  & .console-main { padding: clamp(26px, 4vw, 52px); }
  & .hero-title { max-width: 9ch; }

  & .console-tags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 30px;

    & > span {
      min-height: 46px;
      padding: 10px 12px;
      border: var(--border-card);
      border-radius: var(--radius);
      font-size: 0.82rem;
      font-weight: 600;
      line-height: 1.35;
      color: var(--color-text-high);
      background: var(--color-card-prime);
    }
  }

  & .console-status {
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 3vw, 38px);
    border-left: var(--border-card);
    background: var(--color-card-mid);
  }

  & .status-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-high); }
  & .status-title { margin-top: 12px; font-size: 1.5rem; line-height: 1.25; }
  & .status-desc { margin-top: 12px; font-size: 0.94rem; line-height: 1.7; color: var(--color-text-high); }

  & .status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
    padding-top: 28px;

    & > div { padding: 12px; border: var(--border-card); border-radius: var(--radius); background: var(--color-card-prime); }
    & span, & strong { display: block; }
    & span { font-size: 0.74rem; color: var(--color-text-high); }
    & strong { margin-top: 7px; font-size: 0.88rem; line-height: 1.3; }
  }

  @media (width < 800px) {
    padding-top: 44px;
    & > .app-console { grid-template-columns: 1fr; }
    & .console-status { border-top: var(--border-card); border-left: 0; }
  }
}

#catalog {
  &.app-shelf {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    margin-top: 20px;
    border: var(--border-card);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--surface-card);

    & > .shelf-label {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 22px;
      padding: 20px;
      border-right: var(--border-card);
      background: var(--color-card-mid);

      & > span { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-high); }
      & > strong { font-size: 1rem; }
    }

    & > .shelf-tags {
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      gap: 8px;
      padding: 18px;

      & > span { padding: 8px 10px; border: var(--border-card); border-radius: var(--radius-pill); font-size: 0.82rem; font-weight: 600; color: var(--color-text-high); }
    }

    @media (width < 800px) {
      grid-template-columns: 1fr;
      & > .shelf-label { flex-direction: row; align-items: center; border-right: 0; border-bottom: var(--border-card); }
    }
  }
}

#apps {
  & > .app-list {
    display: grid;
    gap: 18px;

    & > .app-card {
      position: relative;
      display: grid;
      grid-template-columns: 86px minmax(0, 1fr);
      gap: 22px;
      overflow: hidden;
      padding: 24px;
      border: var(--border-card);
      border-radius: var(--radius-card);
      background: var(--surface-card);
      transition:
        transform var(--motion-fast),
        background var(--motion-fast),
        border-color var(--motion-fast);
      &:hover {
        border-color: var(--line-strong);
        background: var(--surface-card-hover);
        transform: translateY(-4px);
      }
      & > .app-top {
        display: grid;
        grid-row: 1 / span 2;
        gap: 14px;
        align-content: start;
        & > .app-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 58px;
          height: 58px;
          border: 1px solid var(--line-strong);
          border-radius: calc(var(--radius) + 6px);
          color: var(--color-text-max);
          background: var(--color-card-mid);
          & > img {
            width: 28px;
            height: 28px;
          }
        }
      }
      & > .app-code {
        font-size: 1.35rem;
        font-weight: 800;
        line-height: 1;
        color: var(--color-text-max);
      }
      & > .app-body {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        & > .app-head {
          display: flex;
          flex-wrap: wrap;
          gap: 18px;
          align-items: flex-start;
          justify-content: space-between;
          & > .app-title {
            font-size: clamp(1.32rem, 2vw, 1.72rem);
            font-weight: 800;
            line-height: 1.2;
            color: var(--color-text-max);
          }
          & > .app-link {
            font-size: 0.92rem;
            font-weight: 800;
            color: var(--color-text-max);
            &::before {
              content: "";
              position: absolute;
              inset: 0;
              z-index: 1;
            }
          }
        }
        & > .app-desc {
          max-width: 100ch;
          margin-top: 14px;
          font-size: 0.98rem;
          line-height: 1.82;
          color: var(--color-text-high);
        }
        & > .app-fields {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px;
          margin-top: 18px;
          & > .app-field {
            padding: 16px;
            border: 1px solid var(--color-line);
            border-radius: var(--radius);
            background: var(--surface-field);
            & > .field-label {
              font-size: 0.8rem;
              font-weight: 800;
              letter-spacing: 0.1em;
              text-transform: uppercase;
              color: var(--color-text-high);
            }
            & > .field-value {
              display: block;
              margin-top: 8px;
              font-size: 0.92rem;
              font-weight: 600;
              line-height: 1.7;
              color: var(--color-text-max);
            }
          }
        }
        & > .app-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin-top: 16px;
          & > .app-tag {
            display: inline-flex;
            align-items: center;
            min-height: 34px;
            padding: 0 14px;
            border: var(--border-card);
            border-radius: var(--radius-pill);
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--color-text-high);
            background: var(--color-card-prime);
          }
        }
        & > .app-foot {
          margin-top: 18px;
          padding-top: 18px;
          border-top: 1px solid var(--color-line);
          & > .app-note {
            font-size: 0.9rem;
            line-height: 1.72;
            color: var(--color-text-high);
          }
        }
      }
    }
    @media (width < 800px) {
      & > .app-card {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px;
        & > .app-top {
          display: flex;
          grid-row: auto;
          align-items: center;
          justify-content: space-between;
        }
        & > .app-body {
          grid-column: auto;
          grid-row: auto;
          & > .app-fields {
            grid-template-columns: 1fr;
          }
        }
      }
    }
  }
}