:root {
  color-scheme: light;
  --pine: #173528;
  --deep-pine: #14261c;
  --forest: #264d3a;
  --leaf: #547b55;
  --soft-leaf: #ecf1e7;
  --paper: #f6f7f3;
  --white: #fff;
  --ink: #233128;
  --muted: #7a827b;
  --line: #e8ebe5;
  --sand: #f4eee1;
  --shadow: 0 8px 24px rgba(31, 50, 37, .055);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", "Segoe UI", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(102, 144, 94, .38); outline-offset: 2px; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 15; inset: 0 auto 0 0; width: 248px; display: flex; flex-direction: column; padding: 28px 18px 20px; color: #d7e0d8; background: var(--deep-pine); }
.brand { display: flex; align-items: center; gap: 11px; width: fit-content; color: white; text-decoration: none; padding: 0 8px; margin-bottom: 58px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(189, 219, 184, .28); border-radius: 12px; background: rgba(185, 212, 161, .08); color: #b2d098; }
.brand-mark svg { width: 29px; height: 29px; }
.brand-name { font-family: Manrope, sans-serif; font-size: 23px; font-weight: 800; letter-spacing: -1.4px; }
.brand-name span { color: #adc98f; }
.sidebar-label { padding: 0 13px; margin-bottom: 14px; color: #7f9385; font-size: 9px; font-weight: 700; letter-spacing: 1.6px; }
.side-nav { display: grid; gap: 6px; }
.nav-link { min-height: 46px; display: flex; align-items: center; gap: 13px; padding: 0 13px; border-radius: 8px; color: #aebeb2; text-decoration: none; font-size: 13px; font-weight: 500; transition: background .16s, color .16s; }
.nav-link:hover { color: #f7faf5; background: rgba(255, 255, 255, .06); }
.nav-link.is-active { color: white; background: #2b4a37; box-shadow: inset 3px 0 #a6c48a; }
.nav-icon { width: 19px; color: #93a795; font-size: 21px; text-align: center; line-height: 1; }
.nav-link.is-active .nav-icon { color: #c3d6ae; }
.nav-plus { font-size: 23px; }
.nav-count { min-width: 23px; margin-left: auto; padding: 4px 6px; border-radius: 20px; background: rgba(255,255,255,.09); color: #bccabb; font-size: 10px; text-align: center; }
.sidebar-spacer { flex: 1; }
.sidebar-tip { margin: 0 3px 18px; padding: 18px 15px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.035); }
.tip-orb { width: 29px; height: 29px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 9px; background: rgba(165,196,133,.15); color: #b9d496; font-size: 17px; }
.sidebar-tip p { margin: 0 0 16px; color: #e2e9e2; font-size: 12px; line-height: 1.65; }
.sidebar-tip p span { color: #91a294; }
.tip-button { width: 100%; display: flex; justify-content: space-between; padding: 10px 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.11); color: #d0e1bf; background: none; font-size: 11px; font-weight: 600; }
.privacy-note { display: flex; align-items: center; gap: 8px; padding: 0 8px; color: #87978a; font-size: 10px; }
.privacy-dot { width: 7px; height: 7px; border-radius: 50%; background: #a2c185; box-shadow: 0 0 9px #789862; }
.main-column { min-height: 100vh; margin-left: 248px; display: flex; flex-direction: column; }
.topbar { position: sticky; z-index: 10; top: 0; height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(28px, 5vw, 76px); border-bottom: 1px solid var(--line); background: rgba(250, 251, 248, .91); backdrop-filter: blur(12px); }
.topbar-title { display: flex; flex-direction: column; gap: 2px; }
.eyebrow { color: #859086; font-size: 9px; font-weight: 700; letter-spacing: 1.35px; }
.topbar-page { color: #26332a; font-family: Manrope, sans-serif; font-size: 14px; font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 19px; }
.today-label { color: #768077; font-size: 11px; }
.install-app-button { min-height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid #dce6d6; border-radius: 6px; background: #f5f8f0; color: #516b48; font-size: 9px; font-weight: 600; }
.install-app-button:hover { border-color: #b7c9ad; background: #edf4e8; }
.install-app-button > span { font-size: 14px; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #e2e8db; border-radius: 50%; background: #eff3e9; color: #698452; font-size: 13px; }
#main-content { flex: 1; width: 100%; max-width: 1600px; margin: 0 auto; padding: 32px clamp(28px, 5vw, 76px) 42px; }
.view { display: none; animation: view-in .25s ease both; }
.view.is-visible { display: block; }
@keyframes view-in { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.welcome-hero { min-height: 311px; display: grid; grid-template-columns: minmax(315px, .9fr) minmax(340px, 1.1fr); overflow: hidden; border: 1px solid #e3e9dd; border-radius: 12px; background: #f1f4eb; box-shadow: var(--shadow); }
.hero-copy { position: relative; z-index: 2; align-self: center; padding: 34px 0 34px 39px; }
.hero-kicker { display: flex; align-items: center; gap: 9px; color: #778a75; font-size: 8px; font-weight: 700; letter-spacing: 1.45px; }
.kicker-line { width: 19px; height: 1px; background: #9bb090; }
.hero-copy h1 { margin: 18px 0 12px; color: #1d3025; font-family: Manrope, sans-serif; font-size: clamp(30px, 3.3vw, 42px); font-weight: 600; letter-spacing: -2.1px; line-height: 1.18; }
.hero-copy h1 em { color: #708954; font-weight: 500; }
.hero-copy > p { max-width: 360px; margin: 0 0 20px; color: #717c72; font-size: 11px; line-height: 1.8; }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 15px; border: 1px solid transparent; border-radius: 6px; font-size: 11px; font-weight: 600; transition: background .15s, transform .15s, border-color .15s; }
.button:active { transform: translateY(1px); }
.button-primary { background: var(--pine); color: white; box-shadow: 0 4px 11px rgba(23, 53, 40, .13); }
.button-primary:hover { background: #254a37; }
.button-arrow { margin-left: 8px; color: #c6d7b6; }
.button-secondary { border-color: #e2e7df; background: #fff; color: #48564b; }
.button-secondary:hover { border-color: #b8c6b4; background: #fafcf8; }
.button-danger { border-color: #efd2ca; background: #fff5f2; color: #9a4938; }
.button-danger:hover { background: #fae9e4; }
.button-small { min-height: 34px; padding: 0 10px; font-size: 9px; }
.auth-view { min-height: calc(100vh - 220px); display: none; align-items: center; justify-content: center; padding: 16px 0; }
.auth-view.is-visible { display: flex; }
.auth-card, .legal-card { width: min(100%, 490px); padding: clamp(23px, 4vw, 38px); border: 1px solid #e5eae2; border-radius: 12px; background: white; box-shadow: var(--shadow); }
.auth-card-wide { width: min(100%, 650px); }
.auth-card h1, .legal-card h1 { margin: 8px 0 8px; color: #223229; font-family: Manrope, sans-serif; font-size: 28px; letter-spacing: -1px; }
.auth-card > p, .legal-card > p { color: #788279; font-size: 11px; line-height: 1.75; }
.auth-card .form-fields { margin-top: 21px; }
.auth-card .button { width: 100%; }
.auth-link { margin-top: 14px; }
.auth-switch { margin-top: 19px; text-align: center; }
.auth-switch button, .legal-card a { padding: 0; border: 0; background: none; color: #567347; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.field-full { grid-column: 1 / -1; }
.consent-check { display: flex; align-items: flex-start; gap: 10px; color: #68736a; font-size: 10px; font-weight: 400; line-height: 1.7; }
.consent-check input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--forest); }
.consent-check a { color: #55734a; font-weight: 600; }
.account-panel { margin: 0 0 16px; padding: 20px; border: 1px solid #e5eae2; border-radius: 10px; background: white; box-shadow: var(--shadow); }
.account-panel h2 { margin: 0 0 12px; color: #2b3b30; font-family: Manrope, sans-serif; font-size: 15px; letter-spacing: -.25px; }
.account-panel > p { color: #788279; font-size: 11px; line-height: 1.7; }
.account-panel .form-hint, .form-hint { margin: 9px 0 0; color: #879188; font-size: 10px; line-height: 1.6; }
.inline-form { display: flex; align-items: end; gap: 12px; }
.inline-form .field { flex: 1; }
.account-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stack-list { display: grid; gap: 9px; }
.person-row, .friend-card, .feed-card, .friend-profile-head { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 1px solid #e9ede7; border-radius: 8px; background: #fff; }
.person-avatar, .profile-avatar-large { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #edf2e9; color: #5e7850; font-size: 14px; font-weight: 700; }
.person-avatar img, .profile-avatar-large img { width: 100%; height: 100%; object-fit: contain; }
.person-info { min-width: 0; flex: 1; display: grid; gap: 4px; }
.person-info strong { overflow: hidden; color: #2e3c32; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.person-info small { color: #879188; font-size: 9px; line-height: 1.5; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
.icon-action { width: 31px; height: 31px; border: 1px solid #ecdedb; border-radius: 6px; background: #fff8f6; color: #a15443; font-size: 18px; }
.friend-card { display: block; }
.friend-card-head { padding: 0; border: 0; }
.permission-grid { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 13px 0 0 54px; padding-top: 11px; border-top: 1px solid #edf0eb; }
.permission-check { display: flex; align-items: center; gap: 6px; color: #59655b; font-size: 9px; cursor: pointer; }
.permission-check input { width: 15px; height: 15px; accent-color: var(--forest); }
.quiet-empty { margin: 0; padding: 12px; color: #89928a; font-size: 10px; line-height: 1.7; }
.feed-card { align-items: flex-start; }
.feed-card .person-info p { margin: 2px 0 0; color: #556258; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.feed-photo { width: 72px; height: 64px; flex: 0 0 auto; border-radius: 6px; background: #edf2e9; object-fit: contain; }
.profile-overview { display: flex; align-items: center; gap: 17px; margin: 0 0 16px; padding: 20px; border: 1px solid #e5eae2; border-radius: 10px; background: linear-gradient(130deg,#f3f6ef,#fff 76%); }
.profile-avatar-large { width: 72px; height: 72px; font-size: 22px; }
.profile-overview > div { min-width: 0; display: grid; gap: 5px; }
.profile-overview strong, .friend-profile-head strong { color: #28392d; font-family: Manrope, sans-serif; font-size: 15px; }
.profile-overview span, .friend-profile-head span { color: #899289; font-size: 10px; }
.profile-stat-line { margin-top: 5px; color: #727e73; font-size: 10px; }
.profile-stat-line b { color: #314638; }
.profile-stat-line i { margin: 0 4px; color: #a3aca3; font-style: normal; }
.profile-photo-edit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.profile-photo-edit img { width: 76px; height: 76px; border: 1px solid #e5eae2; border-radius: 12px; background: #f2f5ef; object-fit: contain; }
.profile-photo-edit input { max-width: 220px; padding: 8px; }
.profile-actions { display: flex; justify-content: flex-end; margin: 0 0 16px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.toggle-row span { display: grid; gap: 5px; }
.toggle-row strong { color: #35463a; font-size: 11px; }
.toggle-row small { max-width: 560px; color: #808a81; font-size: 10px; line-height: 1.6; }
.toggle-row input { width: 20px; height: 20px; accent-color: var(--forest); }
.danger-panel { border-color: #efdcd7; }
.import-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-color: #dfe8d8; background: #f8fbf5; }
.import-panel strong { color: #324536; font-size: 11px; }
.import-panel p { margin: 5px 0 0; color: #7c887d; font-size: 10px; line-height: 1.6; }
.friend-profile-head { justify-content: flex-start; margin-bottom: 14px; }
.friend-profile-head > div { display: grid; gap: 5px; }
.friend-stat-strip { display: flex; flex-wrap: wrap; gap: 8px 24px; color: #7b867c; font-size: 10px; }
.friend-stat-strip b { color: #324536; font-size: 14px; }
.friend-catch-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 12px; }
.friend-catch-card { overflow: hidden; border: 1px solid #e8ece6; border-radius: 8px; background: #fff; }
.friend-catch-photo { display: block; width: auto; height: auto; max-width: 100%; max-height: min(65vh, 420px); margin: 0 auto; object-fit: contain; background: #edf2e9; }
.catch-photo-empty { width: 100%; min-height: 170px; display: grid; place-items: center; color: #8b9c83; font-size: 33px; }
.friend-catch-copy { padding: 13px; }
.friend-catch-copy h3 { margin: 5px 0; color: #2b3b30; font-family: Manrope, sans-serif; font-size: 15px; }
.friend-catch-copy > strong { color: #536c48; font-size: 11px; }
.friend-catch-copy p { margin: 8px 0 0; color: #718075; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.friend-catch-copy .location-hidden { color: #9a8d79; }
.legal-view { display: none; }
.legal-view.is-visible { display: flex; justify-content: center; }
.legal-card { width: min(100%, 810px); }
.legal-card h2 { margin: 22px 0 5px; color: #304136; font-family: Manrope, sans-serif; font-size: 14px; }
.legal-placeholder { padding: 12px; border-left: 3px solid #c1a36f; background: #fbf7ed; color: #6f6044 !important; }
.comment-field { margin-top: 16px; }
.comment-field textarea { width: 100%; min-height: 76px; padding: 10px; resize: vertical; border: 1px solid #e6ebe3; border-radius: 5px; background: #fcfdfa; color: #38473c; font: 400 10px/1.6 "DM Sans", sans-serif; }
.comment-field textarea:focus-visible { outline: 3px solid rgba(102,144,94,.38); outline-offset: 2px; }
.voice-dictation-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.voice-dictation-button { min-height: 36px; padding: 0 11px; border: 1px solid #d9e4d4; border-radius: 6px; background: #f4f8f0; color: #496341; font-size: 10px; font-weight: 700; }
.voice-dictation-button:hover:not(:disabled) { border-color: #aabf9f; background: #edf4e7; }
.voice-dictation-button:disabled { cursor: not-allowed; opacity: .6; }
.voice-dictation-button.is-recording { border-color: #e4b9ad; background: #fff2ee; color: #a34a37; }
.voice-dictation-tools > span { color: #829083; font-size: 9px; font-weight: 400; line-height: 1.5; }
.voice-catch-panel { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 14px; border: 1px solid #dfe8d8; border-radius: 8px; background: linear-gradient(110deg,#f7faf4,#fff); }
.voice-catch-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #edf4e7; font-size: 20px; }
.voice-catch-copy h2 { margin: 0 0 4px; color: #324536; font-family: Manrope,sans-serif; font-size: 12px; }
.voice-catch-copy p { margin: 0; color: #7d897d; font-size: 9px; line-height: 1.5; }
.voice-catch-actions { display: flex; align-items: center; gap: 7px; }
.voice-catch-button, .voice-catch-cancel { min-height: 42px; padding: 0 12px; border: 1px solid #d4e0cd; border-radius: 6px; background: #f4f8f0; color: #496341; font: 700 10px "DM Sans",sans-serif; cursor: pointer; }
.voice-catch-button:hover:not(:disabled), .voice-catch-cancel:hover { border-color: #aabf9f; background: #edf4e7; }
.voice-catch-cancel { border-color: #e7d9d5; background: #fff8f6; color: #8b5144; }
.voice-catch-button:disabled { cursor: not-allowed; opacity: .6; }
.voice-catch-button.is-recording { border-color: #e4b9ad; background: #fff2ee; color: #a34a37; }
.voice-catch-panel.is-recording .voice-catch-icon { animation: voice-pulse 1.4s ease-in-out infinite; background: #fff0eb; }
.voice-catch-panel.is-processing .voice-catch-icon { animation: voice-pulse 1.4s ease-in-out infinite; background: #edf2fa; }
.voice-catch-status, .voice-catch-transcript, .voice-catch-privacy { grid-column: 2 / -1; margin: 0; color: #768378; font-size: 9px; line-height: 1.5; }
.voice-catch-transcript { padding: 8px 10px; border-left: 2px solid #94ae83; border-radius: 0 5px 5px 0; background: #f2f6ef; color: #334436; font-size: 10px; }
.voice-catch-privacy { color: #9aa398; font-size: 8px; }
@keyframes voice-pulse { 50% { box-shadow: 0 0 0 6px rgba(186,112,89,.12); transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .voice-catch-panel.is-recording .voice-catch-icon { animation: none; } }
.account-avatar { padding: 0; overflow: hidden; font-weight: 700; }
.account-avatar img { width: 100%; height: 100%; object-fit: contain; }
.hero-illustration { position: relative; min-height: 310px; overflow: hidden; background: linear-gradient(180deg, #e4eddf 0%, #e6eedf 51%, #c8d8c2 52%, #b9cebc 100%); }
.hero-illustration::after { position: absolute; inset: 0; content: ""; opacity: .3; background-image: radial-gradient(#fff 0.55px, transparent .55px); background-size: 5px 5px; pointer-events: none; }
.sun { position: absolute; top: 35px; right: 22%; width: 81px; height: 81px; border-radius: 50%; background: #f2dbac; opacity: .92; box-shadow: 0 0 0 17px rgba(240, 220, 178, .18), 0 0 0 36px rgba(240, 220, 178, .11); }
.distant-hill { position: absolute; inset: 87px -8% auto 27%; height: 97px; border-radius: 54% 46% 0 0 / 74% 70% 0 0; transform: rotate(-4deg); background: #a1b99b; }
.distant-hill::before { position: absolute; top: 17px; left: -57%; width: 98%; height: 83px; border-radius: 52% 48% 0 0 / 74% 70% 0 0; background: #adc1a4; content: ""; }
.near-hill { position: absolute; z-index: 1; inset: 119px -12% auto -7%; height: 94px; border-radius: 47% 53% 0 0 / 56% 49% 0 0; transform: rotate(3deg); background: #789773; }
.water { position: absolute; z-index: 2; inset: 187px -5% 0; border-top: 4px solid rgba(249,245,219,.68); background: linear-gradient(180deg, #a5c1af 0%, #adbfaa 100%); }
.water-lines { position: absolute; z-index: 3; right: -3%; height: 1px; background: rgba(241,244,222,.55); }
.water-lines-one { top: 215px; width: 59%; box-shadow: -144px 15px rgba(241,244,222,.45), 25px 27px rgba(241,244,222,.52), -65px 52px rgba(241,244,222,.39); }
.water-lines-two { top: 231px; right: 33%; width: 21%; opacity: .65; box-shadow: 60px 30px rgba(241,244,222,.5); }
.reeds { position: absolute; z-index: 4; bottom: 58px; display: flex; align-items: flex-end; gap: 4px; height: 74px; }
.reeds-left { left: 8%; }
.reeds-right { right: 3%; bottom: 52px; height: 87px; }
.reeds i { position: relative; width: 3px; height: 52px; border-radius: 50% 50% 0 0; transform-origin: bottom center; background: #657d5e; }
.reeds i:nth-child(2n) { height: 69px; transform: rotate(8deg); }
.reeds i:nth-child(3n) { height: 43px; transform: rotate(-8deg); }
.reeds i::before { position: absolute; top: -10px; left: -3px; width: 6px; height: 12px; border-radius: 50%; background: #7e8d60; content: ""; }
.hero-quote { position: absolute; z-index: 5; top: 34px; left: 14%; color: #465949; font-family: Manrope, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.6; }
.hero-quote > span { display: block; height: 17px; color: #7e9575; font-family: Georgia, serif; font-size: 27px; line-height: 1; }
.hero-quote small { display: block; margin-top: 8px; color: #657b66; font-family: "DM Sans", sans-serif; font-size: 7px; font-weight: 700; letter-spacing: 1px; }
.hero-coordinates { position: absolute; z-index: 5; right: 19px; bottom: 15px; display: flex; align-items: center; gap: 6px; color: #586d5c; font-size: 8px; font-weight: 600; letter-spacing: .5px; }
.coordinate-dot { width: 5px; height: 5px; border-radius: 50%; background: #768f69; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 29px 0 14px; }
.section-heading h2, .analytics-title h2 { margin: 4px 0 0; color: #27352b; font-family: Manrope, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -.4px; }
.text-button { display: inline-flex; align-items: center; gap: 9px; padding: 6px 0; border: 0; background: none; color: #627d59; font-size: 10px; font-weight: 600; }
.text-button span { font-size: 15px; }
.text-button:hover { color: #213c2b; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.stat-card { min-width: 0; padding: 16px 16px 13px; border: 1px solid #ebeee8; border-radius: 8px; background: #fff; box-shadow: 0 3px 12px rgba(31,50,37,.025); }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; font-size: 16px; }
.icon-sage { color: #65804f; background: #edf3e5; }
.icon-sand { color: #997947; background: #f7f0e3; }
.icon-blue { color: #668495; background: #edf3f3; }
.icon-rose { color: #96786d; background: #f5eeeb; }
.stat-period { color: #959e95; font-size: 7px; font-weight: 700; letter-spacing: 1px; }
.stat-value { margin-top: 14px; color: #223329; font-family: Manrope, sans-serif; font-size: 25px; font-weight: 700; letter-spacing: -.9px; line-height: 1.12; }
.stat-value small { color: #7b887b; font-family: "DM Sans", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.stat-caption { margin-top: 4px; color: #8a938a; font-size: 9px; }
.stat-rule { height: 1px; margin: 13px 0 9px; background: #f0f2ed; }
.stat-foot { color: #9aa39a; font-size: 8px; }
.tiny-wave { margin-right: 5px; color: #9daf90; font-size: 13px; }
.recent-heading { margin-top: 31px; }
.recent-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; }
.recent-card { display: flex; min-width: 0; min-height: 96px; padding: 9px; border: 1px solid #e9ede6; border-radius: 8px; background: #fff; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.recent-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.recent-photo { width: 74px; min-width: 74px; height: 76px; overflow: hidden; border-radius: 6px; background: linear-gradient(145deg,#e8efe0,#c5d5c3); }
.recent-photo img, .catch-thumb img, .detail-photos img { width: 100%; height: 100%; object-fit: contain; }
.photo-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: #80947a; font-size: 27px; }
.recent-info { min-width: 0; padding: 7px 8px; }
.recent-info strong, .recent-info span, .recent-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-info strong { color: #2c3930; font-family: Manrope, sans-serif; font-size: 11px; }
.recent-info span { margin-top: 6px; color: #758075; font-size: 9px; }
.recent-info small { margin-top: 8px; color: #9aa198; font-size: 8px; }
.empty-state { grid-column: 1 / -1; padding: 38px 20px; border: 1px dashed #dce3d8; border-radius: 9px; background: #fbfcfa; color: #7f8a7e; text-align: center; }
.empty-state .empty-icon { margin-bottom: 10px; color: #a0b294; font-size: 26px; }
.empty-state strong { display: block; color: #3c4d3f; font-family: Manrope, sans-serif; font-size: 13px; }
.empty-state p { max-width: 380px; margin: 7px auto 15px; font-size: 10px; line-height: 1.7; }
.page-intro { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 4px 0 24px; }
.page-intro h1 { margin: 6px 0 5px; color: #223229; font-family: Manrope, sans-serif; font-size: 29px; letter-spacing: -1.2px; }
.page-intro p { margin: 0; color: #7c867d; font-size: 11px; line-height: 1.7; }
.filter-panel { display: grid; grid-template-columns: minmax(190px, 1.55fr) minmax(137px, 1fr) minmax(115px, .76fr) minmax(115px, .76fr) minmax(160px, 1fr) 32px; gap: 8px; padding: 11px; border: 1px solid #e8ece5; border-radius: 8px; background: white; }
.filter-panel input, .filter-panel select { width: 100%; min-width: 0; height: 37px; padding: 0 9px; border: 1px solid #e8ece6; border-radius: 5px; background: #fcfdfb; color: #465148; font-size: 9px; }
.filter-panel input::placeholder { color: #9aa39b; }
.search-box { position: relative; }
.search-box > span { position: absolute; top: 6px; left: 10px; color: #829185; font-size: 20px; line-height: 1; transform: rotate(-15deg); }
.search-box input { padding-left: 33px; }
.weight-filter { display: flex; align-items: center; gap: 5px; }
.weight-filter span { color: #a0a89f; font-size: 9px; }
.weight-filter input { width: 50%; padding: 0 6px; }
.filter-reset { height: 37px; border: 1px solid #e8ece6; border-radius: 5px; background: #fcfdfb; color: #77857a; font-size: 17px; }
.filter-reset:hover { border-color: #c8d2c2; color: var(--pine); }
.results-line { display: flex; align-items: center; justify-content: space-between; margin: 17px 1px 10px; color: #8a948a; font-size: 10px; }
.sort-label { color: #9aa29a; font-size: 7px; font-weight: 700; letter-spacing: 1px; }
.sort-label span { color: #728c67; font-size: 12px; }
.catch-list { display: grid; gap: 9px; }
.catch-row { display: grid; grid-template-columns: 80px minmax(150px,1.18fr) minmax(100px,.8fr) minmax(115px,.9fr) minmax(115px,.92fr) 30px; align-items: center; gap: 13px; min-height: 88px; padding: 9px 13px 9px 9px; border: 1px solid #e9ede7; border-radius: 8px; background: white; cursor: pointer; transition: border .15s, box-shadow .15s, transform .15s; }
.catch-row:hover { transform: translateY(-1px); border-color: #d1ddcb; box-shadow: 0 5px 16px rgba(31,50,37,.045); }
.catch-thumb { width: 80px; height: 68px; overflow: hidden; border-radius: 5px; background: linear-gradient(145deg,#e8efe0,#c5d5c3); }
.row-main strong, .row-main span, .row-col strong, .row-col span, .row-lunar strong, .row-lunar span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-main strong { color: #29382e; font-family: Manrope,sans-serif; font-size: 11px; }
.row-main span, .row-col span, .row-lunar span { margin-top: 5px; color: #909a90; font-size: 9px; }
.row-col .weight-display { color: #33453a; font-family: Manrope,sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -.3px; }
.row-lunar strong, .row-col strong { color: #526352; font-size: 9px; font-weight: 600; }
.row-open { color: #94a094; font-size: 17px; text-align: center; }
.form-intro { margin-bottom: 21px; }
.quiet-button { min-height: 36px; padding: 0 11px; border: 1px solid #e1e7de; border-radius: 5px; background: #fff; color: #627165; font-size: 10px; }
.form-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(260px,.82fr); align-items: start; gap: 15px; }
.form-main-column { display: grid; gap: 12px; }
.form-card { min-width: 0; padding: 20px; border: 1px solid #e8ece5; border-radius: 8px; background: #fff; box-shadow: 0 3px 12px rgba(31,50,37,.025); }
.form-card-title { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.form-step { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #edf3e8; color: #6f8a5e; font-family: Manrope,sans-serif; font-size: 10px; font-weight: 800; }
.form-card-title h2 { margin: 0; color: #2a382e; font-family: Manrope,sans-serif; font-size: 13px; font-weight: 700; }
.form-card-title p { margin: 3px 0 0; color: #939c93; font-size: 9px; }
.form-fields { display: grid; gap: 13px; }
.form-fields.two-cols { grid-template-columns: 1fr 1fr; column-gap: 14px; }
.form-fields.bait-fields { grid-template-columns: 1fr 1fr; }
.field { position: relative; display: flex; min-width: 0; flex-direction: column; gap: 7px; color: #47544a; font-size: 10px; font-weight: 600; }
.field > span:first-child { display: flex; align-items: center; gap: 6px; }
.field b, .required-note b { color: #b9674e; }
.field input, .field select { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #e6ebe3; border-radius: 5px; background: #fcfdfa; color: #38473c; font-size: 10px; font-weight: 400; }
.field input::placeholder { color: #a0a9a1; }
.field small { margin-top: -2px; color: #98a197; font-size: 8px; font-weight: 400; line-height: 1.55; }
.optional { color: #a2aba2; font-size: 7px; font-weight: 700; letter-spacing: .6px; }
.unit-input { position: relative; }
.unit-input input { padding-right: 43px; }
.unit-input > span { position: absolute; top: 0; right: 10px; height: 38px; display: grid; place-items: center; color: #8c988c; font-size: 9px; font-weight: 500; }
.location-input-wrap { position: relative; }
.location-input-wrap > input { padding-right: 43px; }
.location-button { position: absolute; top: 3px; right: 3px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 4px; background: #edf3e8; color: #668258; font-size: 20px; }
.location-button:hover { background: #e2ecd9; }
.suggestions { position: absolute; z-index: 8; top: calc(100% + 4px); left: 0; right: 0; overflow: hidden; border: 1px solid #dfe7dc; border-radius: 6px; background: white; box-shadow: var(--shadow); }
.suggestion { width: 100%; padding: 10px 11px; border: 0; border-bottom: 1px solid #eff2ed; background: #fff; color: #455248; text-align: left; font-size: 9px; }
.suggestion:last-child { border-bottom: 0; }
.suggestion:hover { background: #f3f7ef; }
.suggestion small { display: block; margin-top: 4px; color: #919c91; font-size: 8px; }
.location-status { display: flex; gap: 7px; align-items: flex-start; padding: 9px 10px; border-radius: 5px; background: #f5f8f2; color: #7f8d7e; font-size: 8px; line-height: 1.5; }
.location-status > span:first-child { color: #729064; font-size: 13px; }
.photo-drop { position: relative; min-height: 99px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 1px dashed #d5dfd0; border-radius: 6px; background: #fbfcfa; color: #818d81; cursor: pointer; }
.photo-drop:hover, .photo-drop.is-dragging { border-color: #8eaa7c; background: #f3f7ef; }
.photo-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #edf3e8; color: #6d865d; font-size: 15px; }
.photo-drop strong { color: #52664f; font-size: 10px; }
.photo-drop > span:last-child { font-size: 8px; }
.photo-preview-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.photo-preview { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 5px; background: #f0f4eb; }
.photo-preview img { width: 100%; height: 100%; object-fit: contain; }
.photo-preview button { position: absolute; top: 4px; right: 4px; width: 21px; height: 21px; border: 0; border-radius: 50%; background: rgba(21,39,28,.8); color: white; font-size: 15px; line-height: 1; }
.form-hint { margin: 9px 0 0; color: #98a197; font-size: 8px; }
.form-side-column { display: grid; gap: 11px; }
.conditions-card { padding: 18px; }
.conditions-card .form-card-title { margin-bottom: 14px; }
.automatic-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 4px; background: #eff4e9; color: #69825a; font-size: 7px; font-weight: 700; letter-spacing: .6px; }
.sparkle { font-size: 11px; }
.conditions-explainer { margin: 11px 0 10px; color: #848f85; font-size: 9px; line-height: 1.7; }
.conditions-placeholder, .moon-preview { display: flex; align-items: center; gap: 10px; padding: 11px 10px; border: 1px solid #edf0ea; border-radius: 6px; background: #fcfdfa; }
.weather-sun, .moon-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #f4f0e5; color: #b0904f; font-size: 18px; }
.moon-icon { background: #f0f2ed; color: #738774; }
.conditions-placeholder strong, .moon-preview strong { display: block; color: #506151; font-size: 9px; }
.conditions-placeholder small, .moon-preview small { display: block; margin-top: 4px; color: #98a197; font-size: 7px; line-height: 1.55; }
.moon-preview { margin-top: 7px; }
.ph-field { margin-top: 13px; }
.data-privacy { display: flex; gap: 7px; margin-top: 13px; padding-top: 11px; border-top: 1px solid #edf0eb; color: #919a91; font-size: 8px; line-height: 1.6; }
.data-privacy > span { color: #79916d; font-size: 13px; }
.form-actions { display: grid; gap: 7px; }
.save-button { width: 100%; min-height: 45px; }
.save-button span { margin-left: auto; color: #c4d5b5; }
.delete-edit-button { width: 100%; min-height: 38px; border: 1px solid #ead8d2; border-radius: 5px; background: #fff; color: #a45847; font-size: 10px; }
.required-note { margin: 1px 0 0; color: #8c968c; font-size: 8px; text-align: right; }
.export-actions { display: flex; gap: 7px; }
.export-actions .button { min-height: 37px; padding: 0 10px; font-size: 9px; }
.dashboard-stats { margin-bottom: 15px; }
.analytics-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 13px; }
.analytics-card { min-width: 0; padding: 18px; border: 1px solid #e8ece5; border-radius: 8px; background: #fff; box-shadow: 0 3px 12px rgba(31,50,37,.025); }
.analytics-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.analytics-title h2 { font-size: 13px; }
.chart-legend { color: #849085; font-size: 8px; }
.chart-legend i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 2px; background: #89a676; }
.monthly-chart { height: 187px; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); align-items: end; gap: 7px; padding: 13px 4px 0; border-bottom: 1px solid #e9ede6; background: repeating-linear-gradient(to bottom, transparent 0, transparent 45px, #f1f3ef 46px); }
.yearly-chart { min-height: 187px; display: flex; align-items: end; justify-content: start; gap: 16px; overflow-x: auto; padding: 13px 4px 0; border-bottom: 1px solid #e9ede6; background: repeating-linear-gradient(to bottom, transparent 0, transparent 45px, #f1f3ef 46px); }
.year-column { height: 100%; min-width: 38px; display: flex; align-items: center; justify-content: end; flex-direction: column; gap: 7px; }
.year-bar-wrap { width: 100%; height: 142px; display: flex; align-items: center; justify-content: end; flex-direction: column; }
.year-bar { width: min(29px,100%); min-height: 3px; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg,#9bb385,#708a61); }
.year-label { padding-bottom: 7px; color: #929c91; font-size: 8px; }
.month-column { height: 100%; display: flex; align-items: center; justify-content: end; flex-direction: column; gap: 7px; min-width: 0; }
.month-bar-wrap { width: 100%; max-width: 28px; height: 142px; display: flex; justify-content: end; align-items: center; flex-direction: column; }
.month-bar { width: min(24px, 100%); min-height: 3px; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg,#9bb385,#708a61); transition: height .3s; }
.month-label { padding-bottom: 7px; color: #929c91; font-size: 7px; text-transform: capitalize; }
.breakdown-list { display: grid; gap: 14px; }
.breakdown-row { min-width: 0; }
.breakdown-row-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: #546155; font-size: 9px; }
.breakdown-row-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.breakdown-row-top span { flex-shrink: 0; color: #89948a; font-size: 8px; }
.breakdown-track { height: 4px; overflow: hidden; border-radius: 9px; background: #eff2ed; }
.breakdown-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg,#9bb486,#698860); }
.breakdown-empty { padding: 10px 0; color: #9ba49a; font-size: 9px; }
.moon-stats-card { grid-column: 1 / -1; }
.moon-stats-card .breakdown-list { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.catch-dialog { width: min(710px, calc(100% - 24px)); max-width: 710px; max-height: min(86vh, 850px); padding: 0; overflow: auto; border: 1px solid #e2e8df; border-radius: 11px; background: #fafbf8; box-shadow: 0 24px 90px rgba(18,34,23,.29); }
.catch-dialog::backdrop { background: rgba(17,31,21,.55); backdrop-filter: blur(3px); }
.install-dialog { position: relative; width: min(430px,calc(100% - 28px)); max-width: 430px; padding: 0; border: 1px solid #e2e8df; border-radius: 11px; background: #fafbf8; color: var(--ink); box-shadow: 0 24px 90px rgba(18,34,23,.29); }
.install-dialog::backdrop { background: rgba(17,31,21,.55); backdrop-filter: blur(3px); }
.install-dialog-inner { position: relative; padding: 25px; }
.install-dialog .dialog-close { top: 12px; right: 13px; background: #edf2e8; color: #56714e; border-color: #dfe8d9; }
.install-brand-mark { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 19px; border-radius: 11px; background: #eaf1e3; color: #628153; font-size: 27px; }
.install-dialog h2 { margin: 5px 0 7px; color: #25382b; font-family: Manrope,sans-serif; font-size: 22px; letter-spacing: -.6px; }
.install-intro { max-width: 340px; margin: 0; color: #778277; font-size: 10px; line-height: 1.65; }
.install-steps { display: grid; gap: 8px; margin-top: 19px; }
.install-step { display: grid; grid-template-columns: 25px 1fr; align-items: start; gap: 9px; padding: 11px; border: 1px solid #e8ece4; border-radius: 6px; background: white; }
.install-step-index { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #edf3e8; color: #678259; font-size: 9px; font-weight: 700; }
.install-step strong { display: block; color: #405244; font-size: 10px; }
.install-step span:last-child { display: block; margin-top: 4px; color: #879286; font-size: 9px; line-height: 1.5; }
.install-requirement { margin: 14px 0 0; padding: 10px; border-radius: 5px; background: #f2f5ee; color: #788474; font-size: 8px; line-height: 1.6; }
.install-requirement strong { color: #506448; }
.dialog-inner { position: relative; padding: 22px; }
.dialog-close { position: absolute; z-index: 2; top: 15px; right: 16px; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(25,45,31,.58); color: white; font-size: 21px; line-height: 1; }
.detail-hero-photo { height: 245px; overflow: hidden; border-radius: 7px; background: linear-gradient(145deg,#e8efe0,#c5d5c3); }
.detail-hero-photo img { width: 100%; height: 100%; object-fit: contain; }
.detail-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin: 19px 1px 17px; }
.detail-heading h2 { margin: 5px 0 4px; color: #28382c; font-family: Manrope,sans-serif; font-size: 23px; letter-spacing: -.7px; }
.detail-heading p { margin: 0; color: #7d897e; font-size: 10px; }
.detail-weight { color: #537248; font-family: Manrope,sans-serif; font-size: 23px; font-weight: 700; white-space: nowrap; }
.detail-weight small { font-size: 10px; font-weight: 500; }
.detail-photos { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 15px; }
.detail-photos button { width: 57px; height: 48px; flex: 0 0 auto; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 4px; background: #eef2e9; }
.detail-photos button.is-selected { border-color: #779365; }
.detail-photos button img { width: 100%; height: 100%; object-fit: contain; }
.detail-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 11px; }
.detail-metric { padding: 12px; border: 1px solid #e9ede7; border-radius: 6px; background: white; }
.detail-metric span { display: block; color: #909b90; font-size: 8px; }
.detail-metric strong { display: block; margin-top: 5px; overflow-wrap: anywhere; color: #465648; font-size: 10px; font-weight: 600; }
.detail-section { margin-top: 10px; padding: 15px; border: 1px solid #e9ede7; border-radius: 6px; background: white; }
.detail-section h3 { margin: 0 0 11px; color: #334437; font-family: Manrope,sans-serif; font-size: 11px; }
.detail-weather-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.detail-weather-item span { display: block; color: #909a91; font-size: 8px; }
.detail-weather-item strong { display: block; margin-top: 4px; color: #4a5c4d; font-size: 10px; font-weight: 600; }
.detail-note { color: #929b91; font-size: 9px; line-height: 1.65; }
.dialog-actions { display: flex; justify-content: end; gap: 8px; margin-top: 14px; }
.dialog-actions button { min-height: 37px; padding: 0 13px; border: 1px solid #e0e7dd; border-radius: 5px; background: #fff; color: #516253; font-size: 9px; font-weight: 600; }
.dialog-actions .detail-edit { border-color: var(--pine); background: var(--pine); color: white; }
.dialog-actions .detail-delete { border-color: #eddfdc; color: #a65c4d; }
.toast { position: fixed; z-index: 30; right: 24px; bottom: 22px; max-width: calc(100vw - 36px); padding: 12px 17px; border: 1px solid #d8e4d1; border-radius: 7px; background: #fafff6; color: #40583c; box-shadow: 0 8px 28px rgba(22,43,27,.16); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: none; }
.site-footer { display: flex; justify-content: space-between; gap: 15px; margin-top: auto; padding: 15px clamp(28px, 5vw, 76px) 18px; border-top: 1px solid #e9ede7; color: #a0a9a0; font-size: 7px; letter-spacing: .5px; }
.site-footer > span:last-child { letter-spacing: 0; }
.site-footer i { color: #a1b28f; font-style: normal; }
.footer-sparkle { color: #90a47c; }

@media (min-width: 1500px) {
  #main-content { padding-top: 42px; }
  .welcome-hero { min-height: 340px; }
  .hero-illustration { min-height: 339px; }
}
@media (max-width: 1190px) {
  .sidebar { width: 214px; }
  .main-column { margin-left: 214px; }
  #main-content { padding-right: 31px; padding-left: 31px; }
  .topbar, .site-footer { padding-right: 31px; padding-left: 31px; }
  .stat-grid { gap: 9px; }
  .stat-card { padding: 14px 12px 12px; }
  .filter-panel { grid-template-columns: minmax(160px,1.4fr) minmax(125px,1fr) minmax(104px,.75fr) minmax(104px,.75fr) minmax(147px,1fr) 31px; gap: 6px; }
  .form-layout { grid-template-columns: minmax(0,1.2fr) minmax(248px,.8fr); }
}
@media (max-width: 970px) {
  .welcome-hero { grid-template-columns: minmax(285px,.95fr) minmax(280px,1.05fr); }
  .hero-copy { padding-left: 27px; }
  .hero-copy h1 { font-size: 33px; }
  .stat-period { font-size: 6px; letter-spacing: .7px; }
  .catch-row { grid-template-columns: 65px minmax(135px,1.1fr) minmax(82px,.7fr) minmax(100px,.85fr) minmax(95px,.8fr) 20px; gap: 9px; }
  .catch-thumb { width: 65px; }
  .filter-panel { grid-template-columns: minmax(190px,1.4fr) minmax(142px,1fr) minmax(116px,.8fr) minmax(116px,.8fr) 32px; }
  .weight-filter { grid-column: 1 / 3; grid-row: 2; max-width: 230px; }
  .filter-reset { grid-column: 5; grid-row: 1; }
  .form-layout { grid-template-columns: minmax(0,1.1fr) minmax(230px,.9fr); gap: 10px; }
  .form-card { padding: 16px; }
}
@media (max-width: 760px) {
  .sidebar { inset: auto 0 0; width: 100%; height: 64px; flex-direction: row; justify-content: space-around; padding: 5px 7px calc(5px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.09); }
  .brand, .sidebar-label, .sidebar-spacer, .sidebar-tip, .privacy-note, .nav-count { display: none; }
  .side-nav { width: 100%; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .side-nav::-webkit-scrollbar { display: none; }
  .nav-link { min-width: 60px; min-height: 52px; flex: 1 0 60px; justify-content: center; flex-direction: column; gap: 3px; padding: 4px 2px; border-radius: 6px; font-size: 8px; }
  .nav-link.is-active { box-shadow: inset 0 2px #a6c48a; }
  .nav-icon { height: 21px; font-size: 19px; }
  .main-column { min-height: 100vh; margin: 0; padding-bottom: 65px; }
  .topbar { height: 56px; padding: 0 18px; }
  .topbar .eyebrow { font-size: 7px; }
  .topbar-page { font-size: 12px; }
  .topbar-right { gap: 10px; }
  .today-label { font-size: 9px; }
  .install-app-button { min-height: 28px; gap: 4px; padding: 0 7px; font-size: 8px; }
  .avatar { width: 28px; height: 28px; }
  #main-content { padding: 19px 17px 27px; }
  .welcome-hero { min-height: auto; grid-template-columns: 1fr; }
  .hero-copy { padding: 26px 22px 23px; }
  .hero-copy h1 { margin: 14px 0 8px; font-size: 32px; }
  .hero-copy > p { max-width: 430px; margin-bottom: 14px; font-size: 10px; }
  .button { min-height: 41px; }
  .hero-illustration { min-height: 193px; }
  .sun { top: 21px; width: 62px; height: 62px; }
  .distant-hill { top: 57px; height: 70px; }
  .near-hill { top: 87px; height: 59px; }
  .water { top: 130px; }
  .water-lines-one { top: 152px; }
  .water-lines-two { top: 168px; }
  .reeds { bottom: 28px; height: 59px; }
  .reeds-right { bottom: 26px; height: 63px; }
  .hero-quote { top: 20px; left: 14%; font-size: 11px; }
  .hero-quote > span { height: 13px; font-size: 21px; }
  .hero-quote small { margin-top: 4px; font-size: 6px; }
  .hero-coordinates { bottom: 8px; right: 10px; font-size: 7px; }
  .section-heading { margin-top: 22px; }
  .section-heading h2 { font-size: 14px; }
  .text-button { font-size: 9px; }
  .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .stat-card { padding: 13px 12px 10px; }
  .stat-value { margin-top: 11px; font-size: 23px; }
  .stat-foot { font-size: 7px; }
  .recent-grid { grid-template-columns: 1fr; gap: 7px; }
  .recent-card { min-height: 78px; }
  .recent-photo { width: 62px; min-width: 62px; height: 59px; }
  .recent-info { padding-top: 5px; }
  .recent-info span { margin-top: 4px; }
  .recent-info small { margin-top: 6px; }
  .page-intro { align-items: flex-start; flex-direction: column; margin-bottom: 18px; }
  .page-intro h1 { font-size: 25px; }
  .page-intro .button { width: 100%; }
  .filter-panel { grid-template-columns: 1fr 1fr 34px; gap: 6px; }
  .search-box { grid-column: 1 / 3; }
  #filter-species { grid-column: 1 / 3; grid-row: 2; }
  #filter-from { grid-column: 1; grid-row: 3; }
  #filter-to { grid-column: 2; grid-row: 3; }
  .weight-filter { grid-column: 1 / 3; grid-row: 4; max-width: none; }
  .filter-reset { grid-column: 3; grid-row: 1; }
  .filter-panel input, .filter-panel select, .filter-reset { height: 39px; }
  .results-line { margin-top: 14px; }
  .catch-row { grid-template-columns: 67px minmax(0,1fr) auto 18px; gap: 8px; min-height: 76px; padding: 7px; }
  .catch-thumb { width: 67px; height: 62px; grid-row: span 2; }
  .row-main { min-width: 0; }
  .row-main strong { font-size: 10px; }
  .row-main span { margin-top: 4px; font-size: 8px; }
  .row-col-location { display: none; }
  .row-col .weight-display { font-size: 13px; }
  .row-lunar { display: none; }
  .row-open { grid-row: span 2; }
  .form-intro { align-items: flex-start; }
  .quiet-button { align-self: flex-start; }
  .voice-catch-panel { grid-template-columns: 36px minmax(0,1fr); gap: 9px; padding: 12px; }
  .voice-catch-icon { width: 36px; height: 36px; }
  .voice-catch-actions { grid-column: 1 / -1; }
  .voice-catch-button { flex: 1; min-height: 46px; }
  .voice-catch-cancel { min-height: 46px; }
  .voice-catch-status, .voice-catch-transcript, .voice-catch-privacy { grid-column: 1 / -1; }
  .form-layout { grid-template-columns: 1fr; }
  .form-side-column { grid-row: 2; }
  .conditions-card { padding: 15px; }
  .form-main-column { grid-row: 1; }
  .form-fields.two-cols, .form-fields.bait-fields { gap: 12px 9px; }
  .form-card { padding: 15px; }
  .form-card-title { margin-bottom: 15px; }
  .form-fields.two-cols .field input, .form-fields.bait-fields .field input { font-size: 10px; }
  .export-actions { width: 100%; }
  .export-actions .button { flex: 1; }
  .dashboard-stats { margin-top: 0; }
  .analytics-grid { grid-template-columns: 1fr; gap: 8px; }
  .analytics-card { padding: 15px; }
  .monthly-chart { gap: 4px; }
  .moon-stats-card { grid-column: auto; }
  .moon-stats-card .breakdown-list { grid-template-columns: 1fr; }
  .site-footer { padding: 13px 17px; font-size: 6px; }
  .site-footer > span:last-child { max-width: 50%; text-align: right; }
  .dialog-inner { padding: 13px; }
  .install-dialog-inner { padding: 20px; }
  .detail-hero-photo { height: 185px; }
  .detail-heading { margin-top: 14px; }
  .detail-heading h2 { font-size: 18px; }
  .detail-weight { font-size: 18px; }
  .detail-metrics { grid-template-columns: 1fr 1fr; }
  .detail-weather-grid { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .auth-view { min-height: calc(100vh - 190px); }
  .auth-card { padding: 22px 18px; }
  .account-columns { grid-template-columns: 1fr; gap: 0; }
  .account-panel { padding: 15px; }
  .inline-form { align-items: stretch; flex-direction: column; }
  .inline-form .button { width: 100%; }
  .friend-card-head { flex-wrap: wrap; }
  .friend-card-head .row-actions { width: 100%; margin-left: 54px; justify-content: flex-start; }
  .permission-grid { margin-left: 0; gap: 10px 14px; }
  .friend-catch-grid { grid-template-columns: 1fr; }
  .catch-photo-empty { min-height: 210px; }
  .feed-card { gap: 8px; padding: 9px; }
  .feed-photo { width: 57px; height: 55px; }
  .profile-overview { align-items: flex-start; padding: 15px; gap: 12px; }
  .profile-avatar-large { width: 58px; height: 58px; }
  .profile-stat-line { line-height: 1.8; }
  .import-panel { align-items: stretch; flex-direction: column; }
  .import-panel .button { width: 100%; }
  .friend-stat-strip { display: grid; grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 370px) {
  #main-content { padding-right: 12px; padding-left: 12px; }
  .hero-copy { padding-right: 15px; padding-left: 15px; }
  .hero-copy h1 { font-size: 28px; }
  .hero-kicker { font-size: 7px; }
  .stat-period { font-size: 5px; }
  .form-card { padding: 12px; }
  .field { font-size: 9px; }
  .site-footer > span:last-child { display: none; }
}