.add-ticket {
  --page-bg: #f5f7fa;
  --surface: #ffffff;
  --surface-muted: #fafbfd;
  --line: #ebeef5;
  --line-strong: #dcdfe6;
  --text: #1f2d3d;
  --text-secondary: #606266;
  --text-muted: #909399;
  --primary: #409eff;
  --primary-soft: #ecf5ff;
  --danger: #f56c6c;
  --radius-sm: 0.04rem;
  --radius-md: 0.08rem;
  font-family: Roboto, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  background: var(--page-bg);
  color: var(--text);
}

.add-ticket .main-card {
  padding: 0.24rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
  overflow: hidden;
}

.add-ticket .main-card::before,
.add-ticket .main-card .top-line {
  display: none;
}

.add-ticket .page-header {
  display: flex;
  align-items: flex-start;
  gap: 0.12rem;
  padding-bottom: 0.18rem;
  border-bottom: 1px solid var(--line);
}

.add-ticket .page-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 0.36rem;
  height: 0.36rem;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease,
    background 0.16s ease;
}

.add-ticket .page-back:hover {
  color: var(--primary);
  border-color: #bfdcff;
  background: var(--primary-soft);
}

.add-ticket .page-back-icon {
  width: 0.16rem;
  height: 0.16rem;
}

.add-ticket .page-header-copy {
  min-width: 0;
}

.add-ticket .page-title {
  font-size: 0.22rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--text);
}

.add-ticket .page-intro {
  margin-top: 0.04rem;
  font-size: 0.12rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.add-ticket .main-form {
  margin-top: 0.02rem;
}

.add-ticket .form-shell {
  display: flex;
  flex-direction: column;
}

.add-ticket .form-section {
  padding: 0.18rem 0;
  border-bottom: 1px solid var(--line);
}

.add-ticket .form-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.add-ticket .section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.12rem;
  margin-bottom: 0.12rem;
}

.add-ticket .section-title {
  font-size: 0.16rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text);
}

.add-ticket .section-tip,
.add-ticket .field-help,
.add-ticket .action-tip,
.add-ticket .meta-label {
  margin-top: 0.04rem;
  font-size: 0.115rem;
  line-height: 1.58;
  color: var(--text-secondary);
}

.add-ticket .sub-section {
  padding: 0.14rem 0 0;
}

.add-ticket .sub-section.is-last {
  padding-bottom: 0;
}

.add-ticket .sub-title {
  margin-bottom: 0.08rem;
  font-size: 0.13rem;
  line-height: 1.42;
  font-weight: 600;
  color: var(--text);
}

.add-ticket .form-item-inline,
.add-ticket .field-item,
.add-ticket .no-margin {
  margin-bottom: 0;
}

.add-ticket .el-form-item {
  margin-bottom: 0.12rem;
}

.add-ticket .el-form-item:last-child {
  margin-bottom: 0;
}

.add-ticket .el-form-item__label {
  padding: 0 0 0.06rem;
  line-height: 1.4;
  font-size: 0.125rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.add-ticket .el-form-item__content {
  width: 100%;
  line-height: normal;
}

.add-ticket .compact-grid {
  display: grid;
  gap: 0.12rem 0.16rem;
}

.add-ticket .compact-grid-base {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.add-ticket .field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.14rem 0.18rem;
}

.add-ticket .field-block {
  min-width: 0;
}

.add-ticket .field-label {
  margin-bottom: 0.08rem;
  font-size: 0.125rem;
  line-height: 1.42;
  font-weight: 600;
  color: var(--text);
}

.add-ticket .select-wrap,
.add-ticket .select-host,
.add-ticket .select-title,
.add-ticket .select-type {
  width: 100%;
}

.add-ticket .el-input__inner,
.add-ticket .el-textarea__inner {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.add-ticket .el-input__inner {
  height: 0.42rem;
  line-height: 0.42rem;
}

.add-ticket .el-input__inner:hover,
.add-ticket .el-textarea__inner:hover {
  border-color: #c0c4cc;
}

.add-ticket .el-input__inner::placeholder,
.add-ticket .el-textarea__inner::placeholder {
  color: var(--text-muted);
}

.add-ticket .el-input__inner:focus,
.add-ticket .el-textarea__inner:focus,
.add-ticket .el-select .el-input.is-focus .el-input__inner,
.add-ticket .el-select .el-input__inner:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
}

.add-ticket .mini-input {
  margin-top: 0.08rem;
}

.add-ticket .mini-input .el-input__inner {
  height: 0.38rem;
}

.add-ticket .note-input .el-textarea__inner {
  min-height: 1.28rem !important;
  padding: 0.12rem 0.14rem;
  line-height: 1.65;
}

.add-ticket .chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.08rem;
}

.add-ticket .chip-grid {
  display: grid;
  gap: 0.1rem;
}

.add-ticket .chip-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.add-ticket .system-type-grid {
  gap: 0.12rem;
}

.add-ticket .chip-btn,
.add-ticket .chip-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0.34rem;
  padding: 0.06rem 0.12rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.12rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.16s ease, background 0.16s ease,
    color 0.16s ease;
}

