
#ndw-parent-dash {
  --pd-bg: #f1f5f9;
  --pd-card: #ffffff;
  --pd-card-2: #f8fafc;
  --pd-ink: #0f172a;
  --pd-ink-2: #1e293b;
  --pd-muted: #64748b;
  --pd-line: #e2e8f0;
  --pd-tip-line: #bae6fd;
  --pd-tip-ink: #0c4a6e;
  --pd-trend-bg: #f0fdf4;
  --pd-trend-line: #bbf7d0;
  --pd-trend-ink: #166534;

  --fg-100: rgba(46,42,71,0.92);
  --fg-9: rgba(46,42,71,0.92);
  --fg-88: rgba(46,42,71,0.80);
  --fg-867: rgba(46,42,71,0.80);
  --fg-85: rgba(46,42,71,0.80);
  --fg-82: rgba(46,42,71,0.80);
  --fg-8: rgba(46,42,71,0.80);
  --fg-753: rgba(46,42,71,0.80);
  --fg-75: rgba(46,42,71,0.80);
  --fg-733: rgba(46,42,71,0.80);
  --fg-72: rgba(46,42,71,0.80);
  --fg-7: rgba(46,42,71,0.80);
  --fg-68: rgba(46,42,71,0.66);
  --fg-667: rgba(46,42,71,0.66);
  --fg-66: rgba(46,42,71,0.66);
  --fg-65: rgba(46,42,71,0.66);
  --fg-62: rgba(46,42,71,0.66);
  --fg-6: rgba(46,42,71,0.76);
  --fg-58: rgba(46,42,71,0.76);
  --fg-55: rgba(46,42,71,0.76);
  --fg-533: rgba(46,42,71,0.68);
  --fg-52: rgba(46,42,71,0.68);
  --fg-5: rgba(46,42,71,0.68);
  --fg-48: rgba(46,42,71,0.68);
  --fg-467: rgba(46,42,71,0.68);
  --fg-45: rgba(46,42,71,0.68);
  --fg-42: rgba(46,42,71,0.68);
  --fg-4: rgba(46,42,71,0.68);
  --fg-38: rgba(46,42,71,0.74);
  --fg-35: rgba(46,42,71,0.74);
  --fg-333: rgba(46,42,71,0.74);
  --fg-3: rgba(46,42,71,0.74);
  --fg-28: rgba(46,42,71,0.18);
  --fg-267: rgba(46,42,71,0.18);
  --fg-25: rgba(46,42,71,0.18);
  --fg-22: rgba(46,42,71,0.18);
  --fg-2: rgba(46,42,71,0.18);
  --fg-18: rgba(46,42,71,0.18);
  --fg-16: rgba(46,42,71,0.18);
  --fg-15: rgba(46,42,71,0.18);
  --fg-14: rgba(46,42,71,0.18);
  --fg-133: rgba(46,42,71,0.18);
  --fg-13: rgba(46,42,71,0.18);
  --fg-12: rgba(255,255,255,0.92);
  --fg-1: rgba(255,255,255,0.92);
  --fg-094: rgba(255,255,255,0.92);
  --fg-09: rgba(255,255,255,0.92);
  --fg-08: rgba(255,255,255,0.92);
  --fg-071: rgba(255,255,255,0.92);
  --fg-07: rgba(255,255,255,0.92);
  --fg-06: rgba(255,255,255,0.92);
  --fg-059: rgba(255,255,255,0.92);
  --fg-055: rgba(255,255,255,0.92);
  --fg-05: rgba(255,255,255,0.92);
  --fg-04: rgba(255,255,255,0.82);
  --fg-03: rgba(255,255,255,0.82);
  --fg-02: rgba(255,255,255,0.82);
  --fg-01: rgba(255,255,255,0.82);

  --muted: #5a6478;
  --pink: #b3186a;
  --lime: #256b4a;
  --sky: #12617f;
  --sun: #8a6410;
  --lavender: #6d4bc7;
  --teal: #116b52;
  --rose: #b03f72;
  color: var(--pd-ink-2);
}

.pd-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px 60px;
}

.pd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -16px 14px;
  padding: calc(16px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 16px 12px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--pd-bg);
}

.pd-header h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0;
  color: var(--pd-ink);
}

.pd-header p {
  font-size: 0.8rem;
  margin: 2px 0 0;
  color: var(--pd-muted);
}

.pd-sync {
  min-height: 40px;
  background: #e0f2fe;
  border: 1.5px solid var(--pd-tip-line);
  color: var(--sky);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}

.pd-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--pd-line);
  background: var(--pd-card);
  color: var(--pd-muted);
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-card {
  background: var(--pd-card);
  border: 1px solid var(--pd-line);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}

.pd-card-title {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--pd-ink);
}

.pd-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.pd-card-row .pd-card-title {
  margin: 0;
}

.pd-card-tip {
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
  border-color: var(--pd-tip-line);
}

.pd-card-tip .pd-card-title,
.pd-card-tip .pd-text-strong {
  color: var(--pd-tip-ink);
}

.pd-card-trend {
  background: var(--pd-trend-bg);
  border-color: var(--pd-trend-line);
}

.pd-card-trend .pd-card-title,
.pd-card-trend .pd-text {
  color: var(--pd-trend-ink);
}

.pd-text {
  font-size: 0.85rem;
  color: var(--fg-68);
  line-height: 1.5;
  margin: 0 0 10px;
}

.pd-text-strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--pd-ink);
  margin-bottom: 4px;
}

.pd-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pd-child-emoji {
  font-size: 2.2rem;
}

.pd-child-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pd-ink);
}

.pd-kids {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}

#ndw-parent-dash .chip-neutral {
  background: var(--pd-card-2);
  border-color: var(--pd-line);
  color: var(--pd-ink-2);
}

