/*
 * 设计室 · IMAI 运营空间
 *
 * 此文件只由设计室布局加载，沿用 components.css 对外公开的类名。
 * skins.css 保留其它主题和旧的图标映射；本文件负责设计室的最终视觉规范。
 * body 上也定义 token，使 util.message / util.confirm 等挂到 body 的弹层继承主题。
 * 顺序：tokens → layout → components → responsive。
 */

/* ==================== 1. Tokens ==================== */

body.skin-designkit-page,
.skin-designkit {
  --bg: #f7f8fa;
  --surface: #fff;
  --sidebar: #fcfcfd;
  --sidebar-ink: #626975;
  --sidebar-ink-strong: #202329;
  --sidebar-heading: #7f8793;
  --sidebar-hover: #f0f1f4;
  --sidebar-active: #eceef2;
  --sidebar-line: #e8eaee;

  --ink: #202329;
  --ink-title: #202329;
  --ink-strong: #202329;
  --ink-2: #202329;
  --ink-soft: #596371;
  --ink-3: #444c59;
  --ink-4: #515b69;
  --ink-5: #596371;
  --ink-6: #69707d;
  --muted: #77808d;
  --muted-2: #7f8793;
  --muted-3: #8b929d;
  --muted-4: #9199a5;
  --muted-5: #9199a5;
  --muted-6: #a0a6af;
  --on-solid: #fff;

  --line: #e8eaee;
  --line-soft: #eef0f3;
  --line-hairline: #e8eaee;
  --line-2: #d4d9e1;
  --line-3: #e1e4ea;
  --fill: #f2f4f7;
  --fill-strong: #e9ecf2;
  --wash: #fafbfc;
  --panel-head-bg: #fafbfc;
  --hover-wash: #f8f9fc;
  --hover-wash-2: #f2f4f7;
  --hover-wash-3: #f8f9fc;
  --hover-wash-strong: #e9ecf2;
  --disabled-bg: #f2f4f7;
  --step-bg: #f2f4f7;
  --icon-wash: #edf1ff;
  --avatar-bg: #eaf0ff;
  --site-nav-bg: #eceef2;

  --accent: #486de8;
  --accent-hover: #3555c4;
  --accent-tint: #eceef2;
  --accent-wash: #edf1ff;
  --solid: #24272e;
  --solid-hover: #3d424c;
  --ok: #248263;
  --ok-ink: #287c5e;
  --warn: #b87922;
  --warn-ink: #94651e;
  --danger: #bd4551;
  --info-ink: #486de8;
  --badge: #cc5158;
  --c-blue: #526fc7;
  --c-blue-tint: #edf1ff;
  --c-green: #287c5e;
  --c-green-tint: #ebf6f0;
  --c-orange: #a57322;
  --c-orange-tint: #fff4e5;
  --c-purple: #805dbc;
  --c-purple-tint: #f2eefa;
  --c-red: #bd5361;
  --c-red-tint: #fff0f0;
  --up-ink: #287c5e;
  --up-bg: #ebf6f0;
  --down-ink: #bd5361;
  --down-bg: #fff0f0;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --r-s: 8px;
  --r-l: 12px;
  --r-pill: 999px;
  --shadow-card: none;
  --dk-shadow-popover: 0 12px 38px rgb(27 34 52 / 10%);
  --dk-shadow-dialog: 0 18px 80px rgb(25 34 53 / 20%);
  --dk-shadow-switch: 0 1px 3px rgb(0 0 0 / 12%);
  --dk-focus-ring: 0 0 0 3px rgb(72 109 232 / 14%);
  --dk-selection: #dfe6ff;
  --dk-info-line: #e2e9fd;
  --dk-info-bg: #f4f7ff;
  --dk-info-ink: #536b98;
  --dk-danger-bg: #fff5f5;
  --dk-danger-line: #f1d9dc;
  --dk-danger-hover-bg: #ffebed;
  --dk-danger-hover-line: #e6bdc2;
  --dk-danger-solid-hover: #a63743;
  --dk-table-hover: #fcfcff;
  --dk-switch-off: #d8dce3;
  --dk-ok-line: #d6eade;
  --dk-error-line: #f0d6d9;
  --dk-warn-line: #eedfc9;
  --dk-backdrop: #1b2234;
  --dk-nav-backdrop: rgb(27 34 52 / 28%);
  --dk-sidebar-width: 212px;
  --dk-sub-width: 196px;
  --dk-header-height: 68px;
  --dk-content-padding: clamp(16px, 2vw, 28px);
  color-scheme: light;
}

body.skin-designkit-page {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.skin-designkit { min-height: 100vh; background: var(--bg); line-height: 1.6; }
body.skin-designkit-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body.skin-designkit-page [hidden] { display: none !important; }
body.skin-designkit-page ::selection { background: var(--dk-selection); color: var(--ink); }
body.skin-designkit-page .designkit-skip-link { position: fixed; top: 8px; left: 16px; z-index: 1050; padding: 9px 15px; transform: translateY(-160%); border-radius: var(--r-s); background: var(--solid); color: var(--on-solid); font-size: 13px; }
body.skin-designkit-page .designkit-skip-link:focus { transform: translateY(0); }

/* ==================== 2. Layout ==================== */

/* The four geometric values share tokens: sidebar, header, content, secondary nav. */
.skin-designkit .skin-2__left {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1003;
  display: flex;
  flex-direction: column;
  width: var(--dk-sidebar-width);
  padding: 24px 14px;
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-line);
  overflow: hidden;
  transition: none;
}
.skin-designkit .skin-2__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  margin: 0 0 28px;
  padding: 0 8px;
  text-align: left;
  color: var(--ink);
}
.skin-designkit .skin-2__logo img { width: 34px; max-width: 34px; max-height: 40px; object-fit: contain; }
.skin-designkit .designkit-brand-copy { display: block; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.skin-designkit .designkit-brand-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: 1px; }
.skin-designkit .skin-2__left .main-nav { flex: 1; min-height: 0; max-height: none; margin: 0; padding: 0; overflow-y: auto; scrollbar-width: thin; }
.skin-designkit .skin-2__left .main-nav li { margin: 0 0 4px; border-radius: var(--r-s); }
.skin-designkit .skin-2__left .main-nav li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  min-height: 41px;
  padding: 10px 12px;
  border-radius: var(--r-s);
  color: var(--sidebar-ink);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}
.skin-designkit .skin-2__left .main-nav li a i { display: block; flex: none; width: 20px; margin: 0; font-size: 18px; text-align: center; }
.skin-designkit .skin-2__left .main-nav .nav-text { display: inline; opacity: 1; visibility: visible; }
.skin-designkit .skin-2__left .main-nav li:hover,
.skin-designkit .skin-2__left .main-nav li.active { background: transparent; }
.skin-designkit .skin-2__left .main-nav li:hover a { background: var(--sidebar-hover); color: var(--ink); }
.skin-designkit .skin-2__left .main-nav li.active a { background: var(--sidebar-active); color: var(--ink); font-weight: 600; }
.skin-designkit .skin-2__left .main-nav li.active a i { color: inherit; }
.skin-designkit .skin-2__lock { display: none; }

