:root {
  --admin-accent: #5a0a87;
  --admin-accent-soft: #f6ecff;
  --admin-border: #dcc3f5;
  --admin-ink: #24324a;
  --admin-muted: #6c6f85;
  --admin-success: #1f8f4d;
  --admin-error: #c62828;
  --admin-bg: linear-gradient(180deg, #fffefc 0%, #f9f3ff 100%);
}

.page-class-upskill-admin {
  background: var(--admin-bg);
  font-size: calc(1rem - 1px);
}

.page-class-upskill-admin .pv-section {
  max-width: 1120px;
  margin: 98px auto 36px;
  padding: 20px;
  transform: none;
  position: relative;
}

.page-class-upskill-admin #pv-local-menu,
.page-class-upskill-admin .pv-local-menu {
  position: absolute;
  top: 66px;
  left: 20px;
  margin: 0;
  width: auto;
  transform: translateY(-100%);
}

.page-class-upskill-admin #pv-local-menu .pv-menu-title,
.page-class-upskill-admin #pv-local-menu .pv-menu-nav {
  width: max-content;
  min-width: 100%;
}

.page-class-upskill-admin .pv-header-section {
  margin: 0 0 24px;
  text-align: right;
}

.page-class-upskill-admin .pv-header-title {
  font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.05;
}

.page-class-upskill-admin .pv-header-subtitle {
  font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.05;
  margin: 4px 0 0;
}

.page-class-upskill-admin .pv-header-divider {
  margin: 0 0 18px;
  transform: translateY(-38px);
}

.admin-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 12, 22, 0.88);
  backdrop-filter: blur(10px);
}

