:root {
  --ink:#112c3d;
  --muted:#60717c;
  --line:#dce5e9;
  --bg:#f4f7f8;
  --card:#fff;
  --main:#087f8c;
  --main2:#075b69;
  --ok:#178a50;
  --warn:#d58016;
  --danger:#bd3030;
  --shadow:0 10px 28px rgba(20,47,61,.09)
}

* {
  box-sizing:border-box
}

html {
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg)
}

body {
  margin:0
}

button,input,select,textarea {
  font:inherit
}

button,a {
  touch-action:manipulation
}

.hidden {
  display:none!important
}

.brand {
  display:flex;
  gap:10px;
  align-items:center;
  color:inherit;
  text-decoration:none;
  font-weight:800
}

.brand b {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:var(--main);
  color:#fff
}

.top {
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(16px,4vw,56px);
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:20
}

.top nav {
  display:flex;
  gap:22px;
  align-items:center
}

.top nav a {
  color:var(--ink);
  text-decoration:none;
  font-weight:700
}

.top .cta,.btn {
  border:0;
  border-radius:12px;
  padding:12px 18px;
  background:var(--main);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  cursor:pointer
}

.hero {
  min-height:560px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:50px;
  align-items:center;
  padding:70px clamp(20px,8vw,130px);
  background:linear-gradient(135deg,#effafa,#fff 55%,#eaf4f7)
}

.hero h1 {
  font-size:clamp(38px,6vw,72px);
  line-height:1.02;
  margin:14px 0 20px;
  letter-spacing:-2px
}

.hero p {
  font-size:20px;
  color:var(--muted);
  max-width:680px;
  line-height:1.6
}

.hero-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:24px;
  box-shadow:var(--shadow)
}

.hero-card header {
  display:flex;
  justify-content:space-between;
  margin-bottom:14px
}

.mini-task {
  padding:14px 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:8px 1fr auto;
  gap:12px;
  align-items:center
}

.mini-task i {
  width:8px;
  height:35px;
  border-radius:8px;
  background:var(--main)
}

.mini-task small {
  color:var(--muted)
}

.section {
  padding:70px clamp(20px,8vw,130px)
}

.section h2 {
  font-size:clamp(28px,4vw,44px);
  margin:0 0 30px
}

.feature-grid,.plans {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}

.feature,.plan {
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px
}

.feature h3,.plan h3 {
  margin:8px 0
}

.feature p,.plan p {
  color:var(--muted);
  line-height:1.55
}

.plan strong {
  font-size:34px
}

.footer {
  padding:28px clamp(20px,8vw,130px);
  background:var(--ink);
  color:#dce7ea;
  display:flex;
  justify-content:space-between;
  gap:20px
}

.login-page {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:20px;
  background:linear-gradient(140deg,#e9f6f5,#f7f9fa)
}

.login-card {
  width:min(430px,100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:26px;
  box-shadow:var(--shadow)
}

.login-card h1 {
  margin:22px 0
}

.field {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:14px;
  font-weight:700
}

.field input,.field select,.field textarea {
  border:1px solid #cbd9de;
  border-radius:11px;
  padding:13px;
  background:#fff;
  min-height:48px
}

.field textarea {
  min-height:92px;
  resize:vertical
}

.help {
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#e4f2f3;
  color:var(--main2);
  font-size:13px;
  border:0;
  margin-left:5px;
  font-weight:900
}

.alert {
  padding:12px;
  border-radius:10px;
  background:#fff0f0;
  color:var(--danger);
  margin:10px 0
}

.remembered {
  display:grid;
  gap:8px;
  margin:0 0 16px
}

.remembered button {
  border:1px solid var(--line);
  background:#f8fbfb;
  border-radius:12px;
  padding:12px;
  text-align:left
}

.shell {
  min-height:100vh;
  display:grid;
  grid-template-columns:250px 1fr
}

.side {
  background:var(--ink);
  color:#fff;
  padding:18px;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto
}

.side .brand {
  margin-bottom:24px
}

.nav {
  display:grid;
  gap:5px
}

.nav button {
  width:100%;
  text-align:left;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#dce8ec;
  padding:12px;
  cursor:pointer;
  font-weight:700
}

.nav button.active,.nav button:hover {
  background:#184256;
  color:#fff
}

.side-bottom {
  margin-top:28px;
  border-top:1px solid #315061;
  padding-top:14px
}

.main {
  min-width:0
}

.appbar {
  height:65px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:10
}

.appbar h1 {
  font-size:20px;
  margin:0
}

.unit-select {
  max-width:250px;
  border:1px solid var(--line);
  border-radius:9px;
  padding:9px
}

.content {
  padding:18px;
  max-width:1500px;
  margin:auto
}

.calendar-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px
}

.calendar-head div {
  display:flex;
  gap:7px;
  flex-wrap:wrap
}

.icon-btn,.soft {
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:10px;
  padding:10px 13px;
  font-weight:800;
  cursor:pointer
}

.icon-btn.active {
  background:var(--main);
  color:#fff
}

.calendar {
  display:grid;
  grid-template-columns:repeat(7,minmax(130px,1fr));
  gap:8px;
  overflow:auto
}

.day {
  background:#fff;
  border:1px solid var(--line);
  border-radius:13px;
  min-height:150px;
  padding:10px
}

.day.today {
  border:2px solid var(--main)
}

.day-head {
  display:flex;
  justify-content:space-between;
  font-weight:800;
  margin-bottom:8px
}

.task {
  border-left:5px solid #0066cc;
  background:#f1f8f8;
  border-radius:9px;
  padding:9px;
  margin:7px 0
}

.task.done {
  opacity:1;
  border-color:#d60000
}

.task h4 {
  margin:0 0 5px;
  font-size:14px
}

.task p {
  margin:3px 0;
  color:var(--muted);
  font-size:13px
}

.task-actions {
  display:flex;
  gap:5px;
  margin-top:8px
}

.task-actions button {
  border:0;
  border-radius:8px;
  padding:8px 9px;
  font-size:12px;
  font-weight:800;
  cursor:pointer
}

.done-btn {
  background:var(--ok);
  color:#fff
}

.edit-btn {
  background:#dfecef;
  color:var(--ink)
}

.photos {
  display:flex;
  gap:5px;
  overflow:auto;
  margin-top:7px
}

.photos img {
  width:48px;
  height:48px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--line)
}

