/* Presentation only. Keep the deployed Vue, authentication and editor code intact. */
.cms-skin {
  --cms-canvas: #f5f7fa;
  --cms-surface: #ffffff;
  --cms-ink: #253244;
  --cms-muted: #58677b;
  --cms-line: #dce2ea;
  --cms-accent: #245db5;
  --cms-accent-hover: #194b98;
  --cms-accent-soft: #edf3fc;
  --cms-danger: #b8343f;
  --cms-success: #23734d;
  --cms-control-radius: 6px;
  --cms-surface-radius: 12px;
  --cms-space-tight: 8px;
  --cms-space-related: 12px;
  --cms-space-field: 24px;
  --cms-space-section: 32px;
  --cms-header-height: 72px;
  --cms-sidebar-width: 220px;
  margin: 0;
  color: var(--cms-ink);
  background: var(--cms-canvas);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}

.cms-skin *,
.cms-skin *::before,
.cms-skin *::after {
  box-sizing: border-box;
}

.cms-skin ::selection {
  color: var(--cms-ink);
  background: #dce9ff;
}

.cms-skin :is(input, textarea) {
  caret-color: var(--cms-accent);
}

.cms-skin :is(button, a, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cms-accent);
  outline-offset: 3px;
}

.cms-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1900;
  display: flex;
  align-items: center;
  gap: var(--cms-space-section);
  height: var(--cms-header-height);
  padding: 0 32px;
  border-bottom: 1px solid var(--cms-line);
  background: var(--cms-surface);
}

.cms-brand {
  flex: 0 0 188px;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: .08em;
}

.cms-header-title {
  margin: 0;
  color: var(--cms-muted);
  font-size: 14px;
  font-weight: 500;
}

.cms-skin > .el-container {
  width: 100%;
  min-height: 100vh;
  padding-top: var(--cms-header-height);
}

.cms-skin > .el-container > .el-aside {
  position: fixed;
  inset: var(--cms-header-height) auto 0 0;
  width: var(--cms-sidebar-width) !important;
  padding: 16px 12px;
  border-right: 1px solid var(--cms-line);
  background: var(--cms-surface);
}

.cms-skin .el-aside :is(.el-menu, .el-submenu__title, .el-menu-item) {
  border: 0;
  color: var(--cms-muted) !important;
  background: var(--cms-surface) !important;
}

.cms-skin .el-aside .el-submenu__title {
  height: 44px;
  padding-left: 12px !important;
  line-height: 44px;
  font-weight: 600;
}

.cms-skin .el-submenu__title :is(i, .el-submenu__icon-arrow) {
  color: var(--cms-muted);
}

.cms-skin .el-menu-item-group__title {
  padding: 6px 0;
}

.cms-skin .el-aside .el-menu-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: 58px;
  margin: 4px 0;
  padding: 8px 16px !important;
  border-radius: var(--cms-control-radius);
  font-size: 11px;
  line-height: 1.5;
}

.cms-skin .el-aside .el-menu-item::before {
  color: var(--cms-ink);
  font-size: 14px;
  font-weight: 550;
}

/* Supplement the existing labels without replacing their text or handlers. */
.cms-skin .el-menu-item-group > ul > :nth-child(1)::before { content: "首頁輪播"; }
.cms-skin .el-menu-item-group > ul > :nth-child(2)::before { content: "新增輪播"; }
.cms-skin .el-menu-item-group > ul > :nth-child(3)::before { content: "獲獎紀錄"; }
.cms-skin .el-menu-item-group > ul > :nth-child(4)::before { content: "團隊成員"; }
.cms-skin .el-menu-item-group > ul > :nth-child(5)::before { content: "作品列表"; }
.cms-skin .el-menu-item-group > ul > :nth-child(6)::before { content: "新增成員"; }
.cms-skin .el-menu-item-group > ul > :nth-child(7)::before { content: "新增獎項"; }
.cms-skin .el-menu-item-group > ul > :nth-child(8)::before { content: "新增作品"; }
.cms-skin .el-menu-item-group > ul > :nth-child(9)::before { content: "作品類別"; }
.cms-skin .el-menu-item-group > ul > :nth-child(10)::before { content: "網站文字"; }

.cms-skin .el-aside .el-menu-item:is(:hover, :focus) {
  color: var(--cms-accent) !important;
  background: var(--cms-accent-soft) !important;
}

