/* Platform Helm admin styles — generated from approved design mockup. Scoped to .ph-wrap. */
/* ============================================================
   DESIGN TOKENS
   ============================================================ */
.ph-wrap {
  /* Brand */
  --accent:          #0047AB;
  --accent-hover:    #2C6BD9;
  --accent-tint:     #EAF1FB;
  --accent-border:   #C5D9F5;

  /* Semantic */
  --success:         #1F8A5A;
  --success-tint:    #E5F5EC;
  --success-border:  #A8DCBF;
  --warning:         #D97706;
  --warning-tint:    #FFF4E0;
  --warning-border:  #FCD49A;
  --danger:          #B91C1C;
  --danger-tint:     #FEE8E8;
  --danger-border:   #F5BABA;

  /* Surfaces */
  --surface:         #FFFFFF;
  --bg:              #F3F4F7;
  --bg-secondary:    #F6F7F9;

  /* Text */
  --text-primary:    #1a1a2e;
  --text-secondary:  #5a6278;
  --text-muted:      #8b8fa8;
  --text-faint:      #adb0bc;

  /* Borders */
  --border:          #EDEEF1;
  --border-strong:   #D8DAE0;

  /* Sidebar */
  --sidebar-bg:      #FFFFFF;
  --sidebar-w:       172px;
  --sidebar-w-col:   44px;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* Radius */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;

  /* Shadow */
  --shadow-0: none;
  --shadow-1: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-2: 0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);

  /* Font */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}/* ============================================================
   RESET & BASE
   ============================================================ */
.ph-wrap *, .ph-wrap *::before, .ph-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }.ph-wrap { font-size: 13px; }/* (mockup body styles applied via .ph-content) */
.ph-wrap a { color: var(--accent); text-decoration: none; }.ph-wrap input, .ph-wrap select, .ph-wrap textarea, .ph-wrap button { font-family: var(--font); }/* ============================================================
   WP ADMIN BAR
   ============================================================ */
.ph-wrap .wp-bar {
  height: 32px;
  background: #1d2327;
  display: flex;
  align-items: center;
  padding: 0 var(--space-lg);
  gap: var(--space-md);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}.ph-wrap .wp-bar-logo {
  display: flex;
  align-items: center;
  gap: 6px;
}.ph-wrap .wp-logo-mark {
  width: 18px;
  height: 18px;
}.ph-wrap .wp-bar-item {
  font-size: 11px;
  color: #a7aaad;
  cursor: pointer;
  padding: 0 4px;
}.ph-wrap .wp-bar-item:hover { color: #fff; }.ph-wrap .wp-bar-sep { color: #444; font-size: 11px; }.ph-wrap .wp-bar-right { margin-left: auto; display: flex; gap: 12px; align-items: center; }.ph-wrap .wp-bar-helm {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #a7aaad;
  padding: 0 8px;
  border-left: 1px solid #3a3f44;
}.ph-wrap .wp-helm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.ph-wrap .ph-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}/* ============================================================
   SIDEBAR
   ============================================================ */
.ph-wrap .ph-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) 0;
  position: sticky;
  top: 32px;
  height: calc(100vh - 32px);
  overflow-y: auto;
}.ph-wrap .sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--space-lg) var(--space-lg);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-sm);
}.ph-wrap .ph-logo-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}.ph-wrap .sidebar-brand-text { min-width: 0; }.ph-wrap .sidebar-brand-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.01em;
  line-height: 1.2;
}.ph-wrap .sidebar-brand-ver {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 1px;
}.ph-wrap .sidebar-section {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: var(--space-md) var(--space-lg) 4px;
}.ph-wrap .sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px var(--space-lg);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  border-right: 2px solid transparent;
  transition: all .1s;
  white-space: nowrap;
  text-decoration: none;
}.ph-wrap .sidebar-item i { font-size: 15px; flex-shrink: 0; }.ph-wrap .sidebar-item:hover { background: var(--bg-secondary); color: var(--text-primary); }.ph-wrap .sidebar-item.active {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
  border-right-color: var(--accent);
}.ph-wrap .sidebar-item.active i { color: var(--accent); }/* ============================================================
   CONTENT AREA
   ============================================================ */
.ph-wrap .ph-content {
  flex: 1;
  min-width: 0;
  padding: var(--space-xl) 28px;
  max-width: 1200px;
}/* ============================================================
   PAGE HEADER
   ============================================================ */
