/* ManoryHub Beta 1 – mobile-first application shell. No template vendor required. */
:root {
  --mh-ink: #18392f;
  --mh-green: #244d41;
  --mh-green-2: #376c5c;
  --mh-sage: #e4eee7;
  --mh-cream: #f8f7f3;
  --mh-paper: #fffefd;
  --mh-muted: #5c6d65;
  --mh-line: #dde7df;
  --mh-clay: #be7b56;
  --mh-shadow: 0 22px 70px rgba(23, 62, 48, .08);
}
html { scroll-behavior: smooth; }
body.mh-body {
  margin: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--mh-ink);
  background: var(--mh-cream);
  line-height: 1.6;
}
.mh-page { width: min(1190px, calc(100% - 38px)); margin-inline: auto; }
.mh-navbar { min-height: 79px; background: rgba(255, 254, 253, .98); border-bottom: 1px solid var(--mh-line); z-index: 1020; }
.mh-nav-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.mh-brand { display: flex; align-items: center; gap: 10px; color: var(--mh-ink); font-size: 1.42rem; font-weight: 750; letter-spacing: -.045em; text-decoration: none; }
.mh-brand:hover { color: var(--mh-green); }
.mh-brand strong { color: #488474; font-weight: 760; }
.mh-brand-dot { color: var(--mh-clay); }
.mh-brand-icon { display: inline-grid; place-items: center; border-radius: 13px; width: 41px; height: 41px; color: #fff; background: var(--mh-green); font-size: 1.38rem; }
.mh-nav-content { gap: 8px; }
.mh-nav-links { margin-left: auto; }
.mh-nav-links .nav-link, .mh-nav-system .nav-link { font-size: .9rem; color: var(--mh-ink); font-weight: 570; padding-inline: 13px !important; }
.mh-nav-links .nav-link:hover { color: var(--mh-green-2); }
.mh-nav-auth, .mh-nav-register { display: flex; align-items: center; }
.mh-nav-auth .btn, .mh-nav-register .btn { border-radius: 40px; padding: 8px 19px; font-weight: 650; font-size: .9rem; }
.mh-nav-auth .btn { background: var(--mh-green); color: white; border-color: var(--mh-green); }
.mh-nav-auth .btn:hover { background: #183b31; color: #fff; }
.mh-nav-register .btn { background: var(--mh-sage); color: var(--mh-green); }
.mh-nav-toggle { border: 1px solid var(--mh-line); padding: 4px 8px; }
.mh-content { min-height: 67vh; }
.mh-hero { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); align-items: center; gap: clamp(32px,5vw,84px); padding-block: 95px 100px; }
.mh-eyebrow { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .12em; color: var(--mh-green-2); font-size: .71rem; font-weight: 800; }
.mh-eyebrow i { font-size: 1.1rem; }
.mh-hero h1 { font-size: clamp(2.45rem, 5.15vw, 4.65rem); line-height: 1.07; font-weight: 780; letter-spacing: -.054em; margin: 20px 0 22px; }
.mh-hero h1 span { color: #4b8775; }
.mh-lead { color: var(--mh-muted); font-size: clamp(1.07rem,1.8vw,1.22rem); line-height: 1.8; max-width: 590px; }
.mh-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 33px; }
.mh-primary, .mh-secondary { display: inline-flex; justify-content: center; align-items: center; gap: 10px; border-radius: 13px; padding: 13px 21px; font-weight: 680; text-decoration: none; font-size: .94rem; transition: transform .18s ease, background .18s ease; }
.mh-primary { background: var(--mh-green); color: white; border: 1px solid var(--mh-green); }
.mh-primary:hover { background: #173e33; color: white; transform: translateY(-2px); }
.mh-secondary { background: var(--mh-paper); border: 1px solid var(--mh-line); color: var(--mh-green); }
.mh-secondary:hover { color: var(--mh-green); background: var(--mh-sage); }
.mh-promise { display: flex; gap: 8px; margin-top: 24px; color: #697b6f; font-size: .83rem; align-items: flex-start; }
.mh-promise i { color: var(--mh-green-2); font-size: 1rem; }
.mh-mock { background: var(--mh-paper); border: 1px solid #e5e9df; border-radius: 24px; padding: clamp(21px, 2.7vw, 35px); box-shadow: var(--mh-shadow); position: relative; }
.mh-mock::before { content: ''; position: absolute; z-index: -1; inset: 26px -17px -22px 22px; border-radius: 27px; background: var(--mh-sage); transform: rotate(2.5deg); }
.mh-mock-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mh-mock-logo { font-weight: 720; font-size: .95rem; display: flex; align-items: center; gap: 10px; }
.mh-mock-logo i { background: var(--mh-sage); padding: 9px; border-radius: 12px; color: var(--mh-green); }
.mh-mock-pill { background: #f6ece4; color: #936040; border-radius: 20px; padding: 4px 12px; font-size: .74rem; font-weight: 760; }
.mh-mock-title { font-size: 1.61rem; font-weight: 790; letter-spacing: -.035em; margin-top: 30px; }
.mh-mock-subtitle { color: var(--mh-muted); font-size: .86rem; margin-bottom: 21px; }
.mh-mock-tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; margin-bottom: 17px; }
.mh-mock-tiles > div { display: flex; flex-direction: column; gap: 3px; background: #f0f5ef; padding: 20px; border-radius: 15px; }
.mh-mock-tiles i { font-size: 1.55rem; color: var(--mh-green); margin-bottom: 12px; }
.mh-mock-tiles strong { font-size: .94rem; }
.mh-mock-tiles small { font-size: .76rem; color: #698174; }
.mh-mock-feed { display: flex; align-items: center; gap: 11px; padding: 14px 2px; border-bottom: 1px solid #ecf0e9; }
.mh-mock-feed > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; line-height: 1.5; }
.mh-mock-feed strong { font-size: .85rem; }
.mh-mock-feed small { font-size: .73rem; color: var(--mh-muted); }
.mh-mock-feed > .bi-chevron-right { color: #a6b5ab; }
.mh-mock-feed-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #dcebe1; color: var(--mh-green); }
.mh-mock-feed-icon-terra { background: #f6e8de; color: var(--mh-clay); }
.mh-mock-footer { margin-top: 18px; font-size: .75rem; color: #87978d; text-align: center; }
.mh-section { padding-block: 40px 85px; }
.mh-section-intro { max-width: 620px; }
.mh-section h2, .mh-callout h2 { font-size: clamp(1.8rem,3.4vw,2.85rem); font-weight: 770; line-height: 1.18; letter-spacing: -.04em; margin: 14px 0; }
.mh-section-intro p, .mh-callout p { color: var(--mh-muted); font-size: 1rem; }
.mh-features { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 30px; }
.mh-feature, .mh-panel { background: var(--mh-paper); border: 1px solid var(--mh-line); padding: 28px 24px; border-radius: 18px; }
.mh-feature > span, .mh-panel-icon { display: inline-grid; place-items: center; height: 46px; width: 46px; background: var(--mh-sage); border-radius: 12px; color: var(--mh-green); font-size: 1.28rem; margin-bottom: 17px; }
.mh-feature h3, .mh-panel h2 { font-size: 1.05rem; font-weight: 780; letter-spacing: -.015em; margin-bottom: 9px; }
.mh-feature p, .mh-panel p { color: var(--mh-muted); font-size: .89rem; line-height: 1.7; margin-bottom: 0; }
.mh-callout { display: flex; align-items: center; justify-content: space-between; gap: 25px; background: #e8f0e8; border-radius: 25px; padding: clamp(24px, 4vw, 52px); margin-bottom: 45px; }
.mh-callout > div:first-child { max-width: 760px; }
.mh-callout-icon { flex-shrink: 0; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: #d0e5d7; color: var(--mh-green); font-size: 3.7rem; }
.mh-beta-note, .mh-next-step { display: flex; align-items: flex-start; gap: 12px; color: #697d70; font-size: .87rem; padding-bottom: 35px; }
.mh-beta-note > i, .mh-next-step > i { font-size: 1.2rem; color: var(--mh-green-2); }
.mh-dashboard { padding-block: 67px 60px; }
.mh-dashboard-heading { display: flex; justify-content: space-between; align-items: start; gap: 28px; margin-bottom: 32px; }
.mh-dashboard-heading h1 { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 690px; font-weight: 780; line-height: 1.15; letter-spacing: -.045em; margin: 14px 0; }
.mh-dashboard-heading p { max-width: 670px; color: var(--mh-muted); }
.mh-work-badge { display: flex; align-items: center; gap: 8px; flex-shrink: 0; background: #e9f0e8; padding: 11px 14px; border-radius: 12px; color: var(--mh-green); font-size: .8rem; font-weight: 670; }
.mh-dashboard-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.mh-panel { padding: 28px; box-shadow: 0 10px 40px rgba(25, 65, 47, .035); }
.mh-panel-feature { border-color: #c3ded0; background: #f3f8f2; }
.mh-status { display: inline-block; margin-top: 22px; padding: 6px 12px; border-radius: 20px; background: #edf1ee; color: var(--mh-muted); font-size: .72rem; font-weight: 650; }
.mh-next-step { padding: 22px 24px; border: 1px solid var(--mh-line); background: var(--mh-paper); border-radius: 14px; margin-top: 24px; color: var(--mh-muted); }
.mh-next-step strong { color: var(--mh-ink); }
.mh-footer { border-top: 1px solid var(--mh-line); background: #fffefd; padding-block: 26px; }
.mh-footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--mh-muted); font-size: .78rem; }
.mh-footer strong { color: var(--mh-green); font-size: .94rem; margin-right: 6px; }
.mh-footer-note { color: #839087; }
.mh-dev-debug { position: fixed; right: 14px; bottom: 14px; z-index: 9999; }
/* Login is loaded asynchronously by the existing xajax dispatcher. */
.mh-content .form-signin { background: #fffefd; max-width: 440px; padding: 35px; margin: 55px auto 85px; border: 1px solid var(--mh-line); border-radius: 20px; box-shadow: var(--mh-shadow); }
.mh-content .form-signin h2 { font-weight: 760; color: var(--mh-ink); }
.mh-content .form-signin .form-floating { margin-block: 12px; }
.mh-content .form-signin .btn-success { background: var(--mh-green); border-color: var(--mh-green); }
.mh-content .form-signin .btn-success:hover { background: #173e33; }
.mh-content .form-signin .btn-danger { background: white; color: var(--mh-green); border: 1px solid var(--mh-line); }
@media(max-width: 991px) {
  .mh-nav-inner { justify-content: space-between; }
  .mh-nav-content { width: 100%; padding: 14px 0 22px; }
  .mh-nav-links, .mh-nav-system { margin: 0; }
  .mh-nav-auth, .mh-nav-register { margin-block: 7px; }
  .mh-hero { padding-block: 68px 78px; grid-template-columns: 1fr; gap: 38px; }
  .mh-mock { max-width: 650px; width: 100%; margin: 0 auto; }
  .mh-features { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width: 620px) {
  .mh-page { width: min(100% - 30px, 1190px); }
  .mh-navbar { min-height: 67px; }
  .mh-brand { font-size: 1.26rem; }
  .mh-brand-icon { height: 37px; width: 37px; }
  .mh-hero { padding-block: 56px 66px; }
  .mh-hero h1 { font-size: 2.55rem; }
  .mh-actions { align-items: stretch; flex-direction: column; }
  .mh-primary,.mh-secondary { width: 100%; }
  .mh-mock::before { inset: 22px -7px -12px 10px; }
  .mh-section { padding-block: 26px 50px; }
  .mh-features { grid-template-columns: 1fr; }
  .mh-feature { padding: 23px; }
  .mh-callout-icon { display: none; }
  .mh-callout { border-radius: 17px; margin-bottom: 30px; }
  .mh-dashboard { padding-block: 43px 50px; }
  .mh-dashboard-heading { flex-direction: column; }
  .mh-dashboard-grid { grid-template-columns: 1fr; }
  .mh-footer-inner { flex-direction: column; }
  .mh-content .form-signin { padding: 25px 20px; margin: 30px auto 65px; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .mh-primary, .mh-secondary { transition: none; } }