/* Git Inspector — 見た目。クラス名はすべて gi- で始める（サイト全体のCSSと衝突させない） */
.gi-app { display: flex; margin-top: 50px; margin-bottom: 50px; height: calc(100vh - 100px); min-height: 520px; background: #0d0d0d; color: #c8c8c8; font-size: 12px; overflow: hidden; }
.gi-app * { box-sizing: border-box; }
.gi-app button, .gi-app input { font-family: inherit; font-size: 12px; }
.gi-app.dragover { outline: 2px dashed #00ff88; outline-offset: -6px; }
.gi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.gi-header { padding: 8px 12px; background: #0a0a0a; border-bottom: 1px solid #1a1a1a; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: none; }
.gi-title { color: #00ff88; font-size: 13px; font-weight: bold; }
.gi-sub { color: #555; font-size: 10px; }
.gi-repo { color: #ddd; border: 1px solid #2a2a2a; border-radius: 3px; padding: 2px 8px; }
.gi-f1 { margin-left: auto; color: #666; font-size: 11px; cursor: pointer; }
.gi-f1:hover { color: #00ff88; }
.gi-btn { background: #151515; border: 1px solid #333; color: #ddd; padding: 8px 16px; border-radius: 3px; cursor: pointer; }
.gi-btn:hover { border-color: #00ff88; color: #00ff88; }
.gi-btn.sm { padding: 3px 10px; }

.gi-drop { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 20px; }
.gi-drop-t { font-size: 15px; color: #888; }
.gi-drop-s { color: #555; }
.gi-drop-n { color: #555; font-size: 11px; margin-top: 6px; }
.gi-err { color: #ff6666; background: #2a1111; border: 1px solid #5a2222; border-radius: 3px; padding: 8px 12px; max-width: 560px; line-height: 1.6; }
.gi-loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.gi-loadmsg { color: #ddd; font-size: 13px; }
.gi-spin { width: 28px; height: 28px; border: 3px solid #1f1f1f; border-top-color: #00ff88; border-radius: 50%; animation: gi-rot 0.9s linear infinite; }
@keyframes gi-rot { to { transform: rotate(360deg); } }

.gi-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 12px 0; flex: none; }
.gi-card { background: #131313; border: 1px solid #2a2a2a; border-radius: 4px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; text-align: left; color: #c8c8c8; cursor: pointer; }
.gi-card:hover { border-color: #00ff88; }
.gi-card.on { border-color: #00ff88; background: #00ff8812; }
.gi-card-l { color: #888; font-size: 11px; }
.gi-card-v { font-size: 18px; font-weight: bold; color: #eee; }
.gi-card-n { color: #666; font-size: 11px; }
.gi-card.warn .gi-card-v { color: #ffbb44; }
.gi-card.bad .gi-card-v { color: #ff7777; }
.gi-card.ok .gi-card-v { color: #9ad; }

.gi-tabwrap { flex: 1; min-height: 120px; display: flex; flex-direction: column; padding: 10px 12px 0; min-width: 0; }
.gi-tabs { display: flex; gap: 3px; border-bottom: 1px solid #00ff8899; padding: 0 4px; flex: none; }
.gi-tab { background: #0a0a0a; border: 1px solid #2a2a2a; border-bottom: none; border-radius: 6px 6px 0 0; color: #7a7a7a; padding: 7px 14px; cursor: pointer; position: relative; top: 1px; white-space: nowrap; }
.gi-tab:hover { color: #ddd; background: #141414; }
.gi-tab.on { background: #151515; color: #00ff88; font-weight: bold; border-color: #00ff8899; border-bottom: 1px solid #151515; }
.gi-panel { flex: 1; min-height: 0; background: #151515; border: 1px solid #00ff8899; border-top: none; border-radius: 0 0 4px 4px; display: flex; flex-direction: column; }
.gi-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.gi-tw { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.gi-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #222; flex: none; }
.gi-in { background: #0d0d0d; border: 1px solid #333; color: #ddd; padding: 5px 8px; border-radius: 3px; width: 260px; }
.gi-in:focus { outline: none; border-color: #00ff88; }
.gi-note { color: #666; font-size: 11px; }
.gi-note.pad { padding: 8px 10px; }
.gi-scroll { flex: 1; min-height: 0; overflow: auto; }
.gi-t { width: 100%; border-collapse: collapse; }
.gi-t th { position: sticky; top: 0; background: #1b1b1b; color: #999; text-align: left; font-weight: normal; padding: 6px 8px; border-bottom: 1px solid #2a2a2a; white-space: nowrap; }
.gi-t td { padding: 5px 8px; border-bottom: 1px solid #1d1d1d; white-space: nowrap; }
.gi-t td.r { text-align: right; font-variant-numeric: tabular-nums; }
.gi-t td.path { max-width: 380px; overflow: hidden; text-overflow: ellipsis; color: #ddd; }
.gi-t td.mono, .gi-hex { font-family: 'Courier New', monospace; }
.gi-t tbody tr { cursor: pointer; }
.gi-t tbody tr:hover { background: #1c1c1c; }
.gi-t tbody tr.sel { background: #00ff8818; }
.gi-badge { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11px; border: 1px solid #333; color: #aaa; }
.gi-badge.warn { color: #ffbb44; border-color: #6a5320; background: #2a2210; }
.gi-badge.bad { color: #ff7777; border-color: #6a2a2a; background: #2a1414; }
.gi-badge.ok { color: #9ab; border-color: #2a3a44; }

.gi-detail { flex: none; height: 210px; margin: 8px 12px 10px; border: 1px solid #2a2a2a; border-radius: 4px; background: #111; display: flex; gap: 14px; padding: 10px 12px; overflow: auto; }
.gi-detail.empty { align-items: center; justify-content: center; height: 60px; }
.gi-d-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gi-d-r { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gi-kv { display: flex; gap: 10px; line-height: 1.5; }
.gi-kv .k { color: #777; min-width: 92px; flex: none; }
.gi-kv .v { color: #ddd; word-break: break-all; }
.gi-hint { color: #00ff88; }
.gi-hex { margin: 0; background: #0a0a0a; border: 1px solid #222; padding: 6px 8px; color: #aaa; font-size: 11px; line-height: 1.5; overflow: auto; white-space: pre; }

.gi-modal-bg { position: fixed; inset: 0; background: #000a; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.gi-modal { width: min(720px, 94vw); max-height: 86vh; background: #111; border: 1px solid #00ff8899; border-radius: 6px; display: flex; flex-direction: column; color: #c8c8c8; font-size: 12px; }
.gi-modal-h { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #222; align-items: center; }
.gi-modal-h b { color: #00ff88; }
.gi-modal-h input { flex: 1; background: #0d0d0d; border: 1px solid #333; color: #ddd; padding: 5px 8px; border-radius: 3px; }
.gi-modal-b { overflow: auto; padding: 8px 14px 14px; }
.gi-help-sec { color: #00ff88; margin: 14px 0 4px; font-size: 11px; letter-spacing: 1px; }
.gi-help-q { color: #eee; font-weight: bold; margin-top: 8px; }
.gi-help-a { color: #aaa; line-height: 1.7; }

@media (max-width: 820px) {
  .gi-app { height: auto; min-height: 0; overflow: visible; }
  .gi-cards { grid-template-columns: repeat(2, 1fr); }
  .gi-detail { flex-direction: column; height: auto; }
  .gi-tabwrap { min-height: 360px; }
}
.gi-btn.sm.on { border-color: #00ff88; color: #00ff88; }
.gi-top { display: flex; gap: 12px; padding: 2px 0; cursor: pointer; color: #ddd; word-break: break-all; }
.gi-top:hover { color: #00ff88; }
.gi-top .sz { color: #777; min-width: 80px; text-align: right; flex: none; }