/* Lightsecond console reference layer.
 * This file only changes the visual shell; Vue components and API bindings
 * continue to use the existing Element UI markup underneath.
 */
:root {
  --console-ink: #382f3c;
  --console-muted: #8b7d8f;
  --console-line: #eee2eb;
  --console-pink: #c75e99;
  --console-pink-soft: #fff1f7;
  --console-lilac-soft: #f2efff;
  --console-cyan-soft: #eaf8fb;
  --console-surface: rgba(255, 255, 255, .84);
  --console-shadow: 0 16px 34px rgba(112, 72, 104, .075);
}

body {
  background:
    radial-gradient(circle at 86% 3%, rgba(230, 223, 255, .52), transparent 28%),
    linear-gradient(180deg, #fff8fc 0%, #fbfaff 46%, #fff 100%) !important;
  color: var(--console-ink) !important;
}

.template > .el-container {
  position: relative;
  min-height: 100vh;
  background: transparent !important;
}

.template > .el-container > .el-container {
  width: calc(100% - 236px) !important;
  margin-left: 236px;
}

.el-aside {
  position: fixed !important;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: block !important;
  width: 236px !important;
  overflow-y: auto;
  padding: 20px 14px !important;
  border-right: 1px solid rgba(235, 215, 229, .92) !important;
  background: rgba(255, 252, 255, .84) !important;
  box-shadow: 14px 0 36px rgba(144, 92, 132, .055) !important;
  backdrop-filter: blur(18px);
  scrollbar-width: thin;
  scrollbar-color: #edd8e5 transparent;
}

.el-aside > .menu-alink:first-child {
  min-height: 64px;
  padding: 0 12px !important;
}

.el-aside .ali-logo {
  width: 166px !important;
  height: 44px !important;
  object-fit: contain;
  object-position: left center;
}

.el-aside .menu-top { margin-top: 20px !important; border: 0 !important; }
.el-aside .line { height: 1px; margin: 18px 10px; background: linear-gradient(90deg, transparent, #f0dce7, transparent); }
.el-aside .el-menu-item,
.el-aside .el-submenu__title {
  height: 44px !important;
  margin: 4px 0 !important;
  border-radius: 12px !important;
  color: #806e7f !important;
  line-height: 44px !important;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.el-aside .el-menu-item .iconfont,
.el-aside .el-submenu__title .iconfont { margin-right: 10px; color: #ae94a8; font-size: 17px; }
.el-aside .el-menu-item:hover,
.el-aside .el-submenu__title:hover { background: #fff1f7 !important; color: #bb4e84 !important; transform: translateX(2px); }
.el-aside .el-menu-item.is-active,
.el-aside .el-submenu.is-active > .el-submenu__title { background: linear-gradient(105deg, #ffe8f2, #f0ecff) !important; color: #b6477d !important; font-weight: 700; box-shadow: 0 8px 18px rgba(198, 73, 132, .08); }
.el-aside .el-menu-item.is-active .iconfont,
.el-aside .el-submenu.is-active > .el-submenu__title .iconfont { color: #b25fcf; }

.el-header {
  position: fixed !important;
  top: 0;
  left: 236px !important;
  z-index: 25;
  display: flex;
  width: calc(100% - 236px) !important;
  height: 74px !important;
  align-items: center;
  padding: 0 32px !important;
  border-bottom: 1px solid rgba(235, 215, 229, .84) !important;
  background: rgba(255, 253, 255, .78) !important;
  box-shadow: 0 8px 22px rgba(117, 77, 108, .045) !important;
  backdrop-filter: blur(18px);
}

.console-brand { display: none !important; }
.console-quick-island { display: none !important; }
.header-left { display: flex; flex: 1; align-items: center; gap: 11px; }
.header-left .menu-img { display: none; }
.header-left > .left-img { width: 17px; height: 17px; opacity: .58; }
.header-left .el-autocomplete { width: min(360px, 45vw); }
.header-left .el-input__inner { height: 38px; border: 1px solid #f0e3eb; border-radius: 10px; background: rgba(255,255,255,.72); color: #564858; }
.header-left .el-input__inner:focus { border-color: #d796b8; box-shadow: 0 0 0 3px rgba(215,150,184,.12); }
.header-right { display: flex; align-items: center; gap: 13px; margin-right: 0 !important; }
.header-right-item { color: #847385; }
.header-right-item .right-item { display: grid; min-width: 34px; min-height: 34px; place-items: center; border-radius: 10px; transition: background .2s ease, transform .2s ease; }
.header-right-item .right-item:hover { background: #fff0f7; transform: translateY(-1px); }
.header-right-item img { max-width: 19px; max-height: 19px; opacity: .68; }
.header-right-item .head-box { border-radius: 10px; background: linear-gradient(135deg, #f09abf, #9786e8); box-shadow: 0 8px 16px rgba(157,130,234,.18); color: #fff; font-size: 12px; font-weight: 800; }
.header-right .cloum-line { height: 24px; border-left-color: #ecdfe8; }

.console-nav { display: none !important; }
.template > .el-container > .el-container > .el-main,
.template > .el-container > .el-container > .el-container > .el-main {
  min-height: calc(100vh - 74px) !important;
  margin-top: 74px !important;
}

.home-main {
  padding: 30px 32px 52px !important;
}

.main-card,
.main-content { background: transparent !important; }
.main-content { display: grid !important; grid-template-columns: minmax(0, 1.38fr) minmax(265px, .62fr) !important; gap: 18px !important; max-width: 1480px; margin: 0 auto; }
.left-box,
.right-box { min-width: 0; }
.info-box,
.statistics-box,
.statistics-bottom,
.product-list-box,
.recommend-box,
.recommend-box-open,
.WorkOrder-content,
.notice-box .WorkOrder-content {
  border: 1px solid var(--console-line) !important;
  border-radius: 14px !important;
  background: var(--console-surface) !important;
  box-shadow: var(--console-shadow) !important;
  backdrop-filter: blur(10px);
}

.info-box { display: grid; grid-template-columns: auto 1px minmax(0, 1fr) 1px minmax(160px, .75fr); gap: 20px; align-items: center; padding: 19px 22px !important; }
.info-first { min-width: 190px; }
.name-first { width: 46px !important; height: 46px !important; border-radius: 14px !important; background: linear-gradient(135deg, #f3a0c3, #9b87e9) !important; box-shadow: 0 10px 18px rgba(157,130,234,.16); color: #fff !important; font-weight: 800; }
.name-box .hello { color: #493c4a !important; font-size: 14px !important; font-weight: 700; }
.name-box .name,
.info-second,
.info-three { color: var(--console-muted) !important; font-size: 11px !important; }
.info-second { display: grid; gap: 10px; }
.info-second img { width: 15px; opacity: .64; }
.divider-box { height: 48px !important; background: #f0e2eb !important; }

.statistics-box { margin-top: 18px !important; padding: 0 !important; }
.statistics-content { padding: 21px 23px 18px !important; }
.money-top { display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(170px, .9fr); gap: 22px; }
.credit-title { color: #8d788b !important; font-size: 11px !important; }
.credit-num { color: #3c3040 !important; font-size: 29px !important; font-weight: 800; }
.credit-num .s-24 { font-size: 16px !important; }
.credit-btn { border: 1px solid #e8bfd2; border-radius: 8px; background: #fff2f7; color: #b64b80; transition: transform .2s ease, background .2s ease; }
.credit-btn:hover { background: #ffe5f1; transform: translateY(-1px); }
.money-order { margin-top: 19px !important; padding-top: 15px !important; border-top-color: #f0e4eb !important; }
.order-box { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 9px; width: auto !important; margin-left: 0 !important; }
.order-item { min-height: 108px !important; padding: 15px !important; border: 1px solid #f0e3eb; border-radius: 11px; background: linear-gradient(145deg, #fff, #fff8fb); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.order-item:hover { border-color: #e0a6bf; box-shadow: 0 8px 18px rgba(198,73,132,.08); transform: translateY(-2px); }
.order-type-img { width: 30px !important; height: 30px !important; border-radius: 9px !important; background: var(--console-pink-soft); }
.order-title { color: #8b7889 !important; font-size: 11px !important; }
.order-nums { color: #453747 !important; font-size: 23px !important; font-weight: 800; }
.statistics-bottom { display: grid !important; grid-template-columns: 1fr 1px 1fr; align-items: center; gap: 20px; margin-top: 11px !important; padding: 17px 23px !important; }
.statistics-item-name { color: #9a8697 !important; font-size: 11px !important; }
.statistics-item-value { color: #453646 !important; font-size: 21px !important; font-weight: 800; }
.statistics-item-divider { height: 34px; background: #f0e2eb; }

.product-list-box { margin-top: 18px !important; padding: 20px 22px !important; }
.title-text { color: #493a4b !important; font-size: 14px !important; font-weight: 800 !important; }
.el-table { margin-top: 13px; border-radius: 10px; overflow: hidden; background: transparent !important; }
.el-table th { background: #fff6fa !important; color: #9a7f91 !important; font-size: 11px; }
.el-table td { background: rgba(255,255,255,.48) !important; color: #655467 !important; font-size: 11px; }
.product-name { color: #b64d82 !important; font-weight: 700; }
.no-product { margin-top: 13px !important; padding: 28px 18px !important; border: 1px dashed #e8cedb; border-radius: 11px; background: #fffafd !important; }
.no-product h2 { color: #594758 !important; font-size: 19px !important; }
.no-product p { color: #9b8998 !important; font-size: 11px !important; }

.right-box { display: grid; align-content: start; gap: 18px; }
.recommend-box,
.recommend-box-open { margin: 0 !important; padding: 22px !important; }
.recommend-box img { width: 100% !important; max-height: 145px; object-fit: contain; opacity: .9; }
.recommend-box h2 { color: #493a4b !important; font-size: 18px !important; }
.recommend-box p { color: #978597 !important; font-size: 11px !important; }
.no-recommend { height: 34px !important; line-height: 34px !important; border-radius: 9px !important; background: linear-gradient(135deg, #ef98be, #9c88e8) !important; box-shadow: 0 8px 16px rgba(157,130,234,.17); font-size: 11px !important; }
.WorkOrder-box,
.notice-box { margin-top: 0 !important; }
.WorkOrder-title { margin-bottom: 9px !important; }
.more { min-width: 27px; border-radius: 8px !important; background: #fff0f6 !important; color: #b34f81 !important; }
.WorkOrder-content { padding: 15px 16px 4px !important; }
.WorkOrder-item { margin-bottom: 12px !important; padding: 8px 5px; border-radius: 8px; transition: background .2s ease; }
.WorkOrder-item:hover,
.notice-item:hover { background: #fff3f8 !important; }
.replay-div { border-radius: 6px !important; font-size: 9px !important; }
.replay-title { color: #5a4859 !important; font-size: 11px !important; }
.replay-name { color: #a18f9e !important; font-size: 10px !important; }
.notice-item { margin-bottom: 12px !important; padding: 9px 8px 9px 13px !important; border-left-width: 2px !important; border-radius: 0 8px 8px 0; }
.notice-time { color: #554256 !important; font-size: 18px !important; }
.notice-title { color: #665467 !important; font-size: 11px !important; }
.notice-type { color: #a38f9e !important; font-size: 9px !important; }
.notice-item-right { width: 25px !important; height: 25px !important; border-radius: 8px !important; background: #fff0f6 !important; color: #b34f81 !important; line-height: 25px !important; }

.el-dialog { border-radius: 14px !important; }
.el-button--primary { border-radius: 9px !important; }

@media (max-width: 1100px) {
  .template > .el-container > .el-container { width: calc(100% - 204px) !important; margin-left: 204px; }
  .el-aside { width: 204px !important; }
  .el-header { left: 204px !important; width: calc(100% - 204px) !important; padding: 0 22px !important; }
  .main-content { grid-template-columns: 1fr !important; }
  .right-box { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .WorkOrder-box, .notice-box { min-width: 0; }
}

@media (max-width: 750px) {
  .template > .el-container > .el-container { width: 100% !important; margin-left: 0; }
  .el-aside { display: none !important; }
  .el-header { left: 0 !important; width: 100% !important; height: 62px !important; padding: 0 14px !important; }
  .header-left .menu-img { display: block; width: 20px; height: 20px; opacity: .72; }
  .header-left .el-autocomplete { display: none; }
  .header-right { gap: 5px; }
  .template > .el-container > .el-container > .el-main,
  .template > .el-container > .el-container > .el-container > .el-main { margin-top: 62px !important; min-height: calc(100vh - 62px) !important; }
  .home-main { padding: 18px 13px 34px !important; }
  .info-box { grid-template-columns: 1fr; gap: 13px; padding: 17px !important; }
  .divider-box { display: none; }
  .info-first { min-width: 0; }
  .info-second { grid-template-columns: 1fr 1fr; }
  .money-top { grid-template-columns: 1fr; gap: 14px; }
  .statistics-content { padding: 17px 14px 14px !important; }
  .order-box { gap: 7px; }
  .order-item { min-height: 92px !important; padding: 11px !important; }
  .statistics-bottom { gap: 11px; padding: 14px !important; }
  .product-list-box { padding: 16px 13px !important; overflow-x: auto; }
  .right-box { display: grid; grid-template-columns: 1fr; }
  .recommend-box, .recommend-box-open { padding: 17px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .el-aside .el-menu-item,
  .el-aside .el-submenu__title,
  .order-item,
  .header-right-item .right-item { transition: none !important; }
}

/* Navigation labels share one rhythm across top-level and nested entries. */
.el-aside .el-menu,
.drawer-menu .el-menu {
  border: 0 !important;
  background: transparent !important;
}

.el-aside .el-menu-item,
.el-aside .el-submenu__title,
.drawer-menu .el-menu-item,
.drawer-menu .el-submenu__title {
  display: flex !important;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  padding-right: 38px !important;
  padding-left: 13px !important;
  line-height: 1.2 !important;
}

.el-aside .el-menu-item > .aside-menu-label,
.el-aside .el-submenu__title > .aside-menu-label,
.drawer-menu .el-menu-item > .aside-menu-label,
.drawer-menu .el-submenu__title > .aside-menu-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 20px;
}

/* Keep the text column identical for active and inactive entries. The stock
   theme adds a legacy 20px margin to .aside-menu-text, which shifts only the
   labels rendered by the newer component wrapper. */
.el-aside .menu-top > .menu-alink,
.el-aside .menu-top > .el-submenu,
.drawer-menu .menu-top > .el-menu-item,
.drawer-menu .menu-top > .el-submenu {
  display: block;
  width: 100%;
  margin: 0;
}

.el-aside .menu-top > .menu-alink > .el-menu-item,
.el-aside .menu-top > .el-menu-item,
.el-aside .menu-top > .el-submenu > .el-submenu__title,
.drawer-menu .menu-top > .el-menu-item,
.drawer-menu .menu-top > .el-submenu > .el-submenu__title {
  width: 100%;
  padding-left: 13px !important;
  padding-right: 38px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.el-aside .aside-menu-text,
.drawer-menu .aside-menu-text {
  margin-left: 0 !important;
}

.el-aside .el-menu-item .iconfont,
.el-aside .el-submenu__title .iconfont,
.drawer-menu .el-menu-item .iconfont,
.drawer-menu .el-submenu__title .iconfont {
  flex: 0 0 20px;
  width: 20px;
  margin-right: 10px;
  text-align: center;
}

.el-aside .el-submenu .el-menu {
  padding: 3px 0 5px;
  border-radius: 10px;
  background: rgba(255, 247, 251, .56) !important;
}

.el-aside .el-submenu .el-menu-item,
.drawer-menu .el-submenu .el-menu-item {
  min-height: 36px;
  height: 36px !important;
  margin: 2px 6px !important;
  padding-right: 12px !important;
  padding-left: 42px !important;
  border-radius: 9px !important;
  color: #917f90 !important;
  line-height: 36px !important;
  font-size: 12px;
}

.el-aside .el-submenu .el-menu-item .aside-menu-label,
.drawer-menu .el-submenu .el-menu-item .aside-menu-label {
  font-size: 12px;
  line-height: 18px;
}

.el-aside .el-submenu .el-menu-item:hover,
.drawer-menu .el-submenu .el-menu-item:hover {
  background: #fff0f6 !important;
  color: #b54f82 !important;
  transform: none;
}

.el-aside .el-submenu .el-menu-item.is-active,
.drawer-menu .el-submenu .el-menu-item.is-active {
  background: #ffe8f2 !important;
  color: #b54f82 !important;
  box-shadow: inset 3px 0 0 #d66d9c;
}

.drawer-menu .el-menu-item,
.drawer-menu .el-submenu__title {
  min-height: 46px;
  height: 46px !important;
  margin: 4px 10px !important;
  border-radius: 12px !important;
}

.drawer-menu .el-submenu .el-menu {
  padding: 4px 0;
  background: #fff8fb !important;
}

/* The mobile component keeps links inside menu items. Make that wrapper the
   same flex row as the desktop item so icons and labels share one text edge. */
.drawer-menu .el-menu-item > .menu-alink {
  display: flex;
  min-width: 0;
  height: 100%;
  flex: 1 1 auto;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.drawer-menu .el-menu-item > .menu-alink .iconfont {
  flex: 0 0 20px;
  width: 20px;
  margin-right: 10px;
  text-align: center;
}

.drawer-menu .el-menu-item > .menu-alink > .aside-menu-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
}

.drawer-menu .el-submenu .el-menu-item > .menu-alink > .aside-menu-label {
  font-size: 12px;
  line-height: 18px;
}

@media (max-width: 750px) {
  .drawer-menu .el-menu-item > .aside-menu-label,
  .drawer-menu .el-submenu__title > .aside-menu-label { font-size: 14px; }
  .drawer-menu .el-submenu .el-menu-item { padding-left: 48px !important; }
}