.cms-skin .el-aside .el-menu-item:is(:hover, :focus)::before {
  color: var(--cms-accent);
}

.cms-skin:has(.banner-list) .el-menu-item-group > ul > :nth-child(1),
.cms-skin:has(.el-main > [data-v-1210706d]) .el-menu-item-group > ul > :nth-child(2),
.cms-skin:has(.awards-list) .el-menu-item-group > ul > :nth-child(3),
.cms-skin:has(.teams-list) .el-menu-item-group > ul > :nth-child(4),
.cms-skin:has(.projects-list, .project-edit-container) .el-menu-item-group > ul > :nth-child(5),
.cms-skin:has(.el-main > [data-v-dd0c144c]) .el-menu-item-group > ul > :nth-child(6),
.cms-skin:has(.el-main > [data-v-ef502e6a]) .el-menu-item-group > ul > :nth-child(7),
.cms-skin:has(.el-main > [data-v-f72ba75e]) .el-menu-item-group > ul > :nth-child(8),
.cms-skin:has(.category-list) .el-menu-item-group > ul > :nth-child(9),
.cms-skin:has(.el-main > [data-v-56772a5b]) .el-menu-item-group > ul > :nth-child(10) {
  color: var(--cms-accent) !important;
  background: var(--cms-accent-soft) !important;
}

.cms-skin > .el-container > .el-main {
  min-width: 0;
  width: auto;
  padding: 32px;
  overflow: visible;
}

.cms-skin > .el-container:has(> .el-aside) > .el-main {
  margin-left: var(--cms-sidebar-width);
}

.cms-skin .el-main::before {
  display: block;
  margin-bottom: var(--cms-space-field);
  color: var(--cms-ink);
  font-size: 26px;
  font-weight: 650;
  line-height: 1.4;
}

.cms-skin .el-main:has(.banner-list)::before { content: "首頁輪播"; }
.cms-skin .el-main:has(.awards-list)::before { content: "獲獎紀錄"; }
.cms-skin .el-main:has(.teams-list)::before { content: "團隊成員"; }
.cms-skin .el-main:has(.projects-list)::before { content: "作品列表"; }
.cms-skin .el-main:has(.category-list)::before { content: "作品類別"; }
.cms-skin .el-main:has(> [data-v-56772a5b])::before { content: "網站文字"; }
.cms-skin .el-main:has(> [data-v-1210706d])::before { content: "新增輪播"; }
.cms-skin .el-main:has(> [data-v-dd0c144c])::before { content: "新增成員"; }
.cms-skin .el-main:has(> [data-v-ef502e6a])::before { content: "新增獎項"; }
.cms-skin .el-main:has(> [data-v-f72ba75e])::before { content: "新增作品"; }
.cms-skin .el-main:has(.project-edit-container)::before { content: "編輯作品"; }

.cms-skin .el-main > div:not(.login-container):has(> .el-form),
.cms-skin .el-main > div:has(> .el-upload) {
  max-width: 800px;
  padding: 32px;
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-surface-radius);
  background: var(--cms-surface);
}

.cms-skin .el-main .el-form {
  width: 100%;
}

.cms-skin .el-form-item {
  margin-bottom: var(--cms-space-field);
}

.cms-skin .el-form-item__label {
  display: block;
  float: none;
  width: auto !important;
  padding: 0 0 var(--cms-space-tight);
  color: var(--cms-ink);
  font-weight: 550;
  line-height: 1.6;
  text-align: left;
}

.cms-skin .el-form-item__content {
  margin-left: 0 !important;
  line-height: 1.6;
}

.cms-skin :is(.el-input__inner, .el-textarea__inner) {
  border-color: #b7c2d0;
  border-radius: var(--cms-control-radius);
  color: var(--cms-ink);
  background: var(--cms-surface);
  font-family: inherit;
  font-size: 14px;
}

.cms-skin .el-input__inner {
  height: 44px;
  padding: 0 14px;
  line-height: 44px;
}

.cms-skin .el-textarea__inner {
  padding: 12px 14px;
  line-height: 1.8;
}

.cms-skin :is(.el-input__inner, .el-textarea__inner)::placeholder {
  color: var(--cms-muted);
  opacity: 1;
}

.cms-skin :is(.el-input__inner, .el-textarea__inner):focus {
  border-color: var(--cms-accent);
}

.cms-skin .el-select {
  max-width: 100%;
  padding-right: 0;
}

