/* ============================================================
   操作按钮区：铺满容器宽度，移动端纵向堆叠
   2026-08-07 全站统一：解决 calc1 等「按钮挤在左边不满铺」问题
   窄作用域：只覆盖 .action-buttons / .action-row，不影响其它布局
   ============================================================ */

/* 覆盖 calculator.css 的 repeat(4,1fr) 网格：
   旧规则强制 4 列 → 3 个按钮只占左 3/4、右 1/4 留空
   改为 auto-fit 后任意按钮数都自动铺满整行 */
.input-section > .action-buttons {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
}

.action-buttons,
.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
}

.action-buttons > .btn,
.action-buttons .btn,
.action-row > .btn,
.action-row .btn {
    flex: 1 1 0;
    min-width: 140px;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.action-buttons .btn-primary:hover,
.action-row .btn-primary:hover,
.action-buttons .btn-primary:focus,
.action-row .btn-primary:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(66, 144, 245, .28);
}

/* 移动端：单列堆叠，按钮整行铺满 */
@media (max-width: 768px) {
    .input-section > .action-buttons {
        grid-template-columns: 1fr !important;
    }
    .action-buttons,
    .action-row {
        flex-direction: column;
    }
    .action-buttons .btn,
    .action-row .btn {
        width: 100%;
        min-width: 0;
    }
}