/* Unified workspace layer: keeps the existing data attributes and business flows intact. */
.app-body.show-workspace {
  --workspace-green: #173d30;
  --workspace-green-2: #2c664d;
  --workspace-red: #a53a32;
  --workspace-gold: #c7a15b;
  --workspace-canvas: #eef2ef;
  --workspace-line: #d7e1db;
  --workspace-muted: #64736b;
  background: var(--workspace-canvas);
}

.app-body.show-workspace .workspace-shell { grid-template-columns: 274px minmax(0, 1fr); min-height: calc(100vh - 68px); }
.app-body.show-workspace .workspace-sidebar {
  position: sticky; top: 68px; height: calc(100vh - 68px); z-index: 10;
  display: flex; flex-direction: column; padding: 24px 16px 18px;
  background: linear-gradient(180deg, #173d30 0%, #12352a 100%); border: 0;
}
.app-body.show-workspace .workspace-family { margin: 0 7px 18px; padding: 0 8px 20px; }
.app-body.show-workspace .workspace-family strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-body.show-workspace .workspace-nav { display: grid; gap: 18px; overflow: visible; }
.workspace-nav-group { display: grid; gap: 4px; }
.workspace-nav-label { padding: 0 12px 5px; color: rgba(255,255,255,.48); font-size: 11px; letter-spacing: .14em; font-weight: 800; }
.workspace-nav-group + .workspace-nav-group { padding-top: 2px; border-top: 1px solid rgba(255,255,255,.1); }
.app-body.show-workspace .workspace-nav button {
  display: grid; grid-template-columns: 30px minmax(0,1fr); grid-template-rows: auto auto;
  align-items: center; min-height: 49px; padding: 7px 11px; border: 0; border-left: 3px solid transparent; border-radius: 7px;
  text-align: left; color: rgba(255,255,255,.78); background: transparent; transition: .18s ease;
}
.app-body.show-workspace .workspace-nav button i { grid-row: 1 / span 2; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; color: #e9d6a9; font-size: 12px; font-style: normal; font-weight: 900; }
.app-body.show-workspace .workspace-nav button span { font-size: 15px; font-weight: 800; line-height: 1.3; }
.app-body.show-workspace .workspace-nav button small { color: rgba(255,255,255,.48); font-size: 11px; line-height: 1.35; }
.app-body.show-workspace .workspace-nav button:hover, .app-body.show-workspace .workspace-nav button:focus-visible { color: #fff; background: rgba(255,255,255,.09); outline: none; }
.app-body.show-workspace .workspace-nav button.is-active { border-left-color: #e9c879; color: #fff; background: linear-gradient(90deg, rgba(165,58,50,.95), rgba(165,58,50,.72)); box-shadow: 0 5px 14px rgba(0,0,0,.12); }
.app-body.show-workspace .workspace-nav button.is-active small { color: rgba(255,255,255,.74); }
.app-body.show-workspace .workspace-user { margin-top: auto; }
.app-body.show-workspace .workspace-logout-compact { display: none; }
.app-body.show-workspace .workspace-main { min-width: 0; padding: clamp(24px, 3vw, 46px); }
.app-body.show-workspace .workspace-view { width: min(100%, 1480px); }
.app-body.show-workspace .workspace-panel, .app-body.show-workspace .personal-oral-shell, .app-body.show-workspace .genealogy-editor-view > .genealogy-editor-shell, .app-body.show-workspace .old-pedigree-stage, .app-body.show-workspace .old-pedigree-intro, .app-body.show-workspace .old-pedigree-steps {
  border-color: var(--workspace-line); box-shadow: 0 12px 34px rgba(25,55,42,.055);
}
.app-body.show-workspace .workspace-panel { border-top: 3px solid var(--workspace-green); border-radius: 10px; }
.app-body.show-workspace .panel-head { padding-bottom: 22px; border-bottom: 1px solid var(--workspace-line); }
.app-body.show-workspace .panel-head h2, .app-body.show-workspace .genealogy-step-head h2 { letter-spacing: -.02em; }
.app-body.show-workspace .panel-head > span, .app-body.show-workspace .panel-head > strong { padding: 6px 10px; border: 1px solid #d6e1da; border-radius: 999px; background: #f3f7f4; }
.app-body.show-workspace .tree-panel { overflow: hidden; }
.app-body.show-workspace .tree-scroll { min-height: 420px; border: 1px solid #dce5df; border-radius: 8px; background: radial-gradient(circle at 50% 15%, #fbfdfb, #f1f5f2); }
.app-body.show-workspace #familyTreeCanvas .tree-node {
  width: 112px; height: 82px; min-height: 82px;
  padding: 6px 8px 5px; gap: 1px;
  transform: translateX(var(--tree-content-shift));
}
.app-body.show-workspace #familyTreeCanvas .tree-node strong { font-size: 17px; }
.app-body.show-workspace #familyTreeCanvas .tree-node small { font-size: 10px; line-height: 1.18; }
.app-body.show-workspace .family-network-canvas .network-person-node {
  transform: none; width: 128px; min-height: 76px; padding: 7px 9px; gap: 2px;
}
.app-body.show-workspace .tree-document-head { border: 0; border-bottom: 1px solid var(--workspace-line); }
.app-body.show-workspace .tree-collaboration-bar { margin-top: 18px; padding: 18px; border: 1px solid #e1e8e3; border-radius: 8px; background: #f6f8f6; }
.app-body.show-workspace .share-layout, .app-body.show-workspace .tree-workspace { align-items: start; }
.app-body.show-workspace .share-card, .app-body.show-workspace #addRelativePanel { border: 1px solid #d9e3dd; border-top: 3px solid var(--workspace-gold); border-radius: 9px; box-shadow: 0 8px 22px rgba(25,55,42,.05); }
.app-body.show-workspace .old-pedigree-intro { margin-bottom: 18px; padding: 24px 26px; border: 1px solid var(--workspace-line); border-top: 3px solid var(--workspace-green); border-radius: 10px; background: #fff; }
.app-body.show-workspace .old-pedigree-steps { margin-bottom: 18px; border: 1px solid var(--workspace-line); border-radius: 9px; background: #fff; }
.app-body.show-workspace .old-pedigree-stage { border: 1px solid var(--workspace-line); border-radius: 10px; background: #fff; }
.app-body.show-workspace .genealogy-editor-view { width: 100%; }
.app-body.show-workspace .genealogy-editor-shell { border: 1px solid var(--workspace-line); border-radius: 10px; overflow: hidden; background: #fff; }
.app-body.show-workspace .genealogy-editor-content { background: #f8faf8; }
.app-body.show-workspace .genealogy-step { border: 1px solid #dce5df; border-radius: 9px; background: #fff; }
.app-body.show-workspace .personal-oral-shell { border: 1px solid var(--workspace-line); border-top: 3px solid var(--workspace-green); border-radius: 10px; overflow: hidden; background: #fff; }
.app-body.show-workspace .personal-oral-header { padding: 26px 28px; background: linear-gradient(135deg,#f8faf8,#eef5f0); border-bottom: 1px solid var(--workspace-line); }
.app-body.show-workspace .personal-oral-body { background: #f8faf8; }
.app-body.show-workspace .personal-oral-projects { border-right: 1px solid var(--workspace-line); background: #fff; }
.app-body.show-workspace .settings-grid { max-width: 980px; margin: 0 auto; }
.app-body.show-workspace [data-workspace-view="password"] .workspace-panel { border-top-color: var(--workspace-gold); }

@media (max-width: 1100px) {
  .app-body.show-workspace .workspace-shell { grid-template-columns: 1fr; }
  .app-body.show-workspace .workspace-sidebar { position: sticky; top: 68px; height: auto; display: block; padding: 10px 14px; }
  .app-body.show-workspace .workspace-family { display: none; }
  .app-body.show-workspace .workspace-nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .workspace-nav-group, .workspace-nav-group + .workspace-nav-group { display: contents; border: 0; padding: 0; }
  .workspace-nav-label { display: none; }
  .app-body.show-workspace .workspace-nav button { display: flex; flex: 0 0 auto; min-height: 43px; padding: 0 12px; border-left: 0; border-bottom: 3px solid transparent; gap: 7px; }
  .app-body.show-workspace .workspace-nav button i { width: 20px; height: 20px; }
  .app-body.show-workspace .workspace-nav button small { display: none; }
  .app-body.show-workspace .workspace-nav button.is-active { border-bottom-color: #e9c879; }
  .app-body.show-workspace .workspace-user { display: none; }
  .app-body.show-workspace .workspace-logout-compact { display: block; float: right; margin-top: 7px; }
}
@media (max-width: 760px) {
  .app-body.show-workspace .workspace-sidebar { top: 58px; padding: 8px 10px; }
  .app-body.show-workspace .workspace-nav { padding-right: 84px; }
  .app-body.show-workspace .workspace-logout-compact { position: absolute; right: 10px; top: 8px; min-height: 40px; }
  .app-body.show-workspace .workspace-main { padding: 12px 10px 28px; }
  .app-body.show-workspace .workspace-panel { padding: 18px 14px; border-radius: 8px; }
  .app-body.show-workspace .old-pedigree-intro { padding: 20px 16px; }
  .app-body.show-workspace .personal-oral-header { padding: 20px 16px; }
}
/* Reference-inspired personal workspace: functional shortcuts, overview and guidance. */
.app-body.show-workspace .home-welcome{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 26px}
.home-welcome h1{font-size:28px;font-weight:650;color:#173d30;letter-spacing:0;margin:0 0 8px}
.home-welcome p{margin:0;color:#64736b;font-size:15px}
.home-summary{display:grid;grid-template-columns:2fr repeat(3,1fr);background:#173d30;color:#fff;border-radius:12px;padding:25px 28px;margin-bottom:30px;gap:24px}
.home-summary>div+div{border-left:1px solid #ffffff28;padding-left:24px}
.home-summary span{display:block;color:#cbdacf;font-size:13px;margin-bottom:8px}
.home-summary strong{display:block;font-size:25px;line-height:1.35;overflow-wrap:anywhere}
.home-section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.home-section-heading h2,.home-guide h2{font-size:20px;letter-spacing:0;margin:0;color:#243e30}
.home-section-heading>span{font-size:13px;color:#64736b}
.home-tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.home-tool{position:relative;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0;min-height:176px;padding:22px;border:1px solid #dce5df;border-radius:12px;background:#fff;color:#233c30;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
.home-tool:hover{background:#f9fcfa;border-color:#81a78d;box-shadow:0 6px 18px #173d3010}
.home-tool:focus-visible,.home-next button:focus-visible{outline:3px solid #b78d45;outline-offset:3px}
.home-tool-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#edf4ef;color:#316749;margin-bottom:3px}
.home-tool:nth-child(3n+2) .home-tool-icon{background:#f8f0e3;color:#9a7034}
.home-tool:nth-child(3n) .home-tool-icon{background:#faeeea;color:#9b5148}
.home-tool-icon svg{width:28px;height:28px}
.home-tool strong{font-size:17px;line-height:1.4}
.home-tool>span:not(.home-tool-icon){font-size:13px;color:#67766e;line-height:1.5}
.home-tool>b{position:absolute;right:20px;top:24px;color:#93a59a;font-weight:400}
.home-bottom{display:grid;grid-template-columns:1.45fr 1fr;gap:22px;margin-top:28px}
.home-next,.home-guide{min-width:0;padding:26px;background:#fff;border:1px solid #dce5df;border-radius:12px}
.home-next button{width:100%;display:flex;align-items:center;gap:16px;padding:16px 0;border:0;border-top:1px solid #edf0ed;background:transparent;text-align:left;cursor:pointer;color:#294633}
.home-next button>span:nth-child(2){flex:1;min-width:0}
.home-next strong{display:block;font-size:15px;margin-bottom:5px}
.home-next small{display:block;color:#6b796f;font-size:13px;line-height:1.6}
.home-task-number{color:#9b8054;font-size:14px}
.home-guide{background:#f8f6ee}
.home-guide p,.home-guide li{color:#687163;font-size:14px;line-height:1.9}
.home-guide ol{padding-left:21px;margin:18px 0 24px}
.app-body.show-workspace .workspace-sidebar{overflow-y:auto;overscroll-behavior:contain}
.app-body.show-workspace .workspace-sidebar>.workspace-family,.app-body.show-workspace .workspace-sidebar>.workspace-nav,.app-body.show-workspace .workspace-sidebar>.workspace-user{flex-shrink:0}
@media(max-width:1200px){.home-tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home-bottom{grid-template-columns:1fr 1fr}}
@media(max-width:1100px){.app-body.show-workspace .workspace-sidebar{overflow:visible}.home-tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.app-body.show-workspace .home-welcome{align-items:flex-start;flex-direction:column;gap:14px;margin:12px 4px 20px}.home-welcome h1{font-size:23px}.home-summary{grid-template-columns:1fr 1fr;gap:20px;padding:22px;margin-bottom:24px}.home-summary>div+div{border:0;padding:0}.home-summary strong{font-size:22px}.home-summary>div:first-child{grid-column:1/-1}.home-summary>div:last-child{grid-column:1/-1}.home-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.home-tool{padding:17px 14px;min-height:171px}.home-tool>b{right:14px;top:20px}.home-tool strong{font-size:16px}.home-tool>span:not(.home-tool-icon){font-size:12px}.home-section-heading>span{display:none}.home-bottom{grid-template-columns:1fr;gap:14px;margin-top:20px}.home-next,.home-guide{padding:20px}}
@media(max-width:1100px){.app-body.show-workspace .workspace-shell{grid-template-columns:minmax(0,1fr)}.app-body.show-workspace .workspace-sidebar{min-width:0;max-width:100%}.app-body.show-workspace .workspace-nav{max-width:100%}}
.app-body.show-workspace [data-workspace-view="home"]{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}
@media(max-width:760px){.app-body.show-workspace .workspace-nav{width:calc(100% - 86px);padding-right:0}.app-body.show-workspace .workspace-logout-compact{margin:0;background:#234b3c}}