.feeding-calculator{color-scheme: light; --ink: #193e32; --muted: #62766b; --green: #245c46; --line: #dce5db; --cream: #f4f5ec; --corn: #d6ad50; --hay: #99ac76;}
.feeding-calculator *{box-sizing: border-box;}
.feeding-calculator{margin: 0px; background: var(--cream); color: var(--ink); font: 16px / 1.6 system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;}
.feeding-calculator{max-width: 1100px; margin: auto; padding: 28px 30px 36px;}
.feeding-calculator header{display: flex; justify-content: space-between; align-items: center; margin-bottom: 42px;}
.feeding-calculator .brand{display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: 0.03em;}
.feeding-calculator .brand-mark{display: grid; place-items: center; width: 34px; height: 34px; background: var(--green); color: white; border-radius: 10px;}
.feeding-calculator .tag{border: 1px solid rgb(206, 219, 203); border-radius: 30px; padding: 4px 13px; font-size: 13px;}
.feeding-calculator .eyebrow{font-size: 11px; letter-spacing: 0.19em; color: var(--muted); font-weight: 600;}
.feeding-calculator h1{font-size: clamp(28px, 4.5vw, 44px); letter-spacing: -0.04em; margin: 6px 0px 8px; line-height: 1.25;}
.feeding-calculator h2{font-size: 19px; margin: 0px;}
.feeding-calculator h3{font-size: 15px; margin: 0px; font-weight: 500;}
.feeding-calculator p{margin: 10px 0px;}
.feeding-calculator .intro>p{color: var(--muted);}
.feeding-calculator .demo{display: flex; gap: 15px; align-items: start; background: rgb(245, 237, 218); border: 1px solid rgb(232, 216, 174); color: rgb(119, 93, 37); padding: 13px 17px; border-radius: 12px; margin: 24px 0px 22px; font-size: 13px;}
.feeding-calculator .demo b{white-space: nowrap;}
.feeding-calculator .layout{display: grid; grid-template-columns: 310px 1fr; gap: 22px;}
.feeding-calculator .input-panel,.feeding-calculator .results{background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 20px; padding: 25px;}
.feeding-calculator .label{display: block; font-size: 15px; font-weight: 600;}
.feeding-calculator .weight-field{display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--green); padding: 5px 0px 10px; margin: 10px 0px 14px;}
.feeding-calculator .weight-field input{font-size: 48px; font-weight: 600; color: var(--green); width: 100%; min-width: 0px; border: 0px; padding: 0px; background: transparent; line-height: 1.2;}
.feeding-calculator .weight-field>span{white-space: nowrap; font-size: 13px; color: var(--muted);}
.feeding-calculator input,.feeding-calculator select,.feeding-calculator button{font: inherit;}
.feeding-calculator input:focus-visible,.feeding-calculator select:focus-visible,.feeding-calculator button:focus-visible,.feeding-calculator summary:focus-visible,.feeding-calculator a:focus-visible{outline: 3px solid #dbb550; outline-offset: 3px;}
.feeding-calculator button{cursor: pointer; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; padding: 9px 12px; min-height: 44px;}
.feeding-calculator button:hover{background: rgb(240, 244, 239);}
.feeding-calculator .presets{display: grid; grid-template-columns: repeat(4,1fr); gap: 5px;}
.feeding-calculator .presets button{font-size: 12px; padding: 6px;}
.feeding-calculator .presets button.active{background: var(--green); color: white; border-color: var(--green);}
.feeding-calculator .spaced{margin-top: 24px;}
.feeding-calculator select{display: block; width: 100%; padding: 11px 10px; border: 1px solid var(--line); border-radius: 9px; background: white; margin: 9px 0px 14px; color: var(--ink);}
.feeding-calculator .muted{color: var(--muted);}
.feeding-calculator .small{font-size: 12px;}
.feeding-calculator .primary{display: flex; justify-content: space-between; align-items: center; background: var(--green); color: white; border: 0px; width: 100%; margin-top: 25px; padding: 13px 17px; font-weight: 600;}
.feeding-calculator .primary:hover{background: rgb(23, 63, 48);}
.feeding-calculator .section-top{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px;}
.feeding-calculator .section-top>span{font-size: 12px;}
.feeding-calculator .amounts{display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 27px 0px 22px;}
.feeding-calculator .feed-dot{display: block; width: 23px; height: 5px; border-radius: 3px; margin-bottom: 12px;}
.feeding-calculator .supplement{background: var(--green);}
.feeding-calculator .corn{background: var(--corn);}
.feeding-calculator .forage{background: var(--hay);}
.feeding-calculator .amount{display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 7px 0px 0px;}
.feeding-calculator .amount b{font-size: 34px; line-height: 1.25; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;}
.feeding-calculator .amount span,.feeding-calculator article small{font-size: 12px; color: var(--muted);}
.feeding-calculator .mixbar{display: flex; width: 100%; height: 9px; overflow: hidden; border-radius: 20px;}
.feeding-calculator .ratio{font-size: 12px; color: var(--muted);}
.feeding-calculator .target-section{margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);}
.feeding-calculator .targets{display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 13px;}
.feeding-calculator .targets>div{display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 5px;}
.feeding-calculator .targets span{width: 100%; font-size: 12px; color: var(--muted);}
.feeding-calculator .targets b{font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums;}
.feeding-calculator .targets small{font-size: 11px; color: var(--muted);}
.feeding-calculator .result-foot{margin: 18px 0px 0px;}
.feeding-calculator .settings,.feeding-calculator .method{border-top: 1px solid rgb(211, 222, 206); margin-top: 28px; padding-top: 19px;}
.feeding-calculator summary{cursor: pointer; min-height: 44px; font-weight: 600;}
.feeding-calculator summary>span+span{margin-left: 18px; font-weight: 400;}
.feeding-calculator .settings>p,.feeding-calculator .method p{font-size: 13px; color: var(--muted); max-width: 900px;}
.feeding-calculator .feed-settings{display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin: 20px 0px;}
.feeding-calculator .feed-settings fieldset{border: 0px; margin: 0px; padding: 0px; min-width: 0px;}
.feeding-calculator .feed-settings legend{font-weight: 600; margin-bottom: 10px;}
.feeding-calculator .feed-settings label{display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; margin: 8px 0px;}
.feeding-calculator .feed-settings input{width: 90px; min-height: 42px; border: 1px solid var(--line); border-radius: 7px; padding: 7px; background: white; color: var(--ink); font-variant-numeric: tabular-nums;}
.feeding-calculator .settings-actions{display: flex; flex-wrap: wrap; align-items: center; gap: 16px;}
.feeding-calculator .settings-actions button{font-size: 13px;}
.feeding-calculator .method-content{padding: 0px 0px 4px;}
.feeding-calculator .sources{display: flex; flex-wrap: wrap; gap: 18px; margin-top: 15px;}
.feeding-calculator .sources a{color: var(--green); font-size: 13px;}
.feeding-calculator footer{color: var(--muted); font-size: 12px; text-align: center; margin-top: 35px;}
.feeding-calculator #error{background: rgb(251, 239, 234); color: rgb(157, 59, 43); padding: 14px; border-radius: 10px; margin: 18px 0px; font-size: 14px;}
.feeding-calculator [hidden]{display: none !important;}
@media (max-width:760px){.feeding-calculator{padding: 20px 18px;}
.feeding-calculator .layout{grid-template-columns: 1fr;}
.feeding-calculator header{margin-bottom: 28px;}
.feeding-calculator .demo{display: block;}
.feeding-calculator .demo span{display: block; margin-top: 5px;}
.feeding-calculator .input-panel,.feeding-calculator .results{padding: 22px;}
.feeding-calculator .feed-settings{grid-template-columns: 1fr;}
.feeding-calculator .feed-settings fieldset{border-bottom: 1px solid var(--line); padding-bottom: 15px;}
.feeding-calculator .feed-settings input{width: 120px;}
.feeding-calculator .amount b{font-size: 30px;}
.feeding-calculator .weight-field input{font-size: 42px;}
.feeding-calculator summary>span+span{display: block; margin: 4px 0px 0px;}
.feeding-calculator .targets b{font-size: 20px;}}
@media (max-width:370px){.feeding-calculator{padding: 16px 12px;}
.feeding-calculator .input-panel,.feeding-calculator .results{padding: 17px;}
.feeding-calculator .amounts{gap: 8px;}
.feeding-calculator .amount b{font-size: 27px;}}
.feeding-calculator .corn-breakdown{padding: 12px; background: rgb(245, 246, 236); border-radius: 9px; color: var(--ink);}
.feeding-calculator input[readonly]{background: rgb(237, 242, 235); color: var(--muted);}
.feeding-calculator .feed-product-card{display: flex; flex-wrap: wrap; align-items: center; gap: 10px 25px; padding: 15px 18px; background: rgb(230, 238, 227); border-radius: 12px; margin-top: 23px;}
.feeding-calculator .feed-product-card span{font-size: 13px; color: var(--muted);}
.feeding-calculator .count-field{display: flex; align-items: center; gap: 12px; margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px;}
.feeding-calculator .count-field input{width: 100%; min-width: 0px; border: 0px; background: transparent; color: var(--green); font-size: 30px; font-weight: 600;}
.feeding-calculator .total-banner{display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 13px; background: rgb(234, 241, 231); border-radius: 10px; font-size: 13px;}
.feeding-calculator .per-head{display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 14px 0px;}
.feeding-calculator .per-head>div{display: flex; flex-direction: column; gap: 4px;}
.feeding-calculator .per-head span,.feeding-calculator .per-head small{font-size: 12px; color: var(--muted);}
.feeding-calculator .per-head strong{font-size: 16px;}
.feeding-calculator .results,.feeding-calculator .amounts article{min-width: 0px;}
.feeding-calculator .amount b{overflow-wrap: anywhere; font-size: clamp(22px, 3vw, 34px);}
@media (max-width:760px){.feeding-calculator .feed-product-card{display: block;}
.feeding-calculator .feed-product-card span{display: block; margin-top: 5px;}
.feeding-calculator .amount b{font-size: clamp(20px, 6vw, 30px);}
.feeding-calculator .per-head strong{font-size: 14px;}}
.tools-page{padding-bottom:64px}.feeding-calculator{max-width:none;padding:4px 0 0;background:transparent}.feeding-calculator h1{font-size:clamp(27px,3.4vw,40px)}.feeding-calculator .intro>p{font-size:15px}.feeding-calculator .intro .eyebrow{margin:0}.feeding-calculator .layout{grid-template-columns:310px minmax(0,1fr)}.feeding-calculator .results{box-shadow:0 8px 32px #173f3505}.feeding-calculator .settings{margin-top:32px}.feeding-calculator .method{margin-bottom:12px}.feeding-calculator .per-head strong{overflow-wrap:anywhere}.feeding-calculator .feed-settings input{flex-shrink:0}
@media(max-width:760px){.feeding-calculator{padding:0}.feeding-calculator .layout{grid-template-columns:1fr}.feeding-calculator h1{font-size:clamp(26px,6.6vw,36px)}.tools-page{padding-bottom:36px}}