.admin-lock-card {
  width: min(420px, 92vw);
  padding: 34px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.admin-lock-card h2 {
  margin: 0 0 10px;
  color: var(--admin-accent);
}

.admin-lock-card p {
  margin: 0 0 18px;
  color: var(--admin-muted);
}

.admin-lock-card input,
.admin-lock-card button {
  width: 100%;
  border-radius: 10px;
  font: inherit;
}

.admin-lock-card input {
  padding: 14px 16px;
  border: 2px solid #ded7ea;
  outline: none;
}

.admin-lock-card input:focus {
  border-color: var(--admin-accent);
}

.admin-lock-card button {
  margin-top: 12px;
  padding: 14px 16px;
  border: 0;
  background: var(--admin-accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.admin-lock-card button:disabled {
  opacity: 0.7;
  cursor: wait;
}

.admin-lock-error {
  margin-top: 14px;
  color: var(--admin-error);
  font-weight: 700;
}

.admin-main-content {
  gap: 18px;
  align-items: stretch;
}

.admin-leftbox,
.admin-rightbox {
  min-width: 0;
  border: 1px solid var(--admin-border);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 30px rgba(90, 10, 135, 0.08);
}

.admin-leftbox {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-rightbox {
  flex: 0 0 75%;
  max-width: 75%;
  padding: 22px;
}

.admin-left-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-left-header h2 {
  margin: 0;
  color: #16355d;
}

.admin-control-stack {
  display: grid;
  gap: 10px;
}

.admin-field {
  display: grid;
  gap: 5px;
}

.admin-field span {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #16355d;
}

.admin-input,
.admin-text-input,
.admin-textarea,
.admin-answer-select {
  width: 100%;
  max-width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--admin-border);
  border-radius: 12px;
  background: #fff;
  color: var(--admin-ink);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.25;
  outline: none;
  box-sizing: border-box;
}

select.admin-input,
select.admin-answer-select {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 34px;
}

.admin-input:focus,
.admin-text-input:focus,
.admin-textarea:focus,
.admin-answer-select:focus {
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 3px rgba(90, 10, 135, 0.12);
}

.admin-input:disabled {
  background: #f6f2fb;
  color: #8b84a0;
}

.admin-left-actions {
  display: flex;
}

.admin-status {
  padding: 10px 12px;
  border-radius: 12px;
  line-height: 1.45;
  font-size: 0.88rem;
}

.admin-status-info {
  background: #f3ecff;
  color: #5a0a87;
}

.admin-status-success {
  background: #e8f7ee;
  color: var(--admin-success);
}

.admin-status-error {
  background: #ffeceb;
  color: var(--admin-error);
}

.admin-workspace-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.admin-workspace-header h2 {
  margin: 0 0 6px;
  color: #16355d;
}

.admin-workspace-header p {
  margin: 0;
  color: var(--admin-muted);
}

.admin-editor-form {
  display: grid;
  gap: 18px;
}

.admin-editor-host {
  min-height: 500px;
}

.admin-empty-state {
  display: grid;
  place-items: center;
  min-height: 420px;
  padding: 36px;
  border: 1px dashed var(--admin-border);
  border-radius: 18px;
  background: #fcfaff;
  text-align: center;
}

.admin-empty-state h3 {
  margin: 0 0 8px;
  color: #16355d;
}

.admin-empty-state p {
  margin: 0;
  color: var(--admin-muted);
  max-width: 520px;
}

.admin-editor-panel {
  display: grid;
  gap: 18px;
}

.admin-editor-card,
.admin-case-card,
.admin-case-question-card {
  padding: 18px;
  border: 1px solid var(--admin-border);
  border-radius: 16px;
  background: #fff;
}

.admin-case-card {
  background: #faf6ff;
}

.admin-case-card h3,
.admin-case-question-card h3,
.admin-editor-card h3 {
  margin: 0 0 14px;
  color: #16355d;
}

.admin-card-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.admin-card-header-row h3 {
  margin: 0;
}

.admin-inline-meta {
  display: grid;
  gap: 5px;
  min-width: 140px;
  max-width: 160px;
}

.admin-inline-meta span {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #16355d;
}

.admin-form-grid {
  display: grid;
  gap: 16px;
}

.admin-form-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-form-grid.admin-record-row {
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: end;
}

.admin-readonly {
  padding: 10px 12px;
  border: 1px solid #e2d6f1;
  border-radius: 12px;
  background: #faf7ff;
  color: #4b4474;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.admin-field.admin-record-id-field {
  max-width: 140px;
}

.admin-field.admin-record-id-field .admin-readonly {
  justify-content: flex-start;
}

.admin-textarea {
  min-height: 60px;
  height: 60px;
  resize: none;
  line-height: 1.55;
  overflow-y: hidden;
}

.admin-textarea.short {
  min-height: 48px;
  height: 48px;
}

.admin-textarea.large {
  min-height: 96px;
  height: 96px;
}

.admin-answer-grid {
  display: grid;
  gap: 12px;
}

.admin-answer-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.admin-answer-key {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 12px;
  background: #f3ecff;
  color: var(--admin-accent);
  font-weight: 700;
}

.admin-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.admin-primary-button,
.admin-secondary-button,
.admin-ghost-button {
  border-radius: 12px;
  padding: 9px 14px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-primary-button {
  border: 0;
  background: var(--admin-accent);
  color: #fff;
}

.admin-primary-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.admin-secondary-button,
.admin-ghost-button {
  border: 1px solid var(--admin-border);
  background: #fff;
  color: #3a3561;
}

.admin-secondary-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

@media (max-width: 980px) {
  .page-class-upskill-admin .admin-main-content {
    flex-direction: column;
  }

  .page-class-upskill-admin .admin-leftbox,
  .page-class-upskill-admin .admin-rightbox {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .admin-form-grid.admin-record-row,
  .admin-form-grid.two-col {
    grid-template-columns: 1fr;
  }

  .admin-field.admin-record-id-field {
    max-width: 100%;
  }

  .admin-card-header-row {
    align-items: stretch;
  }

  .admin-inline-meta {
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .admin-editor-actions {
    flex-direction: column;
  }

  .admin-primary-button,
  .admin-secondary-button {
    width: 100%;
  }
}