/* Gift Nifty Tools — calculator UI (modern, light card; matches gn- system) */
.gn-tool {
    max-width: 560px;
    margin: 0 auto 1.75rem;
    padding: 22px 24px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e6eaf0;
    box-shadow: 0 1px 3px rgba(16,24,40,.06), 0 12px 32px -16px rgba(16,24,40,.25);
    color: #0f172a;
}
.gn-tool__title { font-size: 1.2rem; font-weight: 800; margin: 0 0 16px; letter-spacing: -.01em; }
.gn-tool__title span { display: block; font-size: .8rem; font-weight: 500; color: #64748b; margin-top: 3px; }

.gn-tool__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gn-tool__grid label {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 12.5px; font-weight: 600; color: #475569;
}
.gn-in {
    width: 100%; padding: 10px 12px; font-size: 15px;
    border: 1px solid #d6dce6; border-radius: 9px; background: #f8fafc; color: #0f172a;
    font-variant-numeric: tabular-nums; box-sizing: border-box;
}
.gn-in:focus { outline: none; border-color: #16a34a; background: #fff; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }

.gn-tool__btn {
    margin-top: 16px; width: 100%; padding: 12px 16px;
    font-size: 15px; font-weight: 700; color: #fff; cursor: pointer;
    background: linear-gradient(180deg, #16a34a, #128a3f); border: none; border-radius: 10px;
    transition: filter .15s ease;
}
.gn-tool__btn:hover { filter: brightness(1.06); }

.gn-tool__out { margin-top: 16px; }
.gn-tool__out:empty { display: none; }
.gn-tool__row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-radius: 9px; margin-bottom: 6px;
    background: #f7f9fc; font-size: 14.5px;
}
.gn-tool__row span { color: #475569; font-weight: 600; }
.gn-tool__row b { font-variant-numeric: tabular-nums; font-size: 16px; }
.gn-tool__row.is-up    { background: rgba(21,163,74,.09); }
.gn-tool__row.is-up b   { color: #15a34a; }
.gn-tool__row.is-down  { background: rgba(220,38,38,.08); }
.gn-tool__row.is-down b { color: #dc2626; }
.gn-tool__row.is-pivot { background: #0b1f3a; }
.gn-tool__row.is-pivot span { color: #aab6c8; }
.gn-tool__row.is-pivot b { color: #fff; }

.gn-tool__err { color: #dc2626; font-size: 13.5px; margin: 4px 0 0; }
.gn-tool__note { margin: 14px 0 0; font-size: 12px; color: #94a3b8; line-height: 1.5; }

@media (max-width: 480px) {
    .gn-tool { padding: 18px 16px; }
    .gn-tool__grid { grid-template-columns: 1fr; }
}