/* [project]/apps/control/app/cc-shell.css [app-client] (css) */
.cc-skip {
  left: var(--px-space-2);
  top: var(--px-space-2);
  z-index: var(--px-z-skip);
  padding: var(--px-space-1-5) var(--px-space-2-5);
  border-radius: var(--px-radius-control);
  background: var(--px-surface-solid);
  color: var(--px-text-primary);
  position: absolute;
  transform: translateY(-200%);
}

.cc-skip:focus {
  transform: none;
}

.cc-content {
  padding-bottom: var(--px-space-8);
}

@media (max-width: 767px) {
  .cc-content {
    padding-bottom: var(--px-space-8);
  }
}

.cc-page {
  gap: var(--px-space-3);
  max-width: var(--px-size-measure);
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  display: flex;
}

@media (min-width: 1280px) {
  .cc-page {
    max-width: none;
  }
}

.cc-ph {
  padding: var(--px-space-1) 0 0;
}

.cc-foot {
  align-items: center;
  gap: var(--px-space-1-5);
  color: var(--px-nav-fg-3);
  font-size: var(--px-text-12);
  padding: 0 var(--px-space-2);
  display: inline-flex;
}

.cc-avatar {
  background: var(--px-avatar-bg);
  color: var(--px-avatar-fg);
}

.cc-role {
  margin-top: var(--px-space-1);
  font-size: var(--px-text-11);
  font-weight: var(--px-weight-semibold);
  color: var(--px-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--px-tracking-caps);
}

.cc-env {
  height: var(--px-size-chip);
  padding: 0 var(--px-space-2);
  border-radius: var(--px-radius-pill);
  font-size: var(--px-text-11);
  font-weight: var(--px-weight-bold);
  letter-spacing: var(--px-tracking-caps);
  border: var(--px-hairline) solid transparent;
  flex: none;
  align-items: center;
  display: inline-flex;
}

.cc-env--dev {
  background: var(--px-warning-bg);
  color: var(--px-warning);
  border-color: var(--px-warning-border);
}

.cc-env--prod {
  background: var(--px-danger-bg);
  color: var(--px-danger);
  border-color: var(--px-danger-border);
}

.cc-needs__n {
  top: var(--px-space-0-5);
  right: var(--px-space-0-5);
  min-width: var(--px-size-count);
  height: var(--px-size-count);
  padding: 0 var(--px-space-1);
  border-radius: var(--px-radius-pill);
  background: var(--px-accent);
  color: var(--px-text-on-accent);
  font-size: var(--px-text-10-5);
  font-weight: var(--px-weight-bold);
  justify-content: center;
  align-items: center;
  line-height: 1;
  display: inline-flex;
  position: absolute;
}

.cc-tabs {
  gap: var(--px-space-0-5);
  padding: var(--px-space-0-5);
  border-radius: var(--px-radius-pill);
  background: var(--px-fill-sunken);
  scrollbar-width: none;
  align-self: flex-start;
  max-width: 100%;
  display: flex;
  overflow-x: auto;
}

.cc-tab {
  align-items: center;
  gap: var(--px-space-1-5);
  height: var(--px-size-seg);
  padding: 0 var(--px-space-3);
  border-radius: var(--px-radius-pill);
  color: var(--px-text-secondary);
  font-size: var(--px-text-13);
  font-weight: var(--px-weight-medium);
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
}

.cc-tab:hover {
  color: var(--px-text-primary);
}

.cc-tab[aria-current="page"] {
  background: var(--px-seg-on);
  color: var(--px-text-primary);
  box-shadow: var(--px-seg-on-shadow);
}