.skin-designkit .skin-designkit__right,
.skin-designkit .skin-2__right {
  position: relative;
  min-width: 0;
  min-height: 100vh;
  margin-left: var(--dk-sidebar-width);
  padding-top: var(--dk-header-height);
  background: var(--bg);
}
.skin-designkit .skin-2__header {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--dk-sidebar-width);
  z-index: 1002;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--dk-header-height);
  padding: 0 var(--dk-content-padding);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.skin-designkit .skin-2__header .user-info { display: flex; align-items: center; gap: 4px; margin: 0 0 0 auto; padding: 0; min-width: 0; }
.skin-designkit .skin-2__header .user-info > li { margin: 0; line-height: 1.5; }
.skin-designkit .skin-2__header .user-info > li > a { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 9px; border-radius: var(--r-s); color: var(--ink-soft); font-size: 13px; white-space: nowrap; }
.skin-designkit .skin-2__header .user-info > li > a .wi { font-size: 18px; color: inherit; }
.skin-designkit .skin-2__header .user-info > li > a span { margin-left: 0; }
.skin-designkit .skin-2__header .user-info > li > a:hover { background: var(--fill); color: var(--ink); }
.skin-designkit .skin-2__header .shortcut-header { height: 36px; padding: 0 10px; color: var(--ink-soft); font-size: 13px; line-height: 36px; }
.skin-designkit .skin-2__header .shortcut-header .wi { font-size: 18px; }
.skin-designkit .skin-2__header .user-info .msg .badge { min-width: 15px; padding: 2px 4px; top: -5px; right: -8px; font-size: 10px; }
.skin-designkit .skin-2__header .user-info > li[data-title]::after { top: 42px; padding: 5px 9px; border-radius: 6px; }
.skin-designkit .designkit-breadcrumb { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.skin-designkit .designkit-breadcrumb a { color: var(--muted); }
.skin-designkit .designkit-breadcrumb a:hover { color: var(--ink); }
.skin-designkit .designkit-breadcrumb .wi { color: var(--muted-3); font-size: 12px; }
.skin-designkit .designkit-breadcrumb [aria-current] { overflow: hidden; text-overflow: ellipsis; }
.skin-designkit .designkit-breadcrumb > span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.skin-designkit .designkit-breadcrumb > strong { min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }

.skin-designkit .skin-designkit__content,
.skin-designkit .skin-2__content { position: relative; margin: 0; min-width: 0; min-height: calc(100vh - var(--dk-header-height)); }
.skin-designkit .skin-designkit__container,
.skin-designkit .skin-2__container,
html.main-lg .skin-designkit .main .container {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: var(--dk-content-padding);
  background: transparent;
}
.skin-designkit .skin-designkit__container.has-sub,
.skin-designkit .skin-2__container.has-sub { margin-left: var(--dk-sub-width); }
.skin-designkit .skin-designkit__container > .content,
.skin-designkit .skin-2__container > .content { min-width: 0; min-height: calc(100vh - 210px); }

.skin-designkit .skin-designkit__sub,
.skin-designkit .skin-2__sub {
  position: fixed;
  top: var(--dk-header-height);
  bottom: 0;
  left: var(--dk-sidebar-width);
  z-index: 1001;
  width: var(--dk-sub-width);
  padding: 20px 12px;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  scrollbar-width: thin;
}
.skin-designkit :is(.skin-designkit__sub, .skin-2__sub) .sub-top { padding: 0 8px 14px; text-align: left; }
.skin-designkit :is(.skin-designkit__sub, .skin-2__sub) .sub-top .menu-title { display: flex; align-items: center; gap: 8px; border: 0; padding: 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.skin-designkit :is(.skin-designkit__sub, .skin-2__sub) .sub-top .menu-title .wi { display: inline-block; margin: 0; color: var(--ink-soft); font-size: 18px; }
.skin-designkit :is(.skin-designkit__sub, .skin-2__sub) .panel-menu { padding: 0; margin: 0 0 12px; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.skin-designkit :is(.skin-designkit__sub, .skin-2__sub) .panel-menu:last-child { border-bottom: 0; }
.skin-designkit :is(.skin-designkit__sub, .skin-2__sub) .panel-menu > .panel-heading { padding: 0; background: transparent; color: var(--sidebar-heading); font-size: 12px; }
.skin-designkit :is(.skin-designkit__sub, .skin-2__sub) .panel-menu > .panel-heading .no-collapse { padding: 10px 9px 6px; font-size: 12px; }
.skin-designkit :is(.skin-designkit__sub, .skin-2__sub) .panel-menu .list-group-item { margin: 2px 0; background: transparent; border: 0; padding: 0; }
.skin-designkit :is(.skin-designkit__sub, .skin-2__sub) .panel-menu .list-group-item > a { display: flex; align-items: center; gap: 9px; padding: 9px; border-radius: var(--r-s); background: transparent; color: var(--sidebar-ink); font-size: 13px; line-height: 1.5; }
.skin-designkit :is(.skin-designkit__sub, .skin-2__sub) .panel-menu .list-group-item .nav-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; }
.skin-designkit :is(.skin-designkit__sub, .skin-2__sub) .panel-menu .list-group-item .nav-icon i { margin: 0; color: inherit; font-size: 16px; }
.skin-designkit :is(.skin-designkit__sub, .skin-2__sub) .panel-menu .list-group-item > a:hover { background: var(--sidebar-hover); color: var(--ink); }
.skin-designkit :is(.skin-designkit__sub, .skin-2__sub) .panel-menu .list-group-item.active > a { background: var(--sidebar-active); color: var(--ink); font-weight: 600; }
.skin-designkit :is(.skin-designkit__sub, .skin-2__sub) .panel-menu .list-group-item > a .wi { color: inherit; }

/* Client and platform pages have one 212px navigation column. */
.skin-designkit.shell-full { --dk-sidebar-width: 0px; --dk-sub-width: 212px; }
.skin-designkit.shell-full .skin-2__right { margin-left: 0; }
.skin-designkit.shell-full .skin-2__header { left: 0; padding-left: calc(var(--dk-sub-width) + var(--dk-content-padding)); }
.skin-designkit.shell-full .skin-2__header .header-info-common__logo { width: var(--dk-sub-width); padding: 0 20px; background: var(--sidebar); border-right: 1px solid var(--line); }
.skin-designkit.shell-full .skin-2__sub,
.skin-designkit.shell-full .skin-2__sub:has(.side-client) { left: 0; width: var(--dk-sub-width); border-right: 1px solid var(--line); }
.skin-designkit.shell-full .skin-2__content:has(.side-client) .skin-2__container.has-sub { margin-left: var(--dk-sub-width); }
.skin-designkit .skin-2__sub .side-client { width: 100%; padding: 0; border: 0; background: transparent; }
.skin-designkit .side-client a { display: flex; align-items: center; gap: 9px; margin: 2px 0; min-height: 40px; padding: 9px 10px; border-radius: var(--r-s); color: var(--sidebar-ink); font-size: 13px; line-height: 1.5; }
.skin-designkit .side-client a .wi { font-size: 17px; margin: 0; width: 20px; text-align: center; }
.skin-designkit .side-client a .num { margin-left: auto; padding: 0 6px; border-radius: 5px; background: var(--fill); font-size: 11px; }
.skin-designkit .side-client .grp { margin-top: 20px; padding: 0 10px; line-height: 32px; font-size: 12px; }
.skin-designkit .side-client .type-more { display: none; }
.skin-designkit .side-client:has(.type-toggle input:checked) .type-more { display: flex; }
.skin-designkit .side-client .type-toggle { padding: 0 10px; font-size: 12px; color: var(--muted); }
.skin-designkit .skin-2__sub .sub-top .account-info { padding: 0 0 18px; border-bottom: 1px solid var(--line); text-align: center; }
.skin-designkit .skin-2__sub .sub-top .account-info .head-logo { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 12px; }
.skin-designkit .skin-2__sub .sub-top .account-info .head-logo.account-ico { display: flex; align-items: center; justify-content: center; background: var(--c-green-tint); color: var(--c-green); }
.skin-designkit .skin-2__sub .sub-top .account-info .head-logo .wi { color: inherit; font-size: 25px; }
.skin-designkit .skin-2__sub .sub-top .account-info .account-name { margin-bottom: 5px; padding: 0; font-size: 14px; font-weight: 600; }
.skin-designkit .skin-2__sub .sub-top .account-info .account-type { padding: 0; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.skin-designkit .skin-2__sub .sub-top .account-info .account-operate { margin: 0; padding: 0; font-size: 11px; }
.skin-designkit .skin-2__sub .sub-top .account-info .account-operate a { color: var(--accent); }

body.skin-designkit-page .imai-center-page-title { margin: 0 0 24px; padding: 0; color: var(--ink); font-size: 25px; font-weight: 600; line-height: 1.4; letter-spacing: -.5px; }
.skin-designkit .skin-2__content .footer,
.skin-designkit .skin-designkit__content .footer { margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 12px; }
.skin-designkit .designkit-nav-toggle { display: none; }
.skin-designkit .designkit-nav-close { display: none; }
body.skin-designkit-page .designkit-nav-backdrop { display: none; }

/* ==================== 3. Components ==================== */

/* Cards and page sections. Menus deliberately keep their own geometry. */
body.skin-designkit-page .panel:not(.panel-menu),
.skin-designkit .welcome-page .panel { min-width: 0; margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: none; overflow: visible; }
body.skin-designkit-page .panel-h { height: auto; min-height: 56px; padding: 16px 20px; gap: 12px; flex-wrap: wrap; background: transparent; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-size: 14px; }
body.skin-designkit-page .panel-h .t,
.skin-designkit .welcome-page .panel-h .t { padding: 0; border-left: 0; color: var(--ink); font-size: 14px; font-weight: 600; }
body.skin-designkit-page .panel-h .acts { align-items: center; gap: 12px; font-size: 12px; }
body.skin-designkit-page .panel-b { padding: 20px; }
body.skin-designkit-page .panel-b.flush { padding: 0; }
body.skin-designkit-page .form-files-box,
body.skin-designkit-page .panel-body { padding: 20px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: none; }
body.skin-designkit-page .panel .panel-body { margin: 0; padding: 20px; border: 0; border-radius: inherit; }
body.skin-designkit-page .panel-h:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
body.skin-designkit-page .panel-b:last-child,
body.skin-designkit-page .panel-body:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
body.skin-designkit-page .card-note { padding: 12px 20px; font-size: 12px; }
body.skin-designkit-page .metrics { flex-wrap: wrap; }
body.skin-designkit-page .metric { min-width: 120px; padding: 20px 16px; }
body.skin-designkit-page .metric .t { color: var(--muted); font-size: 12px; }
body.skin-designkit-page .metric .n { color: var(--ink); font-size: 28px; font-weight: 600; }
body.skin-designkit-page .hint { padding: 12px 15px; border: 1px solid var(--dk-info-line); border-radius: var(--r-s); background: var(--dk-info-bg); color: var(--dk-info-ink); font-size: 12px; line-height: 1.8; }
body.skin-designkit-page .empty { padding: 56px 20px; color: var(--muted); font-size: 13px; line-height: 1.8; }

/* Buttons include body-level confirmation dialogs. */
body.skin-designkit-page .btn,
.skin-designkit .welcome-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  height: auto;
  padding: 7px 13px;
  border: 1px solid var(--solid);
  border-radius: var(--r-s);
  background: var(--solid);
  color: var(--on-solid);
  font: 500 13px/1.5 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .15s, border-color .15s;
}
body.skin-designkit-page .btn:hover { background: var(--solid-hover); border-color: var(--solid-hover); color: var(--on-solid); }
body.skin-designkit-page .btn.ghost { background: var(--surface); border-color: var(--line-3); color: var(--ink-soft); font-weight: 500; }
body.skin-designkit-page .btn.ghost:hover { background: var(--bg); border-color: var(--line-2); color: var(--ink); }
body.skin-designkit-page .btn.sm { min-height: 30px; height: auto; padding: 4px 10px; border-radius: 6px; font-size: 12px; }
body.skin-designkit-page .btn.danger { background: var(--dk-danger-bg); border-color: var(--dk-danger-line); color: var(--danger); font-weight: 500; }
body.skin-designkit-page .btn.danger:hover { background: var(--dk-danger-hover-bg); border-color: var(--dk-danger-hover-line); color: var(--danger); }
body.skin-designkit-page .btn.danger-solid { background: var(--danger); border-color: var(--danger); color: var(--on-solid); }
body.skin-designkit-page .btn.danger-solid:hover { background: var(--dk-danger-solid-hover); border-color: var(--dk-danger-solid-hover); color: var(--on-solid); }
body.skin-designkit-page .btn:disabled,
body.skin-designkit-page .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
body.skin-designkit-page .link-group { gap: 12px; flex-wrap: wrap; }
body.skin-designkit-page .link-group :is(a, button) { font-size: 12px; }
body.skin-designkit-page .link-group :is(a, button):hover { text-decoration: underline; text-underline-offset: 3px; }

/* Tabs use the same baseline, while existing segmented controls keep their contract. */
body.skin-designkit-page .imai-center-page-tab,
body.skin-designkit-page .page-tabs { display: flex; align-items: stretch; gap: 22px; margin: 0 0 22px; padding: 0; border-bottom: 1px solid var(--line); overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.skin-designkit .skin-2__container .imai-center-page-tab li,
.skin-designkit .skin-designkit__container .imai-center-page-tab li { display: flex; align-items: stretch; flex: none; padding: 0; margin: 0; border-bottom: 2px solid transparent; }
body.skin-designkit-page .imai-center-page-tab li a,
body.skin-designkit-page .page-tabs a { display: inline-flex; align-items: center; padding: 0 1px 12px; color: var(--muted); font-size: 13px; line-height: 1.6; border: 0; border-radius: 0; }
body.skin-designkit-page .imai-center-page-tab li.active { border-bottom-color: var(--solid); }
body.skin-designkit-page .imai-center-page-tab li.active a { color: var(--ink); font-weight: 600; }
body.skin-designkit-page .page-tabs a { border-bottom: 2px solid transparent; }
body.skin-designkit-page .page-tabs a.on { border-bottom: 2px solid var(--solid); color: var(--ink); font-weight: 600; }
body.skin-designkit-page .page-tabs a:hover,
body.skin-designkit-page .imai-center-page-tab li a:hover { color: var(--ink); }
body.skin-designkit-page .page-tabs.inline { margin: 0; border-bottom: 0; gap: 16px; }
body.skin-designkit-page .page-tabs.inline a { padding: 5px 0; font-size: 12px; }
.skin-designkit .imai-center-btn-group:not(:has(.btn-tab)) { display: inline-flex; max-width: 100%; gap: 3px; margin-bottom: 22px; padding: 4px; border: 0; border-radius: var(--r-s); background: var(--fill); overflow-x: auto; white-space: nowrap; }
.skin-designkit .imai-center-btn-group:not(:has(.btn-tab)) :is(.btn, a) { flex: none; min-height: 30px; height: 30px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; font-weight: 500; }
.skin-designkit .imai-center-btn-group:not(:has(.btn-tab)) :is(.btn, a).active { border-color: var(--line); background: var(--surface); color: var(--ink); }

/* Filters and lists: scrolling belongs to the wrapper, never the whole document. */
body.skin-designkit-page .m5-search,
body.skin-designkit-page .list-search,
body.skin-designkit-page .shop-search { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; padding: 0; border: 0; background: transparent; box-shadow: none; }
body.skin-designkit-page .m5-search form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.skin-designkit :is(.m5-search, .list-search, .shop-search) select { width: auto; min-width: 130px; max-width: 100%; height: 36px; font-size: 13px; }
.skin-designkit :is(.m5-search, .list-search) input[type=text] { height: 36px; font-size: 13px; }
body.skin-designkit-page .m5-search .m5-kw { display: inline-flex; max-width: 100%; min-width: 0; }
body.skin-designkit-page .m5-search .m5-kw input[type=text] { min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.skin-designkit .m5-search .m5-kw .btn,
.skin-designkit .shop-search .input-group .btn.ghost { height: 36px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-3); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--surface); color: var(--ink-soft); }
.skin-designkit .shop-search .input-group input { height: 36px; }
body.skin-designkit-page .list-search .acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.skin-designkit-page .designkit-table-scroll { width: 100%; max-width: 100%; min-width: 0; overflow: visible; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); scrollbar-width: thin; }
body.skin-designkit-page .designkit-table-scroll.is-scrollable { overflow-x: auto; }
body.skin-designkit-page .designkit-table-scroll:has(+ .list-foot) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
body.skin-designkit-page .designkit-table-scroll + .list-foot { margin-top: -1px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-l) var(--r-l); }
body.skin-designkit-page table.list { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); font-size: 13px; box-shadow: none; }
body.skin-designkit-page .designkit-table-scroll table.list { min-width: 600px; margin: 0; border: 0; border-radius: 0; }
body.skin-designkit-page .designkit-table-scroll table.m5-table { min-width: 960px; }
body.skin-designkit-page .m5-table th,
body.skin-designkit-page .m5-table td.num,
body.skin-designkit-page .m5-table td:nth-child(3) { white-space: nowrap; }
body.skin-designkit-page .panel .designkit-table-scroll { border-left: 0; border-right: 0; border-radius: 0; }
body.skin-designkit-page .panel table.list { border: 0; }
body.skin-designkit-page table.list th { height: 43px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--wash); color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; }
body.skin-designkit-page table.list td { padding: 14px; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); line-height: 1.65; vertical-align: middle; }
body.skin-designkit-page table.list th:first-child,
body.skin-designkit-page table.list td:first-child { padding-left: 18px; }
body.skin-designkit-page table.list th:last-child,
body.skin-designkit-page table.list td:last-child { padding-right: 18px; }
body.skin-designkit-page table.list th:first-child { border-top-left-radius: 11px; }
body.skin-designkit-page table.list th:last-child { border-top-right-radius: 11px; }
body.skin-designkit-page table.list tr:last-child td { border-bottom: 0; }
body.skin-designkit-page table.list tbody tr:hover td { background: var(--dk-table-hover); }
body.skin-designkit-page table.list :is(th, td).check-col { width: 42px; padding-right: 0; }
body.skin-designkit-page table.list td.tip-before { padding-left: 38px; }
body.skin-designkit-page .m5-table .td-avatar :is(img, .avatar-stub) { width: 36px; height: 36px; border-radius: 10px; line-height: 36px; font-size: 18px; }
/* Preserve desktop hover actions; expose them in flow when a table must scroll. */
body.skin-designkit-page .m5-table .manage-option { border-radius: var(--r-s); background: var(--surface); box-shadow: var(--dk-shadow-popover); }
body.skin-designkit-page .m5-table tbody tr:focus-within .manage-option { opacity: 1; visibility: visible; }
body.skin-designkit-page .designkit-table-scroll.is-scrollable .m5-table .manage-option { position: static; width: auto; max-width: none; margin: 6px 0 0; padding: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; line-height: 1.7; white-space: normal; transition: none; }
body.skin-designkit-page .designkit-table-scroll.is-scrollable .m5-table .manage-option a { display: inline-block; margin: 3px 0 0 8px; color: var(--muted); font-size: 11px; }
body.skin-designkit-page .designkit-table-scroll.is-scrollable .m5-table .manage-option a + a { margin-left: 8px; padding-left: 0; border-left: 0; }
body.skin-designkit-page .list-foot { gap: 10px; margin-top: -1px; padding: 13px 18px; border: 1px solid var(--line); border-radius: 0 0 var(--r-l) var(--r-l); background: var(--surface); font-size: 12px; }
body.skin-designkit-page .panel .list-foot { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-l) var(--r-l); }
body.skin-designkit-page .list-foot .total { margin-right: 0; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 12px; }
body.skin-designkit-page .list-foot .checked-num b { color: var(--ink); font-weight: 600; }
body.skin-designkit-page .pager { gap: 10px; font-size: 12px; }
body.skin-designkit-page .pager-btns { display: flex; flex-wrap: wrap; gap: 5px; }
body.skin-designkit-page .pg { min-width: 30px; height: 30px; margin: 0; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-soft); font-size: 12px; }
body.skin-designkit-page a.pg:hover { background: var(--fill); border-color: var(--line-2); color: var(--ink); }
body.skin-designkit-page .pg.on { border-color: var(--solid); background: var(--solid); color: var(--on-solid); }
body.skin-designkit-page .pg.off { color: var(--muted-4); background: var(--wash); }

