:root { --green:#245c4c; --green-dark:#1d493e; --mint:#e5f0eb; --cream:#f7f3ea; --peach:#f1d8c4; --ink:#24342e; --muted:#718078; --line:#e3e8e4; --shadow:0 18px 45px rgba(29,73,62,.11); }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--cream); }
body { min-height:100vh; margin:0; color:var(--ink); font-family:"Noto Sans TC",sans-serif; background:radial-gradient(circle at 92% 2%,#daeae2 0,transparent 28%),radial-gradient(circle at 4% 86%,#f1ddca 0,transparent 30%),var(--cream); }
a,button { font:inherit; }
.hub-shell { width:min(100%,760px); min-height:100vh; margin:auto; padding:0 26px 34px; transition:opacity .25s ease; }
.loading .hub-shell { opacity:.12; pointer-events:none; animation:revealFailsafe .01s 6s forwards; }
.hub-header { height:88px; display:flex; align-items:center; justify-content:space-between; }
.hub-brand { display:flex; align-items:center; gap:10px; color:var(--green); text-decoration:none; }
.hub-brand>span { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:var(--cream); font-size: 21px; background:var(--green); }
.hub-brand p { margin:0; }.hub-brand strong,.hub-brand small { display:block; }.hub-brand strong { font-size: 20px; }.hub-brand small { margin-top:1px; font: 800 9px/1 "Nunito",sans-serif; letter-spacing:.16em; opacity:.65; }
.hub-profile { width:44px; height:44px; display:grid; place-items:center; overflow:hidden; border:3px solid white; border-radius:50%; color:white; font-weight:800; background:#c98667; box-shadow:0 5px 16px rgba(37,61,51,.16); }.hub-profile img { width:100%; height:100%; object-fit:cover; }
.hub-hero { padding:27px 0 25px; }.eyebrow { margin:0 0 10px; color:#a36e53; font: 800 12px/1 "Nunito",sans-serif; letter-spacing:.18em; }.hub-hero h1 { margin:0; color:var(--green-dark); font-size: clamp(33px, 6vw, 52px); line-height:1.25; letter-spacing:-.04em; }.hub-hero>p:last-child { max-width:560px; margin:13px 0 0; color:var(--muted); font-size: 15px; line-height:1.75; }
.entry-grid { display:grid; gap:14px; }.entry-card { position:relative; min-height:145px; display:grid; grid-template-columns:66px 1fr 38px; align-items:center; gap:15px; overflow:hidden; padding:24px 22px; border:1px solid rgba(255,255,255,.78); border-radius:25px 25px 8px 25px; color:var(--ink); text-decoration:none; box-shadow:var(--shadow); transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease; }.entry-card:hover { transform:translateY(-2px); box-shadow:0 22px 52px rgba(29,73,62,.15); }.entry-card.consumer { background:linear-gradient(135deg,#fff 40%,#e2f0e9); }.entry-card.owner { background:linear-gradient(135deg,#fff 40%,#f3dfcf); }.entry-card.sitter { background:linear-gradient(135deg,#fff 40%,#e5e1f1); }
.entry-icon { width:66px; height:66px; display:grid; place-items:center; border-radius:21px 21px 7px 21px; color:white; font-size: 33px; background:var(--green); }.owner .entry-icon { background:#aa7458; }.sitter .entry-icon { background:#6d668a; }.entry-copy small,.entry-copy strong,.entry-copy em { display:block; }.entry-copy small { margin-bottom:5px; color:#839088; font: 800 9px/1 "Nunito",sans-serif; letter-spacing:.14em; }.entry-copy strong { color:var(--green-dark); font-size: 22px; }.entry-copy em { margin-top:7px; color:var(--muted); font-size: 13px; line-height:1.5; font-style:normal; }.entry-arrow { width:35px; height:35px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--green); }.access-badge { position:absolute; top:13px; right:15px; padding:5px 8px; border-radius:999px; color:#986347; font-size: 9px; font-weight:700; background:#fff3ea; }.access-badge.open { color:var(--green); background:#e8f4ee; }
.entry-card.locked { filter:saturate(.45); opacity:.68; cursor:pointer; }.entry-card.locked .entry-arrow { color:#8b9691; background:#e8ebe9; }.entry-card.locked:hover { transform:none; box-shadow:var(--shadow); }
.team-panel { margin-top:17px; padding:17px 19px; border:1px solid rgba(44,107,88,.11); border-radius:18px; background:rgba(255,255,255,.7); backdrop-filter:blur(12px); }.team-panel,.team-panel>div { display:flex; align-items:center; justify-content:space-between; gap:12px; }.team-panel>div { justify-content:flex-start; }.team-mark { width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; color:var(--green); font-weight:800; background:var(--mint); }.team-panel p { margin:0; }.team-panel strong,.team-panel small { display:block; }.team-panel strong { font-size: 14px; }.team-panel small { margin-top:3px; color:var(--muted); font-size: 10px; line-height:1.5; }.team-panel button,.hub-error button { flex:0 0 auto; padding:10px 13px; border:0; border-radius:11px; color:white; font-size: 12px; font-weight:700; background:var(--green); cursor:pointer; }
footer { padding:28px 0 4px; color:#9aa29e; text-align:center; font-size: 9px; letter-spacing:.05em; }
.hub-loader,.hub-error { position:fixed; z-index:50; inset:0; display:grid; place-items:center; background:var(--cream); }.hub-loader { animation:hideLoaderFailsafe .01s 6s forwards; }.hub-loader>span { width:48px; height:48px; display:grid; place-items:center; margin:auto; border-radius:16px; color:white; background:var(--green); animation:pulse 1.2s infinite; }.hub-loader p { color:var(--muted); font-size: 13px; }.hub-error[hidden] { display:none; }.hub-error section { width:min(390px,calc(100% - 40px)); padding:30px; border-radius:22px; text-align:center; background:white; box-shadow:var(--shadow); }.hub-error section>span { width:46px; height:46px; display:grid; place-items:center; margin:auto; border-radius:15px; color:#a95d4f; font-weight:800; background:#f8e4df; }.hub-error h2 { margin:14px 0 7px; font-size: 22px; }.hub-error p { margin:0 0 18px; color:var(--muted); font-size: 13px; line-height:1.7; }.hub-toast { position:fixed; z-index:80; left:50%; bottom:25px; max-width:calc(100% - 36px); padding:11px 16px; border-radius:999px; color:white; font-size: 12px; background:#243e35; opacity:0; transform:translate(-50%,18px); transition:.2s; pointer-events:none; }.hub-toast.show { opacity:1; transform:translate(-50%,0); }
.hub-login { position:fixed; z-index:55; inset:0; display:grid; place-items:center; background:var(--cream); }.hub-login[hidden] { display:none; }.hub-login section { width:min(410px,calc(100% - 40px)); padding:32px 28px; border-radius:24px; text-align:center; background:white; box-shadow:var(--shadow); }.login-mark { width:54px; height:54px; display:grid; place-items:center; margin:0 auto 18px; border-radius:18px; color:white; background:var(--green); }.hub-login h2 { margin:0 0 9px; font-size: 24px; }.hub-login section>p:not(.eyebrow) { margin:0 0 20px; color:var(--muted); font-size: 13px; line-height:1.75; }.hub-login a,.hub-login button { display:block; width:100%; padding:13px 18px; border:0; border-radius:13px; color:white; text-decoration:none; font:inherit; font-size: 14px; font-weight:800; background:#06c755; cursor:pointer; }.hub-login small { display:block; margin-top:15px; color:#929c97; font-size: 10px; line-height:1.6; }
@keyframes pulse { 50% { transform:scale(.92); opacity:.75; } }
@keyframes revealFailsafe { to { opacity:1; pointer-events:auto; } }
@keyframes hideLoaderFailsafe { to { opacity:0; visibility:hidden; pointer-events:none; } }
@media (min-width:700px) { .hub-shell { padding-left:34px; padding-right:34px; }.entry-grid { grid-template-columns:repeat(2,1fr); }.entry-card.consumer { grid-column:1/-1; }.entry-card { grid-template-columns:60px 1fr 32px; min-height:155px; }.entry-icon { width:60px; height:60px; } }
@media (max-width:480px) { .hub-shell { padding:0 17px 25px; }.hub-header { height:74px; }.hub-hero { padding:21px 4px 20px; }.hub-hero h1 { font-size: 35px; }.entry-card { min-height:132px; grid-template-columns:54px 1fr 30px; gap:12px; padding:21px 16px; border-radius:21px 21px 7px 21px; }.entry-icon { width:54px; height:54px; border-radius:17px 17px 6px 17px; font-size: 28px; }.entry-copy strong { font-size: 20px; }.entry-copy em { font-size: 10px; }.team-panel { align-items:flex-start; flex-direction:column; }.team-panel button { width:100%; } }

/* Readable typography for the role portal. */
body { font-size: 18px; }
.hub-brand strong { font-size: 22px; }
.hub-brand small { font-size: 12px; }
.eyebrow { font-size: 14px; }
.hub-hero>p:last-child { font-size: 17px; }
.entry-copy small { font-size: 12px; }
.entry-copy strong { font-size: 24px; }
.entry-copy em { font-size: 16px; }
.access-badge { font-size: 13px; }
.team-panel strong { font-size: 16px; }
.team-panel small { font-size: 14px; }
.team-panel button,.hub-error button { font-size: 15px; }
footer { font-size: 12px; }
.hub-loader p { font-size: 16px; }
.hub-error p { font-size: 16px; }
.hub-toast { font-size: 15px; }
.hub-login section>p:not(.eyebrow) { font-size: 16px; }
.hub-login a,.hub-login button { font-size: 17px; }
.hub-login small { font-size: 14px; }

@media (max-width:480px) {
  .entry-copy strong { font-size: 22px; }
  .entry-copy em { font-size: 15px; }
}