.ph-wrap .page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
  gap: var(--space-lg);
}.ph-wrap .ph-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.02em;
  line-height: 1.2;
}.ph-wrap .ph-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.4;
}.ph-wrap .ph-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  padding-top: 2px;
}/* ============================================================
   BUTTONS
   ============================================================ */
.ph-wrap .btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r-sm);
  padding: 7px 14px;
  transition: opacity .15s, box-shadow .15s;
  white-space: nowrap;
  line-height: 1;
}.ph-wrap .btn:active { transform: scale(.98); }.ph-wrap .btn-primary { background: var(--accent); color: #fff; }.ph-wrap .btn-primary:hover { background: var(--accent-hover); }.ph-wrap .btn-secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }.ph-wrap .btn-secondary:hover { background: var(--accent-tint); }.ph-wrap .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-strong); }.ph-wrap .btn-ghost:hover { background: var(--bg-secondary); color: var(--text-primary); }.ph-wrap .btn-danger-ghost { background: transparent; color: var(--danger); border: 1px solid var(--danger-border); }.ph-wrap .btn-danger-ghost:hover { background: var(--danger-tint); }.ph-wrap .btn-success-ghost { background: transparent; color: var(--success); border: 1px solid var(--success-border); }.ph-wrap .btn-success-ghost:hover { background: var(--success-tint); }.ph-wrap .btn-sm { padding: 4px 10px; font-size: 11px; }.ph-wrap .btn-xs { padding: 3px 8px; font-size: 10px; }.ph-wrap .btn[disabled] { opacity: .4; cursor: default; pointer-events: none; }.ph-wrap .btn i { font-size: 13px; }/* ============================================================
   BADGES / CHIPS
   ============================================================ */
.ph-wrap .badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}.ph-wrap .badge i { font-size: 10px; }.ph-wrap .badge-success { background: var(--success-tint);  color: var(--success); }.ph-wrap .badge-warning { background: var(--warning-tint);  color: var(--warning); }.ph-wrap .badge-danger { background: var(--danger-tint);   color: var(--danger); }.ph-wrap .badge-info { background: var(--accent-tint);   color: var(--accent); }.ph-wrap .badge-neutral { background: var(--bg-secondary);  color: var(--text-muted); }.ph-wrap .badge-new { background: #E5F5EC; color: var(--success); font-size: 9px; letter-spacing: .03em; }/* ============================================================
   CARDS
   ============================================================ */
.ph-wrap .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  max-width: none; /* override WP core common.css .card { max-width:520px } */
  margin: 0;
}.ph-wrap .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  gap: var(--space-md);
}.ph-wrap .card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}.ph-wrap .card-title i { font-size: 15px; }.ph-wrap .card-action {
  font-size: 11px;
  color: var(--accent-hover);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}.ph-wrap .card-action:hover { text-decoration: underline; }.ph-wrap .card-body { padding: 16px 18px; }/* ============================================================
   STAT TILES
   ============================================================ */
.ph-wrap .stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}.ph-wrap .stat-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}.ph-wrap .main-cols {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
  align-items: start;
}.ph-wrap .stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-lg) 18px;
  position: relative;
  overflow: hidden;
}.ph-wrap .stat-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}.ph-wrap .st-blue::before { background: var(--accent); }.ph-wrap .st-green::before { background: var(--success); }.ph-wrap .st-amber::before { background: var(--warning); }.ph-wrap .st-red::before { background: var(--danger); }.ph-wrap .st-neutral::before { background: var(--border-strong); }.ph-wrap .st-icon {
  position: absolute;
  right: 14px;
  top: 16px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}.ph-wrap .st-icon.blue { background: var(--accent-tint);   color: var(--accent-hover); }.ph-wrap .st-icon.green { background: var(--success-tint);  color: var(--success); }.ph-wrap .st-icon.amber { background: var(--warning-tint);  color: var(--warning); }.ph-wrap .st-icon.red { background: var(--danger-tint);   color: var(--danger); }.ph-wrap .st-icon.neutral { background: var(--bg-secondary);  color: var(--text-muted); }.ph-wrap .st-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-faint);
  margin-bottom: 7px;
}.ph-wrap .st-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}.ph-wrap .st-value.amber { color: #92520A; }.ph-wrap .st-value.red { color: var(--danger); }.ph-wrap .st-delta {
  font-size: 11px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 3px;
}.ph-wrap .st-delta.up { color: var(--success); }.ph-wrap .st-delta.warn { color: var(--warning); }.ph-wrap .st-delta.danger { color: var(--danger); }.ph-wrap .st-delta.neutral { color: var(--text-faint); }.ph-wrap .st-delta i { font-size: 10px; }/* ============================================================
   TABLES
   ============================================================ */
