@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 { 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; }
}

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

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

-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(--hu-white-mist); 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(--hu-white-mist); 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; }

.tts-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }

.tts-title-row > * { flex-shrink: 0; }

.tts-title-row > h1, .tts-title-row > h2, .tts-title-row > h3 { flex: 0 1 auto; margin: 0px; }

.tts-inline-btn { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(236, 242, 248, 0.9)); border: 1.5px solid rgba(36, 52, 71, 0.13); box-shadow: rgba(36, 52, 71, 0.1) 0px 2px 10px, rgba(255, 255, 255, 0.6) 0px 1px 2px inset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: rgb(58, 90, 120); transition: 0.2s; backdrop-filter: blur(6px); outline: none; vertical-align: middle; }

.tts-inline-btn:hover { transform: scale(1.1); box-shadow: rgba(36, 52, 71, 0.16) 0px 4px 16px; border-color: rgba(36, 52, 71, 0.24); }

.tts-inline-btn:active { transform: scale(0.97); }

.tts-modal { display: none; position: fixed; inset: 0px; background: rgba(10, 18, 28, 0.45); z-index: 9800; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); }

.tts-modal.tts-open { display: flex; }

.tts-modal-card { background: rgb(255, 255, 255); border-radius: 22px; padding: 32px 28px 24px; max-width: 380px; width: 100%; text-align: center; box-shadow: rgba(10, 18, 28, 0.25) 0px 20px 60px; position: relative; animation: 0.25s ease 0s 1 normal none running tts-slide-up; }

@keyframes tts-slide-up { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.tts-modal-close { position: absolute; top: 14px; right: 16px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-size: 1.1rem; color: rgb(170, 170, 170); cursor: pointer; padding: 4px 6px; border-radius: 4px; transition: color 0.15s; }

.tts-modal-close:hover { color: rgb(36, 52, 71); }

.tts-modal-page { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(74, 122, 78); margin-bottom: 6px; }

.tts-modal-prompt { font-family: Georgia, serif; font-size: 1.08rem; font-weight: 400; color: rgb(36, 52, 71); line-height: 1.5; margin-bottom: 24px; }

.tts-mic-ring { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(145deg, rgb(36, 52, 71), rgb(49, 70, 95)); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0px auto 20px; cursor: pointer; box-shadow: rgba(36, 52, 71, 0.25) 0px 4px 20px; transition: 0.22s; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }

.tts-mic-ring:hover { transform: scale(1.06); box-shadow: rgba(36, 52, 71, 0.32) 0px 8px 30px; }

.tts-mic-ring.tts-recording { background: rgb(204, 34, 51); animation: 1.2s ease-in-out 0s infinite normal none running tts-pulse; }

@keyframes tts-pulse { 
  0%, 100% { box-shadow: rgba(36, 52, 71, 0.35) 0px 0px 0px 0px; }
  50% { box-shadow: rgba(36, 52, 71, 0) 0px 0px 0px 12px; }
}

.tts-modal-status { font-size: 0.82rem; color: rgb(170, 170, 170); margin-bottom: 16px; min-height: 20px; transition: color 0.2s; }

.tts-modal-status.tts-active { color: rgb(36, 52, 71); font-weight: 600; }

.tts-transcript { background: rgb(248, 249, 250); border-radius: 10px; padding: 12px 16px; font-size: 0.88rem; color: rgb(36, 52, 71); line-height: 1.55; min-height: 48px; margin-bottom: 16px; display: none; text-align: left; border: 1px solid rgba(36, 52, 71, 0.08); }

.tts-modal-actions { display: flex; gap: 8px; justify-content: center; }

.tts-btn-secondary { padding: 9px 18px; background: none; border: 1.5px solid rgba(36, 52, 71, 0.18); border-radius: 8px; font-family: inherit; font-size: 0.82rem; font-weight: 600; color: rgb(36, 52, 71); cursor: pointer; transition: 0.18s; }

.tts-btn-secondary:hover { background: rgb(240, 243, 246); }

.tts-btn-primary { padding: 9px 20px; background: rgb(36, 52, 71); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; font-family: inherit; font-size: 0.82rem; font-weight: 700; color: rgb(255, 255, 255); cursor: pointer; transition: 0.18s; }

.tts-btn-primary:hover { background: rgb(26, 46, 66); }