#ndw-parent-dash .chip-lime {
  background: #dcfce7;
  border-color: var(--pd-trend-line);
  color: var(--lime);
}

.pd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
}

.pd-stat {
  background: var(--pd-card-2);
  border-radius: 12px;
  padding: 12px 6px;
  text-align: center;
}

.pd-stat-icon {
  font-size: 1.35rem;
  margin-bottom: 2px;
}

.pd-stat-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--pd-ink);
  line-height: 1.2;
}

.pd-stat-label {
  font-size: 0.7rem;
  color: var(--pd-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* Full-width tool row (Upgrade / Full access) */
.pd-tool {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 14px;
  margin-bottom: 8px;
  background: var(--pd-card-2);
  border: 1px solid var(--pd-line);
  cursor: pointer;
  transition: background 0.15s;
}

.pd-tool:active {
  background: var(--pd-line);
}

.pd-tool-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  background: #e0f2fe;
}

.pd-tool-text {
  flex: 1;
  min-width: 0;
}

.pd-tool-title {
  font-weight: 800;
  color: var(--pd-ink-2);
  font-size: 0.9rem;
}

.pd-tool-sub {
  font-size: 0.76rem;
  color: var(--pd-muted);
  margin-top: 1px;
  line-height: 1.35;
}

.pd-tool-chev {
  color: #9ca3af;
  font-size: 1.3rem;
  line-height: 1;
}

/* 2-Column Grid for Tools & Settings */
.pd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pd-compact-tool {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 48px;
  border-radius: 12px;
  background: var(--pd-card-2);
  border: 1px solid var(--pd-line);
  cursor: pointer;
  transition: background 0.15s;
}

.pd-compact-tool:active {
  background: var(--pd-line);
}

.pd-compact-icon {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
}

.pd-compact-title {
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--pd-ink-2);
  line-height: 1.25;
}

/* Creative Studio 2-Column Tool Cards */
.pd-creative-tool {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--pd-card-2);
  border: 1px solid var(--pd-line);
  cursor: pointer;
  transition: background 0.15s;
}

.pd-creative-tool:active {
  background: var(--pd-line);
}

.pd-creative-text {
  flex: 1;
  min-width: 0;
}

/* Color accents */
.pd-tint-mint .pd-tool-icon, .pd-tint-mint.pd-compact-tool { background: #dcfce7; }
.pd-tint-sun .pd-tool-icon, .pd-tint-sun.pd-compact-tool { background: #fef3c7; }
.pd-tint-purple .pd-tool-icon, .pd-tint-purple.pd-compact-tool { background: #f3e8ff; }
.pd-tint-slate .pd-tool-icon, .pd-tint-slate.pd-compact-tool { background: var(--pd-line); }
.pd-tint-pink .pd-tool-icon, .pd-tint-pink.pd-creative-tool { background: #fce7f3; }
.pd-tint-rose .pd-tool-icon, .pd-tint-rose.pd-creative-tool { background: #ffe4e6; }
.pd-tint-indigo .pd-tool-icon { background: #e0e7ff; }

.pd-chip {
  display: inline-block;
  margin: 2px 4px 2px 0;
  background: #e0f2fe;
  border: 1px solid var(--pd-tip-line);
  border-radius: 100px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--sky);
}

.pd-btn {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  border: 1.5px solid transparent;
}

.pd-btn-inline {
  width: auto;
}

.pd-btn-sun {
  background: linear-gradient(135deg, #f9c74f, #f8961e);
  color: #1a1a2e;
}

.pd-btn-sky {
  background: #e0f2fe;
  border-color: var(--pd-tip-line);
  color: var(--sky);
}

.pd-btn-pink {
  background: #fce7f3;
  border-color: #fbcfe8;
  color: var(--pink);
}

.pd-btn-ghost {
  background: var(--pd-card-2);
  border-color: var(--pd-line);
  color: var(--pd-ink-2);
}

.pd-ideas {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}

.pd-idea {
  background: var(--pd-card-2);
  border: 1px solid var(--pd-line);
  border-radius: 12px;
  padding: 10px;
}

.pd-toggle {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  border: 1.5px solid var(--pd-line);
  background: var(--pd-card-2);
  color: var(--pd-ink-2);
  font-size: 0.82rem;
  font-weight: 800;
}

.pd-toggle[aria-checked="true"] {
  border-color: var(--pd-trend-line);
  background: var(--pd-trend-bg);
}

.pd-toggle-pill {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 800;
  background: var(--pd-line);
  color: var(--pd-muted);
}

.pd-toggle[aria-checked="true"] .pd-toggle-pill {
  background: var(--pd-trend-line);
  color: var(--lime);
}

.pd-mins {
  flex: 1;
  min-height: 42px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.8rem;
  border: 1.5px solid var(--pd-line);
  background: var(--pd-card-2);
  color: var(--pd-muted);
}

.pd-mins[aria-pressed="true"] {
  border-color: var(--pd-trend-line);
  background: var(--pd-trend-bg);
  color: var(--lime);
}

.pd-divider {
  height: 1px;
  background: var(--pd-line);
  margin: 12px 0;
}

/* Quiet, Single-Line Flat Footer */
.pd-flat-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  padding: 16px 0 6px;
  border-top: 1px solid var(--pd-line);
  margin-top: 14px;
}

.pd-footer-link {
  background: none;
  border: none;
  padding: 4px 6px;
  color: var(--pd-muted);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pd-footer-link:active {
  color: var(--pd-ink);
}

.pd-footer-sep {
  color: var(--pd-line);
  font-size: 0.9rem;
  user-select: none;
}

.pd-foot {
  font-size: 0.74rem;
  color: var(--pd-muted);
  text-align: center;
  line-height: 1.6;
  margin-top: 6px;
}
