/* =============================================
   市場モニター — フロントエンドCSS
   全セレクタを mm- でプレフィックスしてテーマ干渉を防止
   ============================================= */
/* フォントはfullscreen-template.phpで一括読み込み済み */

:root {
    --mm-bg:       #080b10;
    --mm-panel:    #0d1117;
    --mm-border:   #1a2332;
    --mm-cyan:     #00e5ff;
    --mm-cyan-dim: #007a8a;
    --mm-red:      #ff3d5a;
    --mm-orange:   #ff8c00;
    --mm-purple:   #7c4dff;
    --mm-text:     #8ba0b8;
    --mm-text-hi:  #c8daea;
}

#mm-app {
    font-family: 'Noto Sans JP', sans-serif;
    background: var(--mm-bg);
    color: var(--mm-text);
    overflow: hidden;
    position: relative;
}

#mm-app * { box-sizing: border-box; }

#mm-inner { display: flex; width: 100%; height: 100%; }

/* ── サイドバー ── */
#mm-sidebar {
    width: 360px; min-width: 360px; height: 100%;
    background: var(--mm-panel);
    border-right: 1px solid var(--mm-border);
    display: flex; flex-direction: column;
    position: relative; z-index: 10;
}

#mm-hdr {
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--mm-border);
    background: #0f1923;
}

#mm-hdr h1 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px; font-weight: 700; margin: 0;
    color: var(--mm-cyan); letter-spacing: 1px;
}



@keyframes mm-blink { 50% { opacity: 0.2; } }

