/* HomeLife / Homecoming. One material, type scale and component language. */
:root {
  --bg:#f3f1e9; --paper:#fffdf7; --ink:#343d30; --muted:#74786b;
  --green:#3e4c36; --sage:#e7eadc; --line:#dfdfd2; --amber:#927143; --red:#9f5146;
  --night:#303a2c; --linen:#f4efdf; --brass:#c5ab73;
  --font:"Segoe UI","Microsoft YaHei",sans-serif;
  --radius:10px;
}
body { font:14px/1.65 var(--font); background:var(--bg); color:var(--ink); }
::selection { background:#d6d9bf; color:var(--ink); }
button,input,textarea,select { font-family:var(--font); touch-action:manipulation; }
button,a { transition:background-color .16s,border-color .16s,color .16s; }
:focus-visible { outline:3px solid var(--brass); outline-offset:4px; }
aside { width:232px; padding:29px 17px 18px; background:var(--night); border:0; color:var(--linen); }
.brand { color:var(--linen); gap:10px; font-size:21px; font-weight:600; letter-spacing:-.65px; padding-left:6px; }
.brand-mark { width:35px; height:35px; background:transparent; border:1px solid #f4efdf8a; border-radius:10px 10px 3px 10px; font:bold 30px Georgia,serif; color:var(--linen); }
.brand b { color:#c7cbb5; font-size:9px; font-weight:500; letter-spacing:0; margin-left:-6px; }
.home-switch { background:#f3efdf09; border:1px solid #f3efdf20; border-radius:var(--radius); margin:31px 4px 20px; padding:13px 10px; gap:10px; }
.home-switch strong { font-weight:500; font-size:13px; color:#f2edda; }
.home-switch small { color:#b1baa1; font-size:10px; margin-top:3px; }
.home-switch>span:last-child { color:#9da88d; }
.house-icon { color:var(--brass); font-size:25px; }
.house-icon svg { display:block; width:24px; height:24px; }
.nav-label { display:none; }
#nav { flex:1; min-height:0; overflow-y:auto; align-content:start; gap:3px; scrollbar-width:thin; scrollbar-color:#616b50 transparent; }
.nav-group { color:#98a389; padding:17px 14px 6px; font-size:10px; letter-spacing:1px; }
#nav a { color:#ccd2bf; padding:9px 13px; min-height:39px; border-radius:7px; gap:12px; font-size:13px; }
#nav a:hover { color:#fff9e8; background:#f4efdf0c; }
#nav a.active { color:#fffae8; background:#f4efdf14; box-shadow:inset 2px 0 var(--brass); font-weight:500; }
.nav-icon { display:inline-flex; width:18px; height:18px; flex-shrink:0; color:#a9b59a; }
.nav-icon svg { width:100%; height:100%; }
#nav a.active .nav-icon { color:#dfcb97; }
.sidebar-foot { color:#a5b295; margin:19px 6px 0; padding:15px 7px 0; border-top:1px solid #f3efdf19; font-size:10px; }
.sidebar-foot small { padding:7px 12px 0; color:#8e9a7e; }
.live-dot { background:var(--brass); }
.workspace { margin-left:232px; }
.workspace>header { height:72px; padding:0 38px; background:var(--bg); border-bottom:1px solid var(--line); }
.breadcrumb { color:#818575; font-size:12px; }
.breadcrumb span { color:#a5a994; margin:0 10px; }
.breadcrumb b { color:var(--ink); font-weight:500; }
.offline { font-size:10px; color:#7c826d; }
.header-right { gap:13px; }
.user-pill { color:#505b43; background:transparent; border:1px solid #d7dac9; border-radius:7px; padding:7px 12px; font-size:11px; }
.user-pill:hover { background:#e9ecdf; }
.icon-button { border-radius:6px; color:#6a775a; min-height:34px; min-width:30px; }
.icon-button:hover { background:#e4e8d9; }
main { max-width:1540px; padding:30px 38px 35px; }
h1,h2,h3 { font-family:var(--font); color:var(--ink); }
h1 { font-size:28px; font-weight:600; line-height:1.5; letter-spacing:-.7px; text-wrap:balance; }
h2 { font-size:18px; font-weight:600; letter-spacing:-.3px; }
h3 { font-weight:500; line-height:1.65; }
.page-top { margin-bottom:24px; align-items:center; }
.page-top p { margin:6px 0 0; }
.muted { color:var(--muted); font-size:13px; line-height:1.8; }
.button { min-height:37px; border:1px solid #d8ddcb; background:var(--paper); color:#526044; padding:8px 14px; border-radius:7px; font-size:11px; font-weight:500; box-shadow:none; }
.button:hover { border-color:#aab896; background:#edf0e2; }
.button.primary { background:var(--green); border-color:var(--green); color:var(--linen); }
.button.primary:hover { background:#293a26; border-color:#293a26; }
.button.ghost { background:transparent; }
.button.danger { color:var(--red); border-color:#e2cdc2; background:#fff8ef; }
.button:disabled { opacity:.42; cursor:not-allowed; box-shadow:none; }
.hero { isolation:isolate; background:#38412d; border:0; border-radius:12px; padding:30px 34px; min-height:260px; grid-template-columns:1fr; margin-bottom:0; overflow:hidden; }
.hero:before { content:''; position:absolute; inset:0; z-index:-2; background:url('/static/homecoming-background.webp') center 57%/cover no-repeat; }
.hero:after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#243120ee,#28341fcd 40%,#29361b20 100%); }
.hero>div:first-child { max-width:680px; }
.hero .eyebrow { color:#d9c797; font-size:11px; letter-spacing:.4px; }
.hero h2 { color:#fff8e8; font-family:var(--font); font-size:28px; line-height:1.5; margin:10px 0 12px; font-weight:600; letter-spacing:.1px; }
.hero p { color:#e0dfcb; font-size:12px; line-height:1.9; max-width:520px; margin-bottom:20px; }
.hero-art { display:none; }
.agent-form { background:#fffaf0; border:1px solid #f6efdb; border-radius:8px; padding:6px 6px 6px 14px; gap:8px; max-width:570px; box-shadow:none; }
.agent-form:focus-within { outline:2px solid var(--brass); outline-offset:3px; }
.agent-form input { font-size:12px; color:#3e5134; background:transparent; outline:none; }
.agent-form input::placeholder { color:#858872; }
.agent-form .button { flex-shrink:0; }
.metrics { gap:0; margin:0 0 28px; padding:21px 0 23px; border-bottom:1px solid #d8ddca; }
.metric { border:0; border-right:1px solid #d8ddca; border-radius:0; background:transparent; padding:1px 26px; box-shadow:none; }
.metric:first-child { padding-left:3px; }
.metric:last-child { border-right:0; }
.metric:before { content:none; }
.metric-label { color:#66735a; font-size:12px; }
.metric-number { color:#3e5034; font-family:var(--font); font-size:29px; font-weight:500; line-height:1.6; letter-spacing:-.6px; font-variant-numeric:tabular-nums; }
.metric-number small { color:#858d77; font-size:10px; margin-left:7px; font-weight:400; }
.metric-foot { color:#858a79; font-size:11px; }
.grid { gap:22px; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
.grid.equal { grid-template-columns:repeat(2,minmax(0,1fr)); }
.panel { padding:22px 24px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:22px; box-shadow:none; }
.panel-head { margin-bottom:14px; }
.panel-head h2 { color:#46563b; font-size:15px; }
.panel-head .muted { font-size:10px; color:#768367; }
.task-row { border-color:#e8ebdd; padding:15px 0; }
.task-row h3 { color:#495a3f; font-size:13px; }
.task-check { width:19px; height:19px; border:1px solid #c6d0b5; background:#f6f8ee; border-radius:5px; flex-shrink:0; margin-top:3px; }
.task-meta { color:#7c8670; font-size:11px; line-height:1.9; }
.task-actions { gap:6px; margin-top:9px; }
.task-actions .button { padding:3px 9px; min-height:27px; border-radius:5px; font-size:10px; }
.badge { font-size:10px; border-radius:4px; padding:3px 7px; background:#edf1e1; color:#657b4d; }
.badge.warn { background:#f4ecda; color:#92743e; }
.badge.red { background:#f6e8df; color:#9b5d49; }
.badge.gray { background:#efefe5; color:#858a73; }
.risk { border:0; border-bottom:1px solid #e6e5d6; border-radius:0; background:transparent; padding:12px 0 12px 19px; margin:0; position:relative; }
.risk:before { content:''; width:5px; height:5px; background:#b2965e; border-radius:50%; position:absolute; left:1px; top:21px; }
.risk:last-child { border-bottom:0; }
.risk strong { font-size:12px; color:#6d7155; font-weight:500; }
.risk small { color:#8b8f77; font-size:11px; }
.scene-grid { gap:0; border:1px solid #dce2cc; border-radius:8px; overflow:hidden; }
.scene-card { background:#f6f7ed; border:0; border-right:1px solid #dce2cc; border-radius:0; padding:18px 15px; transform:none; }
.scene-card:last-child { border-right:0; }
.scene-card:hover { transform:none; background:#e9eddb; }
.scene-symbol { display:block; width:25px; height:25px; color:#82926b; margin-bottom:16px; }
.scene-symbol svg { width:100%; height:100%; }
.scene-card strong { color:#526644; font-size:12px; font-weight:500; }
.scene-card small { color:#859073; font-size:10px; line-height:1.8; }
.notice { background:#f5f0df; border:1px solid #e8dfc3; border-radius:7px; color:#8c794d; font-size:11px; padding:12px 15px; line-height:1.9; }
.notice.error { background:#f9ede4; border-color:#efd5c4; color:#9d6048; }
.cards { gap:18px; }
.record-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:23px; }
.record-card h3 { font-size:15px; color:#4b6040; }
.record-card p { font-size:12px; line-height:1.9; color:#7c8770; }
.record-card .card-icon { color:#8c9f75; }
.card-icon { display:inline-flex; width:27px; height:27px; align-items:center; }
.card-icon svg { width:100%; height:100%; }
.record-card .button { margin:13px 6px 0 0; }
.data-list { gap:8px; color:#697d56; font-size:11px; }
.data-list span { color:#90977e; min-width:80px; }
.member-avatar { color:#627a4a; background:#e9efda; border:1px solid #d9e1c7; border-radius:50%; width:44px; height:44px; font:17px var(--font); }
[data-view="members"] #main>.cards:has(.member-avatar)>.record-card { display:grid; grid-template-columns:44px 1fr; column-gap:16px; padding:22px; align-content:start; }
[data-view="members"] .record-card>.member-avatar { grid-column:1; grid-row:1 / 4; margin:2px 0 0; }
[data-view="members"] .record-card>.member-avatar~h3 { grid-column:2; margin:0; }
[data-view="members"] .record-card>.member-avatar~p { grid-column:2; margin:3px 0 10px; font-size:11px; }
[data-view="members"] .record-card>.member-avatar~.badge { grid-column:2; justify-self:start; }
th { background:#f3f5e9; color:#81916e; font-size:10px; font-weight:500; padding:12px; }
td { color:#6d7d5c; font-size:12px; padding:15px 12px; border-color:#e4e8d8; }
tbody tr:hover { background:#f7f9f0; }
.empty { color:#8c967e; background:transparent; font-size:12px; line-height:1.9; padding:34px 18px; }
.trip-header { border:0; background:#3b4830; border-radius:10px; padding:27px 30px; position:relative; overflow:hidden; }
.trip-header h2 { color:#f9f4df; font-family:var(--font); font-size:26px; font-weight:500; letter-spacing:0; margin:8px 0 12px; }
.trip-header .eyebrow { color:#c9bc8e; font-size:10px; letter-spacing:.3px; }
.trip-header .muted { color:#bec6aa; font-size:12px; }
.trip-header .button { background:#f8f5e8; border-color:#f8f5e8; color:#4c5e3a; }
.trip-header .button.primary { background:#c9b981; color:#303c25; border-color:#c9b981; }
.trip-summary { display:flex; gap:35px; position:absolute; right:38px; top:48px; color:#f6f1dc; }
.trip-summary>div { display:flex; flex-direction:column; gap:8px; }
.trip-summary b { font-size:37px; line-height:1.2; font-weight:400; font-variant-numeric:tabular-nums; }
.trip-summary span { color:#bdc4a8; font-size:11px; }
.timeline-stop { border-color:#d8e0c8; padding-bottom:23px; }
.timeline-stop:before { width:7px; height:7px; background:#899f6e; border:2px solid var(--paper); outline:1px solid #c3d0ae; left:-4px; }
.timeline-stop small { font-size:10px; color:#849275; }
.timeline-stop h3 { color:#526a42; font-size:12px; }
.plan-card { border:1px solid #e0e5d3; border-radius:8px; padding:22px; background:#fffef8; box-shadow:none; }
.plan-card.selected { border-color:#a5b78d; background:#f6f8ed; box-shadow:inset 0 2px #879f6b; }
.plan-stats { border-color:#dfe5cf; gap:22px; color:#829171; flex-wrap:wrap; font-size:10px; }
.plan-stats strong { font:500 22px/1.9 var(--font); color:#516b3c; font-variant-numeric:tabular-nums; }
.approval { background:#f0f0e4; color:#899077; font-size:10px; padding:5px 9px; }
.approval.done { color:#69864d; background:#e9f0da; }
.section-note { color:#859175; font-size:10px; line-height:1.9; }
progress { width:100%; height:5px; margin:7px 0 12px; display:block; accent-color:#8caa69; border:0; }
progress::-webkit-progress-bar { background:#eaf0dd; border-radius:8px; }
progress::-webkit-progress-value { background:#8caa69; border-radius:8px; }
dialog { background:var(--paper); border:1px solid #e0e2d0; border-radius:12px; color:var(--ink); padding:28px; box-shadow:0 22px 90px #202c2433; }
dialog::backdrop { background:#27332088; backdrop-filter:blur(5px); }
.dialog-heading { padding-bottom:16px; margin-bottom:20px; border-bottom:1px solid #e5e8da; }
.dialog-heading h2 { font-size:19px; color:#4c6440; }
label { color:#738565; font-size:12px; }
input,select,textarea { background:#f7f8ef; border:1px solid #dce3ce; border-radius:7px; color:#4f6641; font-size:12px; padding:11px 12px; }
input:focus,select:focus,textarea:focus { outline:2px solid #bac99d; outline-offset:1px; border-color:#9fb680; }
textarea { min-height:110px; }
.form-actions { padding-top:17px; margin-top:17px; border-top:1px solid #e5e8da; }
#toast { background:var(--night); color:var(--linen); border:1px solid #71865b; border-radius:8px; font-size:12px; box-shadow:0 9px 25px #25321f26; }
.file-upload { background:#f1f5e5; border-color:#bfcda9; border-radius:8px; padding:24px; }
.trace { background:#f1f5e5; border:1px solid #dce5c9; border-radius:7px; color:#728c57; font-size:11px; }
footer { padding:6px 38px 25px; color:#8f997f; font-size:10px; }
/* Login and workspace use the same identity, typography and paper surfaces. */
.welcome-screen.login { background:var(--bg); }
.welcome-stage { background:var(--night); border-radius:12px; box-shadow:none; }
.welcome-brand,.welcome-brand-mark { font-size:21px; }
.welcome-brand-mark { font:bold 30px Georgia,serif; }
.welcome-story h1 { font-family:var(--font); letter-spacing:0; font-weight:600; }
.welcome-primary,.welcome-top-cta { border-radius:7px; background:var(--linen); border-color:var(--linen); color:var(--green); box-shadow:none; }
.welcome-primary:hover,.welcome-top-cta:hover { background:#e8dcb9; border-color:#e8dcb9; box-shadow:none; }
.welcome-caption { color:#8f997f; }
.welcome-dialog { background:var(--paper); border-color:var(--line); }
.welcome-dialog h2 { color:var(--ink); }
.welcome-dialog .identity { background:transparent; border-color:#dce3ce; border-radius:7px; padding:14px; }
.welcome-dialog .identity:hover { background:#eff3e4; border-color:#a3b98a; }
.welcome-dialog .member-avatar { font-family:var(--font); }
.welcome-dialog-symbol { background:#edf3df; color:#849c6c; border-radius:8px; }
.welcome-dialog .muted,.welcome-demo-note { color:#849175; }
.welcome-about .welcome-primary { background:var(--green); border-color:var(--green); color:var(--linen); }
.welcome-about-step { border-color:var(--line); }
.welcome-about-step b { color:var(--green); }
.welcome-about-step p { color:var(--muted); }
@media(min-width:1500px) { main { padding-top:35px; } .hero { min-height:275px; padding:32px 38px; } .hero h2 { font-size:32px; } }
@media(max-width:1100px) { aside { width:205px; padding-left:12px; padding-right:12px; } .workspace { margin-left:205px; } main { padding:26px; } .workspace>header { padding:0 26px; } .hero { padding:27px; } .grid { grid-template-columns:1fr; } .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .metric { padding:0 18px; } .metric-foot { font-size:9px; } footer { padding-left:26px; padding-right:26px; } }
@media(max-width:800px) and (min-width:701px) { .hero h2 { font-size:25px; } .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:15px; } .metric:nth-child(2) { border-right:0; } .metric:nth-child(3) { padding-left:3px; } }
@media(max-width:1000px) and (min-width:701px) { .trip-summary { position:static; margin-top:20px; padding-top:17px; border-top:1px solid #c5cba52b; } .trip-summary b { font-size:25px; } }
@media(max-width:700px) {
 aside { width:62px; padding:20px 7px 10px; } .workspace { margin-left:62px; } aside .brand { padding:0; font-size:0; gap:0; } .brand-mark { width:35px; height:35px; flex-shrink:0; }
 #nav { margin-top:23px; gap:6px; } #nav a { padding:11px 0; min-height:43px; border-radius:6px; } .nav-group { display:none; } .nav-icon { width:19px; height:19px; }
 .workspace>header { padding:0 14px; height:60px; } .user-pill { font-size:10px; padding:7px 9px; } .header-right { gap:9px; }
 main { padding:24px 15px; } h1 { font-size:23px; letter-spacing:-.4px; } .page-top { gap:14px; flex-wrap:wrap; margin-bottom:22px; } .page-top p { font-size:11px; } .page-top .button { min-height:35px; font-size:10px; padding:7px 11px; }
 .hero { padding:23px 19px; min-height:0; border-radius:9px; display:block; } .hero:before { background-position:60% center; } .hero:after { background:#28371fcd; } .hero h2 { font-size:25px; } .hero p { font-size:11px; } .hero .eyebrow { font-size:10px; } .hero-art { display:none; }
 .agent-form { flex-wrap:wrap; padding:7px; } .agent-form input { flex-basis:100%; min-height:36px; padding:8px 5px; font-size:11px; } .agent-form .button { width:100%; }
 .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 0; padding:20px 0; margin-bottom:22px; } .metric { padding:0 15px; } .metric:nth-child(2) { border:0; } .metric:nth-child(3) { padding-left:3px; } .metric-label { font-size:10px; } .metric-number { font-size:27px; } .metric-foot { font-size:9px; }
 .panel { padding:19px 16px; margin-bottom:20px; border-radius:8px; } .panel-head { flex-wrap:wrap; gap:9px; } .panel-head h2 { font-size:14px; } .grid.equal,.cards { grid-template-columns:1fr; } .task-row { gap:9px; } .task-row h3 { font-size:12px; } .task-row .badge { font-size:9px; } .task-actions .button { min-height:33px; }
 .scene-grid { grid-template-columns:1fr; } .scene-card { padding:16px; border-right:0; border-bottom:1px solid #dce2cc; } .scene-card:last-child { border-bottom:0; } .scene-symbol { float:left; margin:2px 14px 0 0; } .scene-card small { font-size:10px; }
 .trip-header { padding:23px 19px; } .trip-header h2 { font-size:24px; } .trip-summary { position:static; margin-top:21px; padding-top:17px; border-top:1px solid #c5cba52b; gap:35px; } .trip-summary b { font-size:25px; } .toolbar .button { flex-grow:1; } .toolbar input,.toolbar select { width:100%; }
 .plan-card { padding:18px 15px; } .plan-card .split-title { flex-wrap:wrap; gap:10px; } .plan-stats { gap:15px; } .plan-stats strong { font-size:21px; }
 .record-card { padding:21px; } dialog { padding:22px; } footer { padding:0 15px 23px; } .welcome-brand { font-size:18px; } .welcome-brand-mark { font-size:25px; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }