body { 
    font-family: 'Segoe UI', sans-serif; 
    background: #000; 
    color: #fff; 
    padding: 10px; 
    margin: 0; 
}
.container { max-width: 500px; margin: 0 auto; }

/* 項目ラベル：ライド中も見やすい明るい黄色 */
.label { 
    font-size: 0.7em; 
    color: #ffff00; 
    text-transform: uppercase; 
    font-weight: bold; 
    margin-bottom: 2px;
}

/* --- カラーグループ --- */
.color-speed { color: #00d4ff !important; } /* スピード系：水色 */
.color-env   { color: #ff9900 !important; } /* 環境系：オレンジ */
.val-white   { color: #ffffff !important; font-weight: bold; }

/* 単位の共通設定（グレーを廃止して白に） */
.unit-w { font-size: 0.4em; color: #00ff00; margin-left: 2px; }
.unit-p { font-size: 0.6em; color: #ffffff; margin-left: 2px; }
.unit-sub { font-size: 0.5em; color: #ffffff; margin-left: 3px; font-weight: normal; }
.unit-white { font-size: 0.8em; color: #ffffff; margin-left: 2px; }

.result-box { 
    background: #000; 
    border: 2px solid #444; 
    border-radius: 15px; 
    overflow: hidden; 
    margin-bottom: 12px; 
}

/* パワーセクション（緑テーマ） */
.main-power-section { 
    display: flex; 
    align-items: center; 
    padding: 12px; 
    border-bottom: 1px solid #444; 
    background: #111;
}
.power-left { flex: 1.3; text-align: center; border-right: 1px solid #444; }
.power-val { font-size: 4em; font-weight: 900; color: #00ff00; line-height: 1; }
.ftp-val { font-size: 1.3em; color: #fff; font-weight: bold; }

.power-right-details { 
    flex: 0.7; 
    padding-left: 12px; 
    text-align: left; 
    font-size: 0.95em; 
    color: #fff; 
    line-height: 1.6; 
}
.detail-row { border-bottom: 1px solid #333; }
.detail-row span { color: #00ff00; font-weight: bold; }

/* グリッドレイアウト */
.combined-grid, .sub-metrics { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    border-bottom: 1px solid #444; 
}
.combined-item, .metric-box { padding: 12px 4px; text-align: center; }
.combined-item:first-child, .metric-box:first-child { border-right: 1px solid #444; }

.metric-val { font-size: 2.6em; font-weight: 800; line-height: 1; }
.val-s { font-size: 1.1em; font-weight: bold; margin-top: 4px; }

/* 風向き表示 */
.wind-flex-container { display: flex; align-items: center; justify-content: center; gap: 10px; }
.wind-arrow-main { 
    font-size: 3.5em; 
    font-weight: bold; 
    color: #00d4ff; /* 矢印は一番目立つ赤 */
    line-height: 1; 
}
.wind-row { font-size: 1.6em; font-weight: bold; }
.feels-row { font-size: 1.1em; font-weight: bold; }

/* 下部ストリップ */
.bottom-strip { padding: 10px; background: #222; text-align: center; }

/* ボタン */
.btn-group { display: flex; gap: 8px; margin-bottom: 15px; }
.sensor-btn { 
    flex: 1; padding: 20px; background: #007bff; color: #fff; border: none; 
    border-radius: 12px; font-weight: bold; cursor: pointer; font-size: 1.2em; 
    box-shadow: 0 4px 0 #0056b3; 
}

.sensor-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #0056b3; }
.sensor-btn.calibrating { background: #ff8800; box-shadow: 0 4px 0 #cc6d00; }
.log-btn { background: #28a745; box-shadow: 0 4px 0 #1e7e34; }
.reset-btn { background: #6c757d; box-shadow: 0 4px 0 #545b62; }

/* 入力欄（ラベルを白にして見やすく） */
.input-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.form-group { background: #1a1a1a; padding: 6px 2px; border: 1px solid #444; border-radius: 6px; text-align: center; }
.form-group label { display: block; font-size: 0.6em; color: #ffffff; font-weight: bold; margin-bottom: 2px; }
.form-group input { 
    width: 90%; background: none; border: none; color: #00d4ff; 
    font-size: 1.0em; font-weight: bold; text-align: center; outline: none; 
}
.display-only { color: #ffffff; font-size: 1.0em; font-weight: bold; }

/* 全体の背景を真っ黒に（視認性重視） */
body {
    background-color: #000000 !important;
    color: #ffffff;
    margin: 0;
    padding-bottom: 140px; /* フッターに被らないための余白 */
}

/* 下部固定エリア全体の背景は黒 */
.bottom-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000000; 
    padding: 8px 16px 2px 16px; /* 下の余白を最小限に */
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* ボタンとクレジットの隙間を最小（2px）に設定 */
    gap: 0px; 
    
    z-index: 1000;
    border-top: 1px solid #222;
}

/* ボタンのグループ */
.btn-group {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 500px;
}

/* ボタン共通：ここで背景と文字色を強制指定 */
.btn {
    flex: 1;
    height: 44px;
    margin: 0 !important; /* 追加 */
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 【修正】開始ボタン：背景を青、文字を白に */
.btn-start, #sensorBtn {
    background-color: #007AFF !important; /* 鮮やかな青 */
    color: #ffffff !important;            /* 真っ白な文字 */
}

/* リセットボタン：背景を濃いグレー、文字を白に */
.btn-reset, #resetBtn {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* 保存ボタン：背景を緑、文字を白に */
.btn-save, #logBtn {
    background-color: #34C759 !important;
    color: #ffffff !important;
}

/* クレジット表記：濃いグレーで目立たなくする */
.footer-link a {
    font-size: 13px;
    color: #555555 !important; /* 濃いグレー（背景の黒に馴染む） */
    text-decoration: none;
    font-family: sans-serif;
    display: inline-block; /* 高さを制御できるようにする */
    line-height: 1;        /* 行の高さを文字ぴったりにする */
    padding: 0 !important; /* 内側の余白をゼロにする */
    margin: 0 !important;  /* 外側の余白をゼロにする */
}

/* PC閲覧時の調整 */
@media (min-width: 500px) {
    .bottom-controls {
        left: 50%;
        transform: translateX(-50%);
        max-width: 500px;
        border-radius: 15px 15px 0 0;
        border: 1px solid #333;
    }
}