/* Inputs preserve native validation, disabled state and multi-select behavior. */
body.skin-designkit-page input:is([type=text], [type=search], [type=password], [type=number], [type=email], [type=url], [type=tel], [type=date], [type=datetime-local], [type=time]),
body.skin-designkit-page select,
body.skin-designkit-page textarea,
body.skin-designkit-page .form-control { min-width: 0; max-width: 100%; min-height: 36px; padding: 7px 11px; border: 1px solid var(--line-3); border-radius: var(--r-s); background-color: var(--surface); color: var(--ink-soft); font: 400 13px/1.5 var(--font-sans); box-shadow: none; }
body.skin-designkit-page select { height: 36px; appearance: auto; background-image: none; padding-right: 10px; }
body.skin-designkit-page select[multiple] { height: auto; min-height: 110px; padding: 8px; }
body.skin-designkit-page textarea { min-height: 104px; padding: 10px 12px; resize: vertical; }
body.skin-designkit-page input::placeholder,
body.skin-designkit-page textarea::placeholder { color: var(--muted-6); opacity: 1; }
body.skin-designkit-page :is(input, select, textarea, .form-control):focus { border-color: var(--accent); outline: 0; box-shadow: var(--dk-focus-ring); }
body.skin-designkit-page :is(input, select, textarea, .form-control):disabled,
body.skin-designkit-page :is(input, textarea)[readonly] { background-color: var(--disabled-bg); color: var(--muted); }
body.skin-designkit-page :is(input, select, textarea):disabled { cursor: not-allowed; }
body.skin-designkit-page :is(input, select, textarea)[aria-invalid=true],
body.skin-designkit-page .has-error :is(input, select, textarea) { border-color: var(--danger); }
body.skin-designkit-page input:is([type=checkbox], [type=radio]) { accent-color: var(--solid); }
body.skin-designkit-page .form-row { gap: 0; padding: 0; margin-bottom: 24px; }
body.skin-designkit-page .form-row > label { width: 172px; padding: 8px 20px 0 0; color: var(--ink-soft); font-size: 13px; font-weight: 500; }
body.skin-designkit-page .form-row > div { min-width: 0; max-width: 560px; }
body.skin-designkit-page .form-row.required > label::before { top: 13px; left: -11px; width: 4px; height: 4px; margin: 0; }
body.skin-designkit-page .help { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.8; }
body.skin-designkit-page .err { color: var(--danger); font-size: 12px; }
body.skin-designkit-page .form-files-box .form-file { padding: 16px 0; border-bottom: 1px solid var(--line-soft); line-height: 1.7; }
body.skin-designkit-page .form-files-box .form-file .form-label { width: 172px; flex: 0 0 172px; padding-right: 18px; color: var(--ink-soft); font-size: 13px; }
body.skin-designkit-page .form-files-box .form-file.header { padding: 12px 14px; border-radius: var(--r-s); background: var(--fill); font-size: 13px; }
body.skin-designkit-page .imai-center-check { font-size: 13px; }
body.skin-designkit-page .imai-center-check .box { width: 16px; height: 16px; border-radius: 4px; border-color: var(--line-2); }
body.skin-designkit-page .imai-center-check input:checked ~ .box { background: var(--solid); border-color: var(--solid); }
body.skin-designkit-page .imai-center-check input:checked ~ .box::before { color: var(--on-solid); font-size: 12px; }
body.skin-designkit-page .imai-center-check input[type=radio] ~ .box { border-radius: 50%; }
body.skin-designkit-page .imai-center-check input[type=radio]:checked ~ .box::before { background: var(--on-solid); }
body.skin-designkit-page .imai-center-check input:checked ~ .txt { color: var(--ink); }
body.skin-designkit-page .imai-center-check input:disabled ~ .box { background: var(--disabled-bg); border-color: var(--line); }
body.skin-designkit-page .imai-center-check input:disabled:checked ~ .box::before { color: var(--muted); }
body.skin-designkit-page .switch { width: 36px; height: 22px; background: var(--dk-switch-off); }
body.skin-designkit-page .switch::before { inset: 0; width: auto; height: auto; background: var(--dk-switch-off); }
body.skin-designkit-page .switch::after { top: 3px; left: 3px; width: 16px; height: 16px; box-shadow: var(--dk-shadow-switch); }
body.skin-designkit-page .switch.switchOn,
body.skin-designkit-page .switch.switchOn::before { background: var(--solid); }
body.skin-designkit-page .switch.switchOn::after { left: 17px; }
body.skin-designkit-page .imai-center-input-img { border-radius: var(--r-s); background: var(--wash); }
body.skin-designkit-page .imai-center-upload .pick { min-height: 36px; border-radius: var(--r-s); font-size: 13px; }
body.skin-designkit-page .imai-center-editor { border-radius: var(--r-s); overflow: hidden; }
body.skin-designkit-page .imai-center-editor:focus-within { border-color: var(--accent); box-shadow: var(--dk-focus-ring); }

