:root {
  --color-primary: #c75e99;
  --color-primary-light: #faeaf3;
  --color-success: #54ae91;
  --color-danger: #e56d93;
  --color-menu-text: #806d7e;
  --color-menu-text-active: #b84882;
}

body,
button,
input,
textarea,
.el-button,
.el-input__inner,
.el-table,
.el-menu-item,
.el-submenu__title {
  font-family: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

body { background: #fff8fc; color: #473a49; }
.template > .el-container { min-height: 100vh; background: linear-gradient(135deg, #fff9fd 0%, #f5f3ff 52%, #fff7fb 100%); }
.el-aside {
  width: 218px !important;
  padding: 15px 12px !important;
  background: rgba(255,255,255,.82);
  border-right: 1px solid rgba(235,211,227,.8);
  box-shadow: 14px 0 36px rgba(144,92,132,.05);
}
.console-brand { display: none; }
.console-nav { display: none; }
.el-aside > .menu-alink:first-child { display: flex; min-height: 62px; align-items: center; padding: 0 11px; }
.el-aside .ali-logo {
  width: 164px; height: 44px; max-width: 164px; margin: 0; object-fit: contain; object-position: left center;
}
.el-aside .menu-top { margin-top: 18px; border: 0; }
.el-aside .el-menu-item,
.el-aside .el-submenu__title {
  height: 46px; margin: 4px 0; border-radius: 14px; color: #806d7e !important; line-height: 46px;
}
.el-aside .el-menu-item .iconfont,
.el-aside .el-submenu__title .iconfont { margin-right: 10px; color: #ab91a5; font-size: 17px; }
.el-aside .el-menu-item:hover,
.el-aside .el-submenu__title:hover { background: #fff0f7 !important; color: #bd5089 !important; }
.el-aside .el-menu-item.is-active,
.el-aside .el-submenu.is-active > .el-submenu__title { background: linear-gradient(105deg, #fbe5f0, #efebff) !important; color: #b84882 !important; font-weight: 700; }
.el-aside .el-menu-item.is-active .iconfont,
.el-aside .el-submenu.is-active > .el-submenu__title .iconfont { color: #b35fd4; }
.el-header {
  left: 218px !important; width: calc(100% - 218px) !important; height: 62px !important; background: rgba(255,255,255,.68) !important;
  border-bottom: 1px solid rgba(235,211,227,.76); box-shadow: none !important; backdrop-filter: blur(15px);
}
.el-main { margin-top: 62px; min-height: calc(100vh - 62px); }
.el-button--primary { border-color: transparent !important; background: linear-gradient(125deg, #ed8fbb, #9b87ed) !important; box-shadow: 0 7px 16px rgba(155,135,237,.22); }
.el-button--primary:hover { transform: translateY(-1px); filter: saturate(1.06); }
.el-table { color: #5f5261; }
.el-table::before { display: none; }
.el-table th { background: #fdf7fb !important; color: #9a7d91 !important; font-weight: 600; }
.el-table td,.el-table th.is-leaf { border-bottom-color: #f2e5ee !important; }
.el-table--enable-row-hover .el-table__body tr:hover > td { background: #fff5fa !important; }

@media screen and (max-width: 750px) {
  .el-header { left: 0 !important; width: 100% !important; height: 1rem !important; }
  .el-main { margin-top: 1rem; }
}

/* Desktop console: a two-line top bar replaces the vertical menu. */
@media screen and (min-width: 751px) {
  .el-aside { display: none; }
  .template > .el-container > .el-container { width: 100%; }
  .el-header {
    left: 0 !important; width: 100% !important; height: 66px !important; padding: 0 34px !important;
    display: flex; align-items: center; border-bottom-color: #f0e1eb; background: rgba(255,255,255,.88) !important;
  }
  .console-brand { display: flex; align-items: center; gap: 9px; margin-right: 24px; }
  .console-brand img { display: block; width: 35px !important; height: 35px !important; max-width: 35px !important; max-height: 35px !important; object-fit: contain; }
  .console-brand span { display: grid; line-height: 1; }
  .console-brand b { color: #4b3c4d; font-size: 19px; font-weight: 800; letter-spacing: .08em; }
  .console-brand small { margin-top: 4px; color: #aa839b; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
  .console-quick-island {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 20px;
    padding: 4px;
    border: 1px solid rgba(238, 209, 227, .88);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 245, 250, .96), rgba(246, 244, 255, .94));
    box-shadow: 0 7px 18px rgba(144, 86, 125, .08), inset 0 1px rgba(255, 255, 255, .9);
  }
  .console-quick-island__link {
    display: inline-flex;
    height: 32px;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: 10px;
    color: #765e72;
    font: 700 13px/1 "HarmonyOS Sans SC", "MiSans", "PingFang SC", sans-serif;
    text-decoration: none;
    transition: color .2s ease, background .2s ease, transform .2s ease;
  }
  .console-quick-island__link i { color: #bc729d; font-size: 16px; transition: color .2s ease; }
  .console-quick-island__link:hover { background: rgba(255, 255, 255, .9); color: #b44d82; transform: translateY(-1px); }
  .console-quick-island__link:hover i { color: #a36de0; }
  .console-quick-island__divider { width: 1px; height: 16px; background: linear-gradient(180deg, transparent, #e7cddd 20%, #e7cddd 80%, transparent); }
  .header-left { flex: 1; }
  .header-right { margin-right: 0; }
  .console-nav {
    position: fixed; top: 66px; right: 0; left: 0; z-index: 999; display: flex; height: 58px; align-items: center;
    gap: 13px; padding: 0 50px; overflow-x: auto; border-bottom: 1px solid #f0e1eb; background: rgba(255,253,255,.92); box-shadow: 0 8px 20px rgba(131,83,121,.06); backdrop-filter: blur(14px); scrollbar-width: none;
  }
  .console-nav::-webkit-scrollbar { display: none; }
  .console-nav-home,.console-group {
    position: relative; display: inline-flex; flex: 0 0 auto; height: 58px; align-items: center; gap: 7px; padding: 0 10px; border: 0; border-radius: 0; background: transparent; color: #776b78; cursor: pointer; font: 600 15px/1 "HarmonyOS Sans SC","MiSans","PingFang SC",sans-serif; text-decoration: none; transition: color .2s ease;
  }
  .console-nav-home .iconfont,.console-group .iconfont:first-child { color: #978794; font-size: 18px; transition: color .2s ease; }
  .console-group .el-icon-arrow-down { margin-left: 2px; color: #b2a4b0; font-size: 12px; transition: color .2s ease, transform .2s ease; }
  .console-nav-home::after,.console-group::after { position: absolute; right: 10px; bottom: 0; left: 10px; height: 2px; border-radius: 2px 2px 0 0; background: #c7558d; content: ""; opacity: 0; transform: scaleX(.35); transform-origin: center; transition: opacity .2s ease, transform .2s ease; }
  .console-nav-home:hover,.console-group:hover { color: #b95084; }
  .console-nav-home:hover .iconfont,.console-group:hover .iconfont:first-child,.console-group:hover .el-icon-arrow-down { color: #bd6196; }
  .console-nav-home.is-active,.console-group.is-active { color: #b64f83; font-weight: 700; }
  .console-nav-home.is-active::after,.console-group.is-active::after { opacity: 1; transform: scaleX(1); }
  .console-nav-home.is-active .iconfont,.console-group.is-active .iconfont:first-child,.console-group.is-active .el-icon-arrow-down { color: #bd5d9a; }
  .console-group.is-active .el-icon-arrow-down { transform: translateY(1px); }
  .console-group-menu { margin-top: 9px !important; border: 1px solid #f0ddea !important; border-radius: 14px !important; box-shadow: 0 14px 32px rgba(130,82,119,.12) !important; }
  .console-group-menu .el-dropdown-menu__item { min-width: 148px; padding: 0 15px; color: #715f70; font-family: "HarmonyOS Sans SC","MiSans","PingFang SC",sans-serif; }
  .console-group-menu .el-dropdown-menu__item:hover { color: #b94d86; background: #fff3f8; }
  .template > .el-container > .el-container > .el-main,
  .template > .el-container > .el-container > .el-container > .el-main { margin-top: 124px !important; min-height: calc(100vh - 124px); }

  .template > .el-container > .el-container > .el-main {
    box-sizing: border-box;
    padding-top: 32px !important;
    padding-bottom: 42px !important;
  }
}

@media screen and (min-width: 751px) and (max-width: 1120px) {
  .console-nav { gap: 5px; padding: 0 24px; }
  .console-nav-home,.console-group { gap: 5px; padding: 0 7px; font-size: 13px; }
  .console-nav-home::after,.console-group::after { right: 7px; left: 7px; }
  .console-nav-home .iconfont,.console-group .iconfont:first-child { font-size: 16px; }
  .console-quick-island { margin-right: 12px; }
  .console-quick-island__link { padding: 0 8px; font-size: 12px; }
}

@media screen and (max-width: 750px) {
  .console-quick-island { display: none; }
}