.ig { max-width:1180px; margin:auto; padding:8px 0 40px; }
.ig header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:28px; }
.ig h1 { font-size:30px; letter-spacing:-.8px; margin:0 0 8px; }
.ig h2 { font-size:18px; margin:0 0 12px; }
.ig p { color:var(--text-secondary); line-height:1.65; }
.ig .ig-eyebrow { font-size:11px; font-weight:700; letter-spacing:1.8px; color:#dc7eb1; margin-bottom:10px; }
.ig-badge { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:99px; padding:8px 13px; white-space:nowrap; color:var(--text-secondary); font-size:12px; }
.ig-badge::before { content:''; width:7px; height:7px; background:#e5a560; border-radius:50%; }
.ig-badge[data-connected=true]::before { background:#52ca9a; }
.ig-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); gap:20px; align-items:start; }
.ig-card { border:1px solid var(--border); border-radius:14px; padding:24px; background:var(--bg-card); margin-bottom:20px; min-width:0; }
.ig-card p { font-size:13px; }
.ig-loader { margin:22px 0; padding:18px; border:1px solid var(--border); border-radius:10px; background:var(--bg-input); }
.ig-loader h3 { margin:0 0 8px; font-size:15px; }
.ig-other-methods { margin-top:24px; }
.ig-card .ig-intro { margin-bottom:18px; }
.ig-card summary { cursor:pointer; font-weight:600; padding:4px 0; }
.ig-card details + details { margin-top:20px; }
.ig-card details[open] summary { margin-bottom:15px; }
.ig-card ol { padding-left:19px; color:var(--text-secondary); font-size:13px; line-height:1.65; }
.ig-card li { margin:10px 0; }
.ig a { color:var(--accent,#a5b4fc); }
.ig-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:18px; }
.ig label { display:block; font-size:12px; font-weight:500; margin:15px 0 7px; }
.ig input:not([type=checkbox]) { width:100%; box-sizing:border-box; }
.ig select { width:100%; box-sizing:border-box; }
.ig .ig-checkbox { display:flex; align-items:center; gap:9px; line-height:1.5; }
.ig input[type=checkbox] { accent-color:#c66ba2; }
.ig-fields { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.ig small { color:var(--text-muted); display:block; margin-top:8px; font-size:12px; line-height:1.6; }
.ig-note { border-left:3px solid #d484b2; background:var(--bg-input); border-radius:4px; padding:14px 16px; margin-bottom:20px; font-size:13px; line-height:1.65; color:var(--text-secondary); }
.ig-note[hidden], .ig [hidden] { display:none!important; }
.ig-note.error { border-color:#ed928e; }
.ig-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border); padding-top:18px; gap:12px; margin-top:22px; }
.ig-stats strong { display:block; font-size:23px; margin-bottom:4px; }
.ig-stats span { color:var(--text-muted); font-size:11px; }
.ig-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:20px; }
.ig-tile { margin:0; min-width:0; }
.ig-tile img { aspect-ratio:4/5; object-fit:contain; width:100%; background:var(--bg-input); border-radius:8px; }
.ig-tile figcaption { font-size:11px; color:var(--text-secondary); display:flex; justify-content:space-between; padding-top:8px; }
.ig-empty { padding:45px 18px; background:var(--bg-input); border-radius:10px; text-align:center; }
.ig-empty svg { display:block; margin:0 auto 14px; color:#bc75a0; }
.ig-empty strong { display:block; margin-bottom:8px; }
.ig-empty p { max-width:320px; margin:auto; }
.ig code { overflow-wrap:anywhere; font-size:12px; }
.ig .btn:disabled { opacity:.5; cursor:wait; }
.ig-player { position:fixed; inset:0; background:#0a0a0e; z-index:10000; display:flex; align-items:center; justify-content:center; }
.ig-player-stage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.ig-player-stage img,.ig-player-stage video { display:block; width:100%; height:100%; object-fit:contain; }
.ig-player-controls { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:12px; background:rgba(20,20,26,.93); border:1px solid #444; border-radius:12px; padding:12px; color:#eee; max-width:95vw; }
.ig-player-controls button { background:#292933; color:#fff; border:1px solid #555; border-radius:6px; padding:7px 12px; cursor:pointer; font-size:13px; }
.ig-player-controls span { white-space:nowrap; font-size:12px; }
.ig-player button:focus-visible { outline:2px solid #f0a2cb; }
.ig-device-source { display:flex; align-items:center; gap:16px; padding:20px; margin-bottom:18px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-secondary); }
.ig-device-source > svg { flex-shrink:0; color:#dc7eb1; }
.ig-device-source-copy { flex:1; min-width:0; }
.ig-device-source strong { font-size:14px; overflow-wrap:anywhere; }
.ig-device-source p { margin:5px 0; color:var(--text-secondary); font-size:13px; }
.ig-device-source a:not(.btn) { font-size:12px; color:var(--accent,#a5b4fc); }
@media(max-width:650px) { .ig-device-source { flex-wrap:wrap; } .ig-device-source > .btn { margin-left:43px; } }
@media(max-width:1000px) { .ig-grid { grid-template-columns:1fr; } }
@media(max-width:600px) { .ig header { align-items:flex-start; flex-direction:column; } .ig-card { padding:18px; } .ig-fields { grid-template-columns:1fr; } .ig-player-controls { flex-wrap:wrap; width:90%; bottom:12px; } }