.dining-profit-page {
  position: relative;
  display: grid;
  gap: 20px;
}

.dining-page-header {
  background: linear-gradient(135deg, #f3fbff 0%, #f1fbf5 56%, #fff9ee 100%);
}

.dining-profit-layout {
  display: grid;
  grid-template-columns: minmax(430px, 0.92fr) minmax(500px, 1.08fr);
  gap: 18px;
  align-items: start;
}

.dining-input-card,
.dining-result-card,
.dining-history {
  border-color: #dceaf2;
}

.dining-store-type {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.dining-type-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid #dce9f1;
  border-radius: 18px;
  background: #fbfdff;
  cursor: pointer;
}

.dining-type-option.is-active {
  border-color: #71c5e6;
  background: linear-gradient(180deg, #eaf8ff, #f7fcff);
  box-shadow: 0 8px 20px rgba(85, 194, 232, 0.1);
}

.dining-type-option input {
  margin-top: 3px;
  accent-color: #43afd8;
}

.dining-type-option span {
  display: grid;
  gap: 5px;
}

.dining-type-option strong {
  color: #1f4764;
}

.dining-type-option small {
  color: #7890a2;
  line-height: 1.5;
}

.dining-section-block {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #e0ebf2;
  border-radius: 18px;
  background: #fbfdff;
}

.dining-section-block.takeaway-block {
  background: linear-gradient(180deg, #f1fbff, #fbfdff);
  border-color: #cfe9f5;
}

.dining-section-block.fixed-cost-block {
  background: linear-gradient(180deg, #fffaf2, #fffdf9);
  border-color: #f0e1c6;
}

.dining-section-block.is-disabled {
  opacity: 0.62;
}

.dining-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.dining-section-title span {
  color: #244b67;
  font-weight: 800;
}

.dining-section-title small {
  color: #7991a3;
}

.dining-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dining-form-grid .profit-field {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.dining-form-grid .profit-input-wrap,
.dining-form-grid .profit-input-wrap input {
  width: 100%;
  min-width: 0;
}

.dining-form-grid .profit-input-wrap input {
  min-height: 46px;
  border-color: #d5d7f6;
  background: #ffffff;
  font-size: 15px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.dining-form-grid .profit-input-wrap input:hover {
  border-color: #aeb7ee;
}

.dining-form-grid .profit-input-wrap input:focus {
  border-color: #6658e8;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(101, 88, 232, 0.12), 0 8px 20px rgba(72, 87, 185, 0.08);
  outline: none;
}

.dining-input-card,
.dining-result-card {
  box-shadow: 0 16px 38px rgba(64, 76, 157, 0.1);
}

.dining-actions {
  margin-top: 20px;
}

.dining-result-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.dining-result-summary > div {
  display: grid;
  gap: 6px;
  min-height: 116px;
  padding: 18px;
  border: 1px solid #dceaf2;
  border-radius: 18px;
  background: #f8fcff;
}

.dining-result-summary span {
  color: #48677e;
  font-weight: 700;
}

.dining-result-summary strong {
  color: #16324f;
  font-size: 22px;
}

.dining-result-summary small {
  color: #7b91a2;
  line-height: 1.5;
}

.dining-result-summary .is-profit {
  background: #edf9f2;
  border-color: #c2ead1;
}

.dining-result-summary .is-loss {
  background: #fff2f2;
  border-color: #f3caca;
}

.dining-result-summary .is-loss strong {
  color: #c34747;
}

.dining-result-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dining-break-even-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border-radius: 20px;
}

.dining-break-even-panel.danger {
  background: #fff4f2;
  border: 1px solid #f1d0cb;
}

.dining-break-even-panel.success {
  background: #effaf4;
  border: 1px solid #caead8;
}

.dining-break-even-panel > div {
  display: grid;
  gap: 6px;
  padding: 8px;
}

.dining-break-even-panel span {
  color: #4b687c;
  font-weight: 700;
}

.dining-break-even-panel strong {
  color: #18374f;
  font-size: 21px;
}

.dining-break-even-panel small {
  color: #758c9d;
  line-height: 1.5;
}

.dining-history .table-wrap {
  margin-top: 14px;
}

@media (max-width: 1240px) {
  .dining-profit-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .dining-store-type,
  .dining-form-grid,
  .dining-result-summary,
  .dining-result-grid,
  .dining-break-even-panel {
    grid-template-columns: 1fr;
  }

  .dining-result-summary > div {
    min-height: auto;
  }

  .dining-actions {
    align-items: stretch;
    flex-direction: column;
  }
}