/*
 * Shiyuean emotional UI layer — 2026-09-10
 * Spine: see safety, understand today's agreement, act only when needed.
 */
:root {
  --soul-forest: #243b36;
  --soul-forest-2: #31574e;
  --soul-mint: #d8eee5;
  --soul-cream: #f7f1e8;
  --soul-paper: #fffdfa;
  --soul-coral: #df704f;
  --soul-gold: #e8ae55;
  --soul-ink: #26302e;
  --soul-muted: #6d7773;
  --soul-line: rgba(45, 68, 62, .11);
  --soul-shadow: 0 24px 70px rgba(42, 54, 50, .11);
}

/* Parent: calm family space, not an admin console. */
.parent-shell {
  color: var(--soul-ink);
  background:
    radial-gradient(circle at 92% 2%, rgba(232,174,85,.16), transparent 27rem),
    linear-gradient(135deg, #f8f4ee 0%, #f4f1eb 55%, #edf4ef 100%);
}

.parent-shell .parent-app { max-width: 1680px; margin: 0 auto; }

.parent-shell .app-sidebar {
  width: 236px;
  color: rgba(255,255,255,.78);
  background:
    radial-gradient(circle at 12% 8%, rgba(232,174,85,.2), transparent 12rem),
    linear-gradient(180deg, #29443d, #1f342f);
  border-right: 0;
  box-shadow: 12px 0 42px rgba(31,52,47,.08);
}

.parent-shell .brand-lockup strong,
.parent-shell .family-switcher strong,
.parent-shell .sidebar-user strong { color: #fff; }
.parent-shell .brand-lockup span,
.parent-shell .family-label,
.parent-shell .family-device,
.parent-shell .sidebar-user span { color: rgba(255,255,255,.58); }
.parent-shell .brand-mark { padding: 4px; background: rgba(255,255,255,.94); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }

.parent-shell .family-switcher {
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}

.parent-shell .side-nav-item { color: rgba(255,255,255,.7); border-radius: 13px; }
.parent-shell .side-nav-item:hover { color: #fff; background: rgba(255,255,255,.075); }
.parent-shell .side-nav-item.active {
  color: #213a34;
  background: linear-gradient(135deg, #f8e6c9, #f2c989);
  box-shadow: 0 9px 24px rgba(0,0,0,.14);
}
.parent-shell .nav-glyph {
  display: grid; width: 30px; height: 30px; place-items: center;
  color: inherit; background: rgba(255,255,255,.08); border-radius: 10px;
}
.parent-shell .side-nav-item.active .nav-glyph { color: #243b36; background: rgba(255,255,255,.45); }
.parent-shell .sidebar-action { color: rgba(255,255,255,.72); border-color: rgba(255,255,255,.11); }
.parent-shell .sidebar-action:hover { color: #fff; background: rgba(255,255,255,.07); }

.parent-shell .app-main { margin-left: 236px; background: transparent; }
.parent-shell .app-topbar {
  min-height: 112px; padding: 23px clamp(24px,4vw,58px) 20px;
  background: rgba(255,253,250,.76); border-bottom: 1px solid var(--soul-line);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.parent-shell .app-topbar h1 { color: var(--soul-forest); font-family: Georgia, "Songti SC", serif; font-size: 30px; }
.topbar-whisper { margin: 5px 0 0; color: #83908b; font-size: 12px; }
.parent-shell .app-view { padding: 28px clamp(24px,4vw,58px) 72px; }

.parent-shell .notice-strip {
  border: 1px solid rgba(232,174,85,.28); border-radius: 16px;
  background: rgba(255,248,232,.8); box-shadow: 0 8px 30px rgba(107,80,44,.05);
}
.parent-shell .notice-mark { color: #fff; background: var(--soul-gold); border-radius: 50%; }

.parent-shell .overview-hero {
  position: relative; overflow: hidden; min-height: 328px;
  background: var(--soul-paper); border: 1px solid rgba(45,68,62,.1); border-radius: 28px;
  box-shadow: var(--soul-shadow);
}
.parent-shell .overview-hero::before {
  content: ""; position: absolute; width: 150px; height: 150px; right: 34%; top: -112px;
  z-index: 0; background: transparent; border: 26px solid rgba(232,174,85,.13); border-radius: 50%; pointer-events: none;
}
.parent-shell .overview-hero::after {
  content: ""; position: absolute; width: 180px; height: 180px; left: -125px; bottom: -110px;
  background: rgba(216,238,229,.52); border-radius: 50%; pointer-events: none;
}
.parent-shell .hero-copy { position: relative; z-index: 1; padding: 32px 34px; }
.parent-shell .child-avatar {
  width: 66px; height: 66px; color: #fff; font-family: Georgia,"Songti SC",serif; font-size: 28px;
  background: linear-gradient(145deg, #e8ae55, #df704f); border: 4px solid #fff; border-radius: 22px;
  box-shadow: 0 10px 26px rgba(196,100,66,.2); transform: rotate(-2deg);
}
.parent-shell .profile-line h2 { font-family: Georgia,"Songti SC",serif; font-size: 31px; color: var(--soul-forest); }
.parent-shell .online-badge { color: #34745f; background: #e8f6ef; border-color: #d5ebdf; }
.guardian-note {
  width: fit-content; margin: 18px 0 12px; padding: 8px 13px;
  color: #8a5a39; background: #fff6e8; border-radius: 999px; font-size: 12px;
}
.guardian-note span { margin-right: 6px; color: var(--soul-gold); }
.parent-shell .current-mode {
  padding: 20px 22px; color: #fff;
  background: linear-gradient(130deg, var(--soul-forest-2), #3c7163) !important;
  border: 0; border-radius: 20px; box-shadow: 0 14px 30px rgba(36,59,54,.16);
}
.parent-shell .current-mode h3 { font-family: Georgia,"Songti SC",serif; font-size: 25px; }
.parent-shell .current-mode > div { display: block; }
.parent-shell .current-mode h3 { white-space: nowrap; }
.parent-shell .current-mode p { color: rgba(255,255,255,.7); }
.parent-shell .hero-trust-line { color: #5e716b; }
.parent-shell .hero-trust-line span::before { background: #73ad91; }

.parent-shell .hero-aside {
  position: relative; z-index: 1; padding: 32px 28px;
  background: linear-gradient(160deg, #eef7f2, #e5f0eb); border-left: 1px solid rgba(49,87,78,.08);
}
.parent-shell .risk-ring {
  width: 94px; height: 94px; color: #fff; font-size: 29px;
  background: linear-gradient(145deg, #4d967a, #276c59); border: 8px solid rgba(255,255,255,.72);
  box-shadow: 0 12px 28px rgba(38,108,88,.2);
}

.parent-shell .metric-grid { gap: 12px; margin-top: 16px; background: transparent; border: 0; }
.parent-shell .metric-card {
  min-height: 116px; padding: 20px 22px; background: rgba(255,253,250,.86);
  border: 1px solid var(--soul-line); border-radius: 18px; box-shadow: 0 8px 24px rgba(47,58,54,.045);
}
.parent-shell .metric-card::before { width: 34px; height: 4px; left: 22px; top: 0; border-radius: 0 0 4px 4px; background: var(--soul-gold); }
.parent-shell .metric-card strong { color: var(--soul-forest); font-family: Georgia,"Songti SC",serif; font-size: 23px; }
.parent-shell .metric-card:nth-child(2)::before { background: #5e9a82; }
.parent-shell .metric-card:nth-child(3)::before { background: #7c8fc5; }
.parent-shell .metric-card:nth-child(4)::before { background: var(--soul-coral); }

.parent-shell .surface-panel,
.parent-shell .content-section,
.parent-shell .mode-card,
.parent-shell .daily-report-card,
.parent-shell .page-intro {
  border-color: var(--soul-line); border-radius: 20px; background: rgba(255,253,250,.88);
  box-shadow: 0 10px 34px rgba(44,56,52,.055);
}
.parent-shell .dashboard-shortcuts .shortcut-panel { min-height: 136px; border-radius: 20px; }
.parent-shell .dashboard-shortcuts .shortcut-panel:hover { transform: translateY(-4px); border-color: rgba(223,112,79,.28); box-shadow: 0 18px 38px rgba(44,56,52,.09); }
.parent-shell .eyebrow, .parent-shell .shortcut-kicker, .parent-shell .text-button { color: #a85d3f; }
.parent-shell .primary-button { background: var(--soul-coral); border-color: var(--soul-coral); border-radius: 12px; box-shadow: 0 8px 18px rgba(223,112,79,.18); }
.parent-shell .primary-button:hover { background: #c95e40; border-color: #c95e40; transform: translateY(-1px); }
.parent-shell .danger-button { border-radius: 12px; }
.parent-shell .mode-card { min-height: 190px; transition: .22s ease; }
.parent-shell .mode-card:hover { transform: translateY(-5px); }
.parent-shell .mode-card.active { border-color: transparent; border-radius: 22px; box-shadow: 0 18px 38px rgba(36,59,54,.16); }

/* Child: one reassuring daily agreement, with less institutional chrome. */
.child-shell {
  background:
    radial-gradient(circle at 12% 5%, rgba(232,174,85,.2), transparent 19rem),
    linear-gradient(160deg, #f7efe4, #eaf3ee);
}
.child-shell .child-app {
  background: rgba(255,253,250,.94); border: 0; border-radius: 30px;
  box-shadow: 0 30px 80px rgba(36,59,54,.16);
}
.child-appbar { padding: 15px 20px; background: rgba(255,253,250,.88); border-color: var(--soul-line); backdrop-filter: blur(16px); }
.child-brand-mark { padding: 3px; border-radius: 13px; box-shadow: 0 6px 18px rgba(40,60,53,.08); }
.child-connection { color: #35725f; background: #e7f5ee; padding: 7px 10px; border-radius: 999px; }
.child-mode-panel {
  position: relative; overflow: hidden; margin: 18px 18px 0; padding: 25px;
  background: linear-gradient(145deg, #2e5b50, #21423a); border-radius: 25px;
  box-shadow: 0 20px 42px rgba(36,59,54,.22);
}
.child-mode-panel::after {
  content: ""; position: absolute; width: 160px; height: 160px; right: -76px; top: -75px;
  border: 32px solid rgba(232,174,85,.24); border-radius: 50%; pointer-events: none;
}
.child-mode-panel h1 { position: relative; z-index: 1; font-family: Georgia,"Songti SC",serif; font-size: 31px; }
.child-mode-panel > p { max-width: 300px; }
.child-mode-panel .child-kind-note { margin: -8px 0 19px; color: #f2ca8e; font-size: 12px; }
.countdown { border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,.13); }
.always-available { border-color: rgba(255,255,255,.14); }
.always-icon { color: var(--soul-coral); border-radius: 13px; }
.child-status-strip { margin-top: 16px; padding: 17px 4px; border-color: var(--soul-line); }
.checkin-button { color: #fff; background: var(--soul-coral); border: 0; border-radius: 12px; box-shadow: 0 8px 18px rgba(223,112,79,.17); }
.child-content-section { border-color: var(--soul-line); }
.child-shell .app-tile { background: #f7faf8; border-color: var(--soul-line); border-radius: 17px; }
.child-shell .app-tile .app-icon { border-radius: 13px; }
.child-shell .request-form { background: #f8f4ed; border-color: rgba(146,112,72,.13); border-radius: 20px; }
.child-shell .request-form input,
.child-shell .request-form select { border-radius: 12px; background: #fffdfa; }
.child-primary-button { background: var(--soul-coral); border-radius: 12px; box-shadow: 0 8px 18px rgba(223,112,79,.17); }
.child-settings { border-color: var(--soul-line); }
.child-footer { background: var(--soul-forest); border: 0; }
.child-sos-button { background: #e65f4b; border-radius: 14px; box-shadow: 0 10px 24px rgba(185,48,38,.22); }

@media (max-width: 860px) {
  .parent-shell .app-main { margin-left: 0; }
  .parent-shell .app-sidebar { width: auto; background: rgba(255,253,250,.94); border-top: 1px solid var(--soul-line); box-shadow: 0 -10px 35px rgba(34,50,45,.1); }
  .parent-shell .side-nav-item { color: #6c7874; }
  .parent-shell .side-nav-item.active { color: var(--soul-forest); background: #f5dfbd; box-shadow: none; }
  .parent-shell .nav-glyph { background: #edf2ef; }
  .parent-shell .app-topbar { min-height: 88px; padding: 16px 20px; }
  .topbar-whisper { display: none; }
  .parent-shell .app-view { padding: 18px 16px 94px; }
  .parent-shell .overview-hero { border-radius: 23px; }
  .parent-shell .hero-copy { padding: 26px 22px; }
  .parent-shell .hero-aside { border-left: 0; border-top: 1px solid rgba(49,87,78,.08); }
}

@media (max-width: 520px) {
  .child-shell { padding: 0; background: #fffdfa; }
  .child-shell .child-app { min-height: 100vh; border-radius: 0; box-shadow: none; }
  .child-mode-panel { border-radius: 22px; }
  .parent-shell .profile-line h2 { font-size: 27px; }
  .parent-shell .child-avatar { width: 58px; height: 58px; border-radius: 19px; }
  .parent-shell .current-mode { border-radius: 17px; }
  .guardian-note { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .parent-shell *, .child-shell * { scroll-behavior: auto !important; transition: none !important; }
}