.btn-submit:hover {
    background: #0060c5;
    transition: background-color 0.3s ease;
}

.btn-home {
    border: 2px solid #006bdc;
    border-radius: 4px;
    padding: 5px;

    text-decoration: none;
    color: #006bdc;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
}

.btn-home:hover {
    border: 2px solid #00489a;
    color: #00489a;
    transition: color 0.3s ease;
}

/* スパチャの外枠 */
.sc-card {
    background: transparent;
    border-radius: 0;
    overflow: visible; /* 拡大時にはみ出てもいいようにする */
    box-shadow: none;

    margin-bottom: 15px;

    /* アニメーション設定 */
    transition:
            grid-template-rows 0.3s ease-out,
            margin-bottom 0.3s ease-out,
            opacity 0.3s ease-out;

    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;

    position: relative;
    z-index: 1;
}

/* スパチャの内側のラッパー */
.sc-collapse-wrapper {
    min-height: 0;
    overflow: hidden;

    /* 影切れ対策: 内側に余白を作り、ネガティブマージンで相殺 */
    padding: 4px;
    margin: -4px;
}

/* スパチャの見た目 */
.sc-card-visual {
    background: white;
    border-radius: 8px;
    overflow: hidden;

    /* 影のベース */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.5s;
}

/* ホバー時に影を強調 */
.sc-card:hover .sc-card-visual {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sc-header {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-weight: bold;
}

.sc-body {
    padding: 15px;
    font-size: 15px;
    line-height: 1.5;
    word-wrap: break-word;
}

.sc-footer {
    text-align: right;
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 5px;
}


/* 表示切り替えスイッチのデザイン */
.filter-switch-area {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 右寄せ */
    margin-bottom: 20px;
    padding: 0 5px;
}

.switch-label {
    margin-right: 10px;
    color: #555;
    cursor: pointer;
    font-size: 0.9rem;
}

/* Toggle Switch本体 */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}


/*
    非表示 (折りたたみ) のアニメーション
   .sc-card 全体をグリッドとして扱う
*/
.tier-low {
    grid-template-rows: 0fr; /* gridの高さを0に */
    margin-bottom: 0 !important; /* 余白も0に */
    opacity: 0; /* 透明に */

    pointer-events: none; /* 操作不能に */
}

/* 表示スイッチON時 */
#sc-list-container.show-all .tier-low {
    grid-template-rows: 1fr; /* 本来の高さに戻す */
    margin-bottom: 15px !important;
    opacity: 1;
    pointer-events: auto;
}


/* Tier Colors */
/* Tier 1: Blue (¥100~) */
.tier-blue .sc-header { background: #1565c0; color: #ffffffff; }
.tier-blue .sc-body   { background: #1e88e5; color: #ffffffff; }

/* Tier 2: Cyan (¥200~) */
.tier-cyan .sc-header { background: #00b8d4ff; color: #000000ff; }
.tier-cyan .sc-body   { background: #00e5ffff; color: #000000ff; }
.tier-cyan .sc-footer { color: rgba(56, 56, 56, 0.8); }

/* Tier 3: Green (¥500~) */
.tier-green .sc-header { background: #00bfa5ff; color: #000000ff; }
.tier-green .sc-body   { background: #1de9b6ff; color: #000000ff; }
.tier-green .sc-footer { color: rgba(56, 56, 56, 0.8); }

/* Tier 4: Yellow (¥1,000~) */
.tier-yellow .sc-header { background: #ffb300ff; color: #000000df; }
.tier-yellow .sc-body   { background: #ffca28ff; color: #000000df; }
.tier-yellow .sc-footer { color: rgba(56, 56, 56, 0.8); }

/* Tier 5: Orange (¥2,000~) */
.tier-orange .sc-header { background: #e65100ff; color: #ffffffdf; }
.tier-orange .sc-body   { background: #f57c00ff; color: #ffffffdf; }

/* Tier 6: Pink (¥5,000~) */
.tier-pink .sc-header { background: #c2185bff; color: #ffffffff; }
.tier-pink .sc-body { background: #e91e63ff; color: #ffffffff; }

/* Tier 7~: Red (¥10,000~) */
.tier-red .sc-header { background: #d00000ff; color: #ffffffff; }
.tier-red .sc-body { background: #e62117ff; color: #ffffffff; }

.empty-msg {
    text-align: center;
    margin-top: 40px;
}

.videoID-header {
    text-align: left;
    margin-bottom: 30px;
    padding: 10px;
    border-bottom: 2px solid #eee;
    border-left: 4px solid #007bff;
    margin-right: 2px;
}

.videoID-label {
    font-weight: 700;
    color: #333;
}


/* ページネーション用 */
.pagination {
    margin-top: 20px;
    text-align: center;
    font-family: sans-serif;
}

.pagination a, .pagination strong {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    background-color: #fff;
}

.pagination a:hover {
    background-color: #f0f0f0;
}

.pagination strong {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.pagination span.dots {
    padding: 8px;
    color: #999;
}


/* ボタンエリアとボタンのデザイン　*/
.sc-action-area {
    text-align: right;

    /* スパチャ本体との隙間 */
    padding-top: 5px;
    padding-right: 2px;

    display: flex;
    justify-content: flex-end;
    gap: 8px
}

.btn-screenshot,
.btn-copy {
    background: transparent;
    border: none;
    color: #999;

    font-size: 0.85rem;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.2s ease;

    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-screenshot:hover,
.btn-copy:hover {
    color: #007bff;
}

/* ソート切替エリア (配信一覧) */
.streams-sort-area {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.streams-sort-area .search-input {
    width: auto;
    max-width: 200px;
}

/* プルダウン式ページネーション */
.pagination-select {
    padding: 8px 40px 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.pagination-select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

/* 検索フォーム */
.search-form-area {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
    gap: 10px; /* 各入力欄の間の余白 */
    margin-bottom: 20px;
}

.search-input {
    padding: 10px;
    margin: 0;
    width: 90%;
    max-width: 400px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    background-color: #fff;
    color: #333;
    box-sizing: border-box; /* paddingとborderをwidthに含める */
}

/* プルダウン専用のスタイル */
select.search-input {
    cursor: pointer;
    appearance: none; /* ブラウザ標準の矢印を消す */
    -webkit-appearance: none;
    -moz-appearance: none;
    

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px; /* 矢印と重ならないように右余白を確保 */
}

select.search-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

/* 検索結果の配信元情報 */
.sc-stream-info {
    font-size: 0.8rem;
    padding: 5px 15px;
    background: rgba(255, 255, 255, 0.8);
    color: #333;
    border-bottom: 1px solid #ddd;
    justify-content: space-between;
}

.sc-stream-info a {
    color: #007bff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.sc-stream-info a:hover {
    opacity: 0.75;
}