.ph-wrap .table-wrap { overflow-x: auto; }.ph-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}.ph-wrap thead tr { background: var(--bg-secondary); }.ph-wrap th {
  padding: 9px 16px;
  text-align: left;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}.ph-wrap th.right { text-align: right; }.ph-wrap td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}.ph-wrap tr:last-child td { border-bottom: none; }.ph-wrap tbody tr:hover td { background: #FAFBFD; }.ph-wrap .url-cell {
  color: var(--accent-hover);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 11px;
}.ph-wrap .meta-line {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 2px;
}.ph-wrap td.right { text-align: right; }/* ============================================================
   TOGGLE
   ============================================================ */
.ph-wrap .toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}.ph-wrap .toggle input { opacity: 0; width: 0; height: 0; }.ph-wrap .toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: 10px;
  transition: .2s;
  cursor: pointer;
}.ph-wrap .toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}.ph-wrap .toggle input:checked + .toggle-slider { background: var(--accent); }.ph-wrap .toggle input:checked + .toggle-slider::before { transform: translateX(16px); }.ph-wrap .toggle input:focus-visible + .toggle-slider { outline: 2px solid var(--accent); outline-offset: 2px; }/* ============================================================
   FORM FIELDS
   ============================================================ */
.ph-wrap .field-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 5px;
  display: block;
}.ph-wrap .field-input {
  padding: 7px 10px;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--font);
  color: var(--text-primary);
  outline: none;
  width: 100%;
  transition: border-color .15s;
}.ph-wrap .field-input:focus { border-color: var(--accent-hover); box-shadow: 0 0 0 3px rgba(44,107,217,.12); }.ph-wrap .field-group { display: flex; flex-direction: column; }.ph-wrap .search-input {
  padding: 7px 10px 7px 32px;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--font);
  color: var(--text-primary);
  outline: none;
  transition: border-color .15s;
}.ph-wrap .search-input:focus { border-color: var(--accent-hover); }.ph-wrap .search-wrap { position: relative; }.ph-wrap .search-wrap i {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 14px;
  pointer-events: none;
}/* ============================================================
   NOTICE BANNERS
   ============================================================ */
.ph-wrap .notice {
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 12px;
  border-left: 3px solid;
  line-height: 1.5;
  margin-bottom: var(--space-md);
}.ph-wrap .notice-info { background: var(--accent-tint);   color: #1a4a8a; border-color: var(--accent); }.ph-wrap .notice-success { background: var(--success-tint);  color: #155a37; border-color: var(--success); }.ph-wrap .notice-warning { background: var(--warning-tint);  color: #7c4a00; border-color: var(--warning); }.ph-wrap .notice-danger { background: var(--danger-tint);   color: #7a1515; border-color: var(--danger); }.ph-wrap .notice strong { font-weight: 700; }/* ============================================================
   PROGRESS BAR
   ============================================================ */
.ph-wrap .progress-card {
  background: var(--accent-tint);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: var(--space-lg);
}.ph-wrap .progress-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 3px;
}.ph-wrap .progress-sub {
  font-size: 11px;
  color: #4a6fa8;
  margin-bottom: 10px;
}.ph-wrap .progress-track {
  height: 7px;
  background: rgba(0,71,171,.15);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}.ph-wrap .progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width .3s ease;
}.ph-wrap .progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #4a6fa8;
}/* ============================================================
   EMPTY STATES
   ============================================================ */
.ph-wrap .empty-state {
  text-align: center;
  padding: 40px 24px;
}.ph-wrap .empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 24px;
}.ph-wrap .empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
}.ph-wrap .empty-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 18px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}/* ============================================================
   FILTER ROW
   ============================================================ */
.ph-wrap .filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  flex-wrap: wrap;
}.ph-wrap .filter-row select {
  padding: 6px 10px;
  font-size: 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--font);
  color: var(--text-secondary);
  outline: none;
  cursor: pointer;
}.ph-wrap .filter-count {
  font-size: 11px;
  color: var(--text-faint);
  margin-left: auto;
}/* ============================================================
   ACTIVITY FEED
   ============================================================ */
.ph-wrap .activity-item {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}.ph-wrap .activity-item:last-child { border-bottom: none; }.ph-wrap .act-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}.ph-wrap .act-text {
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.45;
  flex: 1;
}.ph-wrap .act-time {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}/* ============================================================
   CHECKLIST
   ============================================================ */
