*{box-sizing:border-box}
:root{
  --green:#28aa47;
  --green-dark:#116b31;
  --green-soft:#eef8e9;
  --text:#233628;
  --muted:#75827a;
  --line:#d5e9d1;
  --orange:#f18b24;
  --danger:#dc4d4d;
  --shadow:0 10px 26px rgba(38,104,44,.10);
}
html{
  min-height:100%;
  background:#7fd34f;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 50% -5%,rgba(255,255,255,.82),transparent 33%),
    linear-gradient(180deg,#c9f4ac 0%,#9be76e 42%,#75d348 100%);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI","Microsoft YaHei",Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
button,input,select{font:inherit}
button{cursor:pointer}

.app-shell{
  width:100%;
  max-width:474px;
  margin:0 auto;
  padding:
    calc(env(safe-area-inset-top,0px) + 26px)
    14px
    calc(env(safe-area-inset-bottom,0px) + 26px);
}
.app-header{
  text-align:center;
  padding:7px 6px 20px;
}
.brand-line{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  color:var(--green-dark);
  font-size:28px;
  line-height:1.05;
  font-weight:950;
  letter-spacing:-.7px;
}
.brand-icon{font-size:33px}
.brand-sub{
  margin-top:7px;
  color:#4d7e58;
  font-size:13px;
}

.tabbar{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:16px;
}
.tab{
  min-width:0;
  height:52px;
  border:1px solid rgba(255,255,255,.85);
  border-radius:19px;
  padding:0 8px;
  background:rgba(255,255,255,.84);
  color:var(--green-dark);
  font-size:15px;
  font-weight:900;
  white-space:nowrap;
  box-shadow:0 5px 13px rgba(54,122,53,.06);
}
.tab.active{
  border-color:transparent;
  background:linear-gradient(135deg,#239f41,#2fb24b);
  color:#fff;
  box-shadow:0 8px 18px rgba(21,126,46,.18);
}
.hidden{display:none!important}

.panel{
  width:100%;
  max-width:100%;
  overflow:hidden;
  margin:0 0 15px;
  padding:20px 17px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:28px;
  background:rgba(255,255,255,.975);
  box-shadow:var(--shadow);
}
.panel-heading,.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.panel h1,.section-head h1{
  margin:2px 0 0;
  color:var(--green-dark);
  font-size:26px;
  line-height:1.08;
  font-weight:950;
  letter-spacing:-.6px;
}
.panel h2,.section-head h2{
  margin:0;
  color:var(--green-dark);
  font-size:22px;
  font-weight:950;
}
.eyebrow{
  color:#8da58f;
  font-size:10px;
  font-weight:950;
  letter-spacing:1.55px;
}
.mini-corn{font-size:33px}
.desc{
  margin:9px 0 18px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

.field{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  margin:0 0 14px;
}
.field.compact{margin-bottom:14px}
.field label,.tiny-label{
  display:block;
  margin:0 0 7px;
  color:#3a4e3e;
  font-size:14px;
  font-weight:850;
}

/* Robust iOS Safari control sizing */
input,select{
  display:block;
  box-sizing:border-box!important;
  inline-size:100%!important;
  width:100%!important;
  min-inline-size:0!important;
  min-width:0!important;
  max-inline-size:100%!important;
  max-width:100%!important;
  height:50px;
  margin:0;
  padding:0 14px;
  border:1.5px solid #c7e5c0;
  border-radius:16px;
  outline:none;
  background:#fcfefb;
  color:#183b23;
  font-size:16px;
  overflow:hidden;
}
input[type="time"]{
  padding-left:14px;
  padding-right:12px;
}
select{
  padding-right:42px;
}
input:focus,select:focus{
  border-color:#5fc669;
  box-shadow:0 0 0 3px rgba(65,183,80,.09);
}

/* Calculator specifically: everything aligns to the exact same inner width */
.calc-panel .field,
.calc-panel .primary-btn,
.calc-panel .land-summary,
.calc-panel .calc-table{
  width:100%;
  max-width:100%;
}
.calc-panel input,
.calc-panel select{
  width:100%!important;
  max-width:100%!important;
}
.primary-btn{
  width:100%;
  max-width:100%;
  height:52px;
  border:0;
  border-radius:17px;
  background:linear-gradient(135deg,#25a843,#36b955);
  color:#fff;
  font-size:17px;
  font-weight:950;
  box-shadow:0 8px 17px rgba(44,171,72,.17);
}
.primary-btn:active,.push-btn:active,.secondary-btn:active,.mini-btn:active{transform:scale(.985)}

.land-summary{
  margin:13px 0 0;
  color:var(--green-dark);
  text-align:center;
  font-size:13px;
  line-height:1.45;
  font-weight:850;
}
.calc-table{
  margin-top:16px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
}
.calc-row{
  display:grid;
  grid-template-columns:.82fr 1.09fr 1.09fr;
  align-items:center;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.calc-row:last-child{border-bottom:0}
.calc-row>div{padding:14px 4px}
.calc-head{
  background:#eaf6e7;
  color:var(--green-dark);
  font-size:13px;
  font-weight:950;
}
.result-time{
  color:#13813a;
  font-size:17px;
  font-weight:950;
}

/* Reminder form: approved proportions.
   Plant time is deliberately smaller, crop duration wider. */
.two-col{
  display:grid!important;
  grid-template-columns:minmax(0,38%) minmax(0,62%)!important;
  gap:10px!important;
  width:100%;
  max-width:100%;
}
.two-col>.field{
  width:100%;
  min-width:0;
  overflow:hidden;
}
.two-col input,.two-col select{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
.two-col input[type="time"]{
  text-align:center;
  padding-left:8px;
  padding-right:8px;
  font-size:15px;
}
.two-col select{
  font-size:15px;
  padding-left:12px;
  padding-right:36px;
}

.count-pill,.soft-pill{
  flex:0 0 auto;
  padding:7px 11px;
  border-radius:999px;
  background:#edf8e9;
  color:var(--green-dark);
  font-size:12px;
  font-weight:950;
}

/* Rest time exactly like mockup: title, then two equal fields and centered hyphen */
.rest-card{
  display:block;
  width:100%;
  max-width:100%;
  margin:2px 0 14px;
  padding:13px 14px 14px;
  border:1px solid var(--line);
  border-radius:17px;
  background:#f8fcf5;
  overflow:hidden;
}
.rest-label{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:10px;
}
.rest-icon{font-size:24px;flex:0 0 auto}
.rest-label strong{
  display:block;
  color:#314737;
  font-size:14px;
  font-weight:900;
}
.rest-label small{
  display:block;
  margin-top:2px;
  color:#839086;
  font-size:10px;
  line-height:1.3;
}
.rest-inputs{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr)!important;
  align-items:center;
  gap:6px;
  width:100%;
  max-width:100%;
}
.rest-inputs input{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:44px;
  padding:0 7px;
  text-align:center;
  font-size:14px;
  background:#fff;
}
.dash{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:44px;
  color:#7d887f;
  font-size:16px;
  font-weight:900;
  line-height:1;
}

.save-msg{
  height:20px;
  margin-top:7px;
  color:#16823a;
  text-align:center;
  font-size:13px;
  font-weight:850;
}

/* Push */
.push-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  margin-top:8px;
  padding:12px;
  border-radius:17px;
  background:#fff5df;
}
.push-left{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.push-bell{font-size:24px;flex:0 0 auto}
.push-title{
  color:#4c4027;
  font-size:14px;
  line-height:1.25;
  font-weight:950;
}
.push-status{
  max-width:220px;
  margin-top:2px;
  overflow:hidden;
  color:#8b7a55;
  font-size:10.5px;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.push-btn{
  flex:0 0 auto;
  min-width:92px;
  height:40px;
  padding:0 12px;
  border:0;
  border-radius:14px;
  background:#ffac27;
  color:#fff;
  font-size:12px;
  font-weight:950;
}
.push-setup{
  margin-top:10px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fbfef9;
}
.push-setup summary{
  padding:11px 0;
  color:#5a6b5d;
  font-size:12px;
  font-weight:900;
}
.push-setup[open]{padding-bottom:11px}
.push-setup input{height:44px;font-size:12px}
.setup-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
}
.secondary-btn{
  width:100%;
  height:42px;
  border:0;
  border-radius:12px;
  background:#e9f5e7;
  color:var(--green-dark);
  font-size:12px;
  font-weight:950;
}
.secondary-btn.strong{background:var(--green);color:#fff}
.help{
  margin:8px 1px 0;
  color:#889288;
  font-size:10px;
  line-height:1.45;
}

/* Queue */
.compact-head{align-items:center}
.queue-panel{padding-bottom:15px}
.queue-next{
  margin-top:13px;
  padding:14px;
  border-radius:19px;
  background:linear-gradient(135deg,#177a38,#2aa54a);
  color:#fff;
}
.queue-next.empty{
  background:#f5faf2;
  color:#7e8c80;
  text-align:center;
}
.next-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.next-label{
  opacity:.75;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.1px;
}
.next-time{
  margin-top:2px;
  font-size:25px;
  line-height:1;
  font-weight:950;
}
.next-name{
  margin-top:7px;
  font-size:14px;
  font-weight:850;
}
.next-countdown{
  color:#ffdc84;
  font-size:19px;
  font-weight:950;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.queue-list{margin-top:4px}
.queue-item{
  display:grid;
  grid-template-columns:63px minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  padding:10px 2px;
  border-bottom:1px solid #edf2ea;
  font-size:12px;
}
.queue-item:last-child{border-bottom:0}
.queue-time{color:var(--green-dark);font-weight:950}
.queue-name{
  min-width:0;
  overflow:hidden;
  color:#455549;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.queue-left{
  color:var(--orange);
  font-weight:950;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Task cards */
.task-card{
  width:100%;
  margin:13px 0;
  padding:16px;
  border-radius:23px;
  background:#fff;
  box-shadow:var(--shadow);
}
.task-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  color:var(--green-dark);
  font-size:20px;
  font-weight:950;
}
.task-meta{
  margin:5px 0 8px;
  color:#7b897d;
  font-size:11px;
}
.harvest-line{
  display:grid;
  grid-template-columns:50px 80px 69px minmax(0,1fr);
  align-items:center;
  gap:4px;
  padding:8px 0;
  font-size:12.5px;
}
.season{color:#34473a;font-weight:850}
.harvest-time{color:#14823b;font-weight:950}
.awake{color:#16853e;font-weight:800}
.sleeping{color:var(--danger);font-weight:800}
.countdown{
  min-width:0;
  overflow:hidden;
  color:var(--orange);
  text-align:right;
  text-overflow:ellipsis;
  font-weight:950;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.countdown.urgent{color:#df3737}
.sync-note{
  margin-top:5px;
  color:#8a978b;
  font-size:10px;
}
.sync-note.ok{color:#2a9250}
.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}
.mini-btn{
  height:40px;
  border:0;
  border-radius:13px;
  font-size:12px;
  font-weight:950;
}
.replant{background:#ffb12e;color:#fff}
.delete{background:#eff0ef;color:#687069}

/* Very small screens only */
@media(max-width:390px){
  .app-shell{padding-left:10px;padding-right:10px}
  .panel{padding-left:14px;padding-right:14px}
  .brand-line{font-size:24px}
  .brand-icon{font-size:28px}
  .tab{font-size:14px}
  .two-col{
    grid-template-columns:minmax(0,37%) minmax(0,63%)!important;
    gap:8px!important;
  }
  .harvest-line{
    grid-template-columns:46px 73px 64px minmax(0,1fr);
    font-size:11.8px;
  }
  .countdown{font-size:11px}
  .push-status{max-width:155px}
}

/* Desktop preview */
@media(min-width:700px){
  .app-shell{max-width:520px}
}