/* MM FACE 管理后台 – theme (dark #1E1E1E / primary #4A90E2 by default, light optional) and layout */

:root {
  --el-color-primary: #4A90E2;
  --el-color-primary-light-3: rgb(128, 177, 235);
  --el-color-primary-light-5: rgb(165, 200, 241);
  --el-color-primary-light-7: rgb(201, 222, 246);
  --el-color-primary-light-8: rgb(219, 233, 249);
  --el-color-primary-light-9: rgb(237, 244, 252);
  --el-color-primary-dark-2: rgb(59, 115, 181);
  --mm-page-bg: #F3F5F8;
  --mm-panel-bg: #FFFFFF;
  --mm-topbar-bg: #FFFFFF;
  --mm-aside-bg: #FFFFFF;
  --mm-border: #E4E7ED;
  --mm-muted: #8A8F98;
  --mm-editor-bg: #FFFFFF;
  --mm-code-bg: #F5F7FA;
}

html.dark {
  --el-color-primary: #4A90E2;
  --el-color-primary-light-3: rgb(63, 112, 170);
  --el-color-primary-light-5: rgb(56, 91, 132);
  --el-color-primary-light-7: rgb(48, 69, 94);
  --el-color-primary-light-8: rgb(44, 58, 76);
  --el-color-primary-light-9: rgb(41, 48, 57);
  --el-color-primary-dark-2: rgb(110, 166, 232);
  --el-bg-color-page: #1E1E1E;
  --el-bg-color: #252526;
  --el-bg-color-overlay: #2D2D2D;
  --el-fill-color-blank: #252526;
  --el-border-color: #3D3D3D;
  --el-border-color-light: #383838;
  --el-border-color-lighter: #333333;
  --el-border-color-extra-light: #2B2B2B;
  --el-text-color-primary: #E8E8E8;
  --el-text-color-regular: #CFCFCF;
  --mm-page-bg: #1E1E1E;
  --mm-panel-bg: #252526;
  --mm-topbar-bg: #252526;
  --mm-aside-bg: #232323;
  --mm-border: #333333;
  --mm-muted: #9A9A9A;
  --mm-editor-bg: #1E1E1E;
  --mm-code-bg: #1A1A1A;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--mm-page-bg);
  color: var(--el-text-color-primary);
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
#app { min-height: 100%; }
.boot-screen { display: flex; align-items: center; justify-content: center; height: 100vh; color: #8a8f98; background: #1E1E1E; font-size: 15px; }

/* ---------------------------------------------------------------- layout */
.layout { height: 100vh; }
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
  background: var(--mm-topbar-bg); border-bottom: 1px solid var(--mm-border);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 30px; }
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: 1px; color: var(--el-text-color-primary); }
.brand-sub { font-size: 14px; color: var(--mm-muted); padding-left: 10px; border-left: 1px solid var(--mm-border); }
.topbar-btn { border-color: var(--mm-border); }
.admin-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--el-text-color-regular); padding: 6px 8px; border-radius: 6px; }
.admin-chip:hover { background: var(--el-fill-color-light); }
.layout-body { height: calc(100vh - 56px); }
.aside { background: var(--mm-aside-bg); border-right: 1px solid var(--mm-border); display: flex; flex-direction: column; }
.side-menu { border-right: none; background: transparent; flex: 1; padding-top: 8px; --el-menu-bg-color: transparent; }
.side-menu .el-menu-item { height: 46px; margin: 2px 10px; border-radius: 8px; }
.side-menu .el-menu-item.is-active { background: var(--el-color-primary); color: #fff; }
.side-menu .el-menu-item.is-active .el-icon { color: #fff; }
.aside-foot { padding: 12px 18px; color: var(--mm-muted); font-size: 12px; }
.main { padding: 20px 24px; overflow: auto; background: var(--mm-page-bg); }

/* ---------------------------------------------------------------- page scaffolding */
.page { max-width: 1680px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.page-title { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.page-desc { color: var(--mm-muted); font-size: 13px; max-width: 860px; line-height: 1.6; }
.el-card { --el-card-bg-color: var(--mm-panel-bg); border-color: var(--mm-border); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-title { font-weight: 600; }
.card-muted .el-card__body { opacity: 0.6; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .el-button + .el-button { margin-left: 0; }
.filter-form .el-form-item { margin-bottom: 8px; margin-right: 16px; }
.pager { display: flex; justify-content: flex-end; margin-top: 16px; }
.data-table { width: 100%; }
.spacer { flex: 1; }
.row-gap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-gap .el-button + .el-button { margin-left: 0; }
.stack { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; }
.narrow-form { max-width: 760px; }
.sticky-col { position: sticky; top: 0; }

/* ---------------------------------------------------------------- utilities */
.mb8 { margin-bottom: 8px; } .mb16 { margin-bottom: 16px; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; }
.ml6 { margin-left: 6px; } .ml8 { margin-left: 8px; }
.muted { color: var(--mm-muted); }
.small { font-size: 12px; }
.strong { font-weight: 600; }
.mono { font-family: Consolas, "Courier New", monospace; }
.break { word-break: break-all; white-space: normal; }
.text-danger { color: var(--el-color-danger); }
.log-extra { padding: 4px 16px 10px 48px; }
.tag-gap { margin: 2px 6px 2px 0; }
.form-tip { width: 100%; color: var(--mm-muted); font-size: 12px; line-height: 1.6; margin-top: 4px; }
.form-tip.ml8, span.form-tip { width: auto; margin-top: 0; }
.cred-box { padding: 14px 16px; border-radius: 8px; background: var(--el-fill-color-light); line-height: 2; font-size: 15px; }
.log-content { white-space: normal; word-break: break-all; line-height: 1.6; }

/* ---------------------------------------------------------------- login */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(circle at 20% 10%, rgba(74, 144, 226, 0.18), transparent 45%),
              radial-gradient(circle at 85% 90%, rgba(231, 98, 41, 0.14), transparent 40%), var(--mm-page-bg);
}
.login-card {
  width: 420px; max-width: 100%; padding: 36px 36px 24px; border-radius: 14px;
  background: var(--mm-panel-bg); border: 1px solid var(--mm-border); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.login-logo { height: 72px; margin-bottom: 8px; }
.login-title { margin: 6px 0 4px; font-size: 22px; letter-spacing: 1px; }
.login-sub { color: var(--mm-muted); font-size: 13px; margin-bottom: 24px; }
.login-card .el-form { text-align: left; }
.login-btn { width: 100%; height: 46px; font-size: 16px; border-radius: 8px; }
.login-foot { margin-top: 18px; color: var(--mm-muted); font-size: 12px; }

/* ---------------------------------------------------------------- rich editor */
.rich-editor { border: 1px solid var(--el-border-color); border-radius: 8px; overflow: hidden; background: var(--mm-editor-bg); }
.re-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border-bottom: 1px solid var(--el-border-color); background: var(--el-fill-color-light); }
.re-select { width: 112px; }
.re-color { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 24px; border: 1px solid var(--el-border-color); border-radius: 4px; cursor: pointer; background: var(--el-bg-color); }
.re-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.re-color-a { font-weight: 700; border-bottom: 3px solid; line-height: 14px; padding: 0 2px; color: var(--el-text-color-primary); }
.re-color-bg { border-bottom: none; color: #222; border-radius: 2px; }
.re-area { padding: 14px 18px; outline: none; overflow: auto; max-height: 60vh; line-height: 1.7; color: var(--el-text-color-primary); }
.re-area:focus { box-shadow: inset 0 0 0 1px var(--el-color-primary); }
.re-source { display: block; width: 100%; border: none; outline: none; resize: vertical; padding: 14px; font-family: Consolas, monospace; font-size: 13px; background: var(--mm-code-bg); color: var(--el-text-color-primary); max-height: 60vh; }

/* ---------------------------------------------------------------- agreement preview (mimics the client dialog) */
.current-agreement { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.client-dialog { width: 600px; max-width: 100%; height: 500px; margin: 0 auto; background: #2D2D2D; border-radius: 10px; display: flex; flex-direction: column; align-items: center; padding: 20px 25px; color: #fff; }
.client-dialog-title { font-size: 18px; color: #fff; text-align: center; margin-bottom: 14px; }
.client-dialog-content { width: 550px; max-width: 100%; height: 380px; overflow-y: auto; font-size: 14px; line-height: 1.2; color: #fff; user-select: none; padding-right: 6px; }
.client-dialog-content p { margin: 0 0 10px; }
.client-dialog-btn { margin-top: 16px; width: 200px; height: 40px; border: none; border-radius: 8px; background: #666666; color: #fff; font-size: 16px; cursor: not-allowed; }
.client-dialog-btn.enabled { background: #4A90E2; cursor: pointer; }

/* ---------------------------------------------------------------- watermark */
.wm-preview-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.wm-canvas-wrap { position: relative; border-radius: 8px; overflow: hidden; background: #000; border: 1px solid var(--mm-border); }
.wm-canvas { display: block; width: 100%; height: auto; }
.wm-phase { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; }
.wm-preview-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; min-height: 28px; }
.icon-choices { display: flex; gap: 10px; flex-wrap: wrap; }
.icon-choice { width: 104px; padding: 10px 6px; border: 1px solid var(--el-border-color); border-radius: 8px; text-align: center; cursor: pointer; transition: border-color .15s; }
.icon-choice:hover { border-color: var(--el-color-primary-light-3); }
.icon-choice.active { border-color: var(--el-color-primary); box-shadow: 0 0 0 1px var(--el-color-primary) inset; }
.icon-choice-img { height: 44px; display: flex; align-items: center; justify-content: center; background: repeating-conic-gradient(#808080 0 25%, #a0a0a0 0 50%) 50% / 12px 12px; border-radius: 6px; }
.icon-choice-img img { max-width: 40px; max-height: 40px; }
.icon-choice-label { font-size: 12px; margin-top: 6px; line-height: 1.4; color: var(--el-text-color-regular); }

/* ---------------------------------------------------------------- message push (preview mimics the client popup) */
.msg-snippet { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 560px; }
.client-msg { width: 440px; max-width: 100%; margin: 0 auto; background: #2D2D2D; border-radius: 10px; padding: 18px 22px 20px; color: #F2F2F2; display: flex; flex-direction: column; }
.client-msg-head { font-size: 13px; color: #A8A8A8; margin-bottom: 12px; }
.client-msg-title { font-size: 17px; font-weight: 600; color: #fff; word-break: break-word; }
.client-msg-time { font-size: 12px; color: #A8A8A8; margin: 4px 0 12px; }
.client-msg-content { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.7; max-height: 300px; overflow-y: auto; background: #252525; border-radius: 6px; padding: 10px 12px; }
.client-msg-btn { align-self: flex-end; margin-top: 18px; width: 120px; height: 36px; border: none; border-radius: 8px; background: #4A90E2; color: #fff; font-size: 15px; cursor: pointer; }
.client-msg-btn:hover { background: #6FB3FF; }
.licenses-preview { background: #252525; color: #F2F2F2; border-radius: 8px; padding: 12px 16px; max-height: 420px; overflow-y: auto; font-size: 13px; line-height: 1.6; }
.licenses-preview a { color: #6FB3FF; }

/* ---------------------------------------------------------------- settings */
.qr-box { width: 140px; height: 140px; border: 1px dashed var(--el-border-color); border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; }
.qr-box img { max-width: 100%; max-height: 100%; }
.tutorial-thumb { width: 112px; height: 64px; object-fit: contain; background: #111; border-radius: 4px; display: block; }

@media (max-width: 1100px) {
  .brand-sub { display: none; }
  .sticky-col { position: static; }
}