.action-buttons {
    display: flex;
    gap: 16px;
    width: 100%;
}

.action-btn {
    flex: 1;
    width: 100%;
    height: 64px;
    border-radius: 14px;
    border: none;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #fff;
    cursor: pointer;
    transition: .15s;
}

.action-btn.start {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.action-btn.end {
    background: linear-gradient(135deg, #ff7675, #d63031);
}

.action-btn:disabled {
    background: #cfcfcf;
    color: #9e9e9e;
    cursor: not-allowed;
}

/* --- 休憩ボタンの基本スタイル --- */
.break-btn {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 50px; /* 丸みを持たせて目立たせる */
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 1. 非活性（disabled）：押せない時は完全に背景に溶け込ませる */
.break-btn:disabled {
    background-color: #e0e0e0;
    color: #a0a0a0;
    border-color: #cccccc;
    cursor: not-allowed;
    box-shadow: none;
    transform: none; /* 押した感触も消す */
}

/* 2. 通常時（押せる時＝作業中）：優しく目立たせる */
.break-btn:not(:disabled) {
    background-color: #ffffff;
    color: #555555;
    border-color: #cccccc;
}
.break-btn:not(:disabled):active {
    transform: scale(0.95); /* 押した時に少し凹む */
}

/* 3. 休憩中：絶対に押し忘れを防ぐための目立つ色！ */
.break-btn.on-break {
    background-color: #ff9800; /* 目立つオレンジ */
    color: #ffffff;
    border-color: #e68a00;
    animation: pulse-orange 2s infinite; /* オプション：ゆっくり点滅させる */
}

/* （おまけ）休憩中を目立たせるアニメーション */
@keyframes pulse-orange {
    0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); }
}

/* ステータスバッジの基本スタイル */
.status-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    /* デフォルトは透明にして見えなくする */
    background-color: transparent; 
}

/* 作業中（START後）のスタイル */
.status-badge.start {
    background-color: #4CAF50; /* 安心のグリーン */
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
}

/* 休憩中のスタイル */
.status-badge.break {
    background-color: #ff9800; /* 目立つオレンジ */
    box-shadow: 0 2px 4px rgba(255, 152, 0, 0.3);
}

/* ヘッダー全体のレイアウト */
.header-action-area {
    display: flex;
    justify-content: space-between; /* 左右に振り分ける */
    align-items: center;            /* 縦の真ん中で揃える */
    flex-wrap: wrap;                /* 画面が狭い場合は折り返す（重なり防止！） */
    gap: 15px;                      /* 上下左右の要素に最低15pxの隙間を空ける */
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;  /* ヘッダーっぽく線を引く（お好みで） */
}

/* 左側（タイトルとバッジ） */
.header-left {
    display: flex;
    align-items: center;
    gap: 15px; /* タイトルとバッジの隙間 */
}

/* 右側（ボタンたち） */
.header-right {
    display: flex;
    align-items: center;
    gap: 10px; /* ★ここが重要：ボタン同士の隙間を必ず10px空ける */
}

/* リセットボタンのスタイル（参考） */
.reset-btn {
    padding: 8px 15px;
    font-size: 14px;
    background-color: #f5f5f5;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}
/* 休憩ボタンのスタイルは前回お伝えしたものでOKです！ */