.ph-wrap .checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}.ph-wrap .checklist-item:last-child { border-bottom: none; }.ph-wrap .check-icon {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 10px;
}.ph-wrap .check-done { background: var(--success-tint); color: var(--success); }.ph-wrap .check-todo { background: var(--accent-tint); color: var(--accent); border: 1px solid var(--accent-border); }.ph-wrap .check-lock { background: var(--bg-secondary); color: var(--text-faint); border: 1px solid var(--border-strong); }.ph-wrap .check-text { font-size: 12px; color: var(--text-primary); line-height: 1.3; flex: 1; }.ph-wrap .check-sub { font-size: 11px; color: var(--text-faint); margin-top: 2px; }/* ============================================================
   MODULE GRID (dashboard widget)
   ============================================================ */
.ph-wrap .module-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 14px;
}.ph-wrap .module-mini {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--bg-secondary);
  border-radius: var(--r-md);
  padding: 10px 11px;
}.ph-wrap .module-mini-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}.ph-wrap .mm-on { background: var(--accent-tint);   color: var(--accent-hover); }.ph-wrap .mm-off { background: var(--border);        color: var(--text-faint); }.ph-wrap .mm-name { font-size: 11px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }.ph-wrap .mm-status { font-size: 10px; margin-top: 2px; }.ph-wrap .mm-status.on { color: var(--success); }.ph-wrap .mm-status.off { color: var(--text-faint); }/* ============================================================
   HEALTH RING (SVG wrapper)
   ============================================================ */
.ph-wrap .health-ring-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}.ph-wrap .health-ring-wrap svg { transform: rotate(-90deg); }.ph-wrap .health-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}.ph-wrap .health-score { font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1; }.ph-wrap .health-grade { font-size: 10px; font-weight: 700; color: var(--success); margin-top: 1px; }/* ============================================================
   ISSUE ROWS
   ============================================================ */
.ph-wrap .issue-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}.ph-wrap .issue-row:last-child { border-bottom: none; }.ph-wrap .issue-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}.ph-wrap .issue-label { font-size: 12px; color: var(--text-primary); flex: 1; }.ph-wrap .issue-count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}.ph-wrap .issue-fix { font-size: 11px; color: var(--accent-hover); font-weight: 600; cursor: pointer; flex-shrink: 0; }.ph-wrap .issue-fix:hover { text-decoration: underline; }/* ============================================================
   MODULES PAGE — MODULE ROWS
   ============================================================ */
.ph-wrap .module-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--border);
}.ph-wrap .module-row:last-child { border-bottom: none; }.ph-wrap .module-icon-lg {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}.ph-wrap .mi-on-lg { background: var(--accent-tint);   color: var(--accent-hover); }.ph-wrap .mi-off-lg { background: var(--bg-secondary);  color: var(--text-faint); }.ph-wrap .module-info { flex: 1; min-width: 0; }.ph-wrap .module-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}.ph-wrap .module-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}.ph-wrap .module-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}.ph-wrap .module-fields .field-group { width: 170px; }.ph-wrap .module-toggle { padding-top: 4px; }/* ============================================================
   TABS
   ============================================================ */
.ph-wrap .tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-xl);
  gap: 0;
}.ph-wrap .tab {
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: all .15s;
}.ph-wrap .tab:hover { color: var(--text-primary); }.ph-wrap .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }/* ============================================================
   ACCORDION (Roles & Menus)
   ============================================================ */
.ph-wrap .accordion-item { border-bottom: 1px solid var(--border); }.ph-wrap .accordion-item:last-child { border-bottom: none; }.ph-wrap .accordion-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .1s;
}.ph-wrap .accordion-header:hover { background: var(--bg-secondary); }.ph-wrap .accordion-title { font-size: 12px; font-weight: 700; color: var(--text-primary); flex: 1; }.ph-wrap .accordion-meta { font-size: 11px; color: var(--text-faint); }.ph-wrap .accordion-chevron { font-size: 14px; color: var(--text-faint); transition: transform .2s; }.ph-wrap .accordion-body { padding: 0 16px 14px; display: none; }.ph-wrap .accordion-body.open { display: block; }.ph-wrap .accordion-chevron.open { transform: rotate(180deg); }.ph-wrap .menu-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
  margin-top: 8px;
}.ph-wrap .menu-item-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  background: var(--bg-secondary);
  font-size: 11px;
  color: var(--text-primary);
}.ph-wrap .menu-item-toggle i { font-size: 13px; color: var(--text-faint); }/* ============================================================
   LINK ARCHITECT — 3 STEP FLOW
   ============================================================ */