.add-ticket .chip-btn:hover,
.add-ticket .chip-card:hover {
  border-color: #bfdcff;
  background: var(--primary-soft);
  color: var(--primary);
}

.add-ticket .chip-btn.is-active,
.add-ticket .chip-card.is-active {
  border-color: #a0cfff;
  background: var(--primary-soft);
  color: var(--primary);
}

.add-ticket .department-group .chip-btn {
  min-width: 0.88rem;
}

.add-ticket .chip-card {
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  min-height: 0.74rem;
  padding: 0.12rem;
  text-align: left;
}

.add-ticket .system-type-btn {
  align-items: center;
  justify-content: center;
  min-height: 0.52rem;
  padding: 0.1rem 0.12rem;
  background: var(--surface-muted);
  text-align: center;
}

.add-ticket .system-type-btn:hover {
  background: #f2f8ff;
}

.add-ticket .system-type-btn.is-active {
  border-color: #7db5ff;
  background: #edf5ff;
  color: #2f6fb7;
}

.add-ticket .system-type-btn .chip-card-title {
  font-size: 0.14rem;
  line-height: 1.3;
  font-weight: 600;
}

.add-ticket .chip-card-title {
  font-size: 0.135rem;
  line-height: 1.35;
  font-weight: 600;
  color: inherit;
}

.add-ticket .chip-card-desc {
  margin-top: 0.04rem;
  font-size: 0.115rem;
  line-height: 1.54;
  color: var(--text-secondary);
}

.add-ticket .chip-card.is-active .chip-card-desc {
  color: var(--primary);
}

.add-ticket .inline-note {
  font-size: 0.115rem;
  line-height: 1.58;
  color: var(--text-secondary);
}

.add-ticket .field-error {
  margin-top: 0.06rem;
  font-size: 0.112rem;
  line-height: 1.58;
  color: var(--danger);
}

.add-ticket .service-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.1rem 0.16rem;
  margin-top: 0.12rem;
  padding-top: 0.12rem;
  border-top: 1px solid var(--line);
}

.add-ticket .service-meta {
  min-width: 0;
}

.add-ticket .meta-value {
  display: block;
  margin-top: 0.04rem;
  font-size: 0.13rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}

.add-ticket .is-disabled {
  opacity: 0.56;
}

.add-ticket .is-disabled .chip-btn,
.add-ticket .is-disabled .chip-card {
  pointer-events: none;
}

.add-ticket .section-actions {
  padding-top: 0.2rem;
}

.add-ticket .action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.16rem;
}

.add-ticket .action-copy {
  min-width: 0;
}

.add-ticket .action-title {
  font-size: 0.13rem;
  line-height: 1.42;
  font-weight: 600;
  color: var(--text);
}

.add-ticket .action-error {
  margin-top: 0.04rem;
  font-size: 0.115rem;
  line-height: 1.58;
  color: var(--danger);
}

.add-ticket .action-controls {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: auto;
}

.add-ticket .upload-btn .el-button {
  height: 0.4rem;
  padding: 0 0.16rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-weight: 500;
  box-shadow: none;
}

.add-ticket .upload-btn .el-button:hover {
  border-color: #bfdcff;
  color: var(--primary);
  background: var(--primary-soft);
}

.add-ticket .sub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.12rem;
  height: 0.4rem;
  padding: 0 0.16rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #ffffff;
  font: inherit;
  font-size: 0.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease,
    opacity 0.16s ease;
}

.add-ticket .sub-btn:hover {
  background: #3a8ee6;
  border-color: #3a8ee6;
}

.add-ticket .sub-btn[disabled] {
  border-color: #c0c4cc;
  background: #c0c4cc;
  cursor: not-allowed;
}

.dis-item {
  color: #c0c4cc;
  cursor: not-allowed;
}

.el-main {
  overflow: unset;
}

.host-dialog .renew {
  color: var(--primary);
  margin-left: 0.05rem;
}

.renew-dialog .el-dialog__body {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

.renew-dialog .dialog-main {
  font-size: 0.15rem;
}

.renew-dialog .btn-ok,
.renew-dialog .btn-no {
  cursor: pointer;
}

.renew-dialog .btn-no {
  margin-left: 0.2rem;
}

@media screen and (max-width: 1200px) {
  .add-ticket .service-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 900px) {
  .add-ticket .compact-grid-base,
  .add-ticket .field-grid,
  .add-ticket .chip-grid-3,
  .add-ticket .service-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 750px) {
  .add-ticket .main-card {
    padding: 0.16rem;
  }

  .add-ticket .page-header {
    padding-bottom: 0.14rem;
  }

  .add-ticket .page-title {
    font-size: 0.2rem;
  }

  .add-ticket .section-head,
  .add-ticket .action-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .add-ticket .compact-grid-base,
  .add-ticket .field-grid,
  .add-ticket .chip-grid-3,
  .add-ticket .service-summary {
    grid-template-columns: 1fr;
  }

  .add-ticket .action-controls {
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
  }

  .add-ticket .upload-btn,
  .add-ticket .upload-btn .el-upload,
  .add-ticket .upload-btn .el-button,
  .add-ticket .sub-btn {
    width: 100%;
  }
}