/* ═══════════════════════════════════════════════════
   WISE DESIGN — 音乐解锁 (KgmDecrypt 同款卡片)
   ═══════════════════════════════════════════════════ */

:root {
  --p: #9fe870;
  --op: #0e0f0c;
  --pa: #cdffad;
  --pn: #c5edab;
  --pp: #e2f6d5;
  --k: #0e0f0c;
  --kd: #163300;
  --b: #454745;
  --m: #868685;
  --c: #ffffff;
  --s: #e8ebe6;
  --r: 24px;
  --rs: 12px;
  --rp: 9999px;
}

/* sage canvas */
html, body {
  margin: 0; padding: 0;
  background: var(--s) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--k);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body { padding: 40px 16px !important; }

/* ─── Nav header (merged into card, no shadow) ─── */
.wise-nav {
  max-width: 760px;
  margin: 0 auto 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: var(--c);
  border-radius: var(--r) var(--r) 0 0;
  border-bottom: 1px solid var(--s);
}
.wise-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--k);
}
.wise-nav-brand .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--p);
  flex-shrink: 0;
}
.wise-nav-brand .label { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }

/* ─── Right button (同 KgmDecrypt .rt a) ─── */
.wise-nav-back {
  font-size: 13px;
  font-weight: 600;
  color: var(--k);
  text-decoration: none;
  padding: 6px 16px;
  border-radius: var(--rp);
  border: 1px solid var(--k);
  transition: .15s;
  margin-left: auto;
  white-space: nowrap;
}
.wise-nav-back:hover { background: var(--k); color: var(--p); }

/* ─── White card (top flat, shadow spans both) ─── */
#app {
  background: var(--c) !important;
  border-radius: 0 0 var(--r) var(--r) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 48px 48px 40px !important;
  box-shadow: 0 4px 24px rgba(14,15,12,.06) !important;
  color: var(--k) !important;
}

/* ─── Upload Hero Card ─── */
.el-upload-dragger {
  background: var(--pp) !important;
  border: 2px dashed var(--pn) !important;
  border-radius: var(--r) !important;
  padding: 64px 40px !important;
  transition: all 0.25s ease;
  cursor: pointer;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 200px !important;
  width: auto !important;
}
.el-upload-dragger:hover { background: var(--pa) !important; border-color: var(--p) !important; }
.el-upload-dragger .el-icon--upload { font-size: 48px !important; color: var(--p) !important; margin-bottom: 16px; }
.el-upload-dragger .el-upload__text {
  color: var(--k) !important; font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 20px !important; font-weight: 600 !important; line-height: 1.4 !important; text-align: center !important;
}
.el-upload-dragger .el-upload__text em { color: var(--p) !important; font-style: normal !important; font-weight: 700 !important; text-decoration: underline; text-underline-offset: 3px; }
.el-upload-dragger .el-upload__text .file-count,
.el-upload-dragger .el-upload__text + div,
.el-upload-dragger .el-upload__text ~ * { display: block; font-size: 13px; color: var(--m); margin-top: 8px; }
.el-upload__tip { color: var(--m) !important; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 13px !important; margin-top: 12px; text-align: center; }