/* Semantic states: low-contrast fill with legible text, separate from primary actions. */
body.skin-designkit-page .tag { display: inline-flex; align-items: center; padding: 3px 7px; border: 0; border-radius: 5px; font-size: 11px; font-weight: 500; line-height: 1.6; }
body.skin-designkit-page .tag.ok { background: var(--c-green-tint); color: var(--c-green); }
body.skin-designkit-page .tag.blue { background: var(--c-blue-tint); color: var(--c-blue); }
body.skin-designkit-page .tag.warn { background: var(--c-orange-tint); color: var(--warn-ink); }
body.skin-designkit-page .tag.danger { background: var(--c-red-tint); color: var(--danger); }
body.skin-designkit-page .tag.off { background: var(--fill); color: var(--ink-soft); }
body.skin-designkit-page .flash { padding: 12px 15px; margin-bottom: 20px; border: 1px solid var(--dk-ok-line); border-radius: var(--r-s); background: var(--c-green-tint); color: var(--c-green); font-size: 13px; line-height: 1.7; }
body.skin-designkit-page .flash.err-flash { background: var(--c-red-tint); border-color: var(--dk-error-line); color: var(--danger); }
body.skin-designkit-page .flash.warn-flash { background: var(--c-orange-tint); border-color: var(--dk-warn-line); color: var(--warn-ink); }

