/* Base surfaces stay neutral; accent tokens are reserved for interaction states. */
:root,
:root[data-accent="blue"] {
  --page-bg: #F7F8FA;
  --surface-bg: #FFFFFF;
  --surface-subtle: #FAFBFC;
  --text-primary: #1F2937;
  --text-secondary: #6B7280;
  --border-color: rgba(15,23,42,.07);
  --accent-primary: #2F6FED;
  --accent-hover: #275FD0;
  --accent-active: #204FAE;
  --accent-soft: #EAF0FF;
  --accent-softest: #F7F9FF;
  --accent-border: #BDD0FF;
  --accent-text: #2654B5;
  --accent-rgb: 47,111,237;
  --accent-focus: rgba(47,111,237,.20);
  --accent-on-primary: #FFFFFF;
}
:root[data-accent="cyan"] { --accent-primary:#09A9E6;--accent-hover:#078FC4;--accent-active:#0679A5;--accent-soft:#E6F8FF;--accent-softest:#F5FCFF;--accent-border:#AFE8FA;--accent-text:#087EA8;--accent-rgb:9,169,230;--accent-focus:rgba(9,169,230,.20);--accent-on-primary:#FFF; }
:root[data-accent="telegram-green"] { --accent-primary:#9BBF85;--accent-hover:#8EAF78;--accent-active:#7FA06A;--accent-soft:#E8F1E1;--accent-softest:#F3F7EF;--accent-border:#BCD3AC;--accent-text:#49613D;--accent-rgb:155,191,133;--accent-focus:rgba(155,191,133,.22);--accent-on-primary:#FFF; }
:root[data-accent="lime"] { --accent-primary:#A8D500;--accent-hover:#91B900;--accent-active:#7A9D00;--accent-soft:#F3F9D9;--accent-softest:#FAFDEB;--accent-border:#D8E99B;--accent-text:#607B00;--accent-rgb:168,213,0;--accent-focus:rgba(168,213,0,.22);--accent-on-primary:#172000; }
:root[data-accent="yellow"] { --accent-primary:#FFC23D;--accent-hover:#E3A82D;--accent-active:#C69022;--accent-soft:#FFF6DD;--accent-softest:#FFFCF3;--accent-border:#F5D98D;--accent-text:#876512;--accent-rgb:255,194,61;--accent-focus:rgba(255,194,61,.22);--accent-on-primary:#2C2200; }
:root[data-accent="orange"] { --accent-primary:#FF745E;--accent-hover:#E7604D;--accent-active:#C95040;--accent-soft:#FFF0EC;--accent-softest:#FFF9F7;--accent-border:#F6C4BA;--accent-text:#A94738;--accent-rgb:255,116,94;--accent-focus:rgba(255,116,94,.22);--accent-on-primary:#FFF; }
:root[data-accent="pink"] { --accent-primary:#F5429B;--accent-hover:#D93688;--accent-active:#BB2C73;--accent-soft:#FFE8F3;--accent-softest:#FFF8FB;--accent-border:#F4B6D5;--accent-text:#B42F72;--accent-rgb:245,66,155;--accent-focus:rgba(245,66,155,.20);--accent-on-primary:#FFF; }
:root[data-accent="magenta"] { --accent-primary:#D84FD5;--accent-hover:#BD3FBA;--accent-active:#A433A1;--accent-soft:#FBE9FA;--accent-softest:#FFF9FF;--accent-border:#EAB9E8;--accent-text:#983795;--accent-rgb:216,79,213;--accent-focus:rgba(216,79,213,.20);--accent-on-primary:#FFF; }
:root[data-accent="purple"] { --accent-primary:#9B55F3;--accent-hover:#8244D3;--accent-active:#6B36B1;--accent-soft:#F2EAFE;--accent-softest:#FBF8FF;--accent-border:#D6BEF5;--accent-text:#7137B9;--accent-rgb:155,85,243;--accent-focus:rgba(155,85,243,.20);--accent-on-primary:#FFF; }
:root[data-accent="white"] { --accent-primary:#FFF;--accent-hover:#ECECEC;--accent-active:#DCDCDC;--accent-soft:rgba(255,255,255,.12);--accent-softest:rgba(255,255,255,.18);--accent-border:rgba(0,0,0,.15);--accent-text:#FFF;--accent-rgb:255,255,255;--accent-focus:rgba(255,255,255,.28);--accent-on-primary:#111; }

html:not(.dark):not([data-theme="dark"]),
html:not(.dark):not([data-theme="dark"]) body,
html:not(.dark):not([data-theme="dark"]) #app {
  background-color: var(--page-bg);
}

html:not(.dark):not([data-theme="dark"]) .portal-main {
  background: var(--page-bg) !important;
}
html:not(.dark):not([data-theme="dark"]) .portal-layout .sidebar {
  background: var(--surface-bg) !important;
}
html:not(.dark):not([data-theme="dark"]) .portal-layout .main-header {
  background: rgba(255,255,255,.96) !important;
  border-bottom-color: var(--border-color) !important;
}
html:not(.dark):not([data-theme="dark"]) .portal-layout .metric,
html:not(.dark):not([data-theme="dark"]) .portal-layout .settlement-detail,
html:not(.dark):not([data-theme="dark"]) .portal-layout .el-card,
html:not(.dark):not([data-theme="dark"]) .el-dialog,
html:not(.dark):not([data-theme="dark"]) .el-message-box {
  background: var(--surface-bg) !important;
}

/* Element Plus ships its own fixed blue token palette; route those controls
   through the same system color in all three portal builds. */
:root[data-accent] { --el-color-primary:var(--accent-primary);--el-color-primary-rgb:var(--accent-rgb);--el-color-primary-light-3:color-mix(in srgb,var(--accent-primary) 70%,#fff);--el-color-primary-light-5:color-mix(in srgb,var(--accent-primary) 55%,#fff);--el-color-primary-light-7:color-mix(in srgb,var(--accent-primary) 36%,#fff);--el-color-primary-light-8:color-mix(in srgb,var(--accent-primary) 24%,#fff);--el-color-primary-light-9:var(--accent-soft);--el-color-primary-dark-2:var(--accent-active);--el-color-primary-dark-1:var(--accent-hover);--blue:var(--accent-text);--blue-soft:var(--accent-soft);--primary:var(--accent-primary); }

/* Shared component states. Base surfaces remain owned by each portal skin. */
.el-button--primary,
.btn--primary,
button.primary,
.djsms-accent-primary { background:var(--accent-primary)!important;border-color:var(--accent-primary)!important;color:var(--accent-on-primary)!important; }
.el-button--primary:hover,.btn--primary:hover,button.primary:hover { background:var(--accent-hover)!important;border-color:var(--accent-hover)!important; }
.el-button--primary:active,.btn--primary:active,button.primary:active { background:var(--accent-active)!important;border-color:var(--accent-active)!important; }
.el-button--primary:focus-visible,.btn--primary:focus-visible,button.primary:focus-visible { box-shadow:0 0 0 3px var(--accent-focus)!important; }
.el-menu-item.is-active,.el-sub-menu.is-active>.el-sub-menu__title,.tab-active,.selected-item,.tab-soft-active { background:var(--accent-soft)!important;color:var(--accent-text)!important; }
.el-checkbox__input.is-checked .el-checkbox__inner,.el-radio__input.is-checked .el-radio__inner,.el-switch.is-checked .el-switch__core { background:var(--accent-primary)!important;border-color:var(--accent-primary)!important; }
.el-radio__input.is-checked+.el-radio__label,.el-checkbox__input.is-checked+.el-checkbox__label,.el-link--primary,.text-primary,.accent-text { color:var(--accent-text)!important; }
.el-progress-bar__inner,.el-slider__bar,.el-pagination .is-active { background:var(--accent-primary)!important; }
.el-pagination .el-pager li.is-active { color:var(--accent-on-primary)!important;border-color:var(--accent-primary)!important; }
.el-tabs__item.is-active,.el-tabs__item:hover { color:var(--accent-text)!important; }
.el-tabs__active-bar { background-color:var(--accent-primary)!important; }
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active { border-color:var(--accent-border)!important;background:var(--accent-soft)!important; }
.el-slider__button { border-color:var(--accent-primary)!important; }
.el-loading-spinner .path { stroke:var(--accent-primary)!important; }
.el-loading-spinner .el-loading-text { color:var(--accent-text)!important; }
#nprogress .bar { background:var(--accent-primary)!important; }
#nprogress .peg { box-shadow:0 0 10px var(--accent-primary),0 0 5px var(--accent-primary)!important; }
#nprogress .spinner-icon { border-top-color:var(--accent-primary)!important;border-left-color:var(--accent-primary)!important; }
.el-input__wrapper.is-focus,.el-input__wrapper:focus-within,.el-textarea__inner:focus,.el-select .el-input.is-focus .el-input__wrapper { box-shadow:0 0 0 3px var(--accent-focus)!important;border-color:var(--accent-border)!important; }
.el-tag--primary,.badge-accent { background:var(--accent-soft)!important;border-color:var(--accent-border)!important;color:var(--accent-text)!important; }
.el-menu-item.is-active { color:var(--accent-text)!important;background:var(--accent-soft)!important; }
html[data-accent] .panda-mobile-aside .el-menu.el-menu--vertical .el-menu-item.is-active,
html[data-accent] .panda-mobile-aside .el-menu.el-menu--vertical .el-menu-item:hover,
html[data-accent] .panda-mobile-aside .el-sub-menu.is-active>.el-sub-menu__title {
  color:var(--accent-text)!important;background:var(--accent-soft)!important;
}
#app .w-screen.h-screen .el-tabs__item.is-active,
#app .w-screen.h-screen .el-tabs__item:hover { color:var(--accent-text)!important; }
#app .w-screen.h-screen .el-tabs--card>.el-tabs__header .el-tabs__item.is-active { border-color:var(--accent-border)!important;background:var(--accent-soft)!important; }
.sidebar .el-menu-item.is-active,
.portal-layout .sidebar .el-menu-item.is-active,
.portal-layout .sidebar .portal-menu .el-menu-item.is-active,
.agent-portal .sidebar .portal-menu .el-menu-item.is-active,
.user-sidebar .portal-menu .el-menu-item.is-active { color:var(--accent-text)!important;background:var(--accent-soft)!important;box-shadow:none!important; }
.sidebar .el-menu-item.is-active .menu-svg,
.portal-menu .el-menu-item.is-active .menu-icon-wrap,
.portal-menu .el-menu-item.is-active .menu-svg { color:var(--accent-text)!important; }
.sidebar .el-menu-item:hover,
.portal-menu .el-menu-item:hover { color:var(--accent-text)!important;background:var(--accent-soft)!important; }
.metric-icon { color:var(--accent-text)!important;background:var(--accent-soft)!important; }
.user-page .quota-tip b,.user-page .flow-pill.on { color:var(--accent-text)!important; }
#app > #app > .w-screen.h-screen .el-button--primary,
#app > #app > .w-screen.h-screen .btn--primary,
#app > #app > .w-screen.h-screen button.primary { background:var(--accent-primary)!important;border-color:var(--accent-primary)!important;color:var(--accent-on-primary)!important; }
#app > #app > .w-screen.h-screen .el-button--primary:hover,
#app > #app > .w-screen.h-screen .btn--primary:hover,
#app > #app > .w-screen.h-screen button.primary:hover { background:var(--accent-hover)!important;border-color:var(--accent-hover)!important; }
#app > #app > .w-screen.h-screen .el-menu-item.is-active,
#app > #app > .w-screen.h-screen .el-sub-menu.is-active>.el-sub-menu__title { background:var(--accent-soft)!important;color:var(--accent-text)!important; }

.djsms-accent-launcher { position:fixed;right:20px;bottom:20px;z-index:10000;border:1px solid var(--accent-border);border-radius:999px;background:var(--accent-primary);color:var(--accent-on-primary);box-shadow:0 10px 28px rgba(15,23,42,.18);padding:10px 15px;font:600 13px/1 system-ui,sans-serif;cursor:pointer; }
.djsms-accent-panel { position:fixed;right:20px;bottom:66px;z-index:10001;width:260px;padding:16px;border:1px solid var(--accent-border);border-radius:14px;background:#fff;color:#1f2937;box-shadow:0 18px 55px rgba(15,23,42,.20);font:13px/1.4 system-ui,sans-serif; }
.djsms-accent-panel[hidden] { display:none; }
.djsms-accent-panel h2 { margin:0 0 4px;font-size:15px; }
.djsms-accent-panel p { margin:0 0 12px;color:#64748b;font-size:12px; }
.djsms-accent-grid { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
.djsms-accent-option { display:flex;align-items:center;gap:7px;padding:7px 8px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#334155;cursor:pointer;text-align:left; }
.djsms-accent-option:hover,.djsms-accent-option[aria-checked="true"] { border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent-text); }
.djsms-accent-check { width:12px;flex:none;color:var(--accent-text);font-weight:800; }
.djsms-accent-label { flex:1; }
.djsms-accent-dot { width:13px;height:13px;flex:none;border-radius:50%;border:1px solid rgba(15,23,42,.14);background:var(--swatch); }
@media (max-width:640px) { .djsms-accent-launcher{right:12px;bottom:max(12px,env(safe-area-inset-bottom));}.djsms-accent-panel{right:12px;bottom:62px;width:min(260px,calc(100vw - 24px));} }