/* Теломер — Diet Systems CSS v2 */

/* ── 5-button bottom nav fix ─────────────────────────── */
.bottom-nav {
  grid-template-columns: repeat(5, 1fr) !important;
}
.bottom-nav .nav-btn {
  font-size: 10px !important;
  padding: 6px 2px !important;
}
.bottom-nav .nav-btn svg {
  width: 20px !important;
  height: 20px !important;
}

/* ── Catalog ─────────────────────────────────────────── */
.ds-catalog {
  padding: 12px;
}

.ds-section-title {
  font-size: 18px;
  font-weight: 700;
  margin: 16px 0 12px;
  color: var(--text);
}

/* Active banner */
.ds-active-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border-radius: 14px;
  padding: 14px 16px;
  color: #fff;
  margin-bottom: 8px;
  cursor: pointer;
  position: relative;
}
.ds-active-badge {
  position: absolute;
  top: -6px;
  right: 12px;
  background: var(--card);
  color: var(--ok);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}
.ds-active-icon { font-size: 28px; }
.ds-active-name { font-size: 15px; font-weight: 600; flex: 1; }
.ds-active-arrow { font-size: 20px; opacity: 0.7; }

/* System cards */
.ds-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: transform 0.15s, box-shadow 0.15s;
}
.ds-card:active { transform: scale(0.98); }
.ds-card--active {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.ds-card-icon {
  font-size: 32px;
  min-width: 44px;
  text-align: center;
  position: relative;
}
.ds-check {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: #10b981;
  color: #fff;
  font-size: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--card);
  font-weight: 700;
}

.ds-card-body { flex: 1; min-width: 0; }
.ds-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}
.ds-card-desc {
  font-size: 13px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-card-meta {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.ds-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--card2);
  color: var(--muted);
}
.ds-badge--diff {
  background: rgba(96,165,250,0.15);
  color: var(--info);
}
.ds-card-arrow {
  font-size: 20px;
  color: var(--muted);
}

/* ── Detail ──────────────────────────────────────────── */
.ds-detail {
  padding: 12px;
}

.ds-back {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 0;
  cursor: pointer;
  margin-bottom: 8px;
}

.ds-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.ds-detail-icon { font-size: 42px; }
.ds-detail-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}
.ds-detail-meta {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

/* Activate / Deactivate buttons */
.ds-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
}
.ds-btn--activate {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  color: #fff;
}
.ds-btn--deactivate {
  background: var(--card2);
  color: var(--ok);
  border: 1px solid var(--ok);
}

/* Sections */
.ds-section {
  margin-bottom: 20px;
}
.ds-section p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}
.ds-section-h {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text);
}

/* Rules */
.ds-rules {
  background: var(--card2);
  border-radius: 12px;
  padding: 12px 14px;
}
.ds-rule-item {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

/* Products */
.ds-products {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ds-products li {
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 8px;
  margin-bottom: 4px;
}
.ds-products--allowed li {
  background: rgba(16,185,129,0.1);
  color: var(--ok);
  border-left: 3px solid var(--ok);
}
.ds-products--forbidden li {
  background: rgba(248,113,113,0.1);
  color: var(--err);
  border-left: 3px solid var(--err);
}

/* Menu */
.ds-menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds-menu-item {
  background: var(--card2);
  border-radius: 10px;
  padding: 10px 14px;
}
.ds-menu-meal {
  font-size: 13px;
  font-weight: 600;
  color: var(--pri);
  margin-bottom: 3px;
}
.ds-menu-food {
  font-size: 14px;
  color: var(--text);
}

/* Stages */
.ds-stage {
  border-left: 3px solid var(--pri);
  padding: 8px 14px;
  margin-bottom: 8px;
}
.ds-stage-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.ds-stage-days {
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
}
.ds-stage-desc {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}


/* ═══ Dashboard Diet Widget ═══ */
.ds-widget{
  display:flex;flex-direction:column;gap:8px;padding:14px 16px;
  background:var(--card);border-radius:14px;cursor:pointer;
  border:1px solid var(--border);
}
.ds-widget-head{
  display:flex;align-items:center;gap:10px;
}
.ds-widget-icon{font-size:28px;flex-shrink:0}
.ds-widget-info{flex:1;min-width:0}
.ds-widget-name{
  font-size:14px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ds-widget-stage{font-size:12px;color:var(--muted);margin-top:2px}
.ds-widget-day{
  font-size:12px;font-weight:600;color:var(--accent);
  white-space:nowrap;
}
.ds-widget-bar{
  height:6px;border-radius:3px;background:var(--border);overflow:hidden;
}
.ds-widget-fill{
  height:100%;border-radius:3px;background:var(--ok);
  transition:width .5s ease;
}

/* ═══ Tool Buttons Row ═══ */
.ds-tools-row{
  display:flex;gap:8px;margin:12px 0;
}
.ds-tool-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 8px;border-radius:12px;border:1px solid var(--border);
  background:var(--card);color:var(--text);font-size:13px;
  cursor:pointer;transition:background .2s;
}
.ds-tool-btn:active{background:var(--card2)}
.ds-tool-icon{font-size:18px}
.ds-tool-label{white-space:nowrap}

/* ═══ Recipe Cards ═══ */
.ds-recipe-card{
  background:var(--card2);border-radius:10px;padding:12px;margin-bottom:8px;
  border:1px solid var(--border);
}
.ds-recipe-name{font-weight:600;color:var(--text);margin-bottom:4px}
.ds-recipe-desc{font-size:13px;color:var(--muted);line-height:1.4}
.ds-recipe-ingr{font-size:12px;color:var(--muted);margin-top:6px}
.ds-recipe-cal{
  font-size:12px;color:var(--accent);margin-top:4px;font-weight:500;
}
.ds-recipe-text{
  font-size:13px;color:var(--text);line-height:1.5;
  background:var(--card2);border-radius:10px;padding:12px;
}
.ds-btn--recipes{
  width:100%;padding:10px;border-radius:10px;border:1px solid var(--accent);
  background:transparent;color:var(--accent);font-size:14px;
  cursor:pointer;margin:8px 0;font-weight:500;
}
.ds-btn--recipes:active{background:rgba(232,165,124,.12)}

/* ═══ Product Analysis ═══ */
.ds-textarea{
  width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);
  background:var(--card);color:var(--text);font-size:14px;
  resize:vertical;min-height:80px;margin-bottom:10px;
  font-family:inherit;
}
.ds-textarea::placeholder{color:var(--muted)}
.ds-textarea:focus{outline:none;border-color:var(--accent)}

/* ═══ Photo Recognition ═══ */
.ds-photo-area{text-align:center;margin:8px 0}
.ds-photo-btn{width:100%}
.ds-photo-products{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;
}
.ds-pp{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 10px;border-radius:8px;font-size:13px;
}
.ds-pp--ok{background:rgba(52,211,153,.12);color:var(--ok)}
.ds-pp--bad{background:rgba(248,113,113,.12);color:var(--err)}
.ds-pp--neutral{background:var(--card2);color:var(--muted)}