/* Popovers: original toggles/hidden state remain responsible for visibility. */
body.skin-designkit-page .skin-2__header .dropdown-menu,
body.skin-designkit-page .dropdown-menu-panel { padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--dk-shadow-popover); }
body.skin-designkit-page .skin-2__header .dropdown-menu > li > a,
body.skin-designkit-page .skin-2__header .dropdown-menu > li > form > button { padding: 8px 10px; border-radius: 6px; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
body.skin-designkit-page .skin-2__header .dropdown-menu > li > a:hover,
body.skin-designkit-page .skin-2__header .dropdown-menu > li > form > button:hover { background: var(--fill); color: var(--ink); }
.skin-designkit .shortcut .shortcut-list { top: 48px; left: 0; width: min(830px, calc(100vw - var(--dk-sidebar-width) - 56px)); max-height: calc(100vh - 100px); margin: 0; padding: 16px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--dk-shadow-popover); }
.skin-designkit .shortcut .shortcut-list::before { display: none; }
.skin-designkit .shortcut .shortcut-item,
.skin-designkit .shortcut .shortcut-item:first-child,
.skin-designkit .shortcut .shortcut-item:last-child { gap: 10px; margin: 0; padding: 12px 0; }
.skin-designkit .shortcut .shortcut-item + .shortcut-item { border-top: 1px solid var(--line-soft); }
.skin-designkit .shortcut .shortcut-item .parent { flex: 0 0 104px; margin: 0; padding: 0 8px; }
.skin-designkit .shortcut .shortcut-item .parent:first-child { margin-left: 0; }
.skin-designkit .shortcut .shortcut-item .parent a { padding: 8px 0; border-radius: var(--r-s); font-size: 12px; }
.skin-designkit .shortcut .shortcut-item .parent a:hover { background: var(--fill); color: var(--ink); }
.skin-designkit .shortcut .shortcut-item .parent .icon { margin-bottom: 7px; font-size: 21px; }
.skin-designkit .shortcut .shortcut-item .child { flex: 1; min-width: 0; padding: 0; border: 0; }
.skin-designkit .shortcut .shortcut-item .child .item { flex: 0 0 150px; margin: 0; padding: 8px; }
.skin-designkit .shortcut .shortcut-item .child .item a { font-size: 12px; }
.skin-designkit .user-info .msg .dropdown-menu { width: 330px; max-width: calc(100vw - 32px); max-height: calc(100vh - 90px); padding: 0; border-radius: var(--r-l); box-shadow: var(--dk-shadow-popover); }
.skin-designkit .user-info .msg .msg-list-container { max-height: min(380px, calc(100vh - 154px)); }
.skin-designkit .dropdown-star .star-box,
.skin-designkit .dropdown-star.star-box { max-width: calc(100vw - 32px); border-radius: var(--r-l); box-shadow: var(--dk-shadow-popover); }
.skin-designkit .dropdown-star .star-header-list { max-height: min(420px, calc(100vh - 200px)); }
.skin-designkit .dropdown-star .star-info { padding-left: 14px; font-size: 12px; }
.skin-designkit .dropdown-star .star-info .account-img { width: 30px; height: 30px; margin-right: 8px; border-radius: 8px; }