/* ─── Buttons ─── */
.el-button { border-radius: var(--r) !important; font-family: 'Inter', system-ui, -apple-system, sans-serif !important; font-weight: 600 !important; font-size: 15px !important; line-height: 22px !important; padding: 14px 28px !important; border: none; transition: all 0.12s ease; min-height: 50px !important; }
.el-button:active { transform: translateY(1px); }
.el-button + .el-button { margin-left: 12px !important; }
.el-row .el-button, [class*="el-col"] .el-button { margin-bottom: 0; }
.el-button--primary { background: var(--p) !important; color: var(--op) !important; }
.el-button--primary:hover { background: var(--pa) !important; }
.el-button--primary:active { background: var(--pn) !important; }
.el-button--success { background: #2ead4b !important; color: #fff !important; }
.el-button--success:hover { background: #3cc45a !important; }
.el-button--danger { background: #d03238 !important; color: #fff !important; }
.el-button--danger:hover { background: #e04848 !important; }
.el-button--default { background: var(--c) !important; color: var(--k) !important; border: 1.5px solid var(--k) !important; }
.el-button--default:hover { background: var(--s) !important; }
.el-button--default.is-plain { background: var(--s) !important; border: none !important; }
.el-button--default.is-plain:hover { background: var(--p) !important; color: var(--op) !important; }
.el-button--small { padding: 10px 20px !important; font-size: 13px !important; min-height: 40px !important; }
.el-button--mini { padding: 8px 16px !important; font-size: 12px !important; min-height: 34px !important; }

/* ─── Checkbox / Toggle ─── */
.el-button + .el-checkbox { margin-left: 32px !important; padding-left: 32px !important; border-left: 1px solid var(--s) !important; }
.el-checkbox { display: inline-flex !important; align-items: center !important; gap: 10px !important; border: none !important; background: none !important; padding: 0 !important; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.el-checkbox.is-bordered, .el-checkbox.is-checked, .el-checkbox.is-focus, .el-checkbox:active, .el-checkbox:focus, .el-checkbox:hover,
.el-checkbox.is-bordered.is-checked, .el-checkbox.is-bordered.is-focus, .el-checkbox.is-bordered:active, .el-checkbox.is-bordered:focus, .el-checkbox.is-bordered:hover { border: none !important; background: none !important; padding: 0 !important; box-shadow: none !important; outline: none !important; }
.el-checkbox__inner, .el-checkbox__input span, .el-checkbox__input input, .el-checkbox__input:active, .el-checkbox__input:focus { display: none !important; background: none !important; box-shadow: none !important; }
.el-checkbox__input { display: block !important; position: relative !important; width: 44px !important; height: 26px !important; min-width: 44px !important; flex-shrink: 0 !important; border: none !important; padding: 0 !important; margin: 0 !important; border-radius: var(--rp) !important; background: var(--m) !important; transition: background 0.2s ease !important; cursor: pointer; box-shadow: none !important; outline: none !important; }
.el-checkbox__input.is-checked { background: var(--p) !important; }
.el-checkbox__input::after { content: '' !important; display: block !important; position: absolute !important; top: 3px !important; left: 3px !important; width: 20px !important; height: 20px !important; background: #fff !important; border-radius: 50% !important; box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important; transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
.el-checkbox__input.is-checked::after { transform: translateX(18px) !important; }
.el-checkbox__label { font-size: 14px !important; font-weight: 500 !important; color: var(--b) !important; padding: 0 !important; line-height: 1 !important; }

/* ─── Radio ─── */
.el-radio { font-family: 'Inter', system-ui, -apple-system, sans-serif; margin-right: 24px !important; margin-bottom: 8px !important; }
.el-radio:last-child { margin-right: 0 !important; }
.el-radio__label { color: var(--b) !important; font-size: 14px; }
.el-radio__input .el-radio__inner { border-color: var(--m) !important; }
.el-radio__input.is-checked .el-radio__inner { background: var(--p) !important; border-color: var(--p) !important; }
.el-radio__input.is-checked .el-radio__label { font-weight: 600; color: var(--k) !important; }

/* ─── Table ─── */
.el-table { background: transparent !important; border-radius: var(--rs); margin-top: 16px; border: none !important; }
.el-table::before, .el-table::after { display: none !important; }
.el-table th.el-table__cell, .el-table td.el-table__cell { border: none !important; }
.el-table th.el-table__cell { background: var(--s) !important; color: var(--b) !important; font-weight: 600 !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.8px; border-bottom: none !important; padding: 14px 12px !important; }
.el-table td { border-bottom: 1px solid var(--s) !important; color: var(--k) !important; padding: 14px 12px !important; border-top: none !important; }
.el-table tr { background: transparent !important; }
.el-table tr:hover td { background: var(--pp) !important; }
.el-table__body, .el-table__header { border-collapse: collapse !important; }
.el-table--border::after, .el-table--border::before, .el-table__fixed-right::before, .el-table__fixed::before { display: none !important; }

/* ─── Dialog ─── */
.el-dialog { border-radius: var(--r) !important; background: var(--c) !important; box-shadow: 0 8px 40px rgba(0,0,0,0.08) !important; }
.el-dialog__header { padding: 32px 32px 0 !important; }
.el-dialog__title { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 20px; color: var(--k) !important; }
.el-dialog__body { padding: 24px 32px 16px !important; color: var(--b); font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.el-dialog__footer { padding: 0 32px 28px !important; }
.el-dialog__headerbtn .el-dialog__close { color: var(--m) !important; }
.el-dialog__headerbtn:hover .el-dialog__close { color: var(--k) !important; }

/* ─── Input ─── */
.el-input__inner { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; border-radius: var(--rs) !important; border: 1.5px solid var(--m) !important; background: var(--c) !important; color: var(--k) !important; padding: 12px 16px !important; height: 48px !important; line-height: 24px !important; font-size: 16px !important; }
.el-input__inner:focus { border-color: var(--k) !important; }
.el-input__inner::placeholder { color: var(--m); }

/* ─── Misc UI ─── */
.el-notification { border-radius: var(--r) !important; background: var(--c) !important; box-shadow: 0 8px 40px rgba(0,0,0,0.08) !important; border: none !important; }
.el-notification__title { color: var(--k) !important; font-weight: 600; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.el-notification__content { color: var(--b) !important; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.el-message-box { border-radius: var(--r) !important; border: none !important; box-shadow: 0 8px 40px rgba(0,0,0,0.08) !important; }
.el-message-box__title { font-weight: 600; color: var(--k) !important; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
a { color: var(--k); font-weight: 500; transition: color 0.12s ease; }
a:hover { color: var(--p); }
.wise-nav + .el-row { margin-bottom: 12px !important; }
.el-row .el-col { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.el-radio-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 12px 0 16px; }
.el-form-item__label, label:not(.el-checkbox):not(.el-radio) { font-weight: 600 !important; font-size: 13px !important; color: var(--b) !important; letter-spacing: 0.2px; display: block; margin-bottom: 4px; }

/* ─── Music specific ─── */
.music-cover .el-image { border-radius: var(--rs) !important; border: 1px solid var(--s) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.music-cover i { color: var(--k); }
.music-cover i:hover { color: var(--p) !important; }
.edit-item .label { font-weight: 600; color: var(--b); font-size: 14px; }
.edit-item .input input { border-bottom: 1.5px solid var(--m) !important; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: transparent !important; font-size: 15px; }
.edit-item .input input:focus { border-bottom-color: var(--k) !important; }
.edit-item i:hover { color: var(--p) !important; }
#app-footer { color: var(--m) !important; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 12px !important; margin-top: 40px !important; }
#app-footer a { color: var(--m) !important; }
#app-footer a:hover { color: var(--p) !important; }
.update-info { border-radius: var(--rs) !important; border: 1px solid var(--s) !important; }
.update-info .update-title { background: var(--s) !important; color: var(--b) !important; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.update-info .update-content { color: var(--b) !important; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
audio { border-radius: var(--r) !important; margin-top: 16px; }

[data-v-670c0e2e] .um-config-dialog { max-width: 90%; width: 38em; }
[data-v-701d8fe2] .um-edit-dialog { max-width: 90%; width: 28em; }
form[data-v-670c0e2e] input { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; }

/* ─── Loader ─── */
#loader-mask { background: rgba(232,235,230,0.97) !important; backdrop-filter: blur(4px); }
#loader { border-color: var(--s) !important; border-top-color: var(--p) !important; border-width: 3px !important; width: 36px !important; height: 36px !important; margin: -18px 0 0 -18px !important; }
#loader-source { font-size: 15px !important; font-weight: 600; color: var(--b) !important; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
#loader-tips-timeout { font-size: 13px !important; color: var(--b) !important; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
#loader-tips-timeout a { color: var(--k) !important; font-weight: 600; }
#loader-tips-timeout a:hover { color: var(--p) !important; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  body { padding: 20px 12px !important; }
  #app { padding: 32px 24px !important; border-radius: 0 0 20px 20px !important; }
  .wise-nav { padding: 12px 20px; border-radius: 20px 20px 0 0; }
  .wise-nav-back { font-size: 12px; padding: 5px 12px; }
  .el-upload-dragger { padding: 48px 24px !important; min-height: 160px !important; }
  .el-upload-dragger .el-upload__text { font-size: 18px !important; }
}

@media (max-width: 480px) {
  body { padding: 0 !important; background: var(--c) !important; }
  #app { padding: 24px 16px 32px !important; border-radius: 0 !important; max-width: 100% !important; box-shadow: none !important; }
  .wise-nav { padding: 8px 14px; border-radius: 0; max-width: 100%; position: sticky; top: 0; z-index: 100; background: var(--c); gap: 6px; }
  .wise-nav-brand .dot { width: 10px; height: 10px; }
  .wise-nav-brand .label { font-size: 13px; }
  .wise-nav-back { font-size: 11px; padding: 4px 10px; }
  .el-upload-dragger { padding: 40px 16px !important; min-height: 140px !important; border-radius: 16px !important; }
  .el-upload-dragger .el-upload__text { font-size: 16px !important; }
  .el-button { padding: 14px 20px !important; font-size: 15px !important; min-height: 48px !important; width: 100%; display: flex; align-items: center; justify-content: center; }
  .el-button + .el-button { margin-left: 0 !important; margin-top: 10px !important; }
  .el-button--small, .el-button--mini { width: auto; display: inline-flex; }
  .el-button + .el-checkbox { margin-left: 0 !important; padding-left: 0 !important; border-left: none !important; margin-top: 12px !important; display: inline-flex !important; gap: 10px !important; width: auto !important; justify-content: flex-start !important; }
  .el-table { font-size: 12px; }
  .el-table__body-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .el-table th.el-table__cell, .el-table td { padding: 10px 8px !important; white-space: nowrap; }
  .el-dialog { width: auto !important; margin: 12px !important; max-width: calc(100vw - 24px) !important; }
  .el-dialog__header { padding: 20px 20px 0 !important; }
  .el-dialog__body { padding: 16px 20px 12px !important; }
  .el-dialog__footer { padding: 0 20px 20px !important; }
  .el-dialog__title { font-size: 18px; }
  .el-input { width: 100%; }
  .el-input__inner { height: 46px !important; font-size: 16px !important; padding: 10px 14px !important; }
  audio { width: 100%; border-radius: 16px !important; }
  .music-cover .el-image { width: 120px !important; height: 120px !important; }
  #app-footer { margin-top: 28px !important; }
  [data-v-670c0e2e] .um-config-dialog, [data-v-701d8fe2] .um-edit-dialog { width: 100% !important; }
}

@media (max-width: 360px) {
  #app { padding: 20px 12px 28px !important; }
  .wise-nav { padding: 6px 10px; }
  .wise-nav-brand .label { font-size: 12px; }
  .wise-nav-brand .dot { width: 8px; height: 8px; }
  .el-upload-dragger { padding: 28px 12px !important; min-height: 120px !important; }
}

/* ─── Dark ─── */
@media (prefers-color-scheme: dark) {
  :root {
    --c: #181818;
    --s: #252525;
    --k: #e0e0e0;
    --b: #a0a0a0;
    --m: #606060;
    --op: #0e0f0c;
  }
  html, body { background-color: #101010 !important; }
  .wise-nav, #app { background: var(--c) !important; }
  .el-upload-dragger { background: rgba(159,232,112,0.06) !important; border-color: #3a5a2a !important; }
  .el-upload-dragger:hover { background: rgba(159,232,112,0.10) !important; border-color: var(--p) !important; }
  .el-button--default { background: var(--s) !important; border-color: var(--b) !important; color: var(--k) !important; }
  .el-button--default.is-plain { background: #2a2a2a !important; }
  .el-button--default.is-plain:hover { background: var(--p) !important; color: var(--op) !important; }
  .el-table th.el-table__cell { background: #2a2a2a !important; color: var(--b) !important; }
  .el-table td { border-bottom-color: #2a2a2a !important; color: var(--k) !important; }
  .el-table tr:hover td { background: rgba(159,232,112,0.06) !important; }
  .el-dialog { background: #1e1e1e !important; }
  .el-dialog .el-input__inner { background: #2a2a2a !important; border-color: #404040 !important; color: var(--k) !important; }
  .el-notification, .el-message-box { background: #1e1e1e !important; }
  .music-cover .el-image { border-color: #2a2a2a !important; }
  .update-info { border-color: #2a2a2a !important; }
  .update-info .update-title { background: #2a2a2a !important; color: var(--k) !important; }
  #app, .wise-nav { box-shadow: none; }
  #loader-mask { background: rgba(16,16,16,0.97) !important; }
}