:root{
  --bg:#0b1220; --card:#111a2e; --muted:#8ea0c6; --text:#e9efff;
  --ok:#ffd166; --ideal:#06d6a0; --border:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.35); --radius:16px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
body.mk-tool{ margin:0; background:linear-gradient(180deg,#070b14,#0b1220 35%,#07101f); color:var(--text); }
.mk-header{ max-width:1050px; margin:24px auto 10px; padding:0 16px; display:flex; gap:12px; align-items:center; justify-content:space-between; }
.title{ display:flex; flex-direction:column; gap:2px; }
h1{ font-size:18px; margin:0; letter-spacing:.2px; }
.sub{ color:var(--muted); font-size:13px; }
.nav{ display:flex; gap:8px; align-items:center; }
button{
  background:rgba(255,255,255,.06); color:var(--text); border:1px solid var(--border);
  padding:10px 12px; border-radius:12px; cursor:pointer;
}
button:hover{ background:rgba(255,255,255,.10); }

.mk-main{ max-width:1050px; margin:0 auto; padding:0 16px 28px; display:grid; gap:14px; grid-template-columns:1.6fr .9fr; }
@media (max-width:900px){ .mk-main{ grid-template-columns:1fr; } }

.card{ background:rgba(17,26,46,.92); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.cardHead{ padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.monthLabel{ font-weight:650; }
.legend{ display:flex; gap:10px; color:var(--muted); font-size:13px; align-items:center; flex-wrap:wrap; }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.04); }
.dot{ width:10px; height:10px; border-radius:50%; }
.idealDot{ background:var(--ideal); }
.okDot{ background:var(--ok); }

.grid{ display:grid; grid-template-columns:repeat(7,1fr); }
.dow{ color:var(--muted); font-size:12px; padding:10px 12px; border-bottom:1px solid var(--border); }

.day{
  min-height:96px; padding:10px 10px 12px; border-bottom:1px solid var(--border); border-right:1px solid var(--border);
  cursor:pointer; position:relative; background:rgba(255,255,255,0);
}
.day:nth-child(7n){ border-right:none; }
.day:hover{ background:rgba(255,255,255,.03); }
.day.disabled{ opacity:.35; cursor:default; background:rgba(0,0,0,.08); }

.num{ font-weight:650; font-size:14px; }
.tag{
  position:absolute; top:10px; right:10px; font-size:11px; padding:3px 8px; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,.05);
}
.tag.ok{ color:#1b1b1b; background:var(--ok); border-color:rgba(0,0,0,.1); }
.tag.ideal{ color:#002015; background:var(--ideal); border-color:rgba(0,0,0,.1); }

.meta{ margin-top:10px; color:var(--muted); font-size:12px; display:flex; flex-direction:column; gap:4px; }
.side{ padding:14px 16px; }
.side h2{ margin:0 0 6px; font-size:15px; }
.kv{ display:grid; grid-template-columns:120px 1fr; gap:8px 12px; margin-top:12px; font-size:13px; }
.k{ color:var(--muted); }
.v{ color:var(--text); }
.small{ color:var(--muted); font-size:12px; margin-top:10px; line-height:1.35; }

.moonRow{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.moonEmoji{ font-size:26px; line-height:1; }


.mk-footer{
  margin-top:40px;
  padding:20px 16px 28px;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.25));
}

.mk-footer-inner{
  max-width:1050px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:12px;
  color:var(--muted);
}

.mk-footer-left{
  display:flex;
  gap:8px;
  align-items:center;
}

.mk-footer-left strong{
  color:var(--text);
  font-weight:600;
}

.mk-footer-right{
  display:flex;
  gap:6px;
  align-items:center;
  opacity:.85;
}

.mk-footer-right strong{
  font-weight:600;
}

.mk-footer-right span{
  opacity:.75;
}

@media (max-width:700px){
  .mk-footer-inner{
    flex-direction:column;
    text-align:center;
    gap:6px;
  }
}