/* Общие стили калькуляторов PhotoEda */
.calc-card {
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    padding: 28px;
    margin: 0 0 32px;
    box-shadow: 0 18px 44px -28px rgba(43,22,7,0.25);
}
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.calc-field { display: flex; flex-direction: column; gap: 7px; }
.calc-field.full { grid-column: 1 / -1; }
.calc-field label { font: 600 14px/1.2 Onest, sans-serif; color: var(--text-2); }
.calc-field input[type="number"],
.calc-field select {
    width: 100%;
    padding: 12px 14px;
    font: 500 16px/1.2 Onest, sans-serif;
    background: #FFFDFB;
    border: 1.5px solid rgba(0,0,0,0.12);
    border-radius: 10px;
    color: var(--text);
    outline: none;
    transition: border-color .15s;
    -moz-appearance: textfield;
}
.calc-field select { cursor: pointer; }
.calc-field input[type="number"]:focus,
.calc-field select:focus { border-color: #E63F3F; }
.calc-seg { display: flex; gap: 8px; }
.calc-seg button {
    flex: 1;
    padding: 12px 8px;
    font: 600 15px/1.2 Onest, sans-serif;
    background: #FFFDFB;
    border: 1.5px solid rgba(0,0,0,0.12);
    border-radius: 10px;
    color: var(--text-2);
    cursor: pointer;
    transition: all .15s;
}
.calc-seg button.active { background: #E63F3F; border-color: #E63F3F; color: #fff; }
.calc-submit {
    margin-top: 6px;
    width: 100%;
    padding: 16px;
    font: 700 17px/1 Onest, sans-serif;
    background: #E63F3F;
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: box-shadow .15s, transform .05s;
}
.calc-submit:hover { box-shadow: 0 18px 44px -14px rgba(230,63,63,0.6); }
.calc-submit:active { transform: translateY(1px); }

.calc-result { display: none; margin-top: 28px; }
.calc-result.show { display: block; }
.calc-result-main {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, #FFF1ED, #FFE7DC);
    border-radius: 16px;
    margin-bottom: 18px;
}
.calc-result-main .label { font: 600 14px/1.2 Onest; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.calc-result-main .value { font: 800 52px/1 Onest; color: #E63F3F; margin: 8px 0 4px; }
.calc-result-main .value span { font-size: 22px; font-weight: 700; }
.calc-result-main .sub { font: 500 15px/1.4 Onest; color: var(--text-2); }
.calc-result-main.cat-ok .value { color: #5BA350; }
.calc-result-main.cat-warn .value { color: #E6A23F; }
.calc-result-main.cat-bad .value { color: #E63F3F; }

.calc-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.calc-cell { text-align: center; background: #fff; border: 1.5px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 16px 10px; }
.calc-cell .n { font: 800 26px/1 Onest; color: var(--text); }
.calc-cell .t { font: 600 13px/1.2 Onest; color: var(--text-3); margin-top: 6px; }

.calc-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.calc-macro { text-align: center; border-radius: 12px; padding: 14px 8px; color: #fff; }
.calc-macro.p { background: #E63F3F; }
.calc-macro.f { background: #E6A23F; }
.calc-macro.c { background: #5BA350; }
.calc-macro .n { font: 800 24px/1 Onest; }
.calc-macro .t { font: 600 13px/1.2 Onest; margin-top: 5px; opacity: .95; }

/* Перелинковка калькуляторов */
.calc-others {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1.5px solid rgba(0,0,0,0.08);
}
.calc-others a {
    padding: 9px 16px;
    font: 600 14px/1.2 Onest, sans-serif;
    background: #FFF1ED;
    border: 1.5px solid rgba(230,63,63,0.18);
    border-radius: 999px;
    color: #E63F3F;
    text-decoration: none;
    transition: all .15s;
}
.calc-others a:hover { background: #E63F3F; color: #fff; }

@media (max-width: 560px) {
    .calc-grid { grid-template-columns: 1fr; }
    .calc-card { padding: 20px; }
    .calc-result-main .value { font-size: 44px; }
}