/* 統計バー */
#mm-stats-bar {
    border-bottom: 1px solid var(--mm-border);
    background: rgba(0,229,255,0.03);
}
.mm-stats-period-label {
    font-size: 9px; color: var(--mm-cyan-dim);
    letter-spacing: 1px; padding: 5px 12px 0;
    font-family: 'Share Tech Mono', monospace;
}
.mm-stats-cells {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
}
.mm-stat-cell {
    padding: 6px 12px 10px; text-align: center;
    border-right: 1px solid var(--mm-border);
}
.mm-stat-cell:last-child { border-right: none; }
.mm-stat-val {
    font-family: 'Share Tech Mono', monospace;
    font-size: 20px; color: var(--mm-cyan);
}
.mm-stat-val.mm-red    { color: var(--mm-red); }
.mm-stat-val.mm-orange { color: var(--mm-orange); }
.mm-stat-lbl { font-size: 9px; color: var(--mm-text); margin-top: 2px; letter-spacing: 1px; }
.mm-stat-diff {
    font-size: 10px; font-family: 'Share Tech Mono', monospace;
    min-height: 14px; letter-spacing: 0.5px;
}
.mm-diff-up   { color: #ff3d5a; }
.mm-diff-down { color: #66dd88; }
.mm-diff-flat { color: #445566; }

/* アフィリエイトボタン */
#mm-aff-zone {
    display: flex; gap: 8px; padding: 10px 12px;
    border-bottom: 1px solid var(--mm-border);
    background: rgba(0,0,0,0.2);
}

.mm-btn-aff {
    flex: 1; text-align: center; text-decoration: none;
    padding: 8px 4px; border-radius: 3px;
    font-size: 11px; font-weight: 700;
    transition: transform 0.15s;
}
.mm-btn-aff:hover { transform: translateY(-1px); }
.mm-btn-m { background: var(--mm-red); color: #fff; }
.mm-btn-y { background: var(--mm-orange); color: #000; }

/* SNSボタン */
#mm-sns-zone {
    display: flex; gap: 6px; padding: 8px 12px;
    border-bottom: 1px solid var(--mm-border);
    background: rgba(0,0,0,0.15);
}

.mm-btn-sns {
    flex: 1; text-align: center; text-decoration: none;
    padding: 6px 4px; border-radius: 3px;
    font-size: 10px; font-weight: 700;
    transition: opacity 0.2s; border: none; cursor: pointer;
}
.mm-btn-sns:hover { opacity: 0.85; }
.mm-btn-x    { background: #000; color: #fff; }
.mm-btn-line { background: #06c755; color: #fff; }
.mm-btn-copy { background: #2a3a4a; color: var(--mm-text); }
.mm-btn-copy.mm-copied { background: #1a3a2a; color: #66dd88; }

/* 自動更新バー */
#mm-auto-bar {
    padding: 8px 14px; border-bottom: 1px solid var(--mm-border);
    background: rgba(0,229,255,0.03);
    display: flex; align-items: center; justify-content: space-between;
}
.mm-auto-label { font-size: 10px; color: var(--mm-cyan-dim); letter-spacing: 1px; }
.mm-auto-kw    { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--mm-cyan); }
#mm-next-wrap { display: flex; align-items: center; gap: 6px; }
.mm-next { font-size: 9px; color: #445566; }
#mm-next-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px; color: var(--mm-cyan);
    min-width: 40px; text-align: right;
}

/* ローディングバー */
#mm-loading-bar { height: 2px; background: var(--mm-border); overflow: hidden; display: none; }
#mm-loading-bar.mm-active { display: block; }
#mm-loading-bar::after {
    content: ''; display: block; height: 100%;
    background: linear-gradient(90deg, transparent, var(--mm-cyan), transparent);
    animation: mm-scan 1.2s linear infinite; width: 40%;
}
@keyframes mm-scan { from { transform: translateX(-100%); } to { transform: translateX(350%); } }


/* ── フィルターエリア ── */
#mm-filter-area {
    border-bottom: 1px solid var(--mm-border);
    background: rgba(0,0,0,0.2);
    flex-shrink: 0;
}
.mm-filter-row {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-bottom: 1px solid rgba(26,35,50,0.5);
}
.mm-filter-row:last-child { border-bottom: none; }
.mm-filter-label {
    font-size: 9px; color: #445566; letter-spacing: 1px;
    width: 36px; flex-shrink: 0; font-family: 'Share Tech Mono', monospace;
}
.mm-filter-btns { display: flex; gap: 3px; flex: 1; }
.mm-period-btn, .mm-status-btn, .mm-seller-btn {
    flex: 1; padding: 4px 2px;
    background: transparent; border: 1px solid var(--mm-border);
    color: var(--mm-text); border-radius: 3px;
    font-size: 9px; cursor: pointer; font-family: 'Share Tech Mono', monospace;
    transition: all 0.15s; white-space: nowrap;
}
.mm-period-btn:hover, .mm-status-btn:hover, .mm-seller-btn:hover {
    border-color: var(--mm-cyan-dim); color: var(--mm-cyan);
}
.mm-period-btn.mm-active {
    background: var(--mm-cyan); color: #000;
    border-color: var(--mm-cyan); font-weight: 700;
}
.mm-status-btn.mm-active {
    background: #66dd88; color: #000;
    border-color: #66dd88; font-weight: 700;
}
.mm-seller-btn.mm-active {
    background: #7c4dff; color: #fff;
    border-color: #7c4dff; font-weight: 700;
}


/* ログリスト */
#mm-log-list {
    flex: 1; overflow-y: auto; padding: 10px;
    display: flex; flex-direction: column; gap: 7px;
    scrollbar-width: thin;
}

.mm-log-item {
    padding: 9px 11px; border-radius: 2px; font-size: 11px; line-height: 1.5;
    border-left: 3px solid var(--mm-border); background: rgba(255,255,255,0.02);
    animation: mm-slide-in 0.25s ease-out;
}
.mm-log-item:hover { background: rgba(255,255,255,0.05); }
@keyframes mm-slide-in {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}
.mm-log-item a { color: inherit; text-decoration: none; display: block; }
.mm-log-item.mm-m-sold { border-left-color: var(--mm-red);    background: rgba(255,61,90,0.06); }
.mm-log-item.mm-m-new  { border-left-color: #ff7088; }
.mm-log-item.mm-y-bid  { border-left-color: var(--mm-orange); background: rgba(255,140,0,0.06); }
.mm-log-item.mm-y-new  { border-left-color: #ffb347; }
.mm-log-item.mm-info   { border-left-color: var(--mm-cyan-dim); }
.mm-log-item.mm-err    { border-left-color: #443333; }

.mm-log-ts    { font-family: 'Share Tech Mono', monospace; font-size: 9px; color: #445566; margin-bottom: 3px; }
.mm-badge     { display: inline-block; padding: 1px 5px; border-radius: 2px; font-size: 9px; font-weight: 700; margin-right: 4px; }
.mm-badge.M        { background: var(--mm-red); color: #fff; }
.mm-badge.Y        { background: var(--mm-orange); color: #000; }
.mm-badge.mm-shop  { background: #6a3de8; color: #fff; }
.mm-tag       { font-weight: 700; margin-right: 3px; }
.mm-tag.sold  { color: var(--mm-red); }
.mm-tag.bid   { color: var(--mm-orange); }
.mm-tag.new   { color: #66dd88; }
.mm-log-price { color: var(--mm-cyan); font-weight: 700; font-family: 'Share Tech Mono', monospace; }
.mm-log-title { color: var(--mm-text-hi); }
.mm-log-region{ color: #445566; font-size: 10px; margin-top: 2px; }

/* ── 地図エリア ── */
#mm-map-area {
    flex: 1; height: 100%; display: flex; flex-direction: column; position: relative;
}
#mm-map { flex: 1; min-height: 0; }



/* 凡例 */
#mm-legend {
    background: rgba(8,11,16,0.92);
    border: 1px solid var(--mm-border); border-radius: 4px 4px 0 0;
    padding: 12px 14px; font-size: 10px;
    border-bottom: none;
}
#mm-legend h3 {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px; color: var(--mm-cyan); letter-spacing: 0.5px; margin: 0 0 8px;
}
.mm-leg-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.mm-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ── 市町村取引履歴パネル ── */
#mm-region-panel {
    position: absolute;
    top: 0; right: 0;
    width: 320px; height: 100%;
    background: rgba(8,11,16,0.97);
    border-left: 1px solid var(--mm-border);
    display: none; flex-direction: column;
    z-index: 20; animation: mm-slide-right 0.25s ease-out;
}
#mm-region-panel.mm-open { display: flex; }
@keyframes mm-slide-right {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
#mm-region-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--mm-border);
    background: #0f1923; flex-shrink: 0;
}
#mm-region-name {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px; color: var(--mm-cyan); letter-spacing: 1px;
}
#mm-region-close {
    background: none; border: 1px solid var(--mm-border);
    color: var(--mm-text); width: 24px; height: 24px;
    border-radius: 3px; cursor: pointer; font-size: 11px;
    transition: all 0.2s;
}
#mm-region-close:hover { border-color: var(--mm-red); color: var(--mm-red); }

#mm-region-filters {
    padding: 8px 10px; border-bottom: 1px solid var(--mm-border);
    flex-shrink: 0;
}
.mm-rfilter-row {
    display: flex; align-items: center; gap: 4px; margin-bottom: 4px;
}
.mm-rfilter-row:last-child { margin-bottom: 0; }
.mm-rfilter-label {
    font-size: 9px; color: #445566; width: 28px; flex-shrink: 0;
    font-family: 'Share Tech Mono', monospace;
}
.mm-rbtn {
    flex: 1; padding: 4px 2px;
    background: transparent; border: 1px solid var(--mm-border);
    color: var(--mm-text); border-radius: 3px;
    font-size: 9px; cursor: pointer;
    transition: all 0.15s;
}
.mm-rbtn:hover { border-color: var(--mm-cyan-dim); color: var(--mm-cyan); }
.mm-rperiod.mm-active { background: var(--mm-cyan); color: #000; border-color: var(--mm-cyan); font-weight: 700; }
.mm-rstatus.mm-active { background: #66dd88; color: #000; border-color: #66dd88; font-weight: 700; }

#mm-region-stats {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
    border-bottom: 1px solid var(--mm-border); flex-shrink: 0;
}
.mm-rst {
    padding: 6px 4px; text-align: center;
    border-right: 1px solid var(--mm-border);
}
.mm-rst:last-child { border-right: none; }
.mm-rst-v {
    display: block; font-family: 'Share Tech Mono', monospace;
    font-size: 14px; color: var(--mm-cyan);
}
.mm-rst-v.mm-red    { color: var(--mm-red); }
.mm-rst-v.mm-orange { color: var(--mm-orange); }
.mm-rst-l { font-size: 8px; color: #445566; }

#mm-region-list {
    flex: 1; overflow-y: auto; padding: 8px;
    scrollbar-width: thin;
}
.mm-ritem {
    padding: 8px 10px; border-radius: 3px;
    background: rgba(255,255,255,0.02);
    border-left: 3px solid var(--mm-border);
    margin-bottom: 6px; font-size: 11px;
}
.mm-ritem a { text-decoration: none; color: inherit; display: block; }
.mm-ritem:hover { background: rgba(255,255,255,0.05); }
.mm-ritem.mm-sold { border-left-color: var(--mm-red); background: rgba(255,61,90,0.06); }
.mm-ritem.mm-new  { border-left-color: #66dd88; }
.mm-ritem-top { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.mm-ritem-price { color: var(--mm-cyan); font-family: 'Share Tech Mono', monospace; font-weight: 700; margin-left: auto; }
.mm-ritem-title { color: var(--mm-text-hi); line-height: 1.4; }
.mm-ritem-date  { font-size: 9px; color: #445566; margin-top: 2px; }
.mm-ritem-empty { padding: 20px; text-align: center; color: #2a3a4a; font-size: 11px; }


/* ── タイトル改善 ── */
#mm-hdr {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--mm-border);
    background: linear-gradient(180deg, rgba(0,229,255,0.05) 0%, transparent 100%);
}
#mm-hdr h1 {
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.3;
    letter-spacing: 0.5px !important;
}
.mm-title-main {
    display: block;
    font-size: 18px;
    color: #ffffff;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 2px;
}
.mm-title-sub {
    display: block;
    font-size: 11px;
    color: var(--mm-cyan);
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 3px;
    margin-top: 2px;
    opacity: 0.8;
}

/* ── 統計バー改善 ── */
#mm-stats-bar {
    background: linear-gradient(180deg, rgba(0,229,255,0.04) 0%, transparent 100%) !important;
    border-bottom: 1px solid var(--mm-border) !important;
}
.mm-stats-period-label {
    font-size: 9px !important;
    color: var(--mm-cyan-dim) !important;
    letter-spacing: 2px !important;
    padding: 6px 14px 2px !important;
    font-family: 'Share Tech Mono', monospace !important;
}
.mm-stats-cells {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
    padding: 4px 0 8px;
}
.mm-stat-cell {
    padding: 6px 14px 8px !important;
    text-align: left !important;
    position: relative;
}
.mm-stat-cell:first-child {
    border-right: 1px solid var(--mm-border);
}
.mm-stat-icon {
    font-size: 8px;
    margin-bottom: 2px;
    opacity: 0.7;
}
.mm-stat-val {
    font-size: 32px !important;
    font-family: 'Share Tech Mono', monospace !important;
    line-height: 1;
    display: block;
}
.mm-stat-val.mm-cyan { color: var(--mm-cyan) !important; }
.mm-stat-diff {
    font-size: 10px !important;
    margin: 3px 0 2px !important;
    letter-spacing: 0.5px !important;
}
.mm-stat-lbl {
    font-size: 9px !important;
    color: #445566 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase;
}

/* ── ボタン改善 ── */
#mm-btn-mercari {
    background: linear-gradient(135deg, #ff3d5a 0%, #cc2040 100%) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(255,61,90,0.3);
    font-weight: 700 !important;
    letter-spacing: 1px;
    transition: all 0.2s !important;
}
#mm-btn-mercari:hover {
    box-shadow: 0 4px 16px rgba(255,61,90,0.5) !important;
    transform: translateY(-1px);
}
#mm-btn-yahoo {
    background: linear-gradient(135deg, #ff8c00 0%, #cc6600 100%) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(255,140,0,0.3);
    font-weight: 700 !important;
    letter-spacing: 1px;
    transition: all 0.2s !important;
}
#mm-btn-yahoo:hover {
    box-shadow: 0 4px 16px rgba(255,140,0,0.5) !important;
    transform: translateY(-1px);
}

/* ── フィルターバー改善 ── */
#mm-filter-area {
    border-bottom: 1px solid var(--mm-border);
    background: rgba(0,0,0,0.3) !important;
}
.mm-filter-label {
    font-size: 8px !important;
    color: #334455 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase;
}
.mm-period-btn.mm-active {
    background: var(--mm-cyan) !important;
    color: #000 !important;
    box-shadow: 0 0 8px rgba(0,229,255,0.4);
}
.mm-status-btn.mm-active {
    background: #44cc66 !important;
    color: #000 !important;
    box-shadow: 0 0 8px rgba(68,204,102,0.4);
}
.mm-seller-btn.mm-active {
    background: #7c4dff !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(124,77,255,0.4);
}

/* ── 期間別統計改善 ── */

/* ── ランキングパネル ── */
#mm-ranking-panel {
    border-top: 1px solid var(--mm-border);
    background: rgba(0,0,0,0.2);
    flex-shrink: 0;
}
#mm-ranking-hdr {
    padding: 8px 12px 4px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--mm-cyan);
    letter-spacing: 1px;
    border-bottom: 1px solid var(--mm-border);
}
#mm-ranking-filters {
    padding: 6px 10px;
    border-bottom: 1px solid var(--mm-border);
}
.mm-rf-row {
    display: flex; align-items: center; gap: 3px; margin-bottom: 4px;
}
.mm-rf-row:last-child { margin-bottom: 0; }
.mm-rf-label {
    font-size: 8px; color: #445566; width: 24px;
    font-family: 'Share Tech Mono', monospace;
}
#mm-ranking-list {
max-height: 410px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.mm-rank-item {
    display: flex; align-items: center;
    padding: 0 12px;
    height: 38px;           /* 固定高さ：データあり/なしで変わらない */
    box-sizing: border-box;
    border-bottom: 1px solid rgba(26,35,50,0.5);
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.mm-rank-item:hover { background: rgba(0,229,255,0.05); }
.mm-rank-no {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px; color: #445566;
    width: 20px; flex-shrink: 0;
}
.mm-rank-no.top3 { color: var(--mm-cyan); font-weight: 700; }
.mm-rank-name {
    flex: 1; font-size: 11px; color: var(--mm-text-hi);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mm-rank-cnt {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px; color: var(--mm-red); font-weight: 700;
    margin-left: 6px;
}
.mm-rank-bar {
    height: 3px; background: rgba(0,229,255,0.15);
    border-radius: 2px; margin-top: 2px;
    position: relative;
}
.mm-rank-bar-fill {
    height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, var(--mm-cyan), var(--mm-red));
    transition: width 0.5s ease;
}

#mm-ranking-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid var(--mm-border);
}
#mm-ranking-title {
    font-size: 10px; color: var(--mm-cyan);
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 0.5px;
}
#mm-ranking-period {
    display: flex; gap: 2px;
}
.mm-rank-period-btn {
    padding: 2px 6px;
    background: transparent; border: 1px solid var(--mm-border);
    color: var(--mm-text); border-radius: 2px;
    font-size: 9px; cursor: pointer;
    font-family: 'Share Tech Mono', monospace;
    transition: all 0.15s;
}
.mm-rank-period-btn:hover { border-color: var(--mm-cyan-dim); color: var(--mm-cyan); }
.mm-rank-period-btn.mm-active {
    background: var(--mm-cyan); color: #000;
    border-color: var(--mm-cyan); font-weight: 700;
}
#mm-ranking-list {
    padding: 6px 0;