/* Dialogs are appended to body by existing utilities, so use the body marker. */
body.skin-designkit-page .imai-center-modal-backdrop { background: var(--dk-backdrop); opacity: .35; }
body.skin-designkit-page .imai-center-modal-dialog { width: min(680px, calc(100vw - 32px)); min-width: 0; max-width: calc(100vw - 32px); }
body.skin-designkit-page .imai-center-modal-dialog .modal-content { display: flex; flex-direction: column; min-width: 0; max-height: calc(100dvh - 48px); border: 1px solid var(--line); border-radius: var(--ui-layer-radius, 10px); background: var(--surface); box-shadow: var(--dk-shadow-dialog); overflow: hidden; }
body.skin-designkit-page .imai-center-modal-dialog .modal-header { flex: none; padding: 20px 22px 0; color: var(--ink); font-size: 16px; font-weight: 600; }
body.skin-designkit-page .imai-center-modal-dialog .modal-header .close { margin: 0; padding: 3px; color: var(--ink-soft); opacity: .7; font-weight: 400; text-shadow: none; }
body.skin-designkit-page .imai-center-modal-dialog .modal-header .close:hover { opacity: 1; }
body.skin-designkit-page .imai-center-modal-dialog .modal-body { min-height: 0; padding: 22px; overflow: auto; overscroll-behavior: contain; }
body.skin-designkit-page .imai-center-modal-dialog .modal-footer { display: flex; flex: none; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 16px 22px; border-top: 1px solid var(--line); text-align: right; }
body.skin-designkit-page .imai-center-modal-dialog .modal-footer .btn { display: inline-flex; min-width: 90px; }
body.skin-designkit-page .imai-center-modal-dialog .modal-footer .btn + .btn { margin-left: 0; }
body.skin-designkit-page .modal-tip .modal-body .wi { font-size: 42px; }
body.skin-designkit-page .modal-tip .modal-body .title { margin-bottom: 12px; font-size: 18px; font-weight: 600; }
body.skin-designkit-page .modal-tip .modal-body .content { color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
body.skin-designkit-page .modal-success .imai-center-modal-dialog { width: auto; min-width: min(250px, calc(100vw - 32px)); }
body.skin-designkit-page .modal-success .modal-content { padding: 8px 16px; border: 1px solid var(--solid); border-radius: 10px; background: var(--solid); color: var(--on-solid); box-shadow: var(--dk-shadow-popover); }
body.skin-designkit-page .modal-success .modal-body { padding: 6px; white-space: normal; }
body.skin-designkit-page .modal-success .modal-body .content { color: var(--on-solid); }
body.skin-designkit-page .modal-success .modal-body .wi { font-size: 20px; }
body.skin-designkit-page .modal-success .modal-footer { display: none; }
body.skin-designkit-page .perm-picker .modal-content { min-width: 0; }
body.skin-designkit-page .perm-picker .picker-head { padding: 20px 22px 0; }
body.skin-designkit-page .perm-picker .picker-search { margin: 16px 22px 0; }
body.skin-designkit-page .perm-picker .picker-item { border-radius: var(--r-s); }

/* Established business components share the tokens and spacing above. */
.skin-designkit .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 20px; }
.skin-designkit .kpi-card { min-width: 0; padding: 18px 20px; border-radius: var(--r-l); }
.skin-designkit .kpi-head { color: var(--muted); font-size: 12px; }
.skin-designkit .kpi-value { font-size: 28px; font-weight: 600; letter-spacing: -.5px; }
.skin-designkit .kpi-foot { flex-wrap: wrap; font-size: 11px; }
.skin-designkit .kpi-delta { padding: 2px 7px; border-radius: 5px; font-size: 11px; }
.skin-designkit .entry-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.skin-designkit .entry-cell { min-width: 0; padding: 18px 20px; border-radius: var(--r-l); }
.skin-designkit .entry-t { font-size: 14px; }
.skin-designkit .welcome-page .row { gap: 20px; margin-bottom: 20px; }
.skin-designkit .welcome-page .panel-h { padding: 16px 20px; gap: 12px; }
.skin-designkit .welcome-page .panel-b { padding: 16px 20px; }
.skin-designkit .welcome-page .head-tabs li a { padding: 4px 10px; font-size: 12px; }
.skin-designkit .welcome-page .daterange { min-height: 34px; font-size: 12px; }
.skin-designkit .welcome-page .chart-box .chart-line { max-width: 100%; height: 320px; }
.skin-designkit .welcome-page .daterange-pop,
.skin-designkit .ui-date-range-layer { max-width: calc(100vw - 56px); border-radius: var(--r-s); box-shadow: var(--dk-shadow-popover); white-space: normal; }
.skin-designkit .search-box { gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.skin-designkit .search-box .search-form { min-width: 180px; }
.skin-designkit .search-box .search-input input { height: 36px; padding-right: 36px; }
.skin-designkit .search-box .btn-add { min-height: 36px; height: auto; padding: 7px 13px; border: 1px solid var(--solid); border-radius: var(--r-s); font-size: 13px; line-height: 1.5; }
.skin-designkit .star-item { width: 300px; max-width: 100%; }
.skin-designkit .star-item__box,
.skin-designkit .star-item--module .star-item__box { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.skin-designkit .star-item__info { padding: 20px 45px 20px 18px; }
.skin-designkit .star-item__logo,
.skin-designkit .star-item--module .star-item__logo,
.skin-designkit .star-item__info .app-ico { width: 44px; height: 44px; margin-right: 13px; border-radius: 12px; }
.skin-designkit .star-item__name { font-size: 14px; color: var(--ink); }
.skin-designkit .star-item__desc { font-size: 12px; color: var(--muted); }
.skin-designkit .star-item__footer { height: 46px; padding: 0 16px; font-size: 12px; line-height: 46px; }
.skin-designkit .star-item__star { display: inline-block; color: var(--line-2); }
body.skin-designkit-page .user-head-info,
body.skin-designkit-page .imai-center-head-info { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
body.skin-designkit-page .user-head-info .user-avatar { margin-right: 16px; border-radius: 12px; }
body.skin-designkit-page .user-head-info .title { font-weight: 600; line-height: 1.6; }
body.skin-designkit-page .imai-center-group-show,
body.skin-designkit-page .imai-center-account-num-box,
body.skin-designkit-page .group-post-mudules .module-item,
body.skin-designkit-page .add-new-block { border-radius: var(--r-s); }
body.skin-designkit-page .group-post-mudules .module-item { max-width: calc(100% - 20px); }
body.skin-designkit-page .imai-center-group-show .name,
body.skin-designkit-page .imai-center-account-show .name { flex-basis: 172px; }
body.skin-designkit-page .imai-center-group-show .group-app-list .group-app-item { min-width: 145px; }

/* ==================== 4. Responsive ==================== */

@media (max-width: 1100px) {
  /* Console secondary navigation becomes a compact, scrollable section above the page. */
  .skin-designkit .skin-designkit__sub { position: relative; top: auto; bottom: auto; left: auto; z-index: auto; width: auto; max-height: 250px; padding: 14px 22px; border-right: 0; border-bottom: 1px solid var(--line); }
  .skin-designkit .skin-designkit__sub .sub-top { padding: 0 0 8px; }
  .skin-designkit .skin-designkit__sub .js-menu { display: flex; gap: 12px; overflow-x: auto; }
  .skin-designkit .skin-designkit__sub .panel-menu { flex: 0 0 165px; margin: 0; }
  .skin-designkit .skin-designkit__container.has-sub { margin-left: 0; }
  .skin-designkit .skin-designkit__sub .panel-menu .list-group-item > a { padding: 7px 9px; }
  body.skin-designkit-page .form-row > label { width: 140px; }
  body.skin-designkit-page .form-files-box .form-file .form-label { width: 140px; flex-basis: 140px; }
  .skin-designkit .welcome-page .row > .col { min-width: 0; }
  body.skin-designkit-page .imai-center-account-num-box .item { flex-basis: 50%; }
}

@media (max-width: 820px) {
  .skin-designkit .skin-2__left { width: 242px; transform: translateX(-100%); visibility: hidden; transition: transform .2s ease; z-index: 1012; }
  .skin-designkit .skin-designkit__right,
  .skin-designkit .skin-2__right { margin-left: 0; }
  .skin-designkit .skin-2__header,
  .skin-designkit.shell-full .skin-2__header { left: 0; padding: 0 18px; gap: 8px; }
  .skin-designkit .designkit-nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--ink-soft); cursor: pointer; font-size: 18px; }
  .skin-designkit .designkit-nav-toggle:hover { background: var(--fill); }
  .skin-designkit .designkit-nav-close { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; margin: 0 0 8px auto; padding: 0; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--ink-soft); font-size: 24px; font-weight: 400; line-height: 1; cursor: pointer; }
  .skin-designkit .designkit-nav-close:hover { background: var(--fill); color: var(--ink); }
  .skin-designkit.shell-full .skin-2__header .header-info-common__logo { position: static; display: flex; width: auto; padding: 0; background: transparent; border: 0; }
  .skin-designkit.shell-full .skin-2__sub,
  .skin-designkit.shell-full .skin-2__sub:has(.side-client) { width: 242px; transform: translateX(-100%); visibility: hidden; transition: transform .2s ease; z-index: 1012; }
  .skin-designkit .skin-2__container.has-sub,
  .skin-designkit.shell-full .skin-2__content:has(.side-client) .skin-2__container.has-sub { margin-left: 0; }
  body.skin-designkit-page.designkit-nav-open { overflow: hidden; }
  body.skin-designkit-page.designkit-nav-open .skin-2__left,
  body.skin-designkit-page.designkit-nav-open .shell-full .skin-2__sub { transform: translateX(0); visibility: visible; }
  body.skin-designkit-page.designkit-nav-open .designkit-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 1011; width: 100%; height: 100%; padding: 0; border: 0; background: var(--dk-nav-backdrop); cursor: pointer; }
  .skin-designkit .shortcut .shortcut-list { position: fixed; top: 60px; left: 16px; right: 16px; width: auto; max-height: calc(100dvh - 85px); }
  .skin-designkit .user-info .msg .dropdown-menu,
  .skin-designkit .dropdown-star .star-box,
  .skin-designkit .dropdown-star.star-box { position: fixed; top: 60px; right: 16px; max-width: calc(100vw - 32px); }
  .skin-designkit .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .skin-designkit .entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.skin-designkit-page .imai-center-page-title { font-size: 23px; margin-bottom: 20px; }
  body.skin-designkit-page .form-files-box .form-file .form-label { width: 140px; flex-basis: 140px; }
  body.skin-designkit-page .imai-center-group-show,
  body.skin-designkit-page .imai-center-account-show { flex-wrap: wrap; gap: 12px; }
  body.skin-designkit-page .imai-center-group-show .name,
  body.skin-designkit-page .imai-center-account-show .name { flex-basis: 100%; }
}