.cc-tab__n {
  min-width: var(--px-size-count);
  height: var(--px-size-count);
  padding: 0 var(--px-space-1);
  border-radius: var(--px-radius-pill);
  background: var(--px-accent);
  color: var(--px-text-on-accent);
  font-size: var(--px-text-10-5);
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.cc-seg {
  gap: var(--px-space-0-5);
  padding: var(--px-space-0-5);
  border-radius: var(--px-radius-pill);
  background: var(--px-fill-sunken);
  align-self: flex-start;
  display: inline-flex;
}

.cc-seg__b {
  height: var(--px-size-seg);
  padding: 0 var(--px-space-3);
  border-radius: var(--px-radius-pill);
  color: var(--px-text-secondary);
  font: inherit;
  font-size: var(--px-text-12);
  font-weight: var(--px-weight-medium);
  cursor: pointer;
  background: none;
  border: 0;
}

.cc-seg__b[aria-selected="true"] {
  background: var(--px-seg-on);
  color: var(--px-text-primary);
  box-shadow: var(--px-seg-on-shadow);
}

.cc-kpis {
  grid-template-columns: repeat(auto-fill, minmax(var(--px-size-stat-min), 1fr));
  gap: var(--px-space-2-5);
  display: grid;
}

@media (max-width: 767px) {
  .cc-kpis {
    gap: var(--px-space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cc-kpi {
  align-items: center;
  column-gap: var(--px-space-2);
  row-gap: var(--px-space-1);
  padding: var(--px-space-3);
  min-width: 0;
  color: var(--px-text-primary);
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ic label"
                       "value value"
                       "sub sub";
  text-decoration: none;
  display: grid;
}

.cc-kpi--link {
  transition: transform var(--px-dur-press) var(--px-ease-out), box-shadow var(--px-dur-hover) var(--px-ease-linear);
}

.cc-kpi--link:hover {
  box-shadow: var(--px-inset-hi), var(--px-shadow-pop);
}

.cc-kpi--link:active {
  transform: scale(var(--px-press-scale));
}

.cc-kpi__ic {
  width: var(--px-size-avatar-sm);
  height: var(--px-size-avatar-sm);
  border-radius: var(--px-radius-control);
  background: var(--px-fill-selected);
  color: var(--px-brand);
  grid-area: ic;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.cc-kpi__ic .px-ic {
  width: var(--px-ic-sm);
  height: var(--px-ic-sm);
}

.cc-kpi__label {
  font-size: var(--px-type-label);
  color: var(--px-text-secondary);
  font-weight: var(--px-weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
  grid-area: label;
  overflow: hidden;
}

.cc-kpi__value {
  font-size: var(--px-type-kpi);
  line-height: var(--px-lh-kpi);
  font-weight: var(--px-weight-semibold);
  letter-spacing: var(--px-tracking-tight);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: var(--px-space-1);
  grid-area: value;
  overflow: hidden;
}

.cc-kpi__sub {
  font-size: var(--px-type-meta);
  color: var(--px-text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
  grid-area: sub;
  overflow: hidden;
}

.cc-panel {
  padding: var(--px-space-3);
  gap: var(--px-space-2);
  flex-direction: column;
  display: flex;
}

.cc-panel__head {
  justify-content: space-between;
  align-items: center;
  gap: var(--px-space-2);
  display: flex;
}

.cc-panel__title {
  align-items: center;
  gap: var(--px-space-2);
  font-size: var(--px-type-card-title);
  line-height: var(--px-lh-card-title);
  font-weight: var(--px-weight-semibold);
  margin: 0;
  display: inline-flex;
}

.cc-panel__title .px-ic {
  color: var(--px-brand);
}

.cc-link {
  align-items: center;
  gap: var(--px-space-1);
  color: var(--px-text-link);
  font-size: var(--px-text-13);
  font-weight: var(--px-weight-medium);
  text-decoration: none;
  display: inline-flex;
}

.cc-link:hover {
  color: var(--px-text-link-hover);
}

.cc-list {
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.cc-list li + li {
  border-top: var(--px-hairline) solid var(--px-border-hairline);
}

.cc-list__row {
  align-items: center;
  gap: var(--px-space-2-5);
  min-height: var(--px-size-row);
  padding: var(--px-space-1-5) var(--px-space-1);
  border-radius: var(--px-radius-control);
  color: var(--px-text-primary);
  text-decoration: none;
  display: flex;
}

.cc-list__row:hover {
  background: var(--px-fill-hover);
}

.cc-list__ic {
  width: var(--px-size-avatar-sm);
  height: var(--px-size-avatar-sm);
  border-radius: var(--px-radius-control);
  background: var(--px-warning-bg);
  color: var(--px-warning);
  flex: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.cc-list__main {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.cc-list__t {
  font-size: var(--px-text-13);
  font-weight: var(--px-weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.cc-list__d {
  font-size: var(--px-text-12);
  color: var(--px-text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.cc-list__when {
  font-size: var(--px-text-12);
  color: var(--px-text-tertiary);
  white-space: nowrap;
  flex: none;
}

.cc-asof {
  font-size: var(--px-text-12);
  color: var(--px-text-tertiary);
  margin: 0;
}

.cc-empty {
  text-align: center;
  align-items: center;
  gap: var(--px-space-1);
  padding: var(--px-space-8) var(--px-space-4);
  border-radius: var(--px-radius-card);
  background: var(--px-gl-raised);
  box-shadow: inset 0 var(--px-hairline) 0 var(--px-gl-edge), var(--px-gl-shadow-raised);
  flex-direction: column;
  display: flex;
}

.cc-panel .cc-empty, .cc-tablewrap .cc-empty {
  box-shadow: none;
  padding: var(--px-space-6) var(--px-space-3);
  background: none;
}

.cc-empty__ic {
  width: var(--px-size-avatar-lg);
  height: var(--px-size-avatar-lg);
  border-radius: var(--px-radius-tile);
  background: var(--px-fill-selected);
  color: var(--px-brand);
  margin-bottom: var(--px-space-1-5);
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.cc-empty__t {
  font-size: var(--px-type-card-title);
  font-weight: var(--px-weight-semibold);
  margin: 0;
}

.cc-empty__d {
  max-width: var(--px-size-modal);
  font-size: var(--px-text-13);
  color: var(--px-text-secondary);
  margin: 0;
}

.cc-skel {
  height: var(--px-size-row);
  margin: var(--px-space-2);
  border-radius: var(--px-radius-control);
  background: linear-gradient(90deg, var(--px-fill-sunken) 0%, var(--px-fill-hover) 50%, var(--px-fill-sunken) 100%);
  animation: px-shimmer var(--px-dur-skeleton) var(--px-ease-linear) infinite;
  background-size: 200% 100%;
}

.cc-spin {
  width: var(--px-size-icon-sm);
  height: var(--px-size-icon-sm);
  border-radius: var(--px-radius-pill);
  border: var(--px-stroke-2) solid var(--px-border-default);
  border-top-color: var(--px-brand);
  animation: px-spin var(--px-dur-spin) var(--px-ease-linear) infinite;
  flex: none;
}

.cc-note {
  align-items: flex-start;
  gap: var(--px-space-2);
  padding: var(--px-space-2) var(--px-space-2-5);
  border-radius: var(--px-radius-control);
  background: var(--px-neutral-bg);
  color: var(--px-text-secondary);
  font-size: var(--px-text-13);
  border: var(--px-hairline) solid var(--px-neutral-border);
  margin: 0;
  display: flex;
}

.cc-note .px-ic {
  margin-top: var(--px-space-px);
  flex: none;
}

.cc-note--warn {
  background: var(--px-warning-bg);
  border-color: var(--px-warning-border);
  color: var(--px-text-primary);
}

.cc-note--warn .px-ic {
  color: var(--px-warning);
}

.cc-note--danger {
  background: var(--px-danger-bg);
  border-color: var(--px-danger-border);
  color: var(--px-text-primary);
}

.cc-note--danger .px-ic {
  color: var(--px-danger);
}

.cc-pill {
  height: var(--px-size-chip);
  padding: 0 var(--px-space-2);
  border-radius: var(--px-radius-pill);
  font-size: var(--px-text-12);
  font-weight: var(--px-weight-medium);
  white-space: nowrap;
  border: var(--px-hairline) solid transparent;
  align-items: center;
  display: inline-flex;
}

.cc-pill + .cc-pill {
  margin-left: var(--px-space-1);
}

.cc-pill--ok {
  background: var(--px-success-bg);
  color: var(--px-success);
  border-color: var(--px-success-border);
}

.cc-pill--warn {
  background: var(--px-warning-bg);
  color: var(--px-warning);
  border-color: var(--px-warning-border);
}

.cc-pill--danger {
  background: var(--px-danger-bg);
  color: var(--px-danger);
  border-color: var(--px-danger-border);
}

.cc-pill--info {
  background: var(--px-info-bg);
  color: var(--px-info);
  border-color: var(--px-info-border);
}

.cc-pill--muted {
  background: var(--px-neutral-bg);
  color: var(--px-text-secondary);
  border-color: var(--px-neutral-border);
}

.cc-tag {
  margin-left: var(--px-space-1-5);
  padding: 0 var(--px-space-1-5);
  border-radius: var(--px-radius-pill);
  background: var(--px-fill-selected);
  color: var(--px-brand);
  font-size: var(--px-text-11);
  font-weight: var(--px-weight-semibold);
}

.cc-verify {
  align-items: center;
  gap: var(--px-space-1-5);
  height: var(--px-size-btn-sm);
  padding: 0 var(--px-space-2-5);
  border-radius: var(--px-radius-pill);
  font-size: var(--px-text-12);
  font-weight: var(--px-weight-medium);
  border: var(--px-hairline) solid transparent;
  display: inline-flex;
}

.cc-verify--ok {
  background: var(--px-success-bg);
  color: var(--px-success);
  border-color: var(--px-success-border);
}

.cc-verify--bad {
  background: var(--px-danger-bg);
  color: var(--px-danger);
  border-color: var(--px-danger-border);
}

.cc-tablewrap {
  padding: 0;
  overflow-x: auto;
}

.cc-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--px-text-13);
}

.cc-table th, .cc-table td {
  text-align: left;
  padding: 0 var(--px-space-3);
  height: var(--px-size-row);
  border-bottom: var(--px-hairline) solid var(--px-border-hairline);
  vertical-align: middle;
}

.cc-table thead th {
  height: var(--px-size-row-compact);
  background: var(--px-table-head-bg);
  color: var(--px-table-head-fg);
  font-size: var(--px-text-12);
  font-weight: var(--px-weight-medium);
  white-space: nowrap;
}

.cc-table tbody tr:last-child > * {
  border-bottom: 0;
}

.cc-table tbody tr:hover > td {
  background: var(--px-fill-hover);
}

.cc-who {
  min-width: 0;
  padding: var(--px-space-1) 0;
  flex-direction: column;
  display: flex;
}

.cc-who__n {
  font-weight: var(--px-weight-medium);
  white-space: nowrap;
}

.cc-who__e {
  font-size: var(--px-text-12);
  color: var(--px-text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.cc-row-actions {
  text-align: right;
  white-space: nowrap;
}

.cc-btn-q {
  height: var(--px-size-btn-xs);
  padding: 0 var(--px-space-2);
  border-radius: var(--px-radius-pill);
  color: var(--px-text-link);
  font: inherit;
  font-size: var(--px-text-12);
  font-weight: var(--px-weight-medium);
  cursor: pointer;
  background: none;
  border: 0;
}

.cc-btn-q:hover {
  background: var(--px-fill-hover);
}

.cc-btn-q--danger {
  color: var(--px-danger);
}

.cc-btn-q:disabled {
  opacity: var(--px-opacity-disabled);
  cursor: default;
}

.cc-row-click {
  cursor: pointer;
}

.cc-row-click[data-open] > td {
  background: var(--px-fill-selected);
}

.cc-row-detail > td {
  height: auto;
  padding: var(--px-space-2) var(--px-space-3) var(--px-space-3);
  background: var(--px-fill-sunken);
}

.cc-nowrap {
  white-space: nowrap;
}

.cc-trunc {
  max-width: var(--px-size-search-min);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.cc-muted {
  color: var(--px-text-tertiary);
}

.cc-hash {
  margin: var(--px-space-2) 0 0;
  font-family: var(--px-font-mono);
  font-size: var(--px-text-11);
  color: var(--px-text-tertiary);
  word-break: break-all;
}

.cc-sr {
  width: var(--px-hairline);
  height: var(--px-hairline);
  clip-path: inset(50%);
  white-space: nowrap;
  position: absolute;
  overflow: hidden;
}

.cc-more {
  align-self: center;
}

@media (max-width: 767px) {
  .cc-hide-sm {
    display: none;
  }

  .cc-table th, .cc-table td {
    padding: 0 var(--px-space-2);
  }
}

.cc-c-lbl {
  display: none;
}

@media (max-width: 767px) {
  .cc-tablewrap:has(.cc-table--cards) {
    overflow-x: visible;
  }

  .cc-table--cards, .cc-table--cards tbody {
    width: 100%;
    display: block;
  }

  .cc-table--cards thead {
    display: none;
  }

  .cc-table--cards tr {
    align-items: center;
    gap: var(--px-space-1-5);
    padding: var(--px-space-2-5) var(--px-space-3);
    border-bottom: var(--px-hairline) solid var(--px-border-hairline);
    flex-wrap: wrap;
    min-width: 0;
    display: flex;
  }

  .cc-table--cards tbody tr:last-child {
    border-bottom: 0;
  }

  .cc-table--cards tr > td, .cc-table--cards td.cc-hide-sm {
    border: 0;
    min-width: 0;
    height: auto;
    padding: 0;
    display: block;
  }

  .cc-table--cards tbody tr:hover > td {
    background: none;
  }

  .cc-table--cards tbody tr.cc-row-click:hover, .cc-table--cards .cc-row-click[data-open] {
    background: var(--px-fill-hover);
  }

  .cc-table--cards .cc-row-click[data-open] > td {
    background: none;
  }

  .cc-table--cards .cc-c-main, .cc-table--cards .cc-c-title, .cc-table--cards .cc-row-actions {
    flex: 1 0 100%;
  }

  .cc-table--cards .cc-c-main .cc-who {
    padding: 0;
  }

  .cc-table--cards .cc-who__n {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .cc-table--cards .cc-c-strong {
    font-weight: var(--px-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .cc-table--cards .cc-c-chip {
    gap: var(--px-space-1);
    flex-wrap: wrap;
    display: inline-flex;
  }

  .cc-table--cards .cc-c-chip .cc-pill + .cc-pill {
    margin-left: 0;
  }

  .cc-table--cards .cc-c-meta {
    font-size: var(--px-text-12);
    color: var(--px-text-tertiary);
  }

  .cc-table--cards .cc-c-lbl {
    display: inline;
  }

  .cc-table--cards .cc-trunc {
    max-width: 100%;
  }

  .cc-table--cards .cc-c-title {
    font-weight: var(--px-weight-medium);
    order: -2;
  }

  .cc-table--cards .cc-c-result {
    order: -1;
    margin-left: auto;
  }

  .cc-table--cards .cc-c-title {
    flex: 1 1 0;
  }

  .cc-table--cards .cc-c-who {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 0;
    overflow: hidden;
  }

  .cc-table--cards .cc-c-why {
    color: var(--px-text-secondary);
    flex: 1 0 100%;
  }

  .cc-table--cards .cc-row-actions {
    gap: var(--px-space-2);
    text-align: left;
    white-space: normal;
    margin-top: var(--px-space-1);
    display: flex;
  }

  .cc-table--cards .cc-row-actions:empty {
    display: none;
  }

  .cc-table--cards .cc-row-actions .cc-btn-q {
    height: var(--px-size-btn-sm);
    border: var(--px-hairline) solid var(--px-border-default);
    flex: 1;
  }

  .cc-table--cards .cc-row-detail > td {
    padding: var(--px-space-2);
    border-radius: var(--px-radius-control);
    flex: 1 0 100%;
  }

  .cc-table--cards tr.cc-row-detail {
    padding-top: 0;
  }

  .cc-table--log.cc-table--cards tr.cc-row-click {
    column-gap: var(--px-space-2);
    row-gap: var(--px-space-1);
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "title title result"
                         "when who who"
                         "why why why";
    display: grid;
  }

  .cc-table--log.cc-table--cards .cc-c-title {
    grid-area: title;
  }

  .cc-table--log.cc-table--cards .cc-c-result {
    grid-area: result;
    align-self: start;
  }

  .cc-table--log.cc-table--cards .cc-c-when {
    grid-area: when;
  }

  .cc-table--log.cc-table--cards .cc-c-who {
    grid-area: who;
  }

  .cc-table--log.cc-table--cards .cc-c-why {
    grid-area: why;
  }

  .cc-tabs {
    align-self: stretch;
  }

  .cc-tab {
    padding: 0 var(--px-space-2);
    flex: 1 0 auto;
    justify-content: center;
  }
}

.cc-diff {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--px-text-12-5);
  border-radius: var(--px-radius-control);
  background: var(--px-gl-solid);
  overflow: hidden;
}

.cc-diff th, .cc-diff td {
  text-align: left;
  padding: var(--px-space-1-5) var(--px-space-2);
  border-bottom: var(--px-hairline) solid var(--px-border-hairline);
  vertical-align: top;
  word-break: break-word;
}

.cc-diff thead th {
  color: var(--px-text-tertiary);
  font-weight: var(--px-weight-medium);
  font-size: var(--px-text-11);
  text-transform: uppercase;
  letter-spacing: var(--px-tracking-caps);
}

.cc-diff tbody th {
  color: var(--px-text-secondary);
  font-weight: var(--px-weight-medium);
  width: 30%;
}

.cc-diff tr[data-changed] td:last-child {
  color: var(--px-success);
  font-weight: var(--px-weight-medium);
  background: var(--px-success-bg);
}

.cc-diff tr[data-changed] td:nth-child(2) {
  color: var(--px-text-tertiary);
  text-decoration: line-through;
}

.cc-btn {
  justify-content: center;
  align-items: center;
  gap: var(--px-space-1-5);
  height: var(--px-size-btn-sm);
  padding: 0 var(--px-space-3);
  border-radius: var(--px-radius-pill);
  font: inherit;
  font-size: var(--px-text-13);
  font-weight: var(--px-weight-medium);
  cursor: pointer;
  border: var(--px-hairline) solid transparent;
  white-space: nowrap;
  display: inline-flex;
}

.cc-btn .px-ic {
  width: var(--px-ic-sm);
  height: var(--px-ic-sm);
}

.cc-btn:disabled {
  opacity: var(--px-opacity-disabled);
  cursor: default;
}

.cc-btn--danger {
  background: var(--px-danger);
  color: var(--px-text-on-accent);
}

.cc-sheet-wrap {
  z-index: var(--px-z-modal);
  background: var(--px-overlay);
  animation: ds-fade var(--px-dur-pop) var(--px-ease-out);
  justify-content: flex-end;
  display: flex;
  position: fixed;
  inset: 0;
}

.cc-sheet {
  width: min(var(--px-size-drawer), 100%);
  background: var(--px-gl-overlay);
  border-left: var(--px-hairline) solid var(--px-gl-line);
  height: 100%;
  box-shadow: inset 0 var(--px-hairline) 0 var(--px-gl-edge), var(--px-gl-shadow-overlay);
  -webkit-backdrop-filter: blur(min(var(--px-gl-blur-overlay), var(--px-gl-blur-cap))) saturate(var(--px-gl-sat));
  backdrop-filter: blur(min(var(--px-gl-blur-overlay), var(--px-gl-blur-cap))) saturate(var(--px-gl-sat));
  animation: ds-drawer var(--px-dur-sheet) var(--px-ease-out);
  outline: none;
  flex-direction: column;
  display: flex;
}

@media (max-width: 767px) {
  .cc-sheet-wrap {
    align-items: flex-end;
  }

  .cc-sheet {
    border-left: 0;
    border-top: var(--px-hairline) solid var(--px-gl-line);
    border-radius: var(--px-radius-panel) var(--px-radius-panel) 0 0;
    width: 100%;
    height: auto;
    max-height: 92dvh;
    animation: ds-toast var(--px-dur-sheet) var(--px-ease-out);
  }
}

.cc-sheet__head {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--px-space-2);
  padding: var(--px-space-4) var(--px-space-4) var(--px-space-2);
  display: flex;
}

.cc-sheet__title {
  font-size: var(--px-text-18);
  line-height: var(--px-lh-18);
  font-weight: var(--px-weight-semibold);
  letter-spacing: var(--px-tracking-tight);
  margin: 0;
}

.cc-sheet__sub {
  margin: var(--px-space-1) 0 0;
  font-size: var(--px-text-13);
  color: var(--px-text-secondary);
}

.cc-sheet__body {
  min-height: 0;
  padding: var(--px-space-2) var(--px-space-4) var(--px-space-3);
  gap: var(--px-space-3);
  flex-direction: column;
  flex: 1;
  display: flex;
  overflow-y: auto;
}

.cc-sheet__foot {
  justify-content: flex-end;
  gap: var(--px-space-2);
  padding: var(--px-space-3) var(--px-space-4) calc(var(--px-space-3) + env(safe-area-inset-bottom));
  border-top: var(--px-hairline) solid var(--px-border-hairline);
  flex: none;
  display: flex;
}

.cc-form, .cc-review {
  gap: var(--px-space-3);
  flex-direction: column;
  display: flex;
}

.cc-review__sum {
  font-size: var(--px-text-14);
  font-weight: var(--px-weight-semibold);
  margin: 0;
}

.cc-review__reason, .cc-req__reason {
  font-size: var(--px-text-13);
  color: var(--px-text-secondary);
  margin: 0;
}

.cc-field {
  gap: var(--px-space-1);
  flex-direction: column;
  display: flex;
}

.cc-field label {
  font-size: var(--px-type-label);
  font-weight: var(--px-weight-medium);
  color: var(--px-text-secondary);
}

.cc-opt {
  color: var(--px-text-tertiary);
  font-weight: var(--px-weight-regular);
}

.cc-field input, .cc-field textarea, .cc-field select, .cc-input {
  width: 100%;
  min-height: var(--px-size-input);
  padding: var(--px-space-1-5) var(--px-space-2-5);
  border-radius: var(--px-radius-control);
  border: var(--px-hairline) solid var(--px-border-default);
  background: var(--px-fill-input);
  box-shadow: var(--px-input-inset);
  color: var(--px-text-primary);
  font: inherit;
  font-size: var(--px-text-14);
}

.cc-field textarea {
  resize: vertical;
}

.cc-field input:focus, .cc-field textarea:focus, .cc-field select:focus, .cc-input:focus {
  border-color: var(--px-border-focus);
  box-shadow: var(--px-focus-glow);
  outline: 0;
}

.cc-field [aria-invalid="true"] {
  border-color: var(--px-danger);
  box-shadow: var(--px-focus-glow-danger);
}

.cc-field__help {
  font-size: var(--px-text-12);
  color: var(--px-text-tertiary);
  margin: 0;
}

.cc-field__err {
  font-size: var(--px-text-12);
  color: var(--px-danger);
  margin: 0;
}

.cc-reqs {
  gap: var(--px-space-2-5);
  flex-direction: column;
  display: flex;
}

.cc-req {
  padding: var(--px-space-3);
  gap: var(--px-space-2);
  scroll-margin-top: calc(var(--px-size-topbar) + var(--px-space-3));
  flex-direction: column;
  display: flex;
}

.cc-req:target {
  box-shadow: var(--px-ring-focus), var(--px-gl-shadow);
}

.cc-req__head {
  align-items: flex-start;
  gap: var(--px-space-2-5);
  display: flex;
}

.cc-req__main {
  flex: 1;
  min-width: 0;
}

.cc-req__t {
  font-size: var(--px-text-14);
  font-weight: var(--px-weight-semibold);
  margin: 0;
}

.cc-req__by {
  margin: var(--px-space-0-5) 0 0;
  font-size: var(--px-text-12);
  color: var(--px-text-tertiary);
}

.cc-req__decide {
  gap: var(--px-space-2);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.cc-req__decide .cc-input {
  min-width: var(--px-size-search-min);
  flex: 1;
  width: auto;
}

.cc-toasts {
  bottom: calc(var(--px-space-4) + env(safe-area-inset-bottom));
  z-index: var(--px-z-toast);
  gap: var(--px-space-2);
  width: min(var(--px-size-toast), calc(100vw - var(--px-space-6)));
  flex-direction: column;
  display: flex;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}

.cc-toast {
  align-items: center;
  gap: var(--px-space-2);
  padding: var(--px-space-2-5) var(--px-space-3);
  border-radius: var(--px-radius-tile-lg);
  background: var(--px-toast-bg);
  color: var(--px-toast-fg);
  box-shadow: var(--px-shadow-pop);
  font-size: var(--px-text-13);
  animation: ds-toast var(--px-dur-toast) var(--px-ease-out);
  display: flex;
}

.cc-toast span {
  flex: 1;
  min-width: 0;
}

.cc-toast a {
  color: inherit;
  font-weight: var(--px-weight-semibold);
  white-space: nowrap;
  text-decoration: underline;
}

.cc-toast--ok .px-ic {
  color: var(--px-success);
}

.cc-toast--warn .px-ic {
  color: var(--px-warning);
}

.cc-toast--danger .px-ic {
  color: var(--px-danger);
}

.cc-pal__lbl {
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
}

/*# sourceMappingURL=apps_control_app_cc-shell_13lergml62cqk.css.map*/