max-height: 410px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.mm-rank-item {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    cursor: pointer; transition: background 0.15s;
    border-left: 2px solid transparent;
}
.mm-rank-item:hover {
    background: rgba(255,255,255,0.04);
    border-left-color: var(--mm-cyan);
}
.mm-rank-num {
    font-size: 9px; color: #445566;
    font-family: 'Share Tech Mono', monospace;
    width: 16px; flex-shrink: 0; text-align: right;
}
.mm-rank-num.top3 { color: var(--mm-orange); font-weight: 700; }
.mm-rank-name {
    font-size: 11px; color: var(--mm-text-hi);
    flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mm-rank-bar-wrap {
    width: 40px; flex-shrink: 0;
}
.mm-rank-bar {
    height: 3px; background: var(--mm-red);
    border-radius: 2px; transition: width 0.4s ease;
}
.mm-rank-cnt {
    font-size: 9px; color: var(--mm-red);
    font-family: 'Share Tech Mono', monospace;
    width: 20px; text-align: right; flex-shrink: 0;
}
.mm-rank-loading {
    padding: 12px; text-align: center;
    font-size: 10px; color: #2a3a4a;
}

/* ════════════════════════════════════════
   カスタムスタイル
════════════════════════════════════════ */

/* ── レイアウト ── */
#mm-map-area { position: relative !important; }
#mm-right-panel {
    position: absolute !important;
    top: 16px !important; right: 16px !important;
    width: 200px !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100vh - 32px) !important;
}