@media (max-width: 580px) {
  .skin-designkit .skin-2__header,
  .skin-designkit.shell-full .skin-2__header { padding: 0 12px; gap: 5px; }
  .skin-designkit .skin-2__header .user-info { gap: 0; }
  .skin-designkit .skin-2__header .user-info > li > a { padding: 0 6px; font-size: 12px; }
  .skin-designkit .skin-2__header .user-info > li[data-title] > a > span { display: none; }
  .skin-designkit .designkit-breadcrumb { display: none; }
  .skin-designkit .skin-2__header .shortcut-header { padding: 0 6px; font-size: 12px; }
  .skin-designkit .skin-2__header .shortcut-header .wi { margin-right: 3px; }
  .skin-designkit .skin-2__header .user-info .user > a { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
  .skin-designkit .skin-2__header .header-info-common__logo img { max-width: 52px !important; }
  .skin-designkit .dropdown-star .star-info { padding-left: 7px; margin-left: 4px !important; }
  .skin-designkit .dropdown-star .star-info .name { display: none; }
  .skin-designkit .dropdown-star .star-info .account-img { width: 27px; height: 27px; margin-right: 0; }
  .skin-designkit .skin-designkit__sub { padding: 12px 16px; }
  body.skin-designkit-page .imai-center-page-title { font-size: 22px; }
  body.skin-designkit-page .panel-h { padding: 14px 16px; }
  body.skin-designkit-page .panel-b,
  body.skin-designkit-page .panel-body,
  body.skin-designkit-page .panel .panel-body,
  body.skin-designkit-page .form-files-box { padding: 16px; }
  body.skin-designkit-page .panel-b.flush { padding: 0; }
  .skin-designkit .kpi-card { padding: 15px; }
  .skin-designkit .kpi-head { gap: 6px; font-size: 11px; }
  .skin-designkit .kpi-head i { width: 28px; height: 28px; font-size: 16px; }
  .skin-designkit .kpi-value { font-size: 25px; }
  .skin-designkit .entry-cell { padding: 16px; }
  .skin-designkit .entry-hint { font-size: 11px; }
  .skin-designkit .star-item { width: 100%; padding: 8px 0; }
  .skin-designkit .star-item__info { padding: 18px 45px 18px 18px; }
  body.skin-designkit-page .m5-search { align-items: flex-start; }
  body.skin-designkit-page .m5-search > form { flex: 1 0 100%; width: 100%; align-items: center; }
  body.skin-designkit-page .m5-search > .btn { align-self: flex-start; height: 36px; min-height: 36px; margin-left: auto; }
  .skin-designkit :is(.m5-search, .list-search, .shop-search) select { flex: 1; min-width: 120px; }
  body.skin-designkit-page .m5-search .m5-kw { flex: 1 1 180px; }
  body.skin-designkit-page .m5-search .m5-kw input { flex: 1; width: 0; }
  body.skin-designkit-page .list-search input[type=text],
  body.skin-designkit-page .list-search input[type=search] { flex: 1 1 160px; width: auto; }
  body.skin-designkit-page .list-search .acts { margin-left: 0; }
  body.skin-designkit-page .list-foot { padding: 12px; }
  body.skin-designkit-page .list-foot .batch { flex-wrap: wrap; }
  body.skin-designkit-page .list-foot .pager { flex-basis: 100%; justify-content: flex-end; }
  body.skin-designkit-page .form-row { display: block; margin-bottom: 20px; }
  body.skin-designkit-page .form-row > label { display: block; width: auto; padding: 0 0 7px; text-align: left; }
  body.skin-designkit-page .form-row.required > label::before { top: 8px; left: -9px; }
  body.skin-designkit-page .form-row > div { width: 100%; max-width: none; }
  body.skin-designkit-page .form-files-box .form-file { display: flex; flex-wrap: wrap; gap: 8px; }
  body.skin-designkit-page .form-files-box .form-file .form-label { width: 100%; flex-basis: 100%; padding: 0; }
  body.skin-designkit-page .form-files-box .form-file > :not(.form-label) { min-width: 0; max-width: 100%; }
  body.skin-designkit-page .js-daterange,
  body.skin-designkit-page .tpl-district { flex-wrap: wrap; }
  body.skin-designkit-page .js-daterange input { width: auto; min-width: 120px; flex: 1; }
  body.skin-designkit-page .tpl-district select { flex-basis: 100%; }
  body.skin-designkit-page .state-card { flex-wrap: wrap; gap: 12px; }
  body.skin-designkit-page .perm-picker .picker-item { width: calc(100% - 20px); }
  body.skin-designkit-page .imai-center-modal-dialog .modal-body { padding: 18px; }
  body.skin-designkit-page .imai-center-modal-dialog .modal-footer { padding: 14px 18px; }
  body.skin-designkit-page .imai-center-account-num-box .item { padding: 10px; }
  .skin-designkit .welcome-page .panel-h { padding: 14px 16px; }
  .skin-designkit .welcome-page .panel-h .acts { gap: 10px; }
  .skin-designkit .welcome-page .panel-b { padding: 14px 16px; }
  .skin-designkit .welcome-page .update-statistics,
  .skin-designkit .welcome-page .mysql-statistics { height: auto; min-height: 130px; padding: 12px; }
  .skin-designkit .welcome-page .update-statistics .icon,
  .skin-designkit .welcome-page .mysql-statistics .icon { flex-basis: 80px; }
  .skin-designkit .welcome-page .update-statistics .content,
  .skin-designkit .welcome-page .mysql-statistics .content { min-width: 0; padding-left: 20px; }
  .skin-designkit .welcome-page .update-statistics .content .update-version { font-size: 28px; }
  .skin-designkit .welcome-page .update-module-statistics .item { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.skin-designkit-page *,
  body.skin-designkit-page *::before,
  body.skin-designkit-page *::after { scroll-behavior: auto; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}