@charset "utf-8";

.mk-wrap { min-height: 100vh; background: rgb(244, 240, 235); padding-top: 0px; }

.mk-header { background: rgb(255, 255, 255); border-bottom: 1px solid rgb(236, 232, 226); padding: 0px; position: sticky; top: 68px; z-index: 100; }

.mk-header-inner { display: flex; flex-direction: row; align-items: center; max-width: 1200px; margin: 0px auto; padding: 0px 24px; overflow-x: auto; }

.mk-tab-row { display: contents; }

.mk-tab-row-primary { }

.mk-nav-tab { display: flex; align-items: center; gap: 8px; padding: 13px 20px; font-size: 0.85rem; font-weight: 700; color: var(--brown); border-width: medium medium 3px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: initial; background: none; cursor: pointer; font-family: inherit; white-space: nowrap; transition: 0.18s; }

.mk-tab-row-secondary .mk-nav-tab { font-size: 0.85rem; padding: 13px 20px; color: var(--brown); }

.mk-nav-tab:hover { color: var(--char); }

.mk-nav-tab.mk-active { color: var(--sage); border-bottom-color: var(--sage); }

.mk-body { max-width: 1200px; margin: 0px auto; padding: 28px 24px 60px; }

@media (max-width: 640px) {
  .mk-body { padding: 16px 12px 60px; }
}

.mk-welcome { background: linear-gradient(135deg,var(--sage),#4a7a4e); border-radius: 24px; padding: 28px 32px; color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-bottom: 24px; }

.mk-welcome-left h2 { font-family: Georgia, serif; font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; }

.mk-welcome-left p { opacity: 0.85; font-size: 0.88rem; }

.mk-welcome-stats { display: flex; gap: 24px; flex-wrap: wrap; }

.mk-stat { text-align: center; }

.mk-stat-n { font-size: 1.6rem; font-weight: 800; }

.mk-stat-l { font-size: 0.7rem; opacity: 0.75; margin-top: 1px; }

.mk-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }

@media (max-width: 860px) {
  .mk-actions { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .mk-actions { grid-template-columns: 1fr 1fr; }
}

.mk-action { background: rgb(255, 255, 255); border-radius: 18px; padding: 20px 16px; text-align: center; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 14px; transition: transform 0.2s, box-shadow 0.2s; border: 2px solid transparent; }

.mk-action:hover { transform: translateY(-3px); box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 28px; }

.mk-action.mk-action-primary { border-color: var(--sage); background: linear-gradient(135deg,var(--sage-lt),#fff); }

.mk-action-icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0px auto 12px; }

.mk-action-label { font-weight: 800; font-size: 0.85rem; color: var(--char); margin-bottom: 3px; }

.mk-action-sub { font-size: 0.7rem; color: var(--brown); }

.mk-section-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

.mk-section-title { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 700; color: var(--char); }

.mk-see-all { font-size: 0.8rem; font-weight: 700; color: var(--sage); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; }

.mk-recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }

@media (max-width: 860px) {
  .mk-recipe-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .mk-recipe-grid { grid-template-columns: 1fr; }
}

.mk-rec-card { background: rgb(255, 255, 255); border-radius: 18px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 14px; cursor: pointer; transition: transform 0.2s; }

.mk-rec-card:hover { transform: translateY(-3px); }

.mk-rec-img { height: 130px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; position: relative; }

.mk-rec-badge { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, 0.9); border-radius: 50px; padding: 3px 9px; font-size: 0.67rem; font-weight: 700; }

.mk-rec-body { padding: 12px 14px; }

.mk-rec-title { font-weight: 800; font-size: 0.85rem; color: var(--char); margin-bottom: 5px; line-height: 1.3; }

.mk-rec-meta { font-size: 0.72rem; color: var(--brown); display: flex; gap: 10px; }

.mk-rec-moods { display: flex; gap: 4px; margin-top: 7px; }

.mk-rec-mood { font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 50px; }

.mk-pantry-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }

@media (max-width: 600px) {
  .mk-pantry-cats { grid-template-columns: repeat(2, 1fr); }
}

.mk-pantry-cat { background: rgb(255, 255, 255); border-radius: 16px; padding: 14px; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 10px; }

.mk-pantry-cat-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

.mk-pantry-cat-title { font-weight: 800; font-size: 0.8rem; color: var(--char); display: flex; align-items: center; gap: 6px; }

.mk-pantry-item { display: flex; align-items: center; justify-content: space-between; padding: 5px 0px; border-bottom: 1px solid rgb(244, 240, 235); font-size: 0.78rem; color: var(--char); }

