:root {
    --primary: #4f46e5;
    --accent: #10b981;
    --bg-body: #f1f5f9;
    --bg-card: #ffffff;
    --text-main: #1e293b;
    --text-dim: #64748b;
    --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --inner-shadow: inset 2px 2px 5px #e2e8f0, inset -2px -2px 5px #ffffff;
}

[data-theme="dark"] {
    --bg-body: #0f172a;
    --bg-card: #1e293b;
    --text-main: #f8fafc;
    --text-dim: #94a3b8;
    --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    --inner-shadow: inset 2px 2px 5px #0f172a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--bg-body); color: var(--text-main); transition: 0.3s; }

.main-container { max-width: 1200px; margin: 0 auto; padding: 20px; }

.app-top-nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; margin-bottom: 20px; }
.logo { font-size: 24px; font-weight: 800; color: var(--primary); }
.logo span { color: var(--accent); }

.t-btn { background: var(--bg-card); border: none; padding: 8px 12px; border-radius: 10px; cursor: pointer; box-shadow: var(--shadow); }

/* Grid Layout */
.calc-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; }

.calc-card { background: var(--bg-card); border-radius: 24px; padding: 30px; box-shadow: var(--shadow); }

.card-header { margin-bottom: 25px; }
.card-header h2 { font-size: 20px; margin-bottom: 5px; }
.card-header p { color: var(--text-dim); font-size: 14px; }

/* Servings Control */
.serving-controls { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.input-box { flex: 1; }
.input-box label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; color: var(--text-dim); }
.input-box input { width: 100%; padding: 12px; border: none; border-radius: 12px; background: var(--bg-body); color: var(--text-main); font-weight: bold; box-shadow: var(--inner-shadow); }

.scaler-icon { font-size: 24px; color: var(--accent); padding-top: 20px; }

.quick-actions { display: flex; gap: 10px; margin-bottom: 30px; }
.quick-actions button { flex: 1; padding: 10px; border: none; border-radius: 10px; background: var(--primary); color: white; cursor: pointer; font-size: 13px; font-weight: 600; transition: 0.2s; }
.quick-actions button:hover { opacity: 0.9; transform: translateY(-2px); }

/* Table Section */
.table-header { display: grid; grid-template-columns: 80px 100px 1fr; gap: 10px; padding: 10px; font-size: 12px; font-weight: bold; color: var(--text-dim); }
.ing-row { display: grid; grid-template-columns: 80px 100px 1fr 40px; gap: 10px; margin-bottom: 10px; }
.ing-row input, .ing-row select { padding: 10px; border: none; border-radius: 10px; background: var(--bg-body); color: var(--text-main); box-shadow: var(--inner-shadow); font-size: 14px; }

.add-row { width: 100%; padding: 12px; border: 2px dashed var(--text-dim); background: none; color: var(--text-dim); border-radius: 12px; cursor: pointer; font-weight: 600; margin-top: 15px; }

/* Result Panel */
.output-list { min-height: 200px; border-radius: 15px; padding: 15px; background: var(--bg-body); box-shadow: var(--inner-shadow); }
.res-line { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.res-line .name { font-weight: 600; }
.res-line .qty { color: var(--accent); font-weight: 800; }

.advanced-tools { margin-top: 30px; }
.tool-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.tool-buttons button { padding: 12px; border: none; border-radius: 10px; background: var(--text-dim); color: white; cursor: pointer; font-size: 12px; }

/* SEO Section */
.seo-content { margin-top: 60px; padding: 40px; background: var(--bg-card); border-radius: 24px; line-height: 1.8; }
.seo-content h1 { margin-bottom: 20px; color: var(--primary); }
.seo-content h2 { margin-top: 30px; margin-bottom: 15px; }
.tags-cloud { margin-top: 40px; padding: 20px; background: var(--bg-body); border-radius: 12px; }

/* Responsive Design */
@media (max-width: 992px) {
    .calc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .ing-row { grid-template-columns: 1fr 1fr; }
    .ing-row input:nth-child(3) { grid-column: span 2; }
    .ing-row .remove-btn { grid-column: span 2; }
    .serving-controls { flex-direction: column; }
    .scaler-icon { transform: rotate(90deg); padding: 0; }
}