.cms-skin .el-form-item__content:has(> .el-select) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cms-space-related);
}

.cms-skin .el-form-item__content > .el-select {
  flex: 1;
  min-width: 160px;
}

.cms-skin .el-button,
.cms-skin .project-edit-container .el-form-item__content > button:not(.el-button) {
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid #b7c2d0;
  border-radius: var(--cms-control-radius);
  color: var(--cms-ink);
  background: var(--cms-surface);
  font-family: inherit;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.3;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.cms-skin .el-button--primary {
  border-color: var(--cms-accent);
  color: #fff;
  background: var(--cms-accent);
}

.cms-skin .el-button--primary:is(:hover, :focus) {
  border-color: var(--cms-accent-hover);
  color: #fff;
  background: var(--cms-accent-hover);
}

.cms-skin .el-button--danger {
  border-color: #ddafb5;
  color: var(--cms-danger);
  background: #fff;
}

.cms-skin .el-button--danger:is(:hover, :focus) {
  border-color: var(--cms-danger);
  color: var(--cms-danger);
  background: #fff1f2;
}

.cms-skin .el-button--success {
  border-color: var(--cms-success);
  color: #fff;
  background: var(--cms-success);
}

.cms-skin .el-button--success:is(:hover, :focus) {
  border-color: #185738;
  color: #fff;
  background: #185738;
}

.cms-skin .el-button--default:is(:hover, :focus) {
  border-color: var(--cms-accent);
  color: var(--cms-accent);
  background: var(--cms-accent-soft);
}

.cms-skin .el-button.is-disabled,
.cms-skin .el-button.is-disabled:is(:hover, :focus) {
  border-color: var(--cms-line);
  color: #728094;
  background: #f0f2f5;
}

.cms-skin > button[aria-label="登出管理後台"] {
  top: 16px !important;
  right: 32px !important;
  min-height: 40px;
}

.cms-skin .el-table {
  width: 100%;
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-surface-radius);
  color: var(--cms-ink);
  background: var(--cms-surface);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.cms-skin .el-table :is(td, th).el-table__cell {
  padding: 16px 0;
  border-right: 0;
  border-bottom-color: var(--cms-line);
}

.cms-skin .el-table th.el-table__cell {
  padding: 14px 0;
  color: var(--cms-muted);
  background: #f9fafc;
  font-size: 13px;
  font-weight: 600;
}

.cms-skin .el-table .cell {
  padding: 0 16px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.cms-skin .el-table td:last-child .cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cms-space-tight);
}

.cms-skin .el-table .el-button {
  min-height: 36px;
  margin-left: 0;
  padding: 8px 12px;
  font-size: 13px;
}

.cms-skin .el-table .el-button--primary {
  border-color: #c2d4ef;
  color: var(--cms-accent);
  background: var(--cms-accent-soft);
}

.cms-skin .el-table .el-button--primary:is(:hover, :focus) {
  border-color: var(--cms-accent);
  color: var(--cms-accent-hover);
  background: #dce9fc;
}

.cms-skin .el-table--border::after,
.cms-skin .el-table--group::after {
  width: 0;
}

.cms-skin .projects-list .el-table {
  height: calc(100dvh - 196px) !important;
  min-height: 360px;
}

.cms-skin .projects-list :is(.el-table__body, .el-table__header) {
  min-width: 1050px;
}

.cms-skin .projects-list colgroup > :nth-child(1) { width: 64px; }
.cms-skin .projects-list colgroup > :nth-child(2) { width: 160px; }
.cms-skin .projects-list colgroup > :nth-child(3) { width: 190px; }
.cms-skin .projects-list colgroup > :nth-child(4) { width: 190px; }
.cms-skin .projects-list colgroup > :nth-child(5) { width: 96px; }
.cms-skin .projects-list colgroup > :is(:nth-child(6), :nth-child(7), :nth-child(8)) { width: 72px; }
.cms-skin .projects-list colgroup > :nth-child(9) { width: 156px; }

.cms-skin .el-table :is(.banner-image, .award-image, .team-image) {
  display: block;
  max-width: 100%;
  max-height: 100px;
  margin: auto 0;
  border-radius: var(--cms-control-radius);
  object-fit: contain;
}

.cms-skin .projects-list .el-image {
  width: 100% !important;
  max-width: 150px;
  height: 88px !important;
  border-radius: var(--cms-control-radius);
}