.ph-wrap .step-flow {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}.ph-wrap .step-item {
  flex: 1;
  padding: 12px 16px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 10px;
}.ph-wrap .step-item:last-child { border-right: none; }.ph-wrap .step-item.active { background: var(--accent-tint); }.ph-wrap .step-item.done { background: var(--success-tint); }.ph-wrap .step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--border-strong);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}.ph-wrap .step-item.active .step-num { background: var(--accent); color: #fff; }.ph-wrap .step-item.done   .step-num { background: var(--success); color: #fff; }.ph-wrap .step-label { font-size: 12px; font-weight: 600; color: var(--text-primary); }.ph-wrap .step-sub { font-size: 10px; color: var(--text-faint); margin-top: 1px; }/* ============================================================
   SETUP WIZARD
   ============================================================ */
.ph-wrap .wizard-wrap {
  min-height: calc(100vh - 32px);
  background: linear-gradient(160deg, #EAF1FB 0%, #F3F4F7 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}.ph-wrap .wizard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 680px;
  box-shadow: 0 8px 40px rgba(0,71,171,.08);
  overflow: hidden;
}.ph-wrap .wizard-header {
  background: var(--accent);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}.ph-wrap .wizard-logo { display: flex; align-items: center; gap: 10px; }.ph-wrap .wizard-logo-text { color: #fff; }.ph-wrap .wizard-logo-name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }.ph-wrap .wizard-logo-tag { font-size: 11px; opacity: .7; margin-top: 2px; }.ph-wrap .wizard-body { padding: 32px; }.ph-wrap .wizard-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; letter-spacing: -.01em; }.ph-wrap .wizard-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 24px; }.ph-wrap .wizard-modules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}.ph-wrap .wizard-module {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}.ph-wrap .wizard-module:hover { border-color: var(--accent-border); background: var(--accent-tint); }.ph-wrap .wizard-module.selected {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: 0 0 0 2px rgba(0,71,171,.12);
}.ph-wrap .wizard-module-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--accent-tint);
  color: var(--accent-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}.ph-wrap .wizard-module.selected .wizard-module-icon { background: var(--accent); color: #fff; }.ph-wrap .wizard-module-name { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }.ph-wrap .wizard-module-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }.ph-wrap .wizard-footer {
  border-top: 1px solid var(--border);
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-secondary);
}.ph-wrap .wizard-step-dots { display: flex; gap: 6px; }.ph-wrap .wizard-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }.ph-wrap .wizard-dot.active { background: var(--accent); width: 18px; border-radius: 3px; }/* ============================================================
   TOOLS PAGE
   ============================================================ */
.ph-wrap .tool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}.ph-wrap .tool-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
}.ph-wrap .tool-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}.ph-wrap .tool-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}.ph-wrap .tool-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }.ph-wrap .tool-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 14px; }.ph-wrap .tool-divider { height: 1px; background: var(--border); margin: 14px 0; }/* ============================================================
   ACTIVITY LOG
   ============================================================ */
.ph-wrap .log-type-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }/* ============================================================
   ROLES & MENUS
   ============================================================ */
.ph-wrap .roles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}.ph-wrap .role-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  text-align: center;
}.ph-wrap .role-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 18px;
}.ph-wrap .role-name { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }.ph-wrap .role-count { font-size: 11px; color: var(--text-faint); margin-bottom: 10px; }.ph-wrap .role-perms { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }/* ============================================================
   UTILITY
   ============================================================ */
