* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background-color: #0d1117;
    color: #c9d1d9;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.app-header { background-color: #161b22; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #30363d; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
.app-header h1 { font-size: 18px; color: #58a6ff; margin: 0; font-weight: 700; letter-spacing: 0.5px; }
.base-date { font-size: 13px; color: #8b949e; background: #21262d; padding: 4px 10px; border-radius: 12px; }

.tabs { display: flex; background: #010409; position: sticky; top: 0; z-index: 100; border-bottom: 2px solid #30363d; }
.tab-btn { flex: 1; padding: 14px; background: none; border: none; color: #8b949e; cursor: pointer; font-size: 15px; font-weight: bold; text-align: center; transition: all 0.2s; border-bottom: 3px solid transparent; }
.tab-btn:active { background: #161b22; }
.tab-btn.active { color: #58a6ff; border-bottom: 3px solid #58a6ff; background: #1f2428; }

.content { padding: 12px; }
.tab-content { display: none; animation: fadeIn 0.3s; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 15px; }
@media (min-width: 1024px) {
    .dashboard-grid { grid-template-columns: 1fr 1fr; }
    .panel-full { grid-column: span 2; }
}

.panel { background: #161b22; border: 1px solid #30363d; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.5); margin-bottom: 15px; }
.panel h2 { font-size: 15px; background: #21262d; padding: 10px 15px; color: #f0f6fc; margin: 0; border-bottom: 1px solid #30363d; display: flex; align-items: center; gap: 6px; }

.table-container { width: 100%; overflow-x: auto; max-height: 60vh; background: #0d1117;}
.table-container::-webkit-scrollbar { width: 6px; height: 6px; }
.table-container::-webkit-scrollbar-thumb { background: #484f58; border-radius: 3px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
th, td { padding: 8px 12px; border-bottom: 1px solid #21262d; text-align: center; }
th:nth-child(1), td:nth-child(1), th:nth-child(2), td:nth-child(2) { text-align: left; }
th { position: sticky; top: 0; background: #161b22; z-index: 10; color: #8b949e; font-weight: 600; font-size: 12px; letter-spacing: 0.5px;}
tr:hover td { background-color: #1f2428; }

/* Colors */
.pos-z { color: #ff7b72; font-weight: bold; }
.neg-z { color: #79c0ff; font-weight: bold; }
.hit-mark { color: #ff7b72; font-size: 16px; }

/* Rank Blocks */
.snipe-container { display: flex; flex-direction: column; gap: 16px; }
.rank-section { border-radius: 8px; overflow: hidden; border: 1px solid #30363d; background: #161b22; }
.rank-header { padding: 12px 15px; font-weight: bold; font-size: 15px; color: white; display: flex; justify-content: space-between; align-items: center;}
.rank-S .rank-header { background: linear-gradient(90deg, #b31d28 0%, #d73a49 100%); }
.rank-A .rank-header { background: linear-gradient(90deg, #d73a49 0%, #ea4a5a 100%); }
.rank-B .rank-header { background: linear-gradient(90deg, #b08800 0%, #dbab09 100%); }
.rank-M .rank-header { background: linear-gradient(90deg, #ff7b72 0%, #d73a49 100%); color: white; } /* 新設：極熱のM(マグマ)ランク */
.rank-C .rank-header { background: linear-gradient(90deg, #2ea043 0%, #238636 100%); color: white; } /* Cランクは様子見の緑へ還元 */
.rank-D .rank-header, .rank-E .rank-header, .rank-X .rank-header { background: linear-gradient(90deg, #1f6feb 0%, #388bfd 100%); color: white; } /* 休眠・その他は青へ */

.search-bar { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; background: #161b22; padding: 15px; border-radius: 8px; border: 1px solid #30363d; }
.search-bar input, .search-bar select { padding: 10px; border-radius: 6px; border: 1px solid #30363d; background: #0d1117; color: #c9d1d9; flex: 1; min-width: 150px; font-size: 14px; }
.search-bar input:focus, .search-bar select:focus { outline: none; border-color: #58a6ff; }
.search-bar button { background: #238636; color: white; cursor: pointer; border: none; font-weight: 600; border-radius: 6px; padding: 10px 20px; transition: background 0.2s; }
.search-bar button:hover { background: #2ea043; }
.search-bar button:active { background: #238636; transform: scale(0.98); }

.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(13, 17, 23, 0.9); display: flex; justify-content: center; align-items: center; z-index: 1000; font-size: 20px; color: #58a6ff; font-weight: bold; display: none; }

/* --- V2.0 / V3.0 追加伴う TAB2・TAB3 専用のUI圧縮ビュー --- */
#tab2 .table-container table, 
#tab3 .table-container table {
    font-size: 11px; /* 指標増大による横幅圧迫を緩和するための文字縮小 */
}

#tab2 .table-container th, #tab2 .table-container td,
#tab3 .table-container th, #tab3 .table-container td {
    padding: 4px 6px; /* 余白を極限まで削る */
    white-space: nowrap; /* 不用意な改行を防ぎ、横並びを死守する */
}

/* --- TAB3 クイック表示用 IDジャンプリンク --- */
.id-link {
    color: #58a6ff;
    text-decoration: underline;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
    padding: 2px 4px;
    border-radius: 3px;
}
.id-link:hover {
    color: #79c0ff;
    background-color: rgba(88, 166, 255, 0.1);
}