/* Aspetto Instagram — condiviso tra anteprima cliente ed editor. */
:root {
  --ig-bg: #fff;
  --ig-fg: #000;
  --ig-sub: #737373;
  --ig-line: #dbdbdb;
  --ig-soft: #efefef;
  --ig-btn: #efefef;
  --ig-blue: #0095f6;
  --ig-tag: #00376b;
  --ig-tile: #f2f2f2;
  --ok: #1f9d55;
  --chg: #e8590c;
  --wait: #6d4aff;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ig-bg: #000;
    --ig-fg: #f5f5f5;
    --ig-sub: #a8a8a8;
    --ig-line: #262626;
    --ig-soft: #1c1c1c;
    --ig-btn: #262626;
    --ig-tag: #e0f1ff;
    --ig-tile: #121212;
    --ok: #34c77b;
    --chg: #ff8a3d;
    --wait: #9b85ff;
  }
}
:root[data-theme="dark"] {
  --ig-bg: #000; --ig-fg: #f5f5f5; --ig-sub: #a8a8a8; --ig-line: #262626; --ig-soft: #1c1c1c;
  --ig-btn: #262626; --ig-tag: #e0f1ff; --ig-tile: #121212; --ok: #34c77b; --chg: #ff8a3d; --wait: #9b85ff;
}

.ig { background: var(--ig-bg); color: var(--ig-fg); font-family: var(--font); font-size: 14px; line-height: 18px; }
.ig svg { display: block; flex: none; }
.ig-tag { color: var(--ig-tag); }

.ig-bar { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 16px; }
.ig-bar__user { display: flex; align-items: center; gap: 4px; font-size: 20px; letter-spacing: -.2px; }
.ig-bar__user b { font-weight: 700; }
.ig-bar__icons { display: flex; gap: 22px; }

.ig-prof { padding: 6px 16px 12px; }
.ig-prof__row { display: flex; align-items: center; gap: 24px; }
.ig-prof__av { flex: none; }
.ig-av { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--ig-soft); border: 1px solid var(--ig-line); }
.ig-av--empty { font-size: 32px; font-weight: 600; color: var(--ig-sub); }
.ig-prof__right { flex: 1; min-width: 0; }
.ig-prof__name { font-weight: 600; font-size: 15px; margin-bottom: 8px; overflow-wrap: anywhere; }
.ig-stats { display: flex; gap: 22px; }
.ig-stats div { display: flex; flex-direction: column; line-height: 18px; }
.ig-stats b { font-weight: 600; font-size: 16px; }
.ig-bio { margin-top: 12px; overflow-wrap: anywhere; }
.ig-bio__cat { color: var(--ig-sub); }
.ig-bio__link { display: inline-flex; align-items: center; gap: 4px; color: var(--ig-tag); font-weight: 600; text-decoration: none; margin-top: 2px; }
.ig-btns { display: flex; gap: 6px; margin-top: 14px; }
.ig-btn { flex: 1; display: grid; place-items: center; height: 32px; border-radius: 8px; background: var(--ig-btn); font-weight: 600; }
.ig-btn--pri { background: var(--ig-blue); color: #fff; }
.ig-btn--sq { flex: 0 0 34px; }

.ig-tabs { display: flex; border-top: 1px solid var(--ig-line); }
.ig-tabs span { flex: 1; display: grid; place-items: center; height: 44px; color: var(--ig-sub); }
.ig-tabs span.on { color: var(--ig-fg); box-shadow: inset 0 -1px 0 var(--ig-fg); }

.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ig-tile { position: relative; aspect-ratio: 3 / 4; background: var(--ig-tile); overflow: hidden; cursor: pointer; }
.ig-tile > img, .ig-tile > video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ig-tile__kind { position: absolute; top: 8px; right: 8px; color: #fff; filter: drop-shadow(0 0 3px rgba(0,0,0,.45)); }
.ig-tile__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ig-sub); }
.ig-tile__empty small { font-size: 11px; }
.ig-badge { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 14px; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); max-width: calc(100% - 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-badge svg { width: 11px; height: 11px; }
.ig-badge--wait { background: var(--wait); }
.ig-badge--ok { background: var(--ok); }
.ig-badge--chg { background: var(--chg); }
.ig-badge--draft { background: rgba(0,0,0,.6); }
.ig-empty { padding: 48px 24px; text-align: center; color: var(--ig-sub); }

/* notifiche */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 1000; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: #262626; color: #fff; padding: 10px 16px; border-radius: 10px; font: 500 14px/1.35 var(--font); box-shadow: 0 6px 24px rgba(0,0,0,.25); transition: opacity .3s, transform .3s; }
.toast.err { background: #c92a2a; }
.toast.ok { background: #1f7a4a; }
.toast.out { opacity: 0; transform: translateY(8px); }

@media (max-width: 380px) {
  .ig-prof__row { gap: 16px; }
  .ig-av { width: 76px; height: 76px; }
  .ig-stats { gap: 14px; }
}