.cms-skin .projects-list .el-image__inner {
  object-fit: cover;
}

.cms-skin .category-list {
  max-width: 900px;
  padding: 0;
}

.cms-skin .category-list > .el-button {
  margin-bottom: var(--cms-space-field);
}

/* Match the frame while retaining the native columns and mobile scrolling. */
.cms-skin .category-list :is(.el-table__body, .el-table__header) {
  width: 100% !important;
  min-width: 460px;
}

.cms-skin .category-list colgroup > :nth-child(2) {
  width: auto;
}

.cms-skin .category-list .el-table__empty-block {
  width: 100% !important;
}

.cms-skin .el-switch.is-checked .el-switch__core {
  border-color: var(--cms-accent);
  background: var(--cms-accent);
}

.cms-skin :is(.el-upload, .el-upload-dragger) {
  max-width: 100%;
}

.cms-skin .el-upload:has(> .el-upload-dragger) {
  display: block;
  width: 100%;
}

.cms-skin .el-upload-dragger {
  width: 100%;
  min-height: 180px;
  border-color: #9fadc0;
  border-radius: var(--cms-control-radius);
  background: #fafbfd;
}

.cms-skin .el-upload-dragger:is(:hover, .is-dragover) {
  border-color: var(--cms-accent);
  background: var(--cms-accent-soft);
}

.cms-skin .el-upload-dragger .el-icon-upload {
  color: #7a8da9;
}

.cms-skin .el-upload-dragger .el-upload__text {
  padding: 0 16px;
  color: var(--cms-muted);
  line-height: 1.7;
}

.cms-skin .el-upload__text em {
  color: var(--cms-accent);
}

.cms-skin .el-upload__tip {
  margin-top: var(--cms-space-related);
  color: var(--cms-muted);
  font-size: 13px;
  line-height: 1.7;
}

.cms-skin .el-upload-list--picture {
  margin-bottom: var(--cms-space-related);
}

.cms-skin .el-upload--picture-card {
  border-color: #9fadc0;
  border-radius: var(--cms-control-radius);
  background: #fafbfd;
}

.cms-skin .project-edit-container {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  align-items: start;
  gap: var(--cms-space-section);
}

.cms-skin .project-edit-container > .left-panel {
  width: auto;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-surface-radius);
  background: var(--cms-surface);
}

.cms-skin .project-edit-container > .el-divider--vertical {
  display: none;
}

.cms-skin .project-edit-container > div:last-child {
  min-width: 0;
}

.cms-skin .project-edit-container > div:last-child > .el-form > .el-form-item:first-child .el-form-item__content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cms-space-tight);
}

.cms-skin .project-edit-container .el-button + .el-button {
  margin-left: 0;
}

.cms-skin .project-edit-container .el-button--success {
  margin: 16px 0 !important;
}

.cms-skin .project-edit-container > div:last-child > .el-form > div:not(.el-form-item) {
  margin: 0 0 var(--cms-space-field);
  padding: 24px;
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-surface-radius);
  background: var(--cms-surface);
}

.cms-skin .project-edit-container .left-panel .el-form-item__content:has(> .el-image) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cms-space-related);
}

.cms-skin .project-edit-container .left-panel .el-image {
  border-radius: var(--cms-control-radius);
}

.cms-skin .quill-editor {
  margin-bottom: var(--cms-space-related);
  background: var(--cms-surface);
}

.cms-skin .ql-toolbar.ql-snow {
  border-color: #b7c2d0;
  border-radius: var(--cms-control-radius) var(--cms-control-radius) 0 0;
  background: #f9fafc;
}

.cms-skin .ql-container.ql-snow {
  border-color: #b7c2d0;
  border-radius: 0 0 var(--cms-control-radius) var(--cms-control-radius);
  font-family: inherit;
  font-size: 15px;
}

.cms-skin .ql-editor {
  min-height: 240px;
  padding: 20px;
  color: var(--cms-ink);
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.cms-skin .ql-editor.ql-blank::before {
  color: var(--cms-muted);
}

.cms-skin .ql-snow .ql-tooltip {
  z-index: 10;
  max-width: 100%;
}

.cms-skin .el-dialog {
  max-width: calc(100% - 40px);
  border-radius: var(--cms-surface-radius);
}

.cms-skin .el-dialog__header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--cms-line);
}