/* ── 凡例 ── */
#mm-legend {
    background: rgba(8,11,16,0.92);
    border: 1px solid var(--mm-border);
    border-radius: 4px 4px 0 0;
    border-bottom: none;
    padding: 12px 14px;
    font-size: 10px;
    flex-shrink: 0;
}
#mm-ranking-panel {
    background: rgba(8,11,16,0.92);
    border: 1px solid var(--mm-border);
    border-radius: 0 0 4px 4px;
    backdrop-filter: blur(4px);
    flex-shrink: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#mm-ranking-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* ── タイトルエリア ── */
#mm-hdr {
    padding: 12px 16px 8px !important;
    background: #0c1420 !important;
    border-bottom: 1px solid #1a2a3a !important;
}
.mm-hdr-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
}
.mm-title-main {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: 1px !important;
    display: inline !important;
    white-space: nowrap !important;
}
.mm-title-sub {
    font-size: 11px !important;
    color: #00e5ff !important;
    letter-spacing: 1px !important;
    opacity: 1 !important;
    display: inline !important;
    white-space: nowrap !important;
    font-family: 'Share Tech Mono', monospace !important;
}
.mm-title-desc {
    font-size: 14px !important;
    color: #7a9ab0 !important;
    margin: 5px 0 2px !important;
    line-height: 1.5 !important;
}
.mm-hdr-brand {
    font-family: 'Courier New', monospace !important;
    font-size: 14px !important;
    color: #00e5ff !important;
    border: 1px solid #00e5ff !important;
    padding: 5px 12px !important;
    border-radius: 3px !important;
    opacity: 0.85 !important;
    white-space: nowrap !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* ── 統計バー ── */
#mm-stats-bar {
    background: #0c1420 !important;
    border-bottom: 1px solid #1a2a3a !important;
}
.mm-stats-period-label {
    font-size: 18px !important;
    color: #7a9ab0 !important;
    letter-spacing: 1px !important;
    padding: 8px 16px 4px !important;
    display: block !important;
}
.mm-stats-cells {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}
.mm-stat-cell {
    padding: 6px 16px 12px !important;
    text-align: center !important;
}
.mm-stat-cell:first-child { border-right: 1px solid #1a2a3a !important; }
.mm-stat-val-wrap {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 3px !important;
}
.mm-stat-val {
    font-family: 'Orbitron', 'Courier New', monospace !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
}
.mm-stat-val.mm-red  { color: #ff4466 !important; }
.mm-stat-val.mm-cyan { color: #00ddff !important; }
.mm-stat-unit {
    font-size: 16px !important;
    color: #556677 !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    margin-bottom: 3px !important;
}
.mm-stat-diff {
    font-size: 16px !important;
    margin: 4px 0 2px !important;
}
.mm-stat-sub {
    font-size: 10px !important;
    color: #4a7a8a !important;
    margin-top: 3px !important;
    letter-spacing: 0.3px;
}
.mm-stat-sub span {
    color: var(--mm-cyan);
    font-weight: 700;
}
.mm-stat-lbl {
    font-size: 18px !important;
    color: #7a9ab0 !important;
    text-align: center !important;
}

/* ── ボタン ── */
#mm-search-btns {
    display: flex !important; gap: 8px !important;
    padding: 10px 12px !important;
    background: #0a1018 !important;
    border-bottom: 1px solid #1a2a3a !important;
}
#mm-btn-mercari, #mm-btn-yahoo {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 11px 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    border: none !important;
    text-decoration: none !important;
}
#mm-btn-mercari {
    background: linear-gradient(135deg, #ff3355, #cc1133) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(255,50,80,0.3) !important;
}
#mm-btn-yahoo {
    background: linear-gradient(135deg, #ff8800, #cc6600) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(255,140,0,0.3) !important;
}

/* ── SNSボタン ── */
#mm-sns-zone, #mm-sns-btns {
    display: flex !important; gap: 6px !important;
    padding: 8px 12px !important;
    background: #0a1018 !important;
    border-bottom: 1px solid #1a2a3a !important;
}
#mm-btn-x {
    flex: 1 !important; background: #1a1a2e !important;
    color: #ccd6e0 !important; border: 1px solid #2a3a4a !important;
    padding: 7px 0 !important; border-radius: 3px !important;
    font-size: 11px !important; text-align: center !important;
    text-decoration: none !important;
}
#mm-btn-line {
    flex: 1 !important; background: #00b900 !important;
    color: #fff !important; border: none !important;
    padding: 7px 0 !important; border-radius: 3px !important;
    font-size: 11px !important; font-weight: 700 !important;
    text-align: center !important; text-decoration: none !important;
}
#mm-btn-copy {
    flex: 1 !important; background: #1a1a2e !important;
    color: #ccd6e0 !important; border: 1px solid #2a3a4a !important;
    padding: 7px 0 !important; border-radius: 3px !important;
    font-size: 11px !important; cursor: pointer !important;
}