.mk-pantry-item:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.mk-pantry-rm { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgb(204, 204, 204); cursor: pointer; font-size: 0.85rem; padding: 2px 4px; transition: color 0.15s; }

.mk-pantry-rm:hover { color: rgb(224, 80, 80); }

.mk-pantry-add { display: flex; gap: 8px; margin-bottom: 16px; }

.mk-pantry-input { flex: 1 1 0%; padding: 10px 16px; border-radius: 50px; border: 1.5px solid rgb(224, 219, 212); font-size: 0.85rem; font-family: inherit; background: rgb(255, 255, 255); outline: none; }

.mk-pantry-input:focus { border-color: var(--sage); }

.mk-match-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 24px; }

@media (max-width: 540px) {
  .mk-match-grid { grid-template-columns: 1fr; }
}

.mk-match-card { background: rgb(255, 255, 255); border-radius: 16px; padding: 16px; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 10px; display: flex; gap: 12px; align-items: flex-start; }

.mk-match-icon { font-size: 2rem; flex-shrink: 0; }

.mk-match-title { font-weight: 800; font-size: 0.88rem; color: var(--char); margin-bottom: 4px; }

.mk-match-status { font-size: 0.72rem; margin-bottom: 8px; }

.mk-match-moods { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }

.mk-match-btns { display: flex; gap: 6px; flex-wrap: wrap; }

.mk-match-btn { font-size: 0.72rem; font-weight: 700; padding: 5px 11px; border-radius: 50px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; }

.mk-planner-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 20px; }

@media (max-width: 700px) {
  .mk-planner-week { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 400px) {
  .mk-planner-week { grid-template-columns: repeat(3, 1fr); }
}

.mk-day-col { background: rgb(255, 255, 255); border-radius: 14px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 10px; }

.mk-day-hd { padding: 8px 10px; font-size: 0.7rem; font-weight: 800; text-align: center; background: var(--sage-lt); color: var(--sage); }

.mk-day-hd.today { background: var(--sage); color: rgb(255, 255, 255); }

.mk-day-slot { padding: 8px; min-height: 52px; font-size: 0.7rem; color: var(--brown); text-align: center; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s; border-bottom: 1px solid rgb(244, 240, 235); }

.mk-day-slot:hover { background: rgb(244, 240, 235); }

.mk-day-slot:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.mk-day-slot.filled { color: var(--char); font-weight: 600; }

.mk-log-entry { display: flex; align-items: center; gap: 12px; padding: 12px 0px; border-bottom: 1px solid rgb(244, 240, 235); }

.mk-log-entry:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.mk-log-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }

.mk-log-name { font-weight: 700; font-size: 0.88rem; color: var(--char); }

.mk-log-time { font-size: 0.72rem; color: var(--brown); }

.mk-log-score { font-size: 0.82rem; font-weight: 800; color: var(--sage); margin-left: auto; flex-shrink: 0; }

.mk-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }

.mk-tab { padding: 8px 16px; border-radius: 50px; font-size: 0.8rem; font-weight: 700; border: 2px solid rgb(232, 228, 222); background: rgb(255, 255, 255); color: var(--brown); cursor: pointer; font-family: inherit; transition: 0.15s; }

.mk-tab.mk-tab-active { background: var(--sage); color: rgb(255, 255, 255); border-color: var(--sage); }

.mk-add-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }

@media (max-width: 700px) {
  .mk-add-grid { grid-template-columns: 1fr; }
}

.mk-add-card { background: rgb(255, 255, 255); border-radius: 20px; padding: 24px 20px; text-align: center; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 14px; border: 2px dashed rgb(224, 219, 212); transition: 0.2s; }

.mk-add-card:hover { border-color: var(--sage); transform: translateY(-3px); box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 28px; }

.mk-add-card-icon { width: 64px; height: 64px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0px auto 14px; }

.mk-add-card-title { font-weight: 800; font-size: 0.95rem; color: var(--char); margin-bottom: 6px; }

.mk-add-card-sub { font-size: 0.78rem; color: var(--brown); line-height: 1.6; }

.mk-form { background: rgb(255, 255, 255); border-radius: 20px; padding: 28px; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 14px; display: none; }

.mk-form.open { display: block; }

.mk-form-title { font-family: Georgia, serif; font-size: 1.1rem; font-weight: 700; color: var(--char); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--sage-lt); }

.mk-field { margin-bottom: 16px; }

.mk-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brown); margin-bottom: 6px; display: block; }