.ph-wrap .flex { display: flex; }.ph-wrap .flex-col { flex-direction: column; }.ph-wrap .items-center { align-items: center; }.ph-wrap .justify-between { justify-content: space-between; }.ph-wrap .gap-8 { gap: 8px; }.ph-wrap .gap-12 { gap: 12px; }.ph-wrap .gap-16 { gap: 16px; }.ph-wrap .mt-8 { margin-top: 8px; }.ph-wrap .mt-12 { margin-top: 12px; }.ph-wrap .mt-16 { margin-top: 16px; }.ph-wrap .mt-24 { margin-top: 24px; }.ph-wrap .mb-8 { margin-bottom: 8px; }.ph-wrap .mb-12 { margin-bottom: 12px; }.ph-wrap .mb-16 { margin-bottom: 16px; }.ph-wrap .mb-24 { margin-bottom: 24px; }.ph-wrap .grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }.ph-wrap .text-muted { color: var(--text-muted); font-size: 11px; }.ph-wrap .text-faint { color: var(--text-faint); font-size: 11px; }.ph-wrap .text-danger { color: var(--danger); }.ph-wrap .text-success { color: var(--success); }.ph-wrap .font-mono { font-family: var(--font-mono); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {.ph-wrap .stat-grid { grid-template-columns: repeat(2,1fr); }.ph-wrap .stat-grid-5 { grid-template-columns: repeat(3,1fr); }.ph-wrap .main-cols { grid-template-columns: 1fr !important; }.ph-wrap .wizard-modules { grid-template-columns: 1fr; }.ph-wrap .tool-grid { grid-template-columns: 1fr; }.ph-wrap .roles-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 782px) {.ph-wrap .ph-sidebar { display: none; }.ph-wrap .ph-content { padding: 16px; }.ph-wrap .stat-grid, .ph-wrap .stat-grid-5 { grid-template-columns: repeat(2,1fr); }.ph-wrap .module-mini-grid { grid-template-columns: repeat(2,1fr); }
}

/* ============================================================
   Platform Helm — app-specific helpers (scoped additions)
   ============================================================ */
.ph-wrap .mb-16 { margin-bottom: 16px; }
.ph-wrap .ph-checklist { list-style: none; margin: 0; padding: 0; }
.ph-wrap .ph-check { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ph-wrap .ph-check:last-child { border-bottom: none; }
.ph-wrap .ph-check-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; color: var(--text-muted); background: var(--bg-secondary); border: 1px solid var(--border-strong); flex-shrink: 0; }
.ph-wrap .ph-check.is-done .ph-check-mark { color: #fff; background: var(--success); border-color: var(--success); }
.ph-wrap .ph-check-label { flex: 1; font-size: 13px; color: var(--text-primary); }
.ph-wrap .ph-check.is-done .ph-check-label { color: var(--text-muted); text-decoration: line-through; }
.ph-wrap .ph-feed { list-style: none; margin: 0; padding: 0; }
.ph-wrap .ph-feed-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.ph-wrap .ph-feed-item:last-child { border-bottom: none; }
.ph-wrap .ph-feed-desc { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-wrap .ph-feed-when { color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.ph-wrap .ph-module-group-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.ph-wrap .ph-module-group-label:first-child { margin-top: 0; }
.ph-wrap .ph-module-group-title { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.ph-wrap .ph-module-group-title i { font-size: 15px; color: var(--accent); }
.ph-wrap .ph-module-group-count { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.ph-wrap .ph-module-mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ph-wrap .ph-module-mini { border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; background: var(--surface); }
.ph-wrap .ph-module-mini-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ph-wrap .ph-module-mini-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ph-wrap .ph-module-mini-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 0; }
@media (max-width: 782px) { .ph-wrap .ph-module-mini-grid { grid-template-columns: 1fr; } }

/* Bridge: native WP Settings API elements rendered inside .ph-wrap */
.ph-wrap .form-table th { color: var(--text-primary); font-weight: 600; }
.ph-wrap .form-table td { color: var(--text-secondary); }
.ph-wrap .ph-settings-form .button-primary { background: var(--accent); border-color: var(--accent); box-shadow: none; text-shadow: none; border-radius: var(--r-sm); padding: 4px 16px; height: auto; }
.ph-wrap .ph-settings-form .button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.ph-wrap .form-table h2 { font-size: 15px; }

/* Bridge: native WP tables + buttons inside re-skinned Helm screens */
.ph-wrap .wp-list-table.widefat { border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden; }
.ph-wrap table.widefat { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.ph-wrap table.widefat thead th { background: var(--bg-secondary); color: var(--text-secondary); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.ph-wrap table.widefat td { color: var(--text-secondary); }
.ph-wrap table.widefat td a { color: var(--accent); }
.ph-wrap .wrap > h1:first-of-type { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--text-primary); }
.ph-wrap .button:not(.button-primary) { border-radius: var(--r-sm); border-color: var(--border-strong); color: var(--text-secondary); background: var(--surface); }
.ph-wrap .button:not(.button-primary):hover { border-color: var(--accent); color: var(--accent); }
.ph-wrap .button-primary { background: var(--accent); border-color: var(--accent); box-shadow: none; text-shadow: none; border-radius: var(--r-sm); }
.ph-wrap .button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
