/*
 * Art Design Pro adapter for the PHP console.
 * The Art Design Pro build stylesheet is loaded first; this file maps the
 * existing PHP templates onto Art variables and component visual rules.
 */
:root{
  --main-color:#409eff;
  --theme-color:var(--main-color);
  --custom-radius:.75rem;
  --art-color:#ffffff;
  --art-primary:oklch(0.7 0.23 260);
  --art-secondary:oklch(0.72 0.19 231.6);
  --art-error:oklch(0.73 0.15 25.3);
  --art-info:oklch(0.58 0.03 254.1);
  --art-success:oklch(0.78 0.17 166.1);
  --art-warning:oklch(0.78 0.14 75.5);
  --art-danger:oklch(0.68 0.22 25.3);
  --art-gray-100:#f9fafb;
  --art-gray-200:#f2f4f5;
  --art-gray-300:#e6eaeb;
  --art-gray-400:#dbdfe1;
  --art-gray-500:#949eb7;
  --art-gray-600:#7987a1;
  --art-gray-700:#4d5875;
  --art-gray-800:#383853;
  --art-gray-900:#323251;
  --art-card-border:rgba(0,0,0,.08);
  --default-border:#e2e8ee;
  --default-border-dashed:#dbdfe9;
  --default-bg-color:#fafbfc;
  --default-box-color:#ffffff;
  --art-hover-color:#edeff0;
  --art-active-color:#f2f4f5;
  --art-el-active-color:#f2f4f5;
}
html.dark,
html[data-theme="dark"]{
  --art-color:#000000;
  --art-gray-100:#110f0f;
  --art-gray-200:#17171c;
  --art-gray-300:#393946;
  --art-gray-400:#505062;
  --art-gray-500:#73738c;
  --art-gray-600:#8f8fa3;
  --art-gray-700:#ababba;
  --art-gray-800:#c7c7d1;
  --art-gray-900:#e3e3e8;
  --art-card-border:rgba(255,255,255,.08);
  --default-border:rgba(255,255,255,.1);
  --default-border-dashed:#363843;
  --default-bg-color:#070707;
  --default-box-color:#161618;
  --art-hover-color:#252530;
  --art-active-color:#202226;
  --art-el-active-color:#2e2e38;
}
:root,
html[data-theme="light"],
html[data-theme="dark"]{
  --bg:var(--default-bg-color);
  --bg2:var(--art-gray-100);
  --card:var(--default-box-color);
  --card2:var(--default-box-color);
  --line:var(--default-border);
  --text:var(--art-gray-900);
  --muted:var(--art-gray-600);
  --accent:var(--theme-color);
  --accent2:var(--theme-color);
  --ok:#13deb9;
  --warn:#ffae1f;
  --bad:#ff4d4f;
  --shadow:0 1px 3px rgba(0,0,0,.03),0 1px 2px -1px rgba(0,0,0,.08);
  --radius:calc(var(--custom-radius) + 4px);
  --btn-bg:var(--default-box-color);
  --btn-hover-border:var(--theme-color);
  --input-bg:var(--default-box-color);
  --sidebar-bg:var(--default-box-color);
  --body-bg:var(--default-bg-color);
  --topbar-bg:var(--default-box-color);
  --topbar-border:var(--art-card-border);
  --hover-bg:var(--art-hover-color);
  --row-hover:var(--art-gray-100);
  --tabs-bg:var(--default-box-color);
  --nav-active-color:var(--theme-color);
  --seg-bg:var(--default-box-color);
  --prog-bg:var(--art-gray-200);
  --chip-bg:var(--art-gray-100);
  --primary-fg:#fff;
  --danger-bg:color-mix(in srgb,#ff4d4f 10%,var(--default-box-color));
  --danger-border:color-mix(in srgb,#ff4d4f 34%,var(--default-border));
  --danger-fg:#ff4d4f;
  --ok-bg:color-mix(in srgb,#13deb9 11%,var(--default-box-color));
  --ok-border:color-mix(in srgb,#13deb9 36%,var(--default-border));
  --ok-fg:#13bfa0;
}
html,
body{
  background:var(--default-bg-color) !important;
  color:var(--art-gray-900);
  font-family:var(--el-font-family,"Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei",Arial,sans-serif);
}
body{background-image:none !important}
.main{background:var(--default-bg-color)}
.content{padding:15px;background:var(--default-bg-color)}
.topbar{
  height:64px;
  padding:0 24px;
  background:var(--default-box-color);
  border-bottom:1px solid var(--art-card-border);
  box-shadow:none;
  backdrop-filter:none;
}
.topbar h1{font-size:18px;font-weight:500;color:var(--art-gray-900);letter-spacing:0}
.topbar-right{gap:10px}
.sidebar,
.sidebar-tech{
  width:230px;
  --sidebar-tech-width:230px;
  background:var(--default-box-color);
  border-right:1px solid var(--art-card-border);
  box-shadow:none;
  color:var(--art-gray-700);
}
.sidebar-tech{
  --sidebar-tech-surface:var(--default-box-color);
  --sidebar-tech-surface-soft:var(--art-gray-100);
  --sidebar-tech-border:var(--art-card-border);
  --sidebar-tech-text:var(--art-gray-600);
  --sidebar-tech-text-strong:var(--art-gray-900);
  --sidebar-tech-muted:var(--art-gray-500);
  --sidebar-tech-icon:var(--art-gray-600);
  --sidebar-tech-primary:var(--theme-color);
  --sidebar-tech-primary-soft:var(--el-color-primary-light-9);
  --sidebar-tech-hover:var(--art-hover-color);
  --sidebar-tech-shadow:transparent;
}
.brand{height:64px;padding:0 16px;border-bottom:1px solid var(--art-card-border)}
.brand-text strong{font-size:16px;font-weight:600;color:var(--art-gray-900)}
.brand-text span{color:var(--art-gray-600)}
.nav{padding:8px 10px}
.nav-item,
.nav-group-title{
  border-radius:calc(var(--custom-radius) / 2 + 2px);
  color:var(--art-gray-700);
  transition:background-color .16s,color .16s;
}
.nav-item:hover,
.nav-group-title:hover{background:var(--art-hover-color);color:var(--art-gray-900)}
.nav-item.active,
.nav-group.open>.nav-group-title{
  color:var(--theme-color);
  background:var(--el-color-primary-light-9);
  border-color:transparent;
}
.nav-sub{border-left:0;margin-left:0;padding-left:0}
.nav-sub .nav-item{color:var(--art-gray-600)}
.sidebar-system-meta{background:var(--art-gray-100);border-top:1px solid var(--art-card-border)}
.card,
.lucdn-panel,
.lucdn-section,
.lucdn-metric-card,
.lucdn-service-board,
.lucdn-user-card,
.login-card{
  background:var(--default-box-color) !important;
  border:1px solid var(--art-card-border) !important;
  border-radius:calc(var(--custom-radius) + 4px) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.03),0 1px 2px -1px rgba(0,0,0,.08) !important;
  color:var(--art-gray-900);
}
.card{padding:20px}
.card-head h2,
.lucdn-section-head h2,
.lucdn-panel-head h2{font-size:16px;font-weight:600;color:var(--art-gray-900)}
.card h3,
.lucdn-metric-card h3{color:var(--art-gray-600);font-weight:500}
.card .metric,
.metric,
.lucdn-metric-card .metric{color:var(--art-gray-900);font-weight:600;letter-spacing:0}
.muted,
.card .sub,
.lucdn-section-head p,
.lucdn-panel-head p{color:var(--art-gray-600) !important}
.btn,
button.btn,
a.btn{
  min-height:36px;
  padding:8px 15px;
  border:1px solid var(--default-border);
  border-radius:calc(var(--custom-radius) / 3 + 2px);
  background:var(--default-box-color);
  color:var(--theme-color);
  box-shadow:none;
  font-size:14px;
  font-weight:400;
}
.btn:hover{border-color:var(--theme-color);background:var(--el-color-primary-light-9);color:var(--theme-color)}
.btn.primary,
button.btn.primary,
a.btn.primary{
  border-color:var(--theme-color);
  background:var(--theme-color);
  color:#fff;
  font-weight:500;
}
.btn.primary:hover{filter:none;background:color-mix(in srgb,var(--theme-color) 88%,#fff);color:#fff}
.btn.danger{color:#ff4d4f;background:var(--danger-bg);border-color:var(--danger-border)}
.btn.ok{color:#13bfa0;background:var(--ok-bg);border-color:var(--ok-border)}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
select,
textarea{
  min-height:36px;
  padding:8px 12px;
  border:1px solid var(--default-border);
  border-radius:calc(var(--custom-radius) / 3 + 2px);
  background:var(--default-box-color);
  color:var(--art-gray-900);
  box-shadow:none;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus{
  border-color:var(--theme-color);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-color) 14%,transparent);
}
label{color:var(--art-gray-600);font-size:13px}
.table-wrap{border-radius:calc(var(--custom-radius) / 2 + 2px);border:1px solid var(--default-border);background:var(--default-box-color)}
table{background:var(--default-box-color);font-size:13px}
th{
  height:44px;
  padding:10px 12px;
  background:var(--art-gray-100);
  color:var(--art-gray-600);
  font-weight:500;
  border-bottom:1px solid var(--default-border);
}
td{padding:12px;border-bottom:1px solid var(--default-border);color:var(--art-gray-800)}
tr:hover td{background:var(--art-gray-100)}
.status{border-radius:4px;padding:4px 8px;font-weight:500}
.status.on{background:color-mix(in srgb,#13deb9 14%,var(--default-box-color));color:#13bfa0}
.status.off{background:color-mix(in srgb,#ff4d4f 12%,var(--default-box-color));color:#ff4d4f}
.status.wait{background:color-mix(in srgb,#ffae1f 13%,var(--default-box-color));color:#d48806}
.page-tabs{
  padding:5px;
  border:1px solid var(--art-card-border);
  border-radius:calc(var(--custom-radius) / 2 + 4px);
  background:var(--default-box-color);
}
.page-tabs a{border-radius:calc(var(--custom-radius) / 2 + 2px);color:var(--art-gray-600)}
.page-tabs a:hover{background:var(--art-hover-color);color:var(--art-gray-900)}
.page-tabs a.active{background:var(--el-color-primary-light-9);color:var(--theme-color);font-weight:500}
.seg{
  padding:4px;
  border:1px solid var(--default-border);
  border-radius:calc(var(--custom-radius) / 2 + 2px);
  background:var(--default-box-color);
}
.seg button{
  min-height:30px;
  border:0;
  border-radius:calc(var(--custom-radius) / 3 + 2px);
  background:transparent;
  color:var(--art-gray-600);
}
.seg button.active{background:var(--theme-color);color:#fff}
.prog{border:0;background:var(--art-gray-200)}
.prog-bar{background:var(--theme-color)}
.alert{
  border-radius:calc(var(--custom-radius) / 2 + 2px);
  border:1px solid var(--default-border);
  background:var(--default-box-color);
  color:var(--art-gray-800);
}
.alert.info{background:var(--el-color-primary-light-9);border-color:var(--el-color-primary-light-7);color:var(--theme-color)}
.alert.warn{background:var(--el-color-warning-light-9);border-color:var(--el-color-warning-light-7);color:#d48806}
.alert.bad{background:var(--el-color-danger-light-9);border-color:var(--el-color-danger-light-7);color:#ff4d4f}
.user-avatar{background:var(--theme-color);box-shadow:none}
.user-menu-panel{
  background:var(--default-box-color);
  border:1px solid var(--art-card-border);
  border-radius:calc(var(--custom-radius) / 2 + 4px);
  box-shadow:0 6px 16px rgba(0,0,0,.08),0 3px 6px -4px rgba(0,0,0,.12),0 9px 28px 8px rgba(0,0,0,.05);
}
.user-menu-name{color:var(--art-gray-900);border-bottom:1px solid var(--default-border)}
.user-menu-panel a{color:var(--art-gray-700)}
.user-menu-panel a:hover{background:var(--art-hover-color);color:var(--art-gray-900)}
.theme-toggle{
  background:var(--art-gray-200);
  border-color:var(--default-border);
  box-shadow:none;
}
.modal-mask.el-overlay{display:none;padding:0}
.modal-mask.el-overlay.show{display:block}
.modal-mask.el-overlay.is-leaving{display:block;animation:fade-out .2s linear forwards}
.modal-mask.el-overlay.is-leaving .modal.cdn-modal-out{animation:dialog-close .2s cubic-bezier(.32,.14,.15,.86) forwards}
.code-box,
pre,
code{background:var(--art-gray-100);border-color:var(--default-border);color:var(--art-gray-800)}
@media(max-width:980px){
  .content{padding:12px}
  .topbar{height:56px;padding:0 14px}
  .card{padding:15px}
}