.mk-input { width: 100%; padding: 11px 16px; border-radius: 12px; border: 1.5px solid rgb(224, 219, 212); font-size: 0.88rem; font-family: inherit; background: rgb(250, 250, 248); outline: none; box-sizing: border-box; transition: border-color 0.15s; }

.mk-input:focus { border-color: var(--sage); }

.mk-textarea { width: 100%; padding: 11px 16px; border-radius: 12px; border: 1.5px solid rgb(224, 219, 212); font-size: 0.88rem; font-family: inherit; background: rgb(250, 250, 248); outline: none; resize: vertical; min-height: 90px; box-sizing: border-box; transition: border-color 0.15s; }

.mk-textarea:focus { border-color: var(--sage); }

.mk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 500px) {
  .mk-form-row { grid-template-columns: 1fr; }
}

.mk-mood-checks { display: flex; gap: 8px; flex-wrap: wrap; }

.mk-mood-check { padding: 7px 14px; border-radius: 50px; border: 2px solid rgb(224, 219, 212); font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: 0.15s; background: rgb(255, 255, 255); }

.mk-mood-check.checked { border-color: var(--sage); background: var(--sage-lt); color: var(--sage); }

.mk-upload-zone { border: 2px dashed rgb(224, 219, 212); border-radius: 12px; padding: 24px; text-align: center; cursor: pointer; transition: border-color 0.15s; }

.mk-upload-zone:hover { border-color: var(--sage); }

.mk-ai-result { background: linear-gradient(135deg,var(--sage-lt),var(--yel-lt)); border-radius: 16px; padding: 20px; margin-top: 16px; display: none; }

.mk-ai-result.open { display: block; }

.mk-ai-result-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage); margin-bottom: 12px; }

.mk-ai-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

@media (max-width: 500px) {
  .mk-ai-row { grid-template-columns: 1fr; }
}

.mk-ai-card { background: rgb(255, 255, 255); border-radius: 12px; padding: 14px; }

.mk-ai-card-title { font-size: 0.72rem; font-weight: 700; color: var(--char); margin-bottom: 6px; }

.mk-ai-card-body { font-size: 0.75rem; color: var(--brown); line-height: 1.6; }

.mk-import-form { background: rgb(255, 255, 255); border-radius: 20px; padding: 28px; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 14px; display: none; }

.mk-import-form.open { display: block; }

.mk-import-preview { background: var(--cream); border-radius: 14px; padding: 18px; margin-top: 16px; display: none; }

.mk-import-preview.open { display: block; }

.mk-search-panel { background: rgb(255, 255, 255); border-radius: 20px; padding: 28px; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 14px; display: none; }

.mk-search-panel.open { display: block; }

.mk-search-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 20px; }

@media (max-width: 540px) {
  .mk-search-results { grid-template-columns: 1fr; }
}

.sr-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.45); z-index: 3000; display: none; align-items: center; justify-content: center; padding: 20px; }

.sr-overlay.open { display: flex; }

.sr-modal { background: rgb(255, 255, 255); border-radius: 24px; max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: rgba(0, 0, 0, 0.18) 0px 24px 80px; position: relative; }

.sr-modal-hero { padding: 28px 28px 0px; display: flex; align-items: center; gap: 16px; }

.sr-modal-emoji { font-size: 3.2rem; line-height: 1; }

.sr-modal-title { font-size: 1.2rem; font-weight: 800; color: var(--char); margin-bottom: 4px; }

.sr-modal-meta { font-size: 0.78rem; color: var(--brown); }

.sr-modal-body { padding: 20px 28px 28px; }

.sr-modal-section { margin-bottom: 18px; }

.sr-modal-label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage); margin-bottom: 8px; }

.sr-modal-text { font-size: 0.85rem; color: var(--char); line-height: 1.7; }

.sr-modal-steps { padding-left: 18px; margin: 0px; }

.sr-modal-steps li { margin-bottom: 6px; font-size: 0.85rem; color: var(--char); line-height: 1.6; }

.sr-modal-moods { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }

.sr-modal-close { position: absolute; top: 14px; right: 16px; background: var(--cream); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; width: 32px; height: 32px; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--brown); font-family: inherit; }

.sr-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.mk-plate-wrap { text-align: center; }

.mk-plate-svg { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; }

.mk-match-bar-wrap { margin: 8px 0px; }

.mk-match-bar-bg { height: 6px; background: rgb(238, 238, 238); border-radius: 3px; overflow: hidden; }

.mk-match-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg,var(--sage),#90e0a8); transition: width 0.4s; }