/* ==========================================================================
   Demo console theme on top of ui-kit.css
   Values: 13px base, 3px radius, 48px table rows, 50px topbar,
   flat surfaces, blue #2196f3, black 70% modal mask.
   ========================================================================== */

:root {
  --pd-topbar-h: 50px;
  --pd-rail-w: 68px;
  --pd-side-w: 240px;
  --pd-radius: 3px;
  --pd-shadow: 0 1px 3px rgba(0, 0, 0, .16);
  --pd-shadow-lg: 0 4px 20px rgba(0, 0, 0, .13), 0 2px 6px rgba(0, 0, 0, .1);
  --pd-line: #e0e0e0;
  --pd-line-soft: #f0f0f0;
  --pd-text: #333;
  --pd-sub: #757575;
  --pd-tertiary: #9e9e9e;
  --pd-page: #f5f5f9;
  --pd-hover: #f5f5f5;
  --pd-primary-soft: var(--blue-l, #e3f2fd);
}

html, body { height: 100%; }
body.pd-body {
  margin: 0;
  overflow: hidden;
  background: var(--bg, #f5f5f9);
  color: var(--txt, #333);
  font-family: var(--font-family, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif);
  font-size: 13px;
}
body.pd-body a { color: var(--blue); }
body.pd-body input,
body.pd-body select,
body.pd-body textarea,
body.pd-body button { font-family: inherit; }
body.pd-body i[class^="icon-"] { font-style: normal; line-height: 1; }

/* ============================== Buttons ============================== */
.pd-btn {
  height: 32px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--pd-radius);
  background: transparent;
  color: var(--txt);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, background-color .2s, border-color .2s;
}
.pd-btn:hover { text-decoration: none; }
.pd-btn:focus-visible { outline: 2px solid rgba(33, 150, 243, .4); outline-offset: 1px; }
.pd-btn i { font-size: 15px; }
.pd-btn-primary { background: var(--blue); color: #fff; }
.pd-btn-primary:hover { background: var(--blue-d, #1565c0); color: #fff; }
.pd-btn-ghost { border-color: var(--blue); color: var(--blue); background: #fff; }
.pd-btn-ghost:hover { background: var(--blue); color: #fff; }
.pd-btn-danger { border-color: var(--red); color: var(--red); background: #fff; }
.pd-btn-danger:hover { background: var(--red); color: #fff; }
.pd-btn-text { color: var(--pd-sub); }
.pd-btn-text:hover { color: var(--blue); background: var(--pd-hover); }
.pd-btn-block { width: 100%; }
.pd-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.pd-btn[disabled], .pd-btn.is-loading { opacity: .55; cursor: not-allowed; pointer-events: none; }
.pd-btn.is-loading::after {
  content: "";
  width: 12px; height: 12px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pd-spin .7s linear infinite;
}

.pd-icon-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--pd-radius);
  background: transparent; color: var(--pd-sub);
  font-size: 18px; cursor: pointer;
}
.pd-icon-btn:hover { background: var(--pd-hover); color: var(--txt); }

/* ============================== Inputs ============================== */
.pd-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.pd-input-wrap > i {
  position: absolute;
  left: 11px;
  color: var(--pd-tertiary);
  font-size: 16px;
  pointer-events: none;
}
.pd-input-wrap > input { padding-left: 36px; }
.pd-input-action {
  position: absolute; right: 4px;
  width: 28px; height: 28px;
  border: 0; background: transparent;
  color: var(--pd-tertiary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pd-input-action:hover { color: var(--pd-sub); }

body.pd-body input:not([type="checkbox"]):not([type="radio"]),
body.pd-body select,
body.pd-body textarea {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: var(--pd-radius);
  background: #fff;
  color: var(--pd-text);
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
body.pd-body textarea { height: auto; padding: 8px 12px; line-height: 1.6; resize: vertical; }
body.pd-body input:hover, body.pd-body select:hover, body.pd-body textarea:hover { border-color: #bbb; }
body.pd-body input:focus, body.pd-body select:focus, body.pd-body textarea:focus {
  border-color: var(--blue);
  box-shadow: none;
}
body.pd-body input::placeholder, body.pd-body textarea::placeholder { color: #bdbdbd; }
body.pd-body input[disabled] { background: #fafafa; color: var(--pd-tertiary); cursor: not-allowed; }
body.pd-body select { cursor: pointer; }
.pd-select { min-width: 120px; }
.pd-select-sm { width: auto !important; height: 28px !important; padding: 0 24px 0 8px !important; font-size: 12px !important; }

/* The base input rule above is more specific than `.pd-input-wrap > input`,
   so re-assert the icon gutter here: the value text must start after the
   leading icon instead of running underneath it. */
body.pd-body .pd-input-wrap > input:not([type="checkbox"]):not([type="radio"]) {
  padding-left: 36px;
}
body.pd-body .pd-input-wrap > input[type="password"] {
  padding-right: 38px;
}

.pd-field-label {
  display: block;
  margin: 0 0 6px;
  color: var(--pd-sub);
  font-size: 12px;
  font-weight: 500;
}
.pd-form-group { margin-bottom: 14px; min-width: 0; }
.pd-form-group label { display: block; margin-bottom: 6px; color: var(--pd-sub); font-size: 12px; font-weight: 500; }
.pd-form-group label em { color: var(--red); font-style: normal; }
.pd-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pd-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.pd-form-error { min-height: 20px; color: var(--red); font-size: 12px; line-height: 20px; }
.pd-form-ok { min-height: 20px; color: var(--green); font-size: 12px; line-height: 20px; }
.pd-hint { color: var(--pd-sub); font-size: 12px; line-height: 1.6; margin: 8px 0 0; }

/* ============================== Boot ============================== */
/* With a stored session, keep the login screen off screen until /me answers. */
html.pd-booting #authView { display: none; }
#bootSplash { display: none; position: fixed; inset: 0; z-index: 90; align-items: center; justify-content: center; background: var(--pd-page); }
html.pd-booting #bootSplash { display: flex; }

/* ============================== Auth ============================== */
.pd-auth { display: flex; height: 100vh; min-height: 560px; background: #fff; }
.pd-auth-brand {
  position: relative;
  flex: 1 1 52%;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #0b1b33 0%, #113a63 50%, #1565c0 100%);
  display: flex;
  align-items: center;
  padding: 64px;
}
.pd-auth-brand::before,
.pd-auth-brand::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.pd-auth-brand::before {
  width: 520px; height: 520px;
  right: -180px; top: -160px;
  background: radial-gradient(circle, rgba(33, 150, 243, .45) 0%, rgba(33, 150, 243, 0) 70%);
}
.pd-auth-brand::after {
  width: 420px; height: 420px;
  left: -140px; bottom: -160px;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 60px rgba(255, 255, 255, .03), 0 0 0 120px rgba(255, 255, 255, .02);
}
.pd-auth-brand-inner { position: relative; z-index: 1; max-width: 520px; }
.pd-auth-logo {
  width: 46px; height: 46px;
  border-radius: 10px;
  background: #fff;
  color: #1565c0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
}
.pd-auth-brand h1 { margin: 28px 0 14px; font-size: 32px; line-height: 1.35; font-weight: 600; letter-spacing: .5px; }
.pd-auth-brand p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.8; }
.pd-auth-points { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 14px; }
.pd-auth-points li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .86); font-size: 13px; }
.pd-auth-points i { width: 26px; height: 26px; border-radius: 6px; background: rgba(255, 255, 255, .12); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.pd-auth-foot { position: absolute; left: 64px; bottom: 32px; color: rgba(255, 255, 255, .38); font-size: 12px; }

.pd-auth-panel {
  position: relative;
  flex: 0 0 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 48px;
  background: #fff;
  overflow: auto;
}
.pd-auth-toolbar { position: absolute; top: 22px; right: 26px; }
.pd-auth-card { width: 100%; max-width: 380px; }
.pd-auth-card h2 { margin: 0 0 6px; font-size: 24px; font-weight: 600; color: var(--pd-text); }
.pd-auth-sub { margin: 0 0 26px; color: var(--pd-sub); font-size: 13px; }
.pd-auth-card .pd-field-label { margin-top: 16px; }
.pd-auth-row { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 2px; font-size: 12px; }
.pd-auth-row a { font-size: 12px; }
.pd-lang-btn {
  height: 30px; padding: 0 10px;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--pd-line); border-radius: var(--pd-radius);
  background: #fff; color: var(--pd-sub);
  font-size: 12px; cursor: pointer;
}
.pd-lang-btn:hover { color: var(--blue); border-color: var(--blue); }
.pd-lang-btn i { font-size: 15px; }
.pd-demo-hint {
  margin-top: 14px; padding: 9px 12px;
  display: flex; align-items: center; gap: 8px;
  background: #f5f9ff; border: 1px solid #e3f2fd;
  border-radius: var(--pd-radius);
  color: #1565c0; font-size: 12px;
}
.pd-demo-hint i { font-size: 15px; }
.pd-captcha-row { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
.pd-captcha {
  height: 38px; padding: 0;
  border: 1px solid #ccc; border-radius: var(--pd-radius);
  background: #f5f5f5; cursor: pointer; overflow: hidden;
}
.pd-captcha:hover { border-color: var(--blue); }
.pd-captcha-svg, .pd-captcha-svg svg { display: block; width: 100%; height: 100%; }
.pd-code-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.pd-code-row .pd-btn { height: 36px; }
.pd-back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 18px; font-size: 12px; color: var(--pd-sub); }
.pd-back-link:hover { color: var(--blue); text-decoration: none; }

/* ============================== Checkbox ============================== */
.pd-check { position: relative; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12px; color: var(--pd-sub); user-select: none; }
.pd-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.pd-check > span {
  width: 16px; height: 16px; flex: 0 0 16px;
  border: 1px solid #bdbdbd; border-radius: 2px;
  background: #fff; position: relative;
  transition: background .15s, border-color .15s;
}
.pd-check > span::after {
  content: "";
  position: absolute; left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .12s;
}
.pd-check input:checked + span { background: var(--blue); border-color: var(--blue); }
.pd-check input:checked + span::after { transform: rotate(45deg) scale(1); }
.pd-check input:indeterminate + span { background: var(--blue); border-color: var(--blue); }
.pd-check input:indeterminate + span::after { transform: none; left: 3px; top: 6px; width: 8px; height: 0; border-width: 0 0 2px; }
.pd-check input:focus-visible + span { outline: 2px solid rgba(33, 150, 243, .4); outline-offset: 1px; }
.pd-check em { font-style: normal; }

/* ============================== Shell ============================== */
.pd-shell { height: 100vh; display: flex; flex-direction: column; }
.pd-topbar {
  height: var(--pd-topbar-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  background: var(--wk-nav-bg, #fff);
  color: var(--wk-nav-fg, #333);
  border-bottom: 1px solid var(--pd-line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  position: relative;
  z-index: 20;
}
.pd-brand { display: flex; align-items: center; gap: 10px; width: calc(var(--pd-rail-w) + var(--pd-side-w)); flex: 0 0 auto; padding: 0 18px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.pd-brand-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.pd-topnav { display: flex; align-items: stretch; height: 100%; flex: 1; min-width: 0; }
.pd-topnav a {
  display: flex; align-items: center; gap: 6px;
  padding: 0 16px;
  color: var(--wk-nav-fg, #333);
  opacity: .7;
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.pd-topnav a i { font-size: 16px; }
.pd-topnav a:hover { background: var(--wk-nav-active, rgba(33, 150, 243, .12)); opacity: 1; text-decoration: none; }
.pd-topnav a.active { color: var(--blue); opacity: 1; border-bottom-color: var(--blue); }
.pd-top-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 0 14px; height: 100%; }
.pd-user-btn {
  height: 38px; padding: 0 6px;
  display: flex; align-items: center; gap: 8px;
  border: 0; border-radius: var(--pd-radius);
  background: transparent; color: var(--pd-text); cursor: pointer;
  font-size: 13px;
}
.pd-user-btn:hover { background: var(--pd-hover); }
.pd-user-btn > i { font-size: 12px; color: var(--pd-tertiary); }

.pd-body-wrap { flex: 1; min-height: 0; display: flex; }
.pd-rail {
  width: var(--pd-rail-w);
  flex: 0 0 auto;
  background: var(--wk-surface, #fff);
  border-right: 1px solid var(--pd-line);
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 8px;
}
.pd-rail-item {
  width: 100%; height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 8px;
  color: var(--pd-sub);
  font-size: 11px;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.pd-rail-item i { font-size: 20px; }
.pd-rail-item:hover { background: var(--pd-hover); color: var(--pd-text); text-decoration: none; }
.pd-rail-item.active { background: var(--pd-primary-soft); color: var(--blue); }
.pd-rail-gap { flex: 1; }

.pd-sidebar {
  width: var(--pd-side-w);
  flex: 0 0 auto;
  background: var(--wk-surface, #fff);
  border-right: 1px solid var(--pd-line);
  display: flex; flex-direction: column;
  min-height: 0;
}
.pd-sidebar-head { height: 48px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 16px; border-bottom: 1px solid var(--pd-line-soft); font-weight: 600; }
.pd-side-search { position: relative; margin: 8px 10px 4px; }
.pd-side-search i { position: absolute; left: 9px; top: 9px; color: var(--pd-tertiary); font-size: 14px; }
.pd-side-search input { height: 30px !important; padding-left: 30px !important; background: #fafafa !important; border-color: transparent !important; font-size: 12px !important; }
.pd-side-search input:focus { background: #fff !important; border-color: var(--blue) !important; }
.pd-side-list { list-style: none; margin: 0; padding: 4px 8px; overflow: auto; }
.pd-side-list li { height: 36px; display: flex; align-items: center; border-radius: var(--pd-radius); color: var(--pd-text); font-size: 13px; overflow: hidden; }
.pd-side-list li a { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 10px; color: inherit; text-decoration: none; }
.pd-side-list li:hover { background: var(--pd-hover); }
.pd-side-list li.active { background: var(--pd-primary-soft); color: var(--blue); font-weight: 500; }
.pd-side-list li i { font-size: 16px; color: var(--pd-tertiary); flex: 0 0 auto; }
.pd-side-list li.active i { color: var(--blue); }
.pd-side-list li span.pd-count { margin-left: auto; color: var(--pd-tertiary); font-size: 11px; font-weight: 400; }
.pd-side-section { padding: 14px 18px 4px; color: var(--pd-tertiary); font-size: 11px; font-weight: 600; letter-spacing: .4px; }
.pd-side-foot { margin-top: auto; border-top: 1px solid var(--pd-line-soft); padding: 12px 16px; display: flex; align-items: center; gap: 9px; }
.pd-side-foot div { min-width: 0; display: flex; flex-direction: column; }
.pd-side-foot strong { font-size: 12px; font-weight: 500; }
.pd-side-foot small { color: var(--pd-tertiary); font-size: 11px; }

.pd-main { flex: 1; min-width: 0; min-height: 0; overflow: auto; background: var(--pd-page); }
.pd-view { padding: 20px 24px 32px; max-width: 1480px; margin: 0 auto; animation: pd-fade .18s ease; }
.pd-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.pd-page-head h1 { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 600; color: var(--pd-text); }
.pd-page-head p { margin: 5px 0 0; color: var(--pd-sub); font-size: 12px; }
.pd-page-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* ============================== Avatars ============================== */
.pd-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; flex: 0 0 auto; }
.pd-avatar-sm { width: 26px; height: 26px; font-size: 11px; }
.pd-avatar-lg { width: 38px; height: 38px; font-size: 15px; }
.pd-avatar-xl { width: 64px; height: 64px; font-size: 25px; }

/* ============================== Dropdown menus ============================== */
.pd-dropdown { position: relative; height: 100%; display: flex; align-items: center; }
.pd-menu {
  position: absolute; top: calc(100% - 6px); right: 0;
  width: 210px;
  padding: 5px 0;
  background: #fff;
  border: 1px solid var(--pd-line-soft);
  border-radius: var(--pd-radius);
  box-shadow: var(--pd-shadow-lg);
  z-index: 40;
  display: none;
}
.pd-dropdown.open .pd-menu { display: block; animation: pd-menu-in .14s ease; }
.pd-menu-head { padding: 7px 14px 5px; color: var(--pd-tertiary); font-size: 11px; font-weight: 600; letter-spacing: .3px; }
.pd-menu-list { max-height: 300px; overflow: auto; }
.pd-menu-item {
  width: 100%; min-height: 34px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  border: 0; background: transparent;
  color: var(--pd-text); font-size: 13px; text-align: left; text-decoration: none; cursor: pointer;
}
.pd-menu-item i { width: 16px; font-size: 15px; color: var(--pd-tertiary); text-align: center; }
.pd-menu-item:hover { background: var(--pd-hover); color: var(--blue); text-decoration: none; }
.pd-menu-item:hover i { color: var(--blue); }
.pd-menu-item.active { color: var(--blue); background: var(--pd-primary-soft); }
.pd-menu-item.active i { color: var(--blue); }
.pd-menu-item .pd-menu-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; }
.pd-menu-danger { color: var(--red); }
.pd-menu-danger i { color: var(--red); }
.pd-menu-danger:hover { background: #fff2f2; color: var(--red); }
.pd-menu-danger:hover i { color: var(--red); }
.pd-menu-sep { height: 1px; margin: 5px 0; background: var(--pd-line-soft); }
.pd-menu-user { width: 230px; }
.pd-menu-user-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px 8px; }
.pd-menu-user-head div { display: flex; flex-direction: column; min-width: 0; }
.pd-menu-user-head strong { font-size: 13px; font-weight: 600; }
.pd-menu-user-head small { color: var(--pd-tertiary); font-size: 11px; }

/* ============================== Stats / cards ============================== */
.pd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.pd-stat { background: #fff; border: 1px solid var(--pd-line-soft); border-radius: var(--pd-radius); padding: 16px 18px; box-shadow: var(--pd-shadow); }
.pd-stat-top { display: flex; align-items: center; justify-content: space-between; color: var(--pd-sub); font-size: 12px; }
.pd-stat-icon { width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.pd-stat-value { margin-top: 10px; font-size: 25px; line-height: 1.2; font-weight: 600; color: var(--pd-text); }
.pd-stat-foot { margin-top: 4px; color: var(--pd-tertiary); font-size: 11px; }
.pd-stat-foot b { color: var(--green); font-weight: 500; }

.pd-section-head { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; }
.pd-section-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.pd-section-head a { font-size: 12px; }
.pd-card { background: #fff; border: 1px solid var(--pd-line-soft); border-radius: var(--pd-radius); padding: 18px; box-shadow: var(--pd-shadow); margin-bottom: 16px; }
.pd-card > h3 { margin: 0 0 14px; font-size: 14px; font-weight: 600; }
.pd-card-flush { padding: 0; overflow: hidden; }
.pd-sep { height: 1px; background: var(--pd-line-soft); margin: 18px 0; }

.pd-ws-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pd-ws-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  background: #fff; border: 1px solid var(--pd-line-soft); border-radius: var(--pd-radius);
  box-shadow: var(--pd-shadow);
  cursor: pointer; text-decoration: none; color: var(--pd-text);
  transition: box-shadow .2s, transform .2s;
}
.pd-ws-card:hover { box-shadow: var(--pd-shadow-lg); transform: translateY(-1px); text-decoration: none; color: var(--pd-text); }
.pd-ws-icon { width: 42px; height: 42px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto; }
.pd-ws-info { min-width: 0; flex: 1; }
.pd-ws-info strong { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-ws-info span { display: block; margin-top: 3px; color: var(--pd-tertiary); font-size: 11px; }
.pd-ws-card > i { color: var(--pd-tertiary); font-size: 16px; }

/* ============================== Table ============================== */
.pd-table-wrap { overflow: auto; }
.pd-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--pd-text); }
.pd-table th {
  height: 44px; padding: 0 12px;
  text-align: left;
  font-size: 12px; font-weight: 600; color: var(--pd-sub);
  background: #fafafa;
  border-bottom: 1px solid var(--pd-line);
  white-space: nowrap;
  text-transform: none; letter-spacing: 0;
}
.pd-table td {
  height: 48px; padding: 0 12px;
  border-bottom: 1px solid var(--pd-line-soft);
  white-space: nowrap;
}
.pd-table tbody tr { cursor: pointer; transition: background .12s; }
.pd-table tbody tr:hover td { background: var(--pd-hover); }
.pd-table tbody tr.is-selected td { background: #f0f7ff; }
.pd-table tbody tr:last-child td { border-bottom: 0; }
.pd-table .pd-num { text-align: right; font-variant-numeric: tabular-nums; }
.pd-table .pd-col-check { width: 44px; padding-right: 0; }
.pd-table .pd-col-action { width: 48px; text-align: right; }
.pd-table .pd-id { color: var(--pd-sub); font-size: 12px; font-variant-numeric: tabular-nums; }
.pd-table .pd-title-cell { max-width: 300px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.pd-table .pd-sub-cell { max-width: 180px; overflow: hidden; text-overflow: ellipsis; color: var(--pd-sub); }
.pd-table .pd-time { color: var(--pd-sub); font-size: 12px; }
.pd-table .pd-amount { font-weight: 500; font-variant-numeric: tabular-nums; }
.pd-table .pd-row-action { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 3px; background: transparent; color: var(--pd-tertiary); cursor: pointer; }
.pd-table .pd-row-action:hover { background: #e8e8e8; color: var(--blue); }
.pd-table-records { min-width: 1120px; }

.pd-table-state { padding: 56px 20px; text-align: center; color: var(--pd-sub); }
.pd-table-state i { display: block; font-size: 40px; color: #d5d5d5; margin-bottom: 10px; }
.pd-table-state strong { display: block; color: var(--pd-text); font-size: 13px; font-weight: 500; }
.pd-table-state span { display: block; margin-top: 4px; font-size: 12px; }
.pd-table-state .pd-btn { margin-top: 14px; }

.pd-tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  border-radius: 2px;
  font-size: 12px; line-height: 1;
  white-space: nowrap;
}
.pd-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pd-tag-pending { background: #fff7e6; color: #d97706; }
.pd-tag-approved { background: #edf7ed; color: #2e7d32; }
.pd-tag-rejected { background: #fdecea; color: #c62828; }
.pd-tag-draft { background: #f5f5f5; color: #757575; }
.pd-tag.plain::before { display: none; }

.pd-priority { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--pd-sub); }
.pd-priority::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.pd-priority-high::before { background: #f44336; }
.pd-priority-medium::before { background: #ff9800; }
.pd-priority-low::before { background: #9e9e9e; }

.pd-owner { display: inline-flex; align-items: center; gap: 7px; }
.pd-owner .pd-avatar { width: 22px; height: 22px; font-size: 10px; background: #78909c; }

/* ============================== Filters ============================== */
.pd-filterbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pd-search { position: relative; width: 260px; flex: 0 1 260px; }
.pd-search > i { position: absolute; left: 10px; top: 9px; color: var(--pd-tertiary); font-size: 15px; }
.pd-search input { height: 32px !important; padding-left: 32px !important; padding-right: 28px !important; font-size: 12px !important; }
.pd-search-clear { position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; border: 0; background: transparent; color: var(--pd-tertiary); cursor: pointer; }
.pd-search-clear:hover { color: var(--pd-text); }
.pd-filterbar .pd-select { width: auto; min-width: 120px; height: 32px; font-size: 12px; padding: 0 30px 0 10px; }
.pd-filter-spacer { flex: 1; }
.pd-result-count { color: var(--pd-tertiary); font-size: 12px; }
.pd-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.pd-chips:empty { display: none; }
.pd-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border: 1px solid #e3e3e3; border-radius: 2px; background: #fafafa; color: var(--pd-sub); font-size: 12px; }
.pd-chip b { color: var(--pd-text); font-weight: 500; }
.pd-chip button { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--pd-tertiary); cursor: pointer; padding: 0; }
.pd-chip button:hover { color: var(--red); }

.pd-selection {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 40px; padding: 5px 12px; margin-bottom: 10px;
  background: #eef6ff; border: 1px solid #cfe6ff; border-radius: var(--pd-radius);
  color: #1565c0; font-size: 12px;
}
.pd-selection > span { display: inline-flex; align-items: center; gap: 6px; }
.pd-selection b { font-weight: 600; }
.pd-selection-actions { display: flex; align-items: center; gap: 6px; }

/* ============================== Pagination ============================== */
.pd-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--pd-line-soft); background: #fff; }
.pd-pager-info { color: var(--pd-sub); font-size: 12px; }
.pd-pager-actions { display: flex; align-items: center; gap: 6px; }
.pd-page-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pd-line); border-radius: 2px; background: #fff; color: var(--pd-sub); cursor: pointer; font-size: 14px; }
.pd-page-btn:hover:not([disabled]) { border-color: var(--blue); color: var(--blue); }
.pd-page-btn[disabled] { color: #ccc; cursor: not-allowed; background: #fafafa; }
.pd-page-numbers { display: flex; align-items: center; gap: 4px; }
.pd-page-number { min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--pd-sub); font-size: 12px; cursor: pointer; }
.pd-page-number:hover { background: var(--pd-hover); color: var(--blue); }
.pd-page-number.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.pd-page-ellipsis { width: 22px; text-align: center; color: var(--pd-tertiary); }

/* ============================== Breadcrumb / detail ============================== */
.pd-breadcrumb { display: inline-flex; align-items: center; gap: 6px; color: var(--pd-tertiary); font-size: 12px; }
.pd-breadcrumb a { color: var(--pd-sub); }
.pd-breadcrumb a:hover { color: var(--blue); }
.pd-breadcrumb i { font-size: 10px; }
.pd-breadcrumb b { color: var(--pd-sub); font-weight: 500; }
.pd-ws-head .pd-breadcrumb { margin-bottom: 6px; }

.pd-detail-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.pd-back-btn { height: 28px; padding: 0 8px 0 4px; display: inline-flex; align-items: center; gap: 3px; border: 0; border-radius: 2px; background: transparent; color: var(--pd-sub); font-size: 12px; cursor: pointer; }
.pd-back-btn:hover { background: var(--pd-hover); color: var(--blue); }
.pd-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.pd-detail-title-wrap { min-width: 0; }
.pd-detail-id { color: var(--pd-tertiary); font-size: 12px; font-variant-numeric: tabular-nums; }
.pd-detail-id .pd-dot { margin: 0 5px; }
.pd-detail-head h1 { margin: 5px 0 8px; font-size: 22px; line-height: 1.35; font-weight: 500; color: var(--pd-text); word-break: break-word; }
.pd-detail-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.pd-detail-main { padding: 0; overflow: hidden; margin-bottom: 0; }
.pd-tabs { height: 48px; display: flex; align-items: center; gap: 22px; padding: 0 20px; border-bottom: 1px solid var(--pd-line); background: #fff; }
.pd-tab { position: relative; height: 48px; padding: 0; border: 0; background: transparent; color: var(--pd-sub); font-size: 13px; cursor: pointer; }
.pd-tab:hover { color: var(--blue); }
.pd-tab.active { color: var(--blue); font-weight: 500; }
.pd-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue); }
.pd-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; margin-left: 5px; padding: 0 4px; border-radius: 9px; background: #eee; color: var(--pd-sub); font-size: 10px; font-weight: 400; }
.pd-tab.active .pd-tab-count { background: var(--pd-primary-soft); color: var(--blue); }
.pd-detail-content { padding: 20px 24px 24px; }
.pd-fields { display: grid; grid-template-columns: 1fr; }
.pd-field-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; min-height: 42px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--pd-line-soft); }
.pd-field-row:last-child { border-bottom: 0; }
.pd-field-row > label { padding-top: 6px; color: var(--pd-sub); font-size: 12px; text-align: right; }
.pd-field-value { min-height: 24px; padding: 5px 0; color: var(--pd-text); line-height: 1.6; word-break: break-word; }
.pd-field-value.multiline { white-space: pre-wrap; }
.pd-field-value input, .pd-field-value select, .pd-field-value textarea { height: 32px; font-size: 12px; }
.pd-field-value textarea { height: auto; }
.pd-field-value .pd-inline-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-detail-editbar { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px; border-top: 1px solid var(--pd-line); background: #fafafa; }
.pd-detail-side { padding: 16px 18px; margin-bottom: 0; }
.pd-detail-side h3 { margin-bottom: 8px; }
.pd-side-block { padding: 11px 0; border-bottom: 1px solid var(--pd-line-soft); }
.pd-side-block:last-of-type { border-bottom: 0; }
.pd-side-label { display: block; margin-bottom: 7px; color: var(--pd-tertiary); font-size: 11px; }
.pd-side-amount { font-size: 20px; font-weight: 500; color: var(--pd-text); font-variant-numeric: tabular-nums; }
.pd-side-sep { height: 1px; background: var(--pd-line); margin: 4px 0 12px; }
.pd-side-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 4px 0; color: var(--pd-tertiary); font-size: 11px; }
.pd-side-meta b { color: var(--pd-sub); font-weight: 400; text-align: right; }

.pd-activity { list-style: none; margin: 0; padding: 0; }
.pd-activity li { position: relative; display: flex; gap: 12px; padding: 0 0 22px 0; }
.pd-activity li::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 1px; background: var(--pd-line); }
.pd-activity li:last-child { padding-bottom: 0; }
.pd-activity li:last-child::before { display: none; }
.pd-activity .pd-avatar { width: 27px; height: 27px; font-size: 11px; background: #90a4ae; }
.pd-activity-body { min-width: 0; padding-top: 2px; }
.pd-activity-body strong { font-size: 12px; font-weight: 500; }
.pd-activity-body p { margin: 2px 0 0; color: var(--pd-sub); font-size: 12px; }
.pd-activity-body time { display: block; margin-top: 3px; color: var(--pd-tertiary); font-size: 11px; }

/* ============================== Profile / appearance ============================== */
.pd-profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.pd-profile-card { margin-bottom: 0; }
.pd-profile-hero { display: flex; align-items: center; gap: 16px; }
.pd-profile-hero h2 { margin: 0; font-size: 18px; font-weight: 600; }
.pd-profile-hero p { margin: 4px 0 0; color: var(--pd-sub); font-size: 12px; }
.pd-profile-side { margin-bottom: 0; }
.pd-pref { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--pd-line-soft); }
.pd-pref:last-of-type { border-bottom: 0; }
.pd-pref div { min-width: 0; }
.pd-pref strong { display: block; font-size: 13px; font-weight: 500; }
.pd-pref small { display: block; margin-top: 3px; color: var(--pd-tertiary); font-size: 11px; line-height: 1.5; }
.pd-pref .pd-select { width: auto; min-width: 120px; height: 30px; font-size: 12px; }
.pd-logout { margin-top: 14px; }

.pd-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.pd-theme-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); background: #fff; cursor: pointer; text-align: left; }
.pd-theme-card:hover { border-color: #90caf9; }
.pd-theme-card.active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.pd-theme-swatch { width: 34px; height: 34px; border-radius: 6px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; }
.pd-theme-info { min-width: 0; flex: 1; }
.pd-theme-info strong { display: block; font-size: 13px; font-weight: 500; }
.pd-theme-info span { display: block; margin-top: 2px; color: var(--pd-tertiary); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-theme-card > i { color: var(--blue); font-size: 16px; }

.pd-seg { display: inline-flex; padding: 2px; background: #f0f0f0; border-radius: var(--pd-radius); }
.pd-seg button { height: 28px; padding: 0 14px; border: 0; border-radius: 2px; background: transparent; color: var(--pd-sub); font-size: 12px; cursor: pointer; }
.pd-seg button:hover { color: var(--blue); }
.pd-seg button.on { background: #fff; color: var(--blue); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.pd-setting { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--pd-line-soft); }
.pd-setting:last-child { border-bottom: 0; }
.pd-setting-label strong { display: block; font-size: 13px; font-weight: 500; }
.pd-setting-label small { display: block; margin-top: 3px; color: var(--pd-tertiary); font-size: 11px; line-height: 1.5; }
.pd-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.pd-swatch { width: 26px; height: 26px; border: 0; border-radius: 3px; cursor: pointer; position: relative; }
.pd-swatch:hover { transform: scale(1.08); }
.pd-swatch.active::after { content: ""; position: absolute; inset: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pd-swatch-custom { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; color: var(--pd-sub); font-size: 11px; }
.pd-swatch-custom input { width: 30px !important; height: 26px !important; padding: 0 !important; border: 1px solid var(--pd-line) !important; cursor: pointer; }
#styleSetCard.is-disabled .pd-swatches,
#styleSetCard.is-disabled .pd-seg { opacity: .45; pointer-events: none; }
#styleSetCard.is-disabled .pd-setting-label { opacity: .6; }

/* ============================== Modal ============================== */
.pd-modal-mask { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .7); }
.pd-modal { width: 580px; max-width: 100%; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: #fff; border-radius: var(--pd-radius); box-shadow: var(--pd-shadow-lg); animation: pd-modal-in .16s ease; }
.pd-modal-sm { width: 400px; }
.pd-modal-head { height: 52px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 20px; border-bottom: 1px solid var(--pd-line); }
.pd-modal-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.pd-modal-body { padding: 20px; overflow: auto; }
.pd-modal-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--pd-line); background: #fafafa; }
.pd-modal form { display: flex; flex-direction: column; min-height: 0; }
.pd-modal form .pd-modal-body { min-height: 0; }
.pd-confirm-text { margin: 0; color: var(--pd-sub); font-size: 13px; line-height: 1.7; }

/* Record detail dialog: fixed 960×640 frame on desktop, viewport-clamped on
   small screens. The body scrolls inside, so the frame never grows with data. */
.pd-modal.pd-modal-detail { width: 960px; height: 640px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); }
.pd-modal-detail .pd-detail-head { height: auto; flex: 0 0 auto; align-items: flex-start; gap: 16px; margin: 0; padding: 14px 12px 14px 20px; }
.pd-detail-title-wrap h2 { margin: 3px 0 6px; font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--pd-text); word-break: break-word; }
.pd-detail-title-wrap .pd-breadcrumb { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; }
.pd-detail-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pd-detail-head-actions .pd-page-actions { width: auto; flex-wrap: nowrap; }
.pd-modal-detail .pd-modal-body { flex: 1 1 auto; min-height: 0; padding: 14px 20px 20px; }
.pd-modal-detail .pd-detail-tags { margin-bottom: 12px; }
.pd-modal-detail .pd-detail-main { display: flex; flex-direction: column; }
.pd-modal-detail .pd-detail-editbar { flex: 0 0 auto; }

/* ============================== Toast ============================== */
.pd-toast-stack { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.pd-toast { min-width: 200px; max-width: 480px; padding: 10px 16px; display: flex; align-items: center; gap: 8px; background: #333; color: #fff; border-radius: var(--pd-radius); box-shadow: var(--pd-shadow-lg); font-size: 13px; animation: pd-toast-in .18s ease; }
.pd-toast i { font-size: 16px; }
.pd-toast-success i { color: #81c784; }
.pd-toast-error i { color: #ef9a9a; }
.pd-toast.leaving { opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }

/* ============================== Loading / skeleton ============================== */
.pd-skeleton { height: 12px; border-radius: 2px; background: linear-gradient(90deg, #f0f0f0 25%, #f7f7f7 37%, #f0f0f0 63%); background-size: 400% 100%; animation: pd-shimmer 1.3s infinite; }
.pd-loading-row td { padding: 14px 12px; }

/* ==========================================================================
   Bridge: UI Kit controls that the demo theme does not define itself.
   Keep their behaviour, restyle them with the flat console visual language.
   ========================================================================== */
body.pd-body .tag,
body.pd-body .pill,
body.pd-body .avatar,
body.pd-body .seg,
body.pd-body .modal,
body.pd-body .modal-mask,
body.pd-body .toast,
body.pd-body .empty,
body.pd-body .spinner,
body.pd-body .stat,
body.pd-body .panel,
body.pd-body .btn,
body.pd-body .preview { font-family: inherit; }

body.pd-body .btn { height: 32px; padding: 0 16px; border-radius: var(--pd-radius); font-size: 13px; font-weight: 500; box-shadow: none; }
body.pd-body .btn:hover { box-shadow: none; }
body.pd-body .btn.ghost { background: #fff; border: 1px solid var(--blue); color: var(--blue); }
body.pd-body .btn.ghost:hover { background: var(--blue); color: #fff; }
body.pd-body .btn.danger { background: #fff; border: 1px solid var(--red); color: var(--red); }
body.pd-body .btn.danger:hover { background: var(--red); color: #fff; }
body.pd-body .btn[disabled] { background: #bdbdbd; color: #fff; }
body.pd-body .tag { padding: 2px 8px; border-radius: 2px; font-size: 12px; font-weight: 400; background: var(--blue-l); color: var(--blue); }
body.pd-body .tag.g { background: #edf7ed; color: #2e7d32; }
body.pd-body .tag.r { background: #fdecea; color: #c62828; }
body.pd-body .tag.am { background: #fff7e6; color: #d97706; }
body.pd-body .tag.gray { background: #f5f5f5; color: #757575; }
body.pd-body .pill { padding: 2px 6px; border-radius: 2px; background: #f5f5f5; color: var(--pd-sub); font-size: 11px; }
body.pd-body .avatar { border-radius: 50%; background: var(--blue); font-weight: 500; }
body.pd-body .seg { border: 0; border-radius: var(--pd-radius); background: #f0f0f0; padding: 2px; overflow: hidden; }
body.pd-body .seg span { padding: 5px 12px; border-radius: 2px; font-size: 12px; }
body.pd-body .seg span.on { background: #fff; color: var(--blue); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
body.pd-body .modal { border-radius: var(--pd-radius); padding: 0; box-shadow: var(--pd-shadow-lg); }
body.pd-body .modal h2 { margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--pd-line); font-size: 16px; }
body.pd-body .modal .foot { margin: 0; padding: 12px 20px; border-top: 1px solid var(--pd-line); background: #fafafa; }
body.pd-body .toast { top: 16px; border-radius: var(--pd-radius); background: #333; color: #fff; font-weight: 400; box-shadow: var(--pd-shadow-lg); }
body.pd-body .empty::before { content: none; }
body.pd-body .empty { padding: 40px 20px; color: var(--pd-sub); }
body.pd-body .spinner { width: 18px; height: 18px; border-color: #e0e0e0; border-top-color: var(--blue); }
body.pd-body .stat { border-radius: var(--pd-radius); border-color: var(--pd-line-soft); box-shadow: var(--pd-shadow); }
body.pd-body .stat:hover { transform: none; box-shadow: var(--pd-shadow-lg); }
body.pd-body .stat .k { font-size: 12px; font-weight: 400; }
body.pd-body .stat .v { font-size: 24px; font-weight: 600; }
body.pd-body .panel { border-radius: var(--pd-radius); border-color: var(--pd-line-soft); box-shadow: var(--pd-shadow); }
body.pd-body .panel h3 { font-size: 14px; font-weight: 600; }
body.pd-body .preview { border-radius: var(--pd-radius); }

/* ============================== Motion ============================== */
@keyframes pd-spin { to { transform: rotate(360deg); } }
@keyframes pd-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pd-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pd-modal-in { from { opacity: 0; transform: scale(.97) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes pd-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pd-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============================== Responsive ============================== */
@media (max-width: 1280px) {
  .pd-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pd-table .pd-sub-cell { max-width: 140px; }
  .pd-detail-grid { grid-template-columns: minmax(0, 1fr) 270px; }
}
@media (max-width: 1100px) {
  .pd-brand { width: calc(var(--pd-rail-w) + 200px); }
  .pd-sidebar { width: 200px; }
  .pd-ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-detail-grid, .pd-profile-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-detail-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .pd-detail-side h3, .pd-side-sep, .pd-side-meta { grid-column: 1 / -1; }
  .pd-auth-brand { padding: 48px; }
  .pd-auth-brand h1 { font-size: 26px; }
}
@media (max-width: 900px) {
  .pd-modal.pd-modal-detail { width: calc(100vw - 40px); height: calc(100vh - 40px); }
  .pd-sidebar { display: none; }
  .pd-brand { width: auto; }
  .pd-rail { width: 60px; }
  .pd-view { padding: 16px; }
  .pd-auth-brand { display: none; }
  .pd-auth-panel { flex: 1 1 100%; padding: 48px 24px; }
  .pd-auth-foot { display: none; }
}
@media (max-width: 720px) {
  .pd-topnav a { padding: 0 10px; }
  .pd-topnav a span { display: none; }
  .pd-brand > span { display: none; }
  .pd-user-name { display: none; }
  .pd-stats, .pd-ws-grid { grid-template-columns: 1fr; }
  .pd-page-head { flex-direction: column; align-items: flex-start; }
  .pd-page-actions { width: 100%; }
  .pd-filterbar .pd-search { flex: 1 1 100%; width: 100%; }
  .pd-filterbar .pd-select { flex: 1 1 auto; min-width: 0; }
  .pd-setting { grid-template-columns: 1fr; gap: 10px; }
  .pd-form-row { grid-template-columns: 1fr; gap: 0; }
  .pd-detail-side { grid-template-columns: 1fr; }
  .pd-detail-head { flex-direction: column; }
  .pd-modal-detail .pd-detail-head { flex-direction: column; gap: 10px; }
  .pd-detail-head-actions { width: 100%; justify-content: space-between; }
  .pd-pager { flex-direction: column; align-items: flex-start; }
  .pd-pager-actions { width: 100%; flex-wrap: wrap; }
  .pd-selection { flex-direction: column; align-items: flex-start; }
  .pd-selection-actions { flex-wrap: wrap; }
  .pd-field-row { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
  .pd-field-row > label { text-align: left; padding-top: 0; }
  .pd-detail-content { padding: 16px; }
  .pd-modal { width: 100%; }
  .pd-brand { padding: 0 12px; }
  .pd-top-actions { padding: 0 8px; }
}
@media (max-width: 520px) {
  .pd-rail { display: none; }
  .pd-auth-panel { padding: 40px 18px; }
  .pd-auth-card h2 { font-size: 21px; }
  .pd-captcha-row { grid-template-columns: 1fr 100px; }
  .pd-detail-head h1 { font-size: 19px; }
  .pd-page-actions .pd-btn { flex: 1; }
}