.cms-skin .el-dialog__title {
  color: var(--cms-ink);
  font-size: 18px;
  font-weight: 600;
}

.cms-skin .el-dialog__body {
  padding: 24px;
  color: var(--cms-ink);
}

.cms-skin .el-dialog__footer {
  padding: 0 24px 24px;
}

.cms-skin .el-message-box {
  max-width: calc(100% - 40px);
  border-radius: var(--cms-surface-radius);
}

.cms-skin .el-select-dropdown__item.selected {
  color: var(--cms-accent);
}

.cms-skin .el-message {
  max-width: calc(100% - 32px);
  min-width: 0;
  margin-top: var(--cms-header-height);
  border-radius: var(--cms-control-radius);
}

.cms-skin .login-container {
  width: 100%;
  max-width: 440px;
  margin: 64px auto;
  padding: 40px;
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-surface-radius);
  background: var(--cms-surface);
  box-shadow: none;
}

.cms-skin .login-container .logo {
  margin-bottom: var(--cms-space-field);
  font-size: 24px;
  font-weight: 650;
}

.cms-skin .login-container .el-button {
  width: 100%;
  min-height: 44px;
}

.cms-skin .login-container .el-form-item:last-child {
  margin-bottom: 0;
}

@media (max-width: 1150px) {
  .cms-skin {
    --cms-sidebar-width: 196px;
    --cms-space-section: 24px;
  }

  .cms-brand { flex-basis: 164px; }
  .cms-skin > .el-container > .el-main { padding: 24px; }
  .cms-skin .project-edit-container { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
}

@media (max-width: 950px) {
  .cms-skin .project-edit-container { grid-template-columns: minmax(0, 1fr); }
  .cms-skin .project-edit-container > .left-panel { max-width: 100%; }
}

@media (max-width: 700px) {
  .cms-skin { --cms-header-height: 64px; }
  .cms-header { gap: 16px; padding: 0 20px; }
  .cms-brand { flex-basis: auto; font-size: 20px; }
  .cms-header-title { font-size: 12px; }

  .cms-skin > button[aria-label="登出管理後台"] {
    top: 12px !important;
    right: 20px !important;
    padding: 8px 12px;
  }

  .cms-skin > .el-container { flex-direction: column; }

  .cms-skin > .el-container > .el-aside {
    position: static;
    width: 100% !important;
    padding: 8px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--cms-line);
    overflow: visible;
  }

  .cms-skin .el-menu-item-group__title { padding: 0; }
  .cms-skin .el-menu-item-group > ul { display: flex; gap: 4px; overflow-x: auto; }
  .cms-skin .el-aside .el-menu-item { flex: 0 0 128px; height: 56px; margin: 0; }
  .cms-skin .el-aside .el-submenu__title::after { content: "左右滑動切換頁面"; position: absolute; right: 36px; font-size: 11px; font-weight: 400; }

  .cms-skin > .el-container > .el-main,
  .cms-skin > .el-container:has(> .el-aside) > .el-main {
    margin-left: 0;
    padding: 24px 20px;
  }

  .cms-skin .el-main::before { margin-bottom: 20px; font-size: 24px; }
  .cms-skin .el-main > div:not(.login-container):has(> .el-form),
  .cms-skin .el-main > div:has(> .el-upload) { padding: 24px 20px; }
  .cms-skin .project-edit-container > .left-panel,
  .cms-skin .project-edit-container > div:last-child > .el-form > div:not(.el-form-item) { padding: 20px; }
  .cms-skin .projects-list .el-table { height: 65dvh !important; }
  .cms-skin .projects-list::before { content: "可左右滑動查看全部欄位與操作"; display: block; margin-bottom: 12px; color: var(--cms-muted); font-size: 12px; }
  .cms-skin [data-v-56772a5b].el-table :is(.el-table__body, .el-table__header) { min-width: 680px; }
  .cms-skin .el-dialog { width: calc(100% - 32px) !important; max-width: 560px; }
  .cms-skin .login-container { margin: 32px auto; padding: 28px 24px; }
}

@media (max-width: 400px) {
  .cms-header-title { max-width: 88px; }
  .cms-skin .el-main > div:not(.login-container):has(> .el-form),
  .cms-skin .el-main > div:has(> .el-upload) { padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cms-skin *, .cms-skin *::before, .cms-skin *::after { animation-duration: .001ms !important; transition: none !important; }
}