.week,.day-view {
  display:grid;
  gap:10px
}

.week .day,.day-view .day {
  min-height:auto
}

.card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  box-shadow:0 4px 16px rgba(20,47,61,.04)
}

.toolbar {
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  flex-wrap:wrap
}

.grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px
}

.span2 {
  grid-column:1/-1
}

.records {
  display:grid;
  gap:8px;
  margin-top:16px
}

.record {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px
}

.record small {
  color:var(--muted)
}

.record-actions {
  display:flex;
  gap:6px
}

.danger {
  background:var(--danger)!important
}

.modal {
  border:0;
  border-radius:18px;
  width:min(650px,calc(100% - 22px));
  max-height:92vh;
  padding:0;
  box-shadow:0 24px 90px rgba(0,0,0,.28)
}

.modal::backdrop {
  background:rgba(5,24,34,.62)
}

.modal-inner {
  padding:20px
}

.modal-head {
  display:flex;
  justify-content:space-between;
  align-items:center
}

.modal-head button {
  border:0;
  background:#eef3f4;
  border-radius:50%;
  width:36px;
  height:36px;
  font-size:20px
}

.tooltip-pop {
  position:fixed;
  z-index:100;
  background:#102e3e;
  color:#fff;
  padding:10px 12px;
  border-radius:10px;
  max-width:260px;
  font-size:13px;
  box-shadow:var(--shadow)
}

.mobile-menu {
  display:none
}

.photo-view {
  max-width:90vw;
  max-height:82vh;
  display:block
}

.request-box textarea {
  font-size:18px;
  min-height:130px
}

.big-action {
  width:100%;
  min-height:54px;
  font-size:18px
}

.empty {
  text-align:center;
  padding:35px;
  color:var(--muted)
}

@media(max-width:850px) {
  .top nav {
    display:none
  }

  .hero {
    grid-template-columns:1fr;
    padding-top:45px
  }

  .hero-card {
    display:none
  }

  .feature-grid,.plans {
    grid-template-columns:1fr
  }

  .footer {
    flex-direction:column
  }

  .shell {
    display:block
  }

  .side {
    position:fixed;
    z-index:30;
    width:270px;
    transform:translateX(-105%);
    transition:.2s
  }

  .side.open {
    transform:none
  }

  .mobile-menu {
    display:block;
    border:0;
    background:transparent;
    font-size:24px
  }

  .appbar {
    padding:0 12px
  }

  .appbar h1 {
    font-size:17px
  }

  .content {
    padding:10px
  }

  .calendar {
    grid-template-columns:repeat(7,minmax(105px,1fr))
  }

  .grid {
    grid-template-columns:1fr
  }

  .span2 {
    grid-column:auto
  }

  .unit-select {
    max-width:150px
  }

  .calendar-head {
    align-items:flex-start;
    flex-direction:column
  }

  .record {
    align-items:flex-start;
    flex-direction:column
  }

  .record-actions {
    width:100%
  }

  .record-actions button {
    flex:1
  }

}