/* ── フィルター ── */
#mm-filter-area {
    background: #0a1018 !important;
    border-bottom: 1px solid #1a2a3a !important;
    padding: 8px 12px !important;
}
.mm-filter-row {
    display: flex !important; align-items: center !important;
    gap: 4px !important; margin-bottom: 5px !important;
}
.mm-filter-row:last-child { margin-bottom: 0 !important; }
.mm-filter-label {
    font-size: 9px !important; color: #3a5a7a !important;
    width: 36px !important; flex-shrink: 0 !important;
}
.mm-period-btn, .mm-status-btn, .mm-seller-btn {
    flex: 1 !important; background: #111827 !important;
    color: #6a8aa0 !important; border: 1px solid #1e2d3d !important;
    padding: 5px 0 !important; border-radius: 3px !important;
    font-size: 10px !important; cursor: pointer !important;
    text-align: center !important; transition: all 0.15s !important;
}
.mm-period-btn.mm-active { background: #00e5ff !important; color: #000 !important; border-color: #00e5ff !important; font-weight: 700 !important; }
.mm-status-btn.mm-active { background: #22cc55 !important; color: #000 !important; border-color: #22cc55 !important; font-weight: 700 !important; }
.mm-seller-btn.mm-active { background: #7c4dff !important; color: #fff !important; border-color: #7c4dff !important; font-weight: 700 !important; }


/* ── ランキングパネル ── */
#mm-ranking-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-bottom: 1px solid var(--mm-border);
}
#mm-ranking-title { font-size: 10px; color: var(--mm-cyan); font-family: 'Share Tech Mono', monospace; letter-spacing: 0.5px; }
#mm-ranking-period { display: flex; gap: 2px; }
.mm-rank-period-btn {
    padding: 2px 6px; background: transparent; border: 1px solid var(--mm-border);
    color: var(--mm-text); border-radius: 2px; font-size: 9px; cursor: pointer;
    font-family: 'Share Tech Mono', monospace; transition: all 0.15s;
}
.mm-rank-period-btn.mm-active { background: var(--mm-cyan); color: #000; border-color: var(--mm-cyan); font-weight: 700; }
#mm-ranking-list { padding: 6px 0;
max-height: 410px; overflow-y: auto; scrollbar-width: thin; }
.mm-rank-item {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 10px; cursor: pointer; transition: background 0.15s;
    border-left: 2px solid transparent;
}
.mm-rank-item:hover { background: rgba(255,255,255,0.04); border-left-color: var(--mm-cyan); }
.mm-rank-num { font-size: 9px; color: #445566; font-family: 'Share Tech Mono', monospace; width: 16px; flex-shrink: 0; text-align: right; }
.mm-rank-num.top3 { color: var(--mm-orange); font-weight: 700; }
.mm-rank-name { font-size: 11px; color: var(--mm-text-hi); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-rank-bar-wrap { width: 40px; flex-shrink: 0; }
.mm-rank-bar { height: 3px; background: var(--mm-red); border-radius: 2px; transition: width 0.4s ease; }
.mm-rank-cnt { font-size: 9px; color: var(--mm-red); font-family: 'Share Tech Mono', monospace; width: 20px; text-align: right; flex-shrink: 0; }
.mm-rank-loading { padding: 12px; text-align: center; font-size: 10px; color: #2a3a4a; }

/* ── フリースペース ── */
#mm-free-panel {
    position: absolute !important;
    bottom: 32px !important; right: 16px !important;
    left: auto !important; max-width: 260px !important;
    background: rgba(8,11,16,0.88) !important;
    border: 1px solid #1a2a3a !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    z-index: 10 !important;
    font-size: 11px !important; color: #7a9ab0 !important;
    line-height: 1.7 !important; display: none;
}
#mm-free-panel a { color: #00e5ff; text-decoration: none; }

/* ── 広告アイテム ── */
.mm-ad-item { background: rgba(255,200,0,0.03) !important; border-left: 2px solid rgba(255,200,0,0.3) !important; }
.mm-ad-item a { text-decoration: none !important; display: block !important; padding: 6px 10px !important; }
.mm-ad-badge { font-size: 8px; background: rgba(255,200,0,0.2); color: #aa8800; border: 1px solid rgba(255,200,0,0.3); padding: 1px 5px; border-radius: 2px; font-family: 'Share Tech Mono', monospace; letter-spacing: 1px; flex-shrink: 0; }
.mm-ad-title { font-size: 12px; color: #aabbcc; flex: 1; }
.mm-ad-text { font-size: 10px; color: #556677; width: 100%; margin-top: 2px; }
.mm-ad-inner { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── カレンダー ── */
#mm-cal-popup {
    display: none; position: absolute; left: 52px;
    background: #0c1420; border: 1px solid #1a2a3a;
    border-radius: 6px; padding: 10px; z-index: 100;
    width: 240px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
#mm-cal-popup.mm-active { display: block; }
#mm-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#mm-cal-month { font-size: 12px; color: #00e5ff; font-family: 'Share Tech Mono', monospace; letter-spacing: 1px; }
#mm-cal-prev, #mm-cal-next { background: none; border: 1px solid #1a2a3a; color: #7a9ab0; padding: 2px 8px; border-radius: 3px; cursor: pointer; font-size: 14px; }
#mm-cal-prev:hover, #mm-cal-next:hover { color: #00e5ff; border-color: #00e5ff; }
#mm-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mm-cal-dow { font-size: 9px; color: #334455; text-align: center; padding: 2px 0; }
.mm-cal-day { font-size: 11px; text-align: center; padding: 5px 2px; border-radius: 3px; cursor: pointer; color: #7a9ab0; transition: all 0.15s; border: 1px solid transparent; }
.mm-cal-day:hover { background: #1a2a3a; color: #fff; }
.mm-cal-day.mm-active { background: #00e5ff; color: #000; font-weight: 700; }
.mm-cal-day.mm-today { border-color: #00e5ff; color: #00e5ff; }
.mm-cal-day.mm-future { color: #222; cursor: default; }
#mm-cal-btn { font-size: 12px !important; }

/* ── 統計エリア最終調整 ── */
.mm-title-desc {
    font-size: 12px !important;
    color: #ffffff !important;
}
.mm-stat-lbl {
    font-size: 11px !important;
    color: #7a9ab0 !important;
    text-align: center !important;
    letter-spacing: 1px !important;
    margin-bottom: 2px !important;
}
.mm-stat-val {
    font-size: 40px !important;
}
.mm-stat-unit {
    font-size: 14px !important;
    color: #556677 !important;
}
.mm-stat-diff {
    font-size: 12px !important;
    text-align: center !important;
}
.mm-diff-up   { color: #22cc55 !important; }
.mm-diff-down { color: #ff4466 !important; }
.mm-diff-flat { color: #556677 !important; }
.mm-stats-period-label {
    font-size: 18px !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 6px 16px 8px !important;
    letter-spacing: 0.5px !important;
}

/* ── 統計エリア全体修正 ── */

/* ① 「件」の位置修正 */
.mm-stat-val-wrap {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 2px !important;
    line-height: 1 !important;
}
.mm-stat-unit {
    font-size: 14px !important;
    color: #556677 !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    padding-bottom: 6px !important;
}

/* ② 前日比フォント改善 */
.mm-stat-diff {
    font-size: 12px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    text-align: center !important;
    letter-spacing: 0.3px !important;
}

/* ③ 直近24時間の余白 */
.mm-stats-period-label {
    font-size: 18px !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 12px 16px 10px !important;
    letter-spacing: 0.5px !important;
    border-top: 1px solid #1a2a3a !important;
    margin-top: 4px !important;
}

/* ④ 53bag.com バッジ縦位置修正 */
.mm-hdr-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}
.mm-hdr-brand {
    align-self: center !important;
    margin-top: 0 !important;
}

/* ── 件・ラベル・色 修正 ── */

/* 「件」位置・色修正 */
.mm-stat-val-wrap {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 1px !important;
    line-height: 1 !important;
}
.mm-stat-unit {
    font-size: 18px !important;
    color: #aabbcc !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    padding-bottom: 4px !important;
    font-weight: 400 !important;
}

/* ラベルサイズアップ */
.mm-stat-lbl {
    font-size: 14px !important;
    color: #aabbcc !important;
    text-align: center !important;
    letter-spacing: 1px !important;
    margin-bottom: 3px !important;
}

/* ── 直近24時間 区切り線削除 ── */
.mm-stats-period-label {
    border-top: none !important;
    margin-top: 0 !important;
}

/* ── 直近24時間 書体統一 ── */
.mm-stats-period-label {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
}

/* ── フィルターラベル 視認性改善 ── */
.mm-filter-label {
    font-size: 12px !important;
    color: #aabbcc !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    letter-spacing: 0.5px !important;
    width: 40px !important;
}

/* ════════════════════════════════
   右パネル リデザイン
════════════════════════════════ */

#mm-right-panel {
    width: 220px !important;
}

/* 凡例 */
#mm-legend {
    background: rgba(8,11,16,0.95) !important;
    border: 1px solid #1e3040 !important;
    border-bottom: 1px solid #0d1f2f !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 10px 14px !important;
}
#mm-legend h3 {
    font-size: 9px !important;
    color: #00e5ff !important;
    letter-spacing: 3px !important;
    margin: 0 0 8px !important;
    font-family: 'Share Tech Mono', monospace !important;
    opacity: 0.8 !important;
}
.mm-leg-row {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-bottom: 5px !important;
    font-size: 11px !important;
    color: #aabbcc !important;
}
.mm-leg-dot {
    width: 8px !important; height: 8px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* ランキングパネル */
#mm-ranking-panel {
    background: rgba(8,11,16,0.95) !important;
    border: 1px solid #1e3040 !important;
    border-top: none !important;
    border-radius: 0 0 6px 6px !important;
}
#mm-ranking-hdr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid #1e3040 !important;
    background: rgba(0,229,255,0.04) !important;
}
#mm-ranking-title {
    font-size: 10px !important;
    color: #00e5ff !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
}
#mm-ranking-period {
    display: flex !important;
    gap: 3px !important;
}
.mm-rank-period-btn {
    padding: 2px 7px !important;
    background: transparent !important;
    border: 1px solid #1e3040 !important;
    color: #556677 !important;
    border-radius: 3px !important;
    font-size: 9px !important;
    cursor: pointer !important;
    font-family: 'Share Tech Mono', monospace !important;
    transition: all 0.15s !important;
}
.mm-rank-period-btn:hover {
    color: #00e5ff !important;
    border-color: #00e5ff !important;
}
.mm-rank-period-btn.mm-active {
    background: #00e5ff !important;
    color: #000 !important;
    border-color: #00e5ff !important;
    font-weight: 700 !important;
}
#mm-ranking-list {
    padding: 4px 0 6px !important;
max-height: 410px !important;
    overflow-y: auto !important;
}
.mm-rank-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 12px !important;
    cursor: pointer !important;
    transition: background 0.12s !important;
    border-left: 2px solid transparent !important;
}
.mm-rank-item:hover {
    background: rgba(0,229,255,0.06) !important;
    border-left-color: #00e5ff !important;
}
.mm-rank-num {
    font-size: 10px !important;
    color: #334455 !important;
    font-family: 'Share Tech Mono', monospace !important;
    width: 18px !important;
    text-align: right !important;
    flex-shrink: 0 !important;
}
.mm-rank-num.top3 {
    color: #ff8c00 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}
.mm-rank-name {
    font-size: 12px !important;
    color: #ccd6e0 !important;
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}
.mm-rank-bar-wrap {
    width: 44px !important;
    flex-shrink: 0 !important;
}
.mm-rank-bar {
    height: 2px !important;
    background: linear-gradient(90deg, #ff3d5a, #ff8c00) !important;
    border-radius: 1px !important;
    transition: width 0.4s ease !important;
}
.mm-rank-cnt {
    font-size: 11px !important;
    color: #ff4466 !important;
    font-family: 'Share Tech Mono', monospace !important;
    width: 22px !important;
    text-align: right !important;
    flex-shrink: 0 !important;
    font-weight: 700 !important;
}
.mm-rank-loading {
    padding: 16px !important;
    text-align: center !important;
    font-size: 11px !important;
    color: #2a3a4a !important;
}

/* フリースペース */
#mm-free-panel {
    font-size: 11px !important;
    line-height: 1.8 !important;
    background: rgba(8,11,16,0.9) !important;
    border: 1px solid #1e3040 !important;
    border-radius: 4px !important;
}
#mm-free-panel a { color: #00e5ff !important; }

/* ── 凡例 独立配置（フリースペース直上） ── */
#mm-legend {
    position: absolute !important;
    bottom: 130px !important;
    right: 16px !important;
    width: 180px !important;
    background: rgba(8,11,16,0.92) !important;
    border: 1px solid #1e3040 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    z-index: 10 !important;
}

/* ランキングパネルの角丸を全体に */
#mm-ranking-panel {
    border-radius: 6px !important;
    border: 1px solid #1e3040 !important;
    border-top: 1px solid #1e3040 !important;
}

/* ── 右パネル全体を右下に移動 ── */
#mm-right-panel {
    position: absolute !important;
    top: auto !important;
    bottom: 32px !important;
    right: 16px !important;
    width: 220px !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
/* ランキングと凡例の境界 */
#mm-ranking-panel {
    border-radius: 6px 6px 0 0 !important;
    border-bottom: none !important;
}
#mm-legend {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    width: auto !important;
    border-radius: 0 0 6px 6px !important;
    border-top: 1px solid #0d1f2f !important;
}

/* ── 凡例上・ランキング下の角丸修正 ── */
#mm-legend {
    position: static !important;
    border-radius: 6px 6px 0 0 !important;
    border-bottom: none !important;
    bottom: auto !important;
    right: auto !important;
    width: auto !important;
}
#mm-ranking-panel {
    border-radius: 0 0 6px 6px !important;
    border-top: none !important;
}

/* ── 右パネルをフリースペースの真上に配置・同じ幅 ── */
#mm-right-panel {
    position: absolute !important;
    bottom: 180px !important;
    right: 16px !important;
    top: auto !important;
    width: 260px !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
}
#mm-free-panel {
    width: 260px !important;
    right: 16px !important;
    bottom: 32px !important;
}

/* ── ランキング10件スクロールなし表示 ── */
#mm-ranking-list {
    max-height: none !important;
    overflow-y: visible !important;
    padding: 2px 0 4px !important;
}
.mm-rank-item {
    padding: 4px 12px !important;
}

/* ── 期間指定ドロップダウン ── */
#mm-range-dropdown {
    display: none;
    position: absolute;
    left: 52px;
    background: #0c1420;
    border: 1px solid #1a2a3a;
    border-radius: 4px;
    z-index: 200;
    min-width: 100px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
#mm-range-dropdown.mm-active { display: block; }
.mm-range-item {
    display: block !important;
    width: 100% !important;
    padding: 8px 14px !important;
    background: transparent !important;
    border: none !important;
    color: #aabbcc !important;
    font-size: 11px !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background 0.12s !important;
}
.mm-range-item:hover {
    background: rgba(0,229,255,0.08) !important;
    color: #00e5ff !important;
}
.mm-range-item.mm-active {
    color: #00e5ff !important;
    font-weight: 700 !important;
}

/* ── カレンダー期間選択 ── */
#mm-cal-hint {
    font-size: 10px;
    color: #00e5ff;
    text-align: center;
    padding: 4px 0 6px;
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #1a2a3a;
    margin-bottom: 6px;
}
.mm-cal-day.mm-in-range {
    background: rgba(0,229,255,0.12) !important;
    color: #aabbcc !important;
    border-radius: 0 !important;
}
.mm-cal-day.mm-active {
    background: #00e5ff !important;
    color: #000 !important;
    font-weight: 700 !important;
    border-radius: 3px !important;
}
#mm-cal-btn {
    font-size: 10px !important;
    white-space: nowrap !important;
}

/* ── カレンダー選択色（最優先） ── */
.mm-cal-day.mm-active {
    background: #00e5ff !important;
    color: #000 !important;
    font-weight: 700 !important;
    border-color: #00e5ff !important;
}
.mm-cal-day.mm-in-range {
    background: rgba(0,229,255,0.2) !important;
    color: #cceeff !important;
    border-radius: 0 !important;
}
.mm-cal-day.mm-today.mm-active {
    background: #00e5ff !important;
    color: #000 !important;
}

/* ── LINEボタン 枠線追加 ── */
#mm-btn-line {
    border: 2px solid #00dd00 !important;
    box-shadow: 0 0 6px rgba(0,200,0,0.3) !important;
}

/* ── LINEボタン 枠線緑・中黒 ── */
#mm-btn-line {
    background: #000000 !important;
    color: #00b900 !important;
    border: 2px solid #00b900 !important;
    font-weight: 700 !important;
}
#mm-btn-line:hover {
    background: #00b900 !important;
    color: #fff !important;
}


/* ═══════════════════════════════════════════
   確定スタイル最終版
   ═══════════════════════════════════════════ */
html, body { overflow: hidden !important; }
#mm-app { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; overflow: hidden !important; z-index: 9999 !important; }
.admin-bar #mm-app { top: 32px !important; height: calc(100vh - 32px) !important; }
#mm-inner { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; }
#mm-upper { display: flex !important; flex: 1 !important; min-height: 0 !important; overflow: hidden !important; }
#mm-sidebar { width: 300px !important; min-width: 300px !important; max-width: 300px !important; height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; }
#mm-map-area { flex: 1 !important; min-width: 0 !important; height: 100% !important; display: flex !important; flex-direction: column !important; position: relative !important; overflow: hidden !important; }
#mm-map { flex: 1 !important; min-height: 0 !important; width: 100% !important; }
#mm-log-list { flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; display: block !important; width: 100% !important; }
#mm-log-list .mm-log-item { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
#mm-right-panel { position: absolute !important; top: 130px !important; right: 12px !important; bottom: auto !important; left: auto !important; width: 260px !important; z-index: 20 !important; display: block !important; background: transparent !important; }
#mm-ranking-panel { background: rgba(8,11,16,0.92) !important; border: 1px solid #1a2a3a !important; border-radius: 4px !important; overflow: hidden !important; display: block !important; flex: none !important; }
#mm-ranking-list { height: 320px !important; max-height: 320px !important; overflow-y: hidden !important; display: block !important; flex: none !important; }
#mm-legend { position: absolute !important; top: 12px !important; left: 12px !important; bottom: auto !important; right: auto !important; z-index: 20 !important; background: rgba(8,11,16,0.92) !important; border: 1px solid #1a2a3a !important; border-radius: 4px !important; padding: 8px 12px !important; display: block !important; }
#mm-legend h3 { display: none !important; }
#mm-btn-line { background: #1a1a2e !important; color: #00b900 !important; border: 1px solid #2a3a4a !important; box-shadow: none !important; font-weight: normal !important; }
.mm-title-inline { display: flex !important; align-items: baseline !important; gap: 6px !important; margin: 0 !important; flex-wrap: nowrap !important; white-space: nowrap !important; }
.mm-hdr-brand { display: none !important; }
.mm-stats-period-label { font-size: 13px !important; font-weight: 700 !important; color: #c8daea !important; text-align: center !important; margin: 5px 0 !important; }
#mm-pie-area { display: flex !important; align-items: center !important; justify-content: space-around !important; padding: 6px 10px !important; border-bottom: 1px solid #1a2a3a !important; flex-shrink: 0 !important; }
.mm-pie-block { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; }
.mm-pie-title { font-size: 10px !important; color: #4a7a8a !important; }
.mm-pie-legend { display: flex !important; flex-direction: column !important; gap: 5px !important; }
.mm-pie-leg-item { display: flex !important; align-items: center !important; gap: 5px !important; font-size: 11px !important; color: #c8daea !important; white-space: nowrap !important; }
.mm-pie-dot { width: 9px !important; height: 9px !important; border-radius: 50% !important; flex-shrink: 0 !important; display: inline-block !important; }
.mm-ranking-legend { display: flex !important; align-items: center !important; padding: 3px 8px !important; border-bottom: 1px solid #1a2a3a !important; flex-shrink: 0 !important; }
.mm-rl-no { width: 16px !important; flex-shrink: 0 !important; }
.mm-rl-name { font-size: 11px !important; color: #fff !important; flex: 1 !important; }
.mm-rl-cnt { font-size: 11px !important; color: #fff !important; width: 44px !important; text-align: right !important; flex-shrink: 0 !important; }
.mm-rl-diff { font-size: 11px !important; color: #fff !important; width: 46px !important; text-align: right !important; flex-shrink: 0 !important; }
.mm-rank-item { display: flex !important; align-items: center !important; gap: 4px !important; padding: 0 8px !important; height: 32px !important; cursor: pointer !important; box-sizing: border-box !important; }
.mm-rank-item:hover { background: rgba(255,255,255,0.04) !important; }
.mm-rank-no { font-size: 11px !important; color: #445566 !important; width: 16px !important; flex-shrink: 0 !important; text-align: center !important; }
.mm-rank-no.top3 { color: #ff8c00 !important; font-weight: 700 !important; }
.mm-rank-name { font-size: 13px !important; color: #c8daea !important; flex: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-weight: 700 !important; }
.mm-rank-cnt { font-size: 12px !important; color: #ff4466 !important; font-family: 'Share Tech Mono',monospace !important; width: 44px !important; text-align: right !important; flex-shrink: 0 !important; white-space: nowrap !important; }
.mm-rank-diff { font-size: 11px !important; font-family: 'Share Tech Mono',monospace !important; width: 46px !important; text-align: right !important; flex-shrink: 0 !important; white-space: nowrap !important; }
.mm-rank-diff.mm-diff-up   { color: #22cc55 !important; }
.mm-rank-diff.mm-diff-down { color: #ff4466 !important; }
.mm-rank-diff.mm-diff-flat { color: #556677 !important; }
#mm-ranking-title { font-size: 13px !important; color: var(--mm-cyan) !important; font-family: 'Share Tech Mono', monospace !important; letter-spacing: 0.5px !important; font-weight: 700 !important; }
.mm-diff-up   { color: #22cc55 !important; }
.mm-diff-down { color: #ff4466 !important; }
.mm-diff-flat { color: #556677 !important; }