/* IGTags (new pages) - same look as rewards v2 and the tools site. Light + dark. */

/* ------------------------------------------------------------------ colors */
:root {
    color-scheme: light;
    --page: #f4f4f6;
    --card: #ffffff;
    --ink: #16181a;
    --on-ink: #ffffff;
    --soft-ink: #4d4d55;
    --muted: #6b6b74;
    --line: #ebebef;
    --border: #e4e4ea;
    --field: #dcdce2;
    --field-open: #b4b4bd;
    --soft: #f2f2f5;
    --row-hover: color-mix(in srgb, var(--ink) 11%, var(--card));
    --row-picked: color-mix(in srgb, var(--ink) 15%, var(--card));
    --seg: #e9e9ee;
    --seg-track: #f3f2f6;
    --seg-track-sub: #ffffff;
    --seg-text: #45454d;
    --dash: #d4d4dc;
    --switch-off: #c9c9d1;
    --green: #23784a;
    --green-bg: #e6f4ec;
    --coral: #c8402c;
    --on-coral: #ffffff;
    --coral-bg: #fdecea;
    --pink: #c4245a;
    --pink-bg: #fdf0f4;
    --violet: #6d3fc0;
    --violet-bg: #f3effb;
    --violet-line: #cfc3ea;
    --violet-strong: #6d3fc0;
    --warn: #6b4300;
    --warn-bg: #fff4e0;
    --result: #eef8f5;
    --band: linear-gradient(100deg, #c1a5f1 15%, #adced4, #b7ebd5);
    --band-ink: #16181a;
    --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --pop-shadow: 0 16px 40px rgba(16, 24, 40, .18);
    --scrim: rgba(22, 24, 26, .45);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --page: #111214;
    --card: #1b1c1f;
    --ink: #f1f1f3;
    --on-ink: #111214;
    --soft-ink: #c3c3cb;
    --muted: #9a9aa4;
    --line: #2a2b30;
    --border: #34353b;
    --field: #34353b;
    --field-open: #55565e;
    --soft: #26272c;
    --row-hover: color-mix(in srgb, var(--ink) 7%, var(--card));
    --row-picked: color-mix(in srgb, var(--ink) 10%, var(--card));
    --seg: #26272c;
    --seg-track: var(--seg);
    --seg-track-sub: var(--card);
    --seg-text: var(--muted);
    --dash: #3a3b41;
    --switch-off: #3a3b41;
    --green: #6cd49a;
    --green-bg: #1a3324;
    --coral: #ff8f7a;
    --on-coral: #3a120b;
    --coral-bg: #3b211c;
    --pink: #ffc2d6;
    --pink-bg: #5c2740;
    --violet: #c2a8ff;
    --violet-bg: #2a2342;
    --violet-line: #54467e;
    --violet-strong: #7a4fd6;
    --warn: #ffe7bf;
    --warn-bg: #61400a;
    --result: #172a20;
    --band: linear-gradient(100deg, #4b3a78 15%, #2d4b55, #2c5444);
    --band-ink: #ffffff;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --pop-shadow: 0 16px 40px rgba(0, 0, 0, .55);
    --scrim: rgba(0, 0, 0, .6);
}

/* "Auto" follows the phone or computer setting (same values as above) */
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        color-scheme: dark;
        --page: #111214;
        --card: #1b1c1f;
        --ink: #f1f1f3;
        --on-ink: #111214;
        --soft-ink: #c3c3cb;
        --muted: #9a9aa4;
        --line: #2a2b30;
        --border: #34353b;
        --field: #34353b;
        --field-open: #55565e;
        --soft: #26272c;
        --row-hover: color-mix(in srgb, var(--ink) 7%, var(--card));
        --row-picked: color-mix(in srgb, var(--ink) 10%, var(--card));
        --seg: #26272c;
        --seg-track: var(--seg);
        --seg-track-sub: var(--card);
        --seg-text: var(--muted);
        --dash: #3a3b41;
        --switch-off: #3a3b41;
        --green: #6cd49a;
        --green-bg: #1a3324;
        --coral: #ff8f7a;
        --on-coral: #3a120b;
        --coral-bg: #3b211c;
        --pink: #ffc2d6;
        --pink-bg: #5c2740;
        --violet: #c2a8ff;
        --violet-bg: #2a2342;
        --violet-line: #54467e;
        --violet-strong: #7a4fd6;
        --warn: #ffe7bf;
        --warn-bg: #61400a;
        --result: #172a20;
        --band: linear-gradient(100deg, #4b3a78 15%, #2d4b55, #2c5444);
    --band-ink: #ffffff;
        --shadow: 0 1px 2px rgba(0, 0, 0, .4);
        --pop-shadow: 0 16px 40px rgba(0, 0, 0, .55);
        --scrim: rgba(0, 0, 0, .6);
    }
}

/* ------------------------------------------------------------------ base */
[x-cloak] { display: none !important; }
html, body { margin: 0; background: var(--page); }
.ig { min-height: 100vh; display: flex; flex-direction: column; background: var(--page); color: var(--ink); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.ig *, .ig *::before, .ig *::after { box-sizing: border-box; }
.ig :where(a) { color: inherit; }
.ig img { display: block; max-width: 100%; }
.ig h1, .ig h2, .ig h3, .ig p { margin: 0; }
.ig :where(button, input, textarea, select) { font: inherit; color: inherit; }
.ig :where(button) { cursor: pointer; }
.ig input[type="search"]::-webkit-search-cancel-button { cursor: pointer; } /* the browser's clear (x) is clickable too */
.ig :where(button:disabled) { cursor: default; }
.ig :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ig :where(input, textarea):focus-visible { outline: none; }
.ig-input:focus, .ig-box:focus { outline: none; border-color: var(--field-open); box-shadow: 0 0 0 3px rgba(22, 24, 26, .06); }
.ig svg { flex: none; }
.ig-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.ig-main { flex: 1; padding-top: 24px; padding-bottom: 64px; }

/* ------------------------------------------------------------------ header */
.ig-nav { position: relative; z-index: 20; background: var(--card); border-bottom: 1px solid var(--line); }
.ig-nav-row { height: 72px; display: flex; align-items: center; gap: 24px; }
.ig-logo img { width: 52px; height: 52px; border-radius: 50%; }
.ig-links { margin-left: 8px; display: flex; align-items: center; gap: 2px; }
.ig-links a { height: 38px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; color: var(--soft-ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.ig-links a:hover { color: var(--ink); }
.ig-links a.is-on { color: var(--ink); font-weight: 600; }
.ig-nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ig-pill-btn { height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 500; text-decoration: none; }
.ig-pill-btn.is-admin { border-color: transparent; background: var(--violet-bg); color: var(--violet); font-weight: 600; }
.ig-count-badge { min-width: 22px; height: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--coral-bg); color: var(--coral); font-size: 12px; font-weight: 700; }
.ig-pill-btn.is-admin .ig-count-badge { background: var(--card); color: var(--violet); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.ig-user { height: 40px; padding: 4px 10px 4px 4px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 600; }
.ig-initial { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--band); color: var(--band-ink); font-size: 13px; font-weight: 700; }
.ig-initial.is-big { width: 36px; height: 36px; font-size: 15px; }
.ig-initial.is-photo, .ig-avatar-face.is-photo { display: block; object-fit: cover; background: var(--soft); }
.ig-photo-set { display: flex; align-items: center; gap: 14px; }
.ig-photo-preview { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--band) center / cover no-repeat; color: var(--band-ink); font-size: 16px; font-weight: 700; overflow: hidden; }
.ig-photo-preview[style*="url"] { color: transparent; }
.ig-menu-btn { display: none; width: 40px; height: 40px; margin-left: auto; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--soft); color: var(--ink); }
.ig-menu-btn span { display: inline-flex; }

.ig-menu-wrap { position: relative; }
/* menus: one build everywhere (profile menu, dropdowns, list filters): 16px corners, outline, pop shadow, 8px padding, 40px items with 10px sides */
.ig-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 280px; padding: 8px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: var(--pop-shadow); }
.ig-menu-who { padding: 8px 8px 12px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ig-menu-who strong { display: block; font-size: 14px; }
.ig-menu-who div span, .ig-menu-who > span > span { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-menu-who > div, .ig-menu-who > span:last-child { min-width: 0; }
.ig-menu-sec { margin: 0 -8px 4px; padding: 12px 8px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ig-menu-label { padding: 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ig-menu-item { width: 100%; min-height: 40px; padding: 0 10px; display: flex; align-items: center; gap: 10px; border: none; border-radius: 10px; background: none; font-size: 14px; font-weight: 500; text-decoration: none; text-align: left; }
.ig-menu-item:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ig-menu-item svg { color: var(--muted); }
.ig-menu-item.is-static { cursor: default; }
.ig-menu-item.is-static:hover { background: none; }
.ig-menu-item .ig-count-badge { margin-left: auto; }

/* pill switches (.ig-seg, .ig-theme): one height everywhere, set here */
:root { --seg-h: 32px; --seg-pad: 3px; }
.ig-theme { display: flex; padding: var(--seg-pad); border-radius: 999px; background: var(--seg-track); }
.ig-theme button { flex: 1; height: var(--seg-h); display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: none; border-radius: 999px; background: none; color: var(--seg-text); font-size: 13px; font-weight: 500; }
.ig-theme button.is-on { background: var(--accent-soft); color: var(--on-accent-soft); font-weight: 600; }
/* profile menu: the same pills, with the icon above the name */
.ig-theme.is-stacked { border-radius: 18px; }
.ig-theme.is-stacked button { height: auto; padding: 7px 0 6px; flex-direction: column; gap: 3px; border-radius: 15px; }
.ig-theme.is-stacked button svg { width: 18px; height: 18px; }
@media (max-width: 760px) { /* Settings > Theme: stacked on phones */
    .ig-theme.is-stacked-phone { border-radius: 18px; }
    .ig-theme.is-stacked-phone button { height: auto; padding: 7px 0 6px; flex-direction: column; gap: 3px; border-radius: 15px; }
    .ig-theme.is-stacked-phone button svg { width: 18px; height: 18px; }
}

/* navigation drawer (phone and mid widths), Material 3 style */
.ig-drawer-wrap { position: fixed; z-index: 40; inset: 0; }
.ig-drawer-scrim { position: absolute; inset: 0; background: var(--scrim); }
.ig-drawer { position: absolute; top: 0; bottom: 0; left: 0; width: 320px; max-width: 86vw; padding: 12px 12px 20px; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; border-radius: 0 20px 20px 0; background: var(--card); box-shadow: var(--pop-shadow); }
.ig-drawer-move { transition: transform .25s cubic-bezier(.2, 0, 0, 1); }
.ig-drawer-out { transform: translateX(-100%); }
.ig-drawer-head { min-height: 56px; padding: 0 4px 0 16px; display: flex; align-items: center; justify-content: space-between; }
.ig-drawer-head strong { font-size: 18px; font-weight: 700; }
.ig .ig-drawer-close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: none; color: var(--ink); }
.ig .ig-drawer-close:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ig .ig-drawer-item { width: 100%; min-height: 52px; padding: 0 16px; flex: none; display: flex; align-items: center; gap: 14px; border: none; border-radius: 999px; background: none; color: var(--soft-ink); font-size: 15px; font-weight: 500; text-align: left; text-decoration: none; transition: background .15s; }
.ig-drawer-item svg { flex: none; }
.ig .ig-drawer-item:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ig .ig-drawer-item.is-on { background: var(--accent-soft); color: var(--on-accent-soft); font-weight: 700; }
.ig .ig-drawer-item.is-static { cursor: default; }
.ig .ig-drawer-item.is-static:hover { background: none; }
.ig-drawer-end { margin-left: auto; display: inline-flex; color: var(--muted); }
.ig-drawer-count { min-width: 24px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--seg); color: var(--ink); font-size: 12px; font-weight: 700; }
.ig-drawer-div { height: 1px; margin: 8px 16px; flex: none; background: var(--line); }
.ig-drawer-label { padding: 16px 16px 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* only for the admin: violet (labels, icons, switches, small buttons) */
.ig-drawer-label.is-admin, .ig-label.is-admin { color: var(--violet); }
.ig-drawer-item.is-admin > svg { color: var(--violet); }
.ig-set-row.is-admin > span { color: var(--violet); }
.ig-set-row.is-admin > span small { color: var(--violet); opacity: .8; }
.ig-set-row.is-admin .ig-switch.is-on { background: var(--violet-strong); }
.ig-set-row.is-admin .ig-switch.is-on span { background: #fff; }
.ig-mini.is-admin { border-color: var(--violet-line); color: var(--violet); }
.ig-drawer-theme { margin: 0 4px; }
/* accent color in the profile menu / drawer: small swatches, the chosen one is the cookie shape */
.ig-accents { display: flex; justify-content: space-between; gap: 4px; padding: 2px 2px 0; }
.ig .ig-accents button { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: none; }
.ig-accents .ig-band-swatch { width: 28px; height: 28px; border-radius: 50%; }
.ig-accents button:hover .ig-band-swatch { transform: scale(1.08); }
.ig-accents button.is-on .ig-band-swatch { transform: scale(1.18); }
.ig-drawer-theme .ig-accents { justify-content: flex-start; gap: 10px; }
.ig-drawer-theme .ig-theme button { font-size: 14px; }
.ig-drawer-who { margin-top: auto; padding: 20px 16px 6px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.ig-drawer-who > span { min-width: 0; }
.ig-drawer-who strong { display: block; font-size: 14px; }
.ig-drawer-who span span { display: block; overflow: hidden; font-size: 12px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
html.ig-lock { overflow: hidden; }
/* a window is open (igtags.js): the page behind it doesn't scroll, and doesn't jump sideways when its scrollbar goes */
html.ig-modal-lock { overflow: hidden; }
html.ig-modal-lock body { padding-right: var(--ig-sbw, 0px); }
@media (min-width: 1061px) { .ig-drawer-wrap { display: none !important; } }

/* ------------------------------------------------------------------ hero */
.ig-hero { background: var(--card); border-bottom: 1px solid var(--line); }
.ig-band { height: 120px; background: var(--band); }
.ig-avatar { width: 96px; height: 96px; margin-top: -48px; padding: 4px; border-radius: 50%; background: var(--card); box-shadow: 0 2px 10px rgba(16, 24, 40, .10); }
.ig-avatar-face { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--band); color: var(--band-ink); font-size: 36px; font-weight: 700; }
.ig-hero-row { padding: 14px 0 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
/* the title always sits right under the avatar (like the tools site), however tall the right side is */
.ig-hero-row > :first-child { align-self: flex-start; }
.ig-h1 { font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.ig-meta { margin-top: 6px !important; font-size: 15px; color: var(--muted); }
.ig-stats { display: flex; gap: 36px; }
.ig-stat { text-align: right; }
.ig-stat span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; }
.ig-stat strong { display: block; margin-top: 2px; font-size: 20px; font-weight: 700; line-height: 1.15; }

/* ------------------------------------------------------------------ building blocks */
.ig-card { min-width: 0; padding: 22px; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--border); border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.ig-title { font-size: 17px; font-weight: 700; }
.ig-note { font-size: 13px; color: var(--muted); }
.ig-note a { color: var(--ink); font-weight: 600; }
/* field labels look like the option rows ("Pause this tag"): one label style */
.ig-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--ink); }
.ig-label.is-quiet { font-size: 13px; font-weight: 600; color: var(--soft-ink); } /* a quiet label (a read-only preview, a tip) */

.ig-btn { min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: none; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ig-btn.is-full { width: 100%; }
.ig-btn.is-small { min-height: 40px; padding: 0 16px; font-size: 14px; }
.ig .ig-btn.is-text { background: none; color: var(--ink); box-shadow: none; }
.ig .ig-btn.is-text:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ig-btn.is-light { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--field); }
.ig-btn.is-done { background: var(--green); color: var(--on-ink); }
/* can't be pressed yet (M3 disabled: a faint gray pill, gray text); not while it's busy saving. Every disabled control uses these two values: ink 12% fill, ink 38% text */
.ig .ig-btn:disabled:not([aria-busy="true"]), .ig .ig-btn.is-off { background: color-mix(in srgb, var(--ink) 12%, transparent); color: color-mix(in srgb, var(--ink) 38%, transparent); box-shadow: none; }
.ig .ig-btn.is-text:disabled:not([aria-busy="true"]), .ig .ig-btn.is-light:disabled:not([aria-busy="true"]) { background: none; }
.ig-icon-btn { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--soft); color: var(--soft-ink); }
.ig-icon-btn.is-small { width: 32px; height: 32px; }
/* hover (mouse only, so it never sticks after a tap): a layer of the button's own text color over its fill.
   Filled buttons (Generate, Delete) get a little lighter or darker, light and icon buttons a little grayer.
   Buttons with their own hover (text buttons, tonal delete, list-row icons, delete icons) keep it. */
@media (hover: hover) {
    .ig .ig-btn, .ig .ig-icon-btn, .ig .ig-menu-btn { transition: box-shadow .15s, background .15s, color .15s; }
    .ig .ig-btn:where(:not(:disabled, .is-off, .is-done, .is-text, .is-light, .pg-tonal-danger)):hover,
    .ig .ig-icon-btn:where(:not(.pg-del, .pg-row .ig-icon-btn)):hover,
    .ig .ig-menu-btn:hover { box-shadow: inset 0 0 0 999px color-mix(in srgb, currentColor 10%, transparent); }
    .ig .ig-btn.is-light:where(:not(:disabled)):hover { box-shadow: inset 0 0 0 1px var(--field), inset 0 0 0 999px color-mix(in srgb, currentColor 7%, transparent); }
}

.ig-input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--field); border-radius: 12px; background: var(--card); font-size: 15px; }
.ig-search { position: relative; display: block; min-width: 0; }
.ig-search svg { position: absolute; left: 14px; top: 50%; margin-top: -9px; color: var(--muted); }
.ig-search .ig-input { padding-left: 42px; }
.ig-box { width: 100%; padding: 14px 16px; border: 1px solid var(--field); border-radius: 12px; background: var(--card); font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
/* text boxes grow with their text (igt.grow), no resize handle */
.ig textarea { max-width: 100%; resize: none; overflow: hidden; }
.ig-modal-body { overflow-x: hidden; }
.ig-box.is-result { min-height: 120px; border-color: transparent; background: var(--result); resize: none; overflow: hidden; }

.ig-seg { display: flex; padding: var(--seg-pad); border-radius: 999px; background: var(--seg-track); }
.ig-seg button { flex: 1; height: var(--seg-h); padding: 0 6px; border: none; border-radius: 999px; background: none; color: var(--seg-text); font-size: 13px; font-weight: 500; white-space: nowrap; }
.ig-seg button.is-on { background: var(--accent-soft); color: var(--on-accent-soft); font-weight: 600; }
.ig-seg button.is-off { color: color-mix(in srgb, var(--ink) 38%, transparent); cursor: default; }
.ig-sub .ig-seg { background: var(--seg-track-sub); }
.ig-seg button:not(.is-on):not(.is-off):hover, .ig-theme button:not(.is-on):hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.ig-seg button, .ig-theme button { transition: background .15s, color .15s; }

.ig-switch { width: 46px; height: 28px; flex: none; padding: 3px; display: flex; border: none; border-radius: 999px; background: var(--switch-off); }
.ig-switch span { width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.ig-switch.is-on { background: var(--accent); }
.ig-switch.is-on span { transform: translateX(18px); background: var(--on-accent); }

.ig-stepper { display: inline-flex; align-items: center; border: 1px solid var(--field); border-radius: 999px; background: var(--card); }
.ig-stepper button { width: 40px; height: 40px; border: none; background: none; font-size: 18px; font-weight: 600; }
.ig-count { width: 44px; height: 40px; padding: 0; border: none; background: transparent; text-align: center; font-size: 15px; font-weight: 700; outline: none; }
.ig-count:focus { border-radius: 10px; background: var(--soft); }

.ig-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ig-badge { height: 22px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: var(--soft); color: var(--soft-ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ig-badge.is-green { background: var(--green-bg); color: var(--green); }
.ig-badge.is-pink { background: var(--pink-bg); color: var(--pink); }

.ig-mini { height: 32px; padding: 0 11px 0 8px; display: inline-flex; align-items: center; gap: 4px; border: 1px dashed var(--dash); border-radius: 999px; background: var(--card); color: var(--soft-ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
.ig-mini small { font-size: 12px; opacity: .75; }
/* "Might also fit" (photo matching): dashed, in the accent color */
.ig-mini.is-maybe { height: 32px; padding: 0 11px 0 8px; border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: transparent; color: var(--accent); font-size: 12px; }

.ig-banner { margin-bottom: 20px; padding: 14px 18px; display: flex; align-items: flex-start; gap: 14px; border-radius: 20px; font-size: 14px; }
.ig-banner strong { display: block; font-size: 15px; }
.ig-banner a { font-weight: 600; }
/* notices: a card-colored box with an outline in the notice's color; the icon, title and links in that color.
   is-end = error (red), is-warn = warning (orange), is-ok = success (green), is-info = info (gray) */
.ig-banner { --tone: var(--soft-ink); background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tone) 50%, transparent); }
.ig-banner > svg, .ig-banner > span > svg, .ig-banner strong, .ig-banner a:not(.ig-btn) { color: var(--tone); }
.ig-banner.is-end { --tone: var(--coral); }
.ig-banner.is-warn { --tone: var(--tone-warn); }
.ig-banner.is-ok { --tone: var(--green); }
.ig-banner.is-info { --tone: var(--soft-ink); }
/* the warning's orange: --warn is a text color (dark brown in light mode), this one reads as orange */
:root { --tone-warn: #b86a00; }
:root[data-theme="dark"] { --tone-warn: #ffc56b; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --tone-warn: #ffc56b; } }

/* toasts: Material 3 snackbar (inverse surface: dark on light pages, light on dark); warnings and errors get a colored dot */
/* admin "View as" bar */
.ig-viewas { background: var(--warn-bg); color: var(--warn); font-size: 13px; }
.ig-viewas-row { min-height: 40px; display: flex; align-items: center; gap: 8px; }
.ig-viewas-row span { flex: 1; min-width: 0; }
.ig-viewas form { margin: 0; }
.ig-viewas button { height: 32px; padding: 0 14px; border: none; border-radius: 999px; background: var(--warn); color: var(--warn-bg); font-size: 13px; font-weight: 700; cursor: pointer; }
/* Back to top: long lists only (igt.backToTop), appears after scrolling down a screen and a half */
.ig-top-btn { position: fixed; z-index: 30; right: 24px; bottom: 24px; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: var(--ink); box-shadow: var(--pop-shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.ig-top-btn.is-on { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: hover) { .ig .ig-top-btn:hover { box-shadow: var(--pop-shadow), inset 0 0 0 999px color-mix(in srgb, var(--ink) 7%, transparent); } }
@media (max-width: 760px) { .ig-top-btn { right: 16px; bottom: 16px; } }
.ig-toasts { position: fixed; z-index: 60; left: 50%; bottom: 24px; width: calc(100% - 32px); max-width: 440px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.ig-toast { max-width: 100%; padding: 11px 16px; display: flex; align-items: center; gap: 10px; border-radius: 12px; background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 500; line-height: 1.4; text-align: left; box-shadow: var(--pop-shadow); transition: opacity .3s, transform .3s; }
.ig-toast.is-warning::before, .ig-toast.is-error::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #f2b84b; }
.ig-toast.is-error::before { background: #f0775f; }
.ig-toast.is-out { opacity: 0; transform: translateY(8px); }

/* ------------------------------------------------------------------ generate */
.ig-gen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ig-result { position: sticky; top: 16px; }
.ig-empty { max-width: 560px; margin: 24px auto; align-items: center; text-align: center; color: var(--muted); }
.ig-empty .ig-title { color: var(--ink); }

.ig-top { display: flex; align-items: center; gap: 10px; }
.ig-mode { flex: 1; min-width: 0; }
.ig-mode button { font-size: 14px; }
.ig-short { display: none; }
.ig-defaults-btn { width: 40px; height: 40px; }
.ig-defaults-btn.is-small { width: 32px; height: 32px; }
.ig-mode-note { margin-top: -6px !important; font-size: 13px; color: var(--muted); }
/* how to pick: one switch like the others, each half with an icon, a title and a line; the chosen one filled */
.ig-mode { display: grid; grid-template-columns: 1fr 1fr; padding: var(--seg-pad); border-radius: 22px; background: var(--seg-track); }
.ig .ig-mode-card { min-width: 0; padding: 12px 18px; display: flex; align-items: center; justify-content: flex-start; gap: 14px; border: none; border-radius: 18px; background: none; color: var(--seg-text); font: inherit; text-align: left; cursor: pointer; transition: background .15s, color .15s; }
.ig-mode-card svg { flex: none; }
.ig-mode-card > span { min-width: 0; }
.ig-mode-card strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ig-mode-card small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; opacity: .8; }
.ig .ig-mode-card.is-on { background: var(--accent-soft); color: var(--on-accent-soft); }
@media (hover: hover) { .ig .ig-mode-card:not(.is-on):hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); } }
/* the photo for auto-select: a big drop area, like the EXIF tool's */
.ig-drop.is-big { min-height: 240px; padding: 24px; flex-direction: column; justify-content: center; gap: 12px; border-radius: 16px; text-align: center; }
.ig-drop.is-big .ig-drop-icon { width: 56px; height: 56px; border-radius: 16px; }
.ig-drop.is-big p { position: relative; margin: 0; font-size: 14px; color: var(--muted); }
.ig-drop.is-big p strong { color: var(--ink); }
/* an (i) next to a label: its note shows on hover, or on a tap */
.ig-label { position: relative; } /* "Optional" sits at its right */
.ig-info { position: relative; display: inline-flex; vertical-align: middle; margin: -5px 0 -3px 1px; }
.ig .ig-info-btn { width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: none; color: color-mix(in srgb, var(--muted) 55%, transparent); cursor: help; transition: color .15s; }
.ig .ig-info-btn:hover, .ig-info-btn[aria-expanded="true"] { color: var(--ink); }
.ig-info-tip { display: none; position: absolute; z-index: 20; left: 50%; top: calc(100% + 6px); transform: translateX(calc(-50% + var(--tip-x, 0px))); width: max-content; max-width: min(260px, 80vw); padding: 8px 12px; white-space: normal; text-align: left; border-radius: 10px; background: var(--ink); color: var(--on-ink); font-size: 13px; font-weight: 500; line-height: 1.4; box-shadow: var(--pop-shadow); }
.ig-info-tip.is-on { display: block; }
@media (hover: hover) { .ig-info:hover .ig-info-tip { display: block; } } /* a phone keeps :hover on the last tapped one */
.ig-info.is-up .ig-info-tip { top: auto; bottom: calc(100% + 6px); } /* no room below: above the (i) */
@media (max-width: 760px) {
    .ig .ig-mode-card { padding: 10px; flex-direction: column; gap: 6px; text-align: center; }
    .ig-mode-card small { display: none; }
    .ig-drop.is-big { min-height: 200px; padding: 20px; }
}

.ig-auto { display: flex; flex-direction: column; gap: 12px; }
.ig-rest { display: contents; }
.ig-rest.is-waiting { display: none; }
.ig-nowrap { white-space: nowrap; }
.ig-drop { padding: 12px; display: flex; align-items: center; gap: 12px; border: 2px dashed var(--dash); border-radius: 12px; background: var(--soft); }
.ig-drop.is-sub { background: var(--card); }
/* a photo dragged over the box */
.ig-drop { transition: border-color .15s, background .15s; }
.ig-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.ig-drop.is-over .ig-drop-icon { color: var(--on-accent-soft); }
.ig-drop-icon { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--card); color: var(--soft-ink); }
.ig-drop.is-sub .ig-drop-icon { background: var(--soft); }
.ig-drop-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ig-drop-text strong { font-size: 14px; }
.ig-drop-text small { font-size: 13px; color: var(--muted); }
.ig-photo-row { padding: 10px; display: flex; align-items: center; gap: 12px; border-radius: 12px; background: var(--soft); }
.ig-photo-row.is-sub { padding: 8px; border-radius: 12px; background: var(--card); }
.ig-photo-row img { width: 52px; height: 52px; flex: none; border-radius: 10px; object-fit: cover; }
/* the thumbnail opens the photo big (igt.viewPhoto) */
.ig-photo-zoom { flex: none; display: block; padding: 0; border: none; border-radius: 10px; background: none; cursor: zoom-in; }
.ig-photo-zoom img { display: block; }
@media (hover: hover) { .ig-photo-zoom:hover img { opacity: .85; } }
.ig-lightbox { position: fixed; z-index: 70; inset: 0; padding: 56px 16px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(10, 10, 12, .88); cursor: zoom-out; }
.ig-lightbox img { max-width: 100%; max-height: calc(100% - 34px); border-radius: 12px; object-fit: contain; }
.ig-lightbox p { margin: 0; max-width: 100%; color: #fff; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-lightbox-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
@media (hover: hover) { .ig-lightbox-x:hover { background: rgba(255, 255, 255, .24); } }
.ig-photo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ig-photo-main strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-photo-main span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-photo-row .ig-icon-btn { background: var(--card); }
.ig-photo-row.is-sub .ig-icon-btn { background: var(--soft); }
.ig-finding { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; background: var(--soft); color: var(--soft-ink); font-weight: 600; }
.ig-finding svg, .ig-spin svg { animation: ig-spin 1s linear infinite; }
.ig-spin { display: inline-flex; }
@keyframes ig-spin { to { transform: rotate(360deg); } }
.ig-fit { padding: 12px; display: flex; flex-direction: column; gap: 12px; border-radius: 20px; background: var(--soft); }
.ig-fit-head { display: flex; align-items: center; gap: 12px; }
.ig-fit-head img { width: 48px; height: 48px; flex: none; border-radius: 10px; object-fit: cover; }
.ig-fit-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ig-fit-title strong { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--on-accent-soft); }
.ig-fit-title strong svg { color: var(--accent); }
.ig-fit-title > span { font-size: 13px; font-weight: 600; color: var(--soft-ink); }
.ig-fit-head .ig-icon-btn { background: var(--card); }
.ig-maybe { display: flex; flex-wrap: wrap; gap: 6px; }

.ig-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ig-sum { font-size: 13px; color: var(--muted); }
.ig-head-text { min-width: 0; display: flex; flex-direction: column; }
.ig-head-text .ig-title { font-size: 15px; font-weight: 500; } /* the same as the setting rows' labels ("Number of tags") */
.ig-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ig-macro { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 999px; background: var(--violet-bg); color: var(--violet); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ig-macro.is-on { background: var(--violet-strong); color: #fff; }
.ig-macro-bar { padding: 8px 8px 8px 12px; display: flex; align-items: center; gap: 8px; border-radius: 12px; background: var(--violet-bg); color: var(--violet); font-size: 13px; }
.ig-macro-bar span { flex: 1; min-width: 0; color: var(--soft-ink); }
.ig-macro-bar strong { color: var(--violet); }
.ig-macro-bar button { height: 32px; padding: 0 12px; flex: none; border: none; border-radius: 999px; background: var(--card); color: var(--violet); font-size: 13px; font-weight: 600; }
.ig-macro-note { padding: 8px 12px; display: flex; align-items: center; gap: 6px; border-radius: 12px; background: var(--violet-bg); color: var(--violet); font-size: 13px; font-weight: 600; }

/* category box + list */
.ig-combo { position: relative; }
.ig-combo.is-up { z-index: 10; }
.ig-field { position: relative; min-height: 52px; padding: 5px; display: block; border: 1px solid var(--field); border-radius: 12px; background: var(--card); cursor: pointer; }
/* the pills flow like text around the floated arrow, so only the first row leaves room for it */
.ig-field > .ig-sel, .ig-field > .ig-field-add { margin: 3px; vertical-align: middle; }
.ig-field.is-open { border-color: var(--field-open); box-shadow: 0 0 0 3px rgba(22, 24, 26, .06); }
.ig-field-add { height: 34px; padding: 0 12px 0 8px; display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 999px; background: none; color: var(--muted); font-size: 14px; font-weight: 500; }
.ig-field-caret { float: right; height: 34px; margin: 3px 6px 3px 8px; display: inline-flex; align-items: center; color: var(--muted); transition: transform .15s; }
.ig-field.is-open .ig-field-caret { transform: rotate(180deg); }
.ig-sel { height: 34px; padding: 0 5px 0 13px; display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; background: var(--accent-soft); color: var(--on-accent-soft); font-size: 14px; font-weight: 600; white-space: nowrap; }
.ig-sel button { width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: none; color: inherit; opacity: .7; }
/* picked from the photo: same tint as your own picks plus an accent ring (violet is for admin things only) */
.ig-sel.is-photo, .ig-pill.is-on.is-photo { box-shadow: inset 0 0 0 1.5px var(--accent); }

.ig-backdrop { display: none; }
.ig-pop { position: absolute; z-index: 10; top: calc(100% + 6px); left: 0; right: 0; max-height: 440px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--field); border-radius: 20px; background: var(--soft); box-shadow: var(--pop-shadow); }
.ig-sheet-head, .ig-sheet-picked { display: none; }
.ig-pop-top { flex: none; padding: 12px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--border); background: var(--card); }
.ig-pop-body { flex: 1; min-height: 0; padding: 12px; overflow-y: auto; overscroll-behavior: contain; }
.ig-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ig-pill { min-height: 34px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 500; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.ig-pill small { font-size: 12px; font-weight: 500; color: var(--muted); }
.ig-pill.is-on { background: var(--accent-soft); color: var(--on-accent-soft); border-color: transparent; }
.ig-pill.is-on small { color: inherit; opacity: .65; }
.ig-pill.is-maybe { border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); background: transparent; box-shadow: none; color: var(--accent); }
.ig-pill.is-maybe small { color: inherit; opacity: .75; }
.ig-empty-line { padding: 10px 2px; font-size: 14px; color: var(--muted); }
.ig-empty-line a { color: var(--ink); font-weight: 600; }
.ig .ig-pop-done { flex: none; width: 100%; height: 50px; border: none; border-top: 1px solid var(--border); background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 600; }

.ig-recent, .ig-codes, .ig-hits { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ig-recent > span, .ig-codes > span { margin-right: 2px; }

/* options */
.ig-divider { height: 1px; margin: 4px -22px 0; background: var(--line); }
.ig-opts { margin: 0 -22px; display: flex; flex-direction: column; }
.ig-divider + .ig-opts { margin-top: -14px; } /* the line is the gap: the first option gets the same space above as below */
.ig-row { padding: 11px 22px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 500; }
.ig-row:first-child { border-top: none; }
.ig-row > span:first-child { flex: 1; min-width: 0; }
.ig-row small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.ig-sub { margin: 0 22px 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; border-radius: 12px; background: var(--soft); }
.ig-captype { overflow-x: auto; scrollbar-width: none; }
.ig-dd.ig-capsel { display: none; }

.ig-dd { position: relative; display: flex; flex-direction: column; }
.ig-dd.is-open { z-index: 10; }
.ig-dd-btn { width: 100%; height: 46px; padding: 0 12px 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--field); border-radius: 12px; background: var(--card); font-size: 15px; font-weight: 500; text-align: left; }
.ig-dd-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-dd-btn svg { color: var(--muted); transition: transform .15s; }
.ig-dd.is-open .ig-dd-btn { border-color: var(--field-open); }
.ig-dd.is-open .ig-dd-btn svg { transform: rotate(180deg); }
.ig-dd-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: var(--pop-shadow); }
/* menu items (Material 3): inset rounded rows, gray on hover, the chosen one as an accent pill with the check in front */
.ig .ig-dd-item { width: 100%; min-height: 40px; margin: 0; padding: 6px 10px 6px 8px; display: flex; align-items: center; gap: 10px; border: none; border-radius: 10px; background: none; text-align: left; transition: background .12s; }
.ig .ig-dd-item:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ig .ig-dd-item.is-on { background: var(--accent-soft); color: var(--on-accent-soft); }
.ig .ig-dd-item.is-on:hover { background: color-mix(in srgb, var(--on-accent-soft) 8%, var(--accent-soft)); }
.ig-dd-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; font-weight: 500; }
.ig-dd-item.is-on .ig-dd-text > span { font-weight: 700; }
.ig-dd-text small { font-size: 12px; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-dd-item.is-on .ig-dd-text small { color: var(--on-accent-soft); opacity: .75; }
.ig-dd-check { order: -1; width: 18px; flex: none; display: inline-flex; justify-content: center; color: transparent; }
.ig-dd-item.is-on .ig-dd-check { color: var(--on-accent-soft); }
.ig-dd-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ig-dd-title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-dd-tag { height: 22px; padding: 0 8px; flex: none; display: inline-flex; align-items: center; border-radius: 999px; background: var(--seg); color: var(--soft-ink); font-size: 12px; font-weight: 600; }
.ig-dd-item.is-on .ig-dd-tag { background: var(--card); color: var(--on-accent-soft); }

.ig-custom { display: flex; flex-direction: column; gap: 8px; }
.ig-custom-box { min-height: 80px; resize: none; overflow: hidden; font-family: inherit; }
.ig-prev-head { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ig-prev-head .ig-label { margin: 0; }
.ig .ig-save { height: 32px; padding: 0 12px 0 9px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--field); border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; }
.ig-save span { display: inline-flex; }
.ig .ig-save.is-done { border-color: transparent; background: var(--green-bg); color: var(--green); }
.ig-preview { padding: 10px 12px; border-radius: 12px; background: var(--card); font-size: 13px; color: var(--soft-ink); white-space: pre-line; overflow-wrap: anywhere; }
.ig-preview.is-empty { color: var(--muted); }

.ig-inc { gap: 16px; }
.ig-inc-block { display: flex; flex-direction: column; gap: 8px; }
.ig-inc-label { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.ig-inc-label strong { font-size: 14px; }
.ig-inc-label small { font-size: 12px; color: var(--muted); }
.ig-inc-field { min-height: 46px; padding: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1px solid var(--field); border-radius: 12px; background: var(--card); }
.ig-inc-input { flex: 1; min-width: 120px; height: 32px; padding: 0 6px; border: none; outline: none; background: transparent; font-size: 14px; }
.ig-tagpill { height: 34px; padding: 0 4px 0 12px; display: inline-flex; align-items: center; gap: 2px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.ig-tagpill button { width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: none; color: inherit; opacity: .7; }
.ig-tagpill.is-in { background: var(--green-bg); color: var(--green); }
.ig-tagpill.is-out { background: var(--coral-bg); color: var(--coral); }

.ig-error { padding: 10px 14px; border-radius: 12px; background: var(--coral-bg); color: var(--coral); font-size: 14px; }
.ig-go .ig-btn span { display: inline-flex; }
.ig-placeholder { min-height: 180px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; background: var(--soft); color: var(--muted); font-size: 14px; text-align: center; }
.ig-result-body { display: flex; flex-direction: column; gap: 14px; }
.ig-result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* defaults window */
.ig-modal-bg { position: fixed; z-index: 40; inset: 0; background: var(--scrim); }
/* dialogs: always in the middle of the screen (M3); a tall one keeps 16px from the edges and scrolls inside */
.ig-modal { position: fixed; z-index: 41; top: 50%; left: 50%; width: 440px; max-width: calc(100% - 24px); padding: 20px; display: flex; flex-direction: column; gap: 14px; transform: translate(-50%, -50%); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 20px; background: var(--card); box-shadow: var(--pop-shadow); }
@supports (height: 100dvh) { .ig-modal { max-height: calc(100dvh - 32px); } }
.ig-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ig-modal-head .ig-note { margin-top: 2px !important; }
.ig-set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ig-set-row .ig-label { margin: 0; }

/* ------------------------------------------------------------------ footer */
/* links first; the about text comes last, small and quiet. Areas: phone = 2 per row, mid widths = 3 + 2, wide = 5 columns */
.ig-foot { background: var(--card); color: var(--ink); }
.ig-foot-band { height: 8px; background: var(--band); }
.ig-foot-grid { padding: 72px 0 56px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(0, .85fr) minmax(0, 1.35fr) minmax(0, 1.7fr); grid-template-rows: auto auto; grid-template-areas: "tools sites stock blog patreon" "follow cta cta cta cta"; gap: 48px 40px; }
.ig-foot-col { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ig-foot-col.is-tools { grid-area: tools; }
.ig-foot-col.is-sites { grid-area: sites; }
.ig-foot-col.is-stock { grid-area: stock; }
.ig-foot-col.is-follow { grid-area: follow; }
.ig-foot-col.is-blog { grid-area: blog; align-items: stretch; }
.ig-foot-col.is-patreon { grid-area: patreon; align-items: stretch; }
.ig-foot-cta { grid-area: cta; min-width: 0; align-self: center; justify-self: end; }
.ig-foot-cta .ig-btn { max-width: 100%; padding-top: 8px; padding-bottom: 8px; white-space: normal; text-align: center; line-height: 1.3; }
.ig-foot-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ig-foot-link { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); text-decoration: none; }
.ig-foot-post { min-width: 0; display: flex; flex-direction: column; gap: 3px; color: var(--ink); text-decoration: none; }
.ig-foot-post span { font-size: 15px; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-foot-post small { font-size: 12px; color: var(--muted); }
.ig-foot-link:hover, .ig-foot-post:hover span, .ig-foot-legal a:hover { color: var(--accent); }
.ig-foot-social { display: flex; flex-wrap: wrap; gap: 8px; }
.ig-foot-social a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--soft); color: var(--ink); }
.ig-foot-social a:hover { background: var(--accent-soft); color: var(--on-accent-soft); }
.ig-foot-bottom { padding: 24px 0 36px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); }
.ig-foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; font-size: 14px; color: var(--muted); }
.ig-foot-legal a { color: inherit; text-decoration: none; }
.ig-foot-about { margin: 0; max-width: 860px; font-size: 12px; line-height: 1.7; color: var(--muted); }
@media (max-width: 1060px) {
    .ig-foot-grid { padding: 56px 0 44px; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto auto; grid-template-areas: "tools tools sites sites stock stock" "blog blog blog patreon patreon patreon" "follow follow follow cta cta cta"; }
    .ig-foot-col.is-blog, .ig-foot-col.is-patreon { margin-top: 24px; }
}
@media (max-width: 760px) {
    .ig-foot-grid { padding: 40px 0 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-template-areas: "tools sites" "blog patreon" "stock follow" "cta cta"; gap: 32px 20px; }
    .ig-foot-col { gap: 14px; }
    .ig-foot-col.is-blog, .ig-foot-col.is-patreon { margin-top: 0; }
    .ig-foot-post span { font-size: 14px; }
    .ig-foot-cta { justify-self: stretch; }
    .ig-foot-cta .ig-btn { width: 100%; }
    .ig-foot-bottom { padding-bottom: 28px; }
    .ig-foot-legal { flex-direction: column; font-size: 13px; }
}

/* ================================================================== mid widths: the header menu button, result below the form */
@media (max-width: 1060px) {
    .ig-links, .ig-nav-right { display: none; }
    .ig-menu-btn { display: inline-flex; }
    .ig-nav .ig-nav-guest { display: none; } /* visitors: the pills and the palette are in the drawer, like the tools site */
    .ig-gen { grid-template-columns: minmax(0, 1fr); }
    .ig-result { position: static; }
}

/* ================================================================== phone */
@media (max-width: 760px) {
    .ig-wrap { padding-left: 16px; padding-right: 16px; }
    .ig-main { padding-top: 16px; padding-bottom: 40px; }


    .ig-band { height: 56px; }
    .ig-avatar { width: 64px; height: 64px; margin-top: -32px; padding: 3px; }
    .ig-avatar-face { font-size: 24px; }
    .ig-hero-row { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 0 16px; }
    .ig-h1 { font-size: 23px; }
    .ig-meta { font-size: 13px; }
    .ig-stats { gap: 28px; }
    .ig-stat { text-align: left; }
    .ig-stat strong { font-size: 16px; }

    .ig-card { padding: 16px; }
    .ig-long { display: none; }
    .ig-short { display: inline; }
    .ig-drop .ig-drop-text small { display: none; }

    .ig-divider { margin: 4px -16px 0; }
    .ig-opts { margin: 0 -16px; }
    .ig-row { padding-left: 16px; padding-right: 16px; }
    .ig-sub { margin: 0 16px 12px; }
    .ig-captype.is-many { display: none; }
    .ig-dd.ig-capsel.is-many { display: flex; }
    .ig-capsel .ig-label { margin-bottom: 8px; }

    /* the category list becomes a sheet over the page */
    .ig-backdrop { display: block; position: fixed; z-index: 30; inset: 0; background: var(--scrim); }
    .ig-combo.is-up { z-index: 31; }
    .ig-pop { position: fixed; z-index: 31; top: 56px; left: 8px; right: 8px; bottom: 8px; max-height: none; border-radius: 20px; }
    .ig-sheet-head { flex: none; padding: 14px 14px 10px 16px; display: flex; align-items: center; justify-content: space-between; background: var(--card); }
    .ig-sheet-head strong { display: block; font-size: 17px; }
    .ig-sheet-head span { font-size: 13px; color: var(--muted); }
    .ig-sheet-picked { flex: none; padding: 0 16px 12px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; background: var(--card); }
    .ig-sheet-picked .ig-sel { flex: none; }
    .ig-pop .ig-pop-top { border-top: 1px solid var(--line); }

    /* Generate and Copy stay at the bottom of the screen */
    .ig-go { position: sticky; bottom: 12px; z-index: 5; }
    .ig-go .ig-btn { transition: box-shadow .3s ease; }
    .ig-go.is-floating .ig-btn { box-shadow: 0 8px 24px rgba(16, 24, 40, .25); }
    /* nothing to generate yet: the button stays in its place instead of floating */
    .ig-go.is-idle { position: static; }
    .ig-go.is-idle .ig-btn { box-shadow: none; }

    .ig-toasts { bottom: 84px; }
    /* picked categories a bit smaller, so two long names fit on a row (the list sheet too) */
    .ig-sel { padding: 0 4px 0 12px; font-size: 13px; }
    .ig-pill { padding: 0 12px; gap: 6px; font-size: 13px; }
    .ig-pill small { font-size: 11px; }
    .ig-toast { padding: 9px 14px; font-size: 13px; }
}

/* Log out: confirm first */
.ig-confirm { width: 380px; gap: 10px; }
.ig-confirm-actions { margin-top: 8px; display: flex; justify-content: flex-end; gap: 10px; }

/* ================================================================== visitors: welcome, demo, log in (preview under /new) */
.ig-avatar-icon { color: var(--band-ink); }
.ig .ig-meta a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ig-hero-login { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ig .ig-hero-login .ig-text-link { font-size: 13px; }
.ig .ig-text-link { color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--field-open); text-underline-offset: 3px; }
.ig .ig-text-link:hover { text-decoration-color: currentColor; }
/* Patreon: black on light, white on dark (the Patreon mark follows the text color) */
.ig .ig-patreon { min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform .15s, box-shadow .15s; }
.ig .ig-patreon:hover { box-shadow: 0 6px 18px rgba(16, 24, 40, .18); }
.ig .ig-patreon.is-full { width: 100%; }
.ig-nav-guest { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ig-nav-guest .ig-theme-btn span { display: inline-flex; }
.ig-theme-menu { width: 280px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ig-theme-menu .ig-menu-label + .ig-accents { margin-top: -2px; }
.ig .ig-tour-text { white-space: pre-line; }

/* how it works */
.ig-steps { margin: 0 0 32px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ig-steps li { padding: 16px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.ig-steps strong { display: block; font-size: 15px; color: var(--ink); }
.ig-steps li:has(> * > strong:only-child) { align-items: center; }
/* the first line of text is centered on the 30px number: one line looks centered, more lines flow below it
   (title line 22.5px tall: (30 - 22.5) / 2) */
.ig-steps li:not(:has(> * > strong:only-child)) > :not(.ig-step-n) { padding-top: 3.75px; }
.ig-steps span:not(.ig-step-n) { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.ig-step-n { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--on-accent-soft); font-size: 14px; font-weight: 700; }
.ig-try-head { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.ig-try-head > div { flex: 1 1 320px; min-width: 0; }
/* "Watch it work": the live demo's card sits at the bottom right, beside the demo (a sheet on phones); the tour offer waits */
/* the live card sits in a holder at the bottom right; behind it, a blurred copy of its ring is the glow */
.ig-live-wrap { position: fixed; z-index: 80; right: 24px; bottom: 24px; width: 380px; max-width: calc(100vw - 24px); }
.ig-live-wrap > .ig-tour-card.ig-live { position: relative; width: auto; max-width: none; }
.ig-live-glow, .ig-glow-bg { position: absolute; inset: 2px; z-index: 0; border-radius: 20px; background: conic-gradient(from var(--ig-live-a), var(--glow-1), var(--glow-2) 18%, var(--accent) 34%, var(--glow-hi) 44%, var(--accent) 54%, var(--glow-3) 74%, var(--glow-1)); filter: blur(14px); opacity: .55; pointer-events: none; animation: ig-live-run 3s linear infinite; }
/* "Watch it work": the button sits in a holder with the same glow behind it, gentler */
.ig-glow-wrap { position: relative; display: inline-flex; isolation: isolate; }
.ig-glow-wrap > .ig-btn { position: relative; z-index: 1; }
.ig-glow-bg { inset: 3px; border-radius: 999px; filter: blur(9px); opacity: .45; animation-duration: 5s; }
.ig-live-on .ig-tour-offer, .ig-live-on .ig-tour-offer-scrim { display: none !important; }
/* the card draws the eye: a light runs around its border, and it pulses when a new step starts */
@property --ig-live-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/* the "look here" ring (live demo card, "Watch it work"): three colors from the chosen accent's own gradient */
:root { --glow-1: #953232; --glow-2: #8b362c; --glow-3: #bd6a1b; }
:root[data-theme="dark"] { --glow-1: #ffe6a1; --glow-2: #f9b64e; --glow-3: #f08c5a; }
:root[data-band="lavender"] { --glow-1: #594c80; --glow-2: #2c3a66; --glow-3: #23515e; }
:root[data-band="forgetmenot"] { --glow-1: #344875; --glow-2: #1b3b77; --glow-3: #24476e; }
:root[data-band="forest"] { --glow-1: #2c4a40; --glow-2: #3b6654; --glow-3: #1f3934; }
:root[data-band="berry"] { --glow-1: #634882; --glow-2: #6b2a55; --glow-3: #5c2a3b; }
:root[data-band="sunflower"] { --glow-1: #953232; --glow-2: #8b362c; --glow-3: #bd6a1b; }
:root[data-band="deep-teal"] { --glow-1: #2f575c; --glow-2: #0f4246; --glow-3: #1b5a55; }
:root[data-theme="dark"][data-band="lavender"] { --glow-1: #d7c5f6; --glow-2: #adced4; --glow-3: #b7ebd5; }
:root[data-theme="dark"][data-band="forgetmenot"] { --glow-1: #b0caf7; --glow-2: #a6c6f6; --glow-3: #d3e5fb; }
:root[data-theme="dark"][data-band="forest"] { --glow-1: #dceede; --glow-2: #73b28b; --glow-3: #9eccac; }
:root[data-theme="dark"][data-band="berry"] { --glow-1: #e6ceff; --glow-2: #f5b0d6; --glow-3: #ffd0da; }
:root[data-theme="dark"][data-band="sunflower"] { --glow-1: #ffe6a1; --glow-2: #f9b64e; --glow-3: #f08c5a; }
:root[data-theme="dark"][data-band="deep-teal"] { --glow-1: #97c7c8; --glow-2: #8cc4bf; --glow-3: #c3e0d4; }
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] { --glow-1: #ffe6a1; --glow-2: #f9b64e; --glow-3: #f08c5a; }
    :root[data-theme="auto"][data-band="lavender"] { --glow-1: #d7c5f6; --glow-2: #adced4; --glow-3: #b7ebd5; }
    :root[data-theme="auto"][data-band="forgetmenot"] { --glow-1: #b0caf7; --glow-2: #a6c6f6; --glow-3: #d3e5fb; }
    :root[data-theme="auto"][data-band="forest"] { --glow-1: #dceede; --glow-2: #73b28b; --glow-3: #9eccac; }
    :root[data-theme="auto"][data-band="berry"] { --glow-1: #e6ceff; --glow-2: #f5b0d6; --glow-3: #ffd0da; }
    :root[data-theme="auto"][data-band="sunflower"] { --glow-1: #ffe6a1; --glow-2: #f9b64e; --glow-3: #f08c5a; }
    :root[data-theme="auto"][data-band="deep-teal"] { --glow-1: #97c7c8; --glow-2: #8cc4bf; --glow-3: #c3e0d4; }
}
/* the band's bright spot: it travels round, so the eye catches the motion */
:root { --glow-hi: color-mix(in srgb, var(--accent) 45%, #000); }
:root[data-theme="dark"] { --glow-hi: color-mix(in srgb, var(--accent) 25%, #fff); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --glow-hi: color-mix(in srgb, var(--accent) 25%, #fff); } }
/* the live demo card: its own 2px gradient border (even all round), and a soft glow of the same colors behind it */
.ig-tour-card.ig-live { z-index: 1; border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, conic-gradient(from var(--ig-live-a), var(--glow-1), var(--glow-2) 18%, var(--accent) 34%, var(--glow-hi) 44%, var(--accent) 54%, var(--glow-3) 74%, var(--glow-1)) border-box; box-shadow: none; animation: ig-live-run 3s linear infinite; }
/* "Watch it work": the same, gentler */
.ig .ig-btn.is-glow { position: relative; isolation: isolate; border: 2px solid transparent; background: linear-gradient(var(--accent), var(--accent)) padding-box, conic-gradient(from var(--ig-live-a), var(--glow-1), var(--glow-2) 18%, var(--accent) 34%, var(--glow-hi) 44%, var(--accent) 54%, var(--glow-3) 74%, var(--glow-1)) border-box; animation: ig-live-run 5s linear infinite; }
@keyframes ig-live-run { to { --ig-live-a: 360deg; } }
.ig-tour-card.ig-live.is-new { animation: ig-live-run 3s linear infinite, ig-live-pulse .9s ease-out; }
@keyframes ig-live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
@media (prefers-reduced-motion: reduce) {
    .ig-tour-card.ig-live, .ig-live-glow { animation-duration: 6s; }
    .ig .ig-btn.is-glow, .ig-glow-bg { animation-duration: 9s; } /* still moving (it's what points there), just slower */
    .ig-tour-card.ig-live.is-new { animation: ig-live-run 6s linear infinite; }
}
@media (max-width: 760px) {
    .ig-try-head .ig-btn { width: 100%; }
    .ig-live-wrap { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; }
    .ig-try-head .ig-glow-wrap { width: 100%; }
}
.ig-try-head .ig-note { margin-top: 4px !important; }

/* demo: the small "sample tags" line, and the sample photo button */
.ig .ig-demo-note { margin: 0; padding: 8px 12px; display: flex; align-items: flex-start; gap: 8px; border-radius: 12px; background: var(--soft); color: var(--soft-ink); font-size: 13px; line-height: 1.45; }
.ig-demo-note svg { flex: none; margin-top: 1.5px; color: var(--muted); } /* between the line box center (1px) and the letters (2px) */
.ig-demo-note strong { color: var(--ink); }
.ig .ig-sample { width: 100%; padding: 10px 14px 10px 10px; display: flex; align-items: center; gap: 14px; border: 1px dashed var(--field-open); border-radius: 20px; background: var(--card); color: var(--ink); text-align: left; transition: background .15s, border-color .15s; }
.ig .ig-sample:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); border-color: var(--accent); }
.ig-sample img { width: 64px; height: 64px; flex: none; border-radius: 10px; object-fit: cover; }
.ig-sample > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ig-sample strong { font-size: 15px; }
.ig-sample small { font-size: 12px; color: var(--muted); }
.ig-sample > svg { flex: none; color: var(--muted); }

/* log in, create account, forgot password */
.ig-auth { max-width: 460px; margin: 8px auto 24px; }
.ig .ig-auth-card { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.ig .ig-auth-hint { margin: 2px 0; text-align: center; font-size: 13px; color: var(--muted); }
.ig-auth-form + .ig-or-line { margin-top: 10px; }
.ig-auth-form .ig-btn[type="submit"] { margin-top: 6px; }
.ig .ig-or { align-self: center; padding: 6px 10px; border: none; background: none; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--field-open); text-underline-offset: 3px; }
.ig-or-line { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.ig-or-line::before, .ig-or-line::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.ig-auth-form { display: flex; flex-direction: column; gap: 14px; }
.ig-auth-form label { display: block; }
.ig-input.is-bad { border-color: var(--coral); }
.ig .ig-field-error { margin: -8px 0 0 !important; font-size: 13px; color: var(--coral); }
.ig-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ig-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.2; cursor: pointer; }
/* form checkboxes (Remember me, the tools' Remember my caption): the same look as the list checkbox (.pg-check):
   a 22px rounded square with a field-open border; checked = ink fill with an on-ink check */
.ig .ig-check input[type="checkbox"], .ig .mv-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex: none; display: inline-grid; place-content: center; border: 2px solid var(--field-open); border-radius: 6px; background: var(--card); cursor: pointer; transition: background .15s, border-color .15s; }
.ig .ig-check input[type="checkbox"]::before, .ig .mv-check input[type="checkbox"]::before { content: ''; width: 15px; height: 15px; background: var(--on-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; transform: scale(0); transition: transform .12s; }
.ig .ig-check input[type="checkbox"]:checked, .ig .mv-check input[type="checkbox"]:checked { border-color: var(--ink); background: var(--ink); }
.ig .ig-check input[type="checkbox"]:checked::before, .ig .mv-check input[type="checkbox"]:checked::before { transform: scale(1); }
.ig .ig-check input[type="checkbox"]:focus-visible, .ig .mv-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ig-auth-form label.ig-check { display: inline-flex; } /* beats the form's "label: block" */
.ig-auth-done { padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; border-radius: 12px; background: var(--green-bg); color: var(--green); font-size: 14px; font-weight: 600; }
.ig-auth-done svg { flex: none; }
.ig .ig-auth-foot { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.ig-dot { margin: 0 8px; }

@media (max-width: 760px) {
    .ig-hero-login { width: 100%; align-items: stretch; }
    .ig-hero-login .ig-patreon, .ig-hero-login .ig-btn { width: 100%; }
    .ig-hero-login .ig-text-link { align-self: center; }
    .ig-steps { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 24px; }
    .ig-steps li { padding: 12px 14px; }
    .ig .ig-auth-card { padding: 18px; }
    .ig-nav-guest .ig-pill-btn.is-tools { display: none; }
    .ig-nav-guest { position: relative; }
    .ig-nav-guest .ig-menu-wrap { position: static; }
}

/* the demo's pretend click (igt.fakeClick) */
/* Settings > Photo matching: the limits and the "no limit" people */
.ig-set-subhead { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.ig-limit { display: inline-flex; align-items: center; gap: 10px; }
.ig-limit .ig-input { width: 72px; text-align: center; }
.ig-limit small { min-width: 112px; color: var(--muted); font-size: 13px; }
.ig-limit-add { display: flex; gap: 10px; }
/* Settings > AI: the limits by tier, one row each */
.ig-limits { display: grid; grid-template-columns: minmax(0, 1fr) 132px 92px; align-items: center; column-gap: 12px; row-gap: 6px; }
.ig-limits-row { display: contents; }
.ig-limits-h { font-size: 12px; font-weight: 600; color: var(--muted); }
.ig-limits-h small { margin-left: 4px; font-weight: 500; }
.ig-limits-name { font-size: 14px; font-weight: 500; }
.ig-limits-cell { display: flex; align-items: center; gap: 8px; }
.ig-limits-cell .ig-input { width: 56px; min-height: 36px; height: 36px; padding: 0 6px; text-align: center; }
.ig-limits-cell small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ig-seg.ig-seg-small button { min-height: 32px; padding: 0 12px; font-size: 13px; }
.ig-limit-add .ig-input { flex: 1; min-width: 0; }
/* Get hashtag and category suggestions (/new/suggest) */
.sg-card { display: flex; flex-direction: column; gap: 18px; }
.sg-intro { margin: 0; color: var(--soft-ink); }
.sg-topics, .sg-photo { display: flex; flex-direction: column; gap: 16px; }
.sg-group { display: flex; flex-direction: column; gap: 8px; }
.sg-own { display: flex; gap: 10px; }
/* the chips sit on a card: filled in `soft` (Generate's picker is the reverse: `card` chips on `soft`), no outline; picked ones accent-soft */
.sg .ig-pill { background: var(--soft); box-shadow: none; border: 1px solid transparent; transition: background .15s; }
@media (hover: hover) { .sg .ig-pill:not(.is-on):hover { background: color-mix(in srgb, var(--ink) 8%, var(--soft)); } }
.sg .ig-pill.is-on { background: var(--accent-soft); border: 1px solid transparent; }
.sg .sg-chip { font-weight: 600; }
.sg-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--soft-ink); font-size: 14px; }
.sg-all { display: inline-flex; gap: 8px; }
.ig .ig-btn.is-text.sg-discard { color: var(--coral); }
.ig .ig-btn.is-text.sg-discard:hover { background: var(--coral-bg); }
.ig-badge.sg-new { background: var(--accent-soft); color: var(--on-accent-soft); }
.sg-own .ig-input { flex: 1; min-width: 0; }
.ig-tagpill.sg-typed, .ig-tagpill.sg-tag { background: var(--accent-soft); color: var(--on-accent-soft); }
.ig-tagpill.sg-tag.is-off { background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); text-decoration: line-through; }
.sg-note { display: flex; flex-direction: column; gap: 8px; }
.sg-go { display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: center; }
.sg-hints { margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; } /* the notes above Get suggestions */
.sg-hints .ig-note { margin: 0; }
.sg-review { display: flex; flex-direction: column; gap: 14px; }
.sg-review .ig-banner { margin: 0; }
.sg-refused { margin: 0; color: var(--muted); font-size: 14px; }
.sg-cat { display: flex; flex-direction: column; gap: 12px; }
.sg-cat.is-off .sg-cat-label:not(:focus-within) { opacity: .6; } /* not while picking: its dropdown would be see-through */
.sg-cat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sg-cat-label { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sg-cat-title { min-height: 46px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } /* one of theirs: the name, the badge, Change */
.sg-cat-new { display: flex; flex-direction: column; gap: 8px; }
.sg-cat-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.sg-cat-menu { top: calc(100% + 6px); }
.sg-cat-menu-foot { margin: 6px -8px -8px; padding: 8px; border-top: 1px solid var(--line); } /* the way back to the suggested name, apart from the list */
.sg-cat-label .ig-label { display: inline-flex; align-items: center; gap: 8px; }
.sg-cat-name { font-size: 16px; line-height: 1.3; }
.sg-cat-input { width: 300px; max-width: 100%; }
.sg-cat-side { display: flex; align-items: center; gap: 14px; min-height: 46px; }
.sg-count { color: var(--muted); font-size: 13px; }
.sg-save { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ig-blocked { min-height: 96px; resize: vertical; font-size: 14px; }
@media (max-width: 760px) {
    .sg-save .ig-btn { flex: 1; }
}
/* Generate: photo matches left, once it gets close (like a chat's message limit) */
.ig-quota { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; color: var(--soft-ink); font-size: 13px; }
.ig-quota.is-out { align-items: flex-start; color: var(--warn); }
.ig-quota.is-out svg { flex: none; margin-top: 2px; }
.ig-quota a { color: inherit; font-weight: 600; }
.ig-fake-cursor { position: fixed; z-index: 90; left: 0; top: 0; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.ig-fake-cursor svg { display: block; transition: transform .12s; transform-origin: 20% 20%; }
.ig-fake-cursor.is-down svg { transform: scale(.82); }
.ig-fake-cursor.is-out { opacity: 0; }
.ig-find { position: relative; overflow: hidden; transition: transform .12s, filter .12s; }
.ig-find.is-pressed { transform: scale(.97); filter: brightness(.9); }
/* the live demo's click: the control presses in, and a soft circle of the accent color grows out from the pointer's tip and fades */
.ig .is-pressed { transform: scale(.985); filter: brightness(.97); transition: transform .12s, filter .12s; }
.ig-click-ring { position: fixed; z-index: 89; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent); opacity: 0; pointer-events: none; animation: ig-click-ring .35s forwards; }
@keyframes ig-click-ring { 0% { transform: scale(.3); } 25%, 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } } /* Codrops "Boris" click effect */
.ig-fake-ripple { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: currentColor; opacity: .35; pointer-events: none; animation: ig-ripple .55s ease-out forwards; }
@keyframes ig-ripple { to { transform: scale(14); opacity: 0; } }

/* ================================================================== page tours (tour.js) */
/* the offer: a small card in the corner, the page stays usable */
.ig-tour-offer { position: fixed; z-index: 75; right: 24px; bottom: 24px; width: 380px; max-width: calc(100vw - 24px); padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); color: var(--ink); box-shadow: var(--pop-shadow); animation: ig-offer-in .3s ease-out; }
@keyframes ig-offer-in { from { opacity: 0; transform: translateY(12px); } }
.ig-tour-offer-title { padding-right: 32px; font-size: 17px; }
.ig .ig-tour-offer-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--soft-ink); }
.ig-tour-offer-acts { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.ig .ig-tour-offer-acts .ig-btn { min-height: 40px; }
.ig .ig-tour-offer-off { margin-right: auto; padding: 4px 0; white-space: nowrap; border: none; background: none; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--field-open); text-underline-offset: 3px; }
.ig .ig-tour-offer-off:hover { color: var(--ink); text-decoration-color: currentColor; }
.ig .ig-tour-offer-x { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: none; color: var(--muted); }
.ig .ig-tour-offer-x:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.ig-tour-offer-scrim { display: none; }
@media (max-width: 760px) {
    .ig-tour-offer { left: 12px; right: 12px; bottom: 12px; width: auto; }
    .ig-tour-offer-scrim { position: fixed; z-index: 74; inset: 0; display: block; background: var(--scrim); animation: ig-fade-in .2s ease-out; }
}
@keyframes ig-fade-in { from { opacity: 0; } }
.ig-tour { position: fixed; z-index: 80; inset: 0; }
.ig-tour-block { position: absolute; inset: 0; }
.ig-tour-spot { position: fixed; border-radius: 20px; box-shadow: 0 0 0 9999px rgba(10, 12, 14, .58); outline: 2px solid var(--accent); outline-offset: 0; pointer-events: none; }
.ig-tour-card { position: fixed; width: 340px; max-width: calc(100vw - 24px); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 6px; border-radius: 20px; background: var(--card); color: var(--ink); box-shadow: var(--pop-shadow); }
.ig-tour-card:focus { outline: none; }
.ig-tour-card.is-center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ig-tour-card.is-sheet { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; }
.ig-tour-intro { margin: -2px 0 8px; padding-bottom: 12px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--line); }
.ig-tour-intro strong { font-size: 15px; }
.ig-tour-intro span { font-size: 13px; color: var(--muted); }
.ig-tour-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
.ig-tour-count { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.ig .ig-tour-skip { padding: 2px 4px; border: none; background: none; color: var(--muted); font-size: 13px; font-weight: 600; }
.ig .ig-tour-skip:hover { color: var(--ink); }
.ig .ig-tour-title { margin: 0; font-size: 17px; font-weight: 700; }
.ig .ig-tour-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--soft-ink); }
.ig-tour-acts { margin-top: 8px; display: flex; justify-content: flex-end; gap: 8px; }
.ig .ig-tour-acts .ig-btn { min-height: 40px; }
.ig .ig-tour-reset { margin-right: auto; padding: 0; border: none; background: none; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--field-open); text-underline-offset: 3px; }
.ig .ig-tour-reset:hover { color: var(--ink); text-decoration-color: currentColor; }

.ig-empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 760px) {
    .ig-empty-acts { flex-direction: column; align-items: stretch; width: 100%; } /* phones: each button on its own line, full width */
    .ig-empty-acts > .ig-btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------------ header colors (Settings > Look) */
/* each band: light version, then dark (theme Dark, or Auto when the device is dark) */
:root[data-band="lavender"] { --band: radial-gradient(ellipse 45% 120% at 12% 20%, #d7c5f6 0%, transparent 70%), radial-gradient(ellipse 40% 110% at 58% 95%, #adced4 0%, transparent 70%), radial-gradient(ellipse 35% 120% at 88% 15%, #b7ebd5 0%, transparent 75%), linear-gradient(100deg, #b7bae3, #b2ddd5); }
:root[data-band="forgetmenot"] { --band: radial-gradient(ellipse 45% 120% at 12% 20%, #b0caf7 0%, transparent 70%), radial-gradient(ellipse 40% 110% at 58% 95%, #a6c6f6 0%, transparent 70%), radial-gradient(ellipse 35% 120% at 88% 15%, #d3e5fb 0%, transparent 75%), linear-gradient(100deg, #96baf4, #bdd6f9); }
:root[data-band="forest"] { --band: radial-gradient(ellipse 45% 120% at 12% 20%, #dceede 0%, transparent 70%), radial-gradient(ellipse 40% 110% at 58% 95%, #73b28b 0%, transparent 70%), radial-gradient(ellipse 35% 120% at 88% 15%, #3a9766 0%, transparent 75%), linear-gradient(100deg, #9eccac, #57a579); }
:root[data-band="berry"] { --band: radial-gradient(ellipse 45% 120% at 12% 20%, #e6ceff 0%, transparent 70%), radial-gradient(ellipse 40% 110% at 58% 95%, #f5b0d6 0%, transparent 70%), radial-gradient(ellipse 35% 120% at 88% 15%, #ffd0da 0%, transparent 75%), linear-gradient(100deg, #e7b2eb, #fac0d8); }
:root[data-band="sunflower"] { --band: radial-gradient(ellipse 45% 120% at 12% 20%, #ffe6a1 0%, transparent 70%), radial-gradient(ellipse 40% 110% at 58% 95%, #f9b64e 0%, transparent 70%), radial-gradient(ellipse 35% 120% at 88% 15%, #f08c5a 0%, transparent 75%), linear-gradient(100deg, #fcc85e, #f5a154); }
:root[data-band="deep-teal"] { --band: radial-gradient(ellipse 45% 120% at 12% 20%, #97c7c8 0%, transparent 70%), radial-gradient(ellipse 40% 110% at 58% 95%, #8cc4bf 0%, transparent 70%), radial-gradient(ellipse 35% 120% at 88% 15%, #c3e0d4 0%, transparent 75%), linear-gradient(100deg, #76b7b5, #a8d2ca); }
:root[data-theme="dark"][data-band="lavender"] { --band: radial-gradient(ellipse 45% 120% at 12% 20%, #594c80 0%, transparent 70%), radial-gradient(ellipse 40% 110% at 58% 95%, #2c3a66 0%, transparent 70%), radial-gradient(ellipse 35% 120% at 88% 15%, #23515e 0%, transparent 75%), linear-gradient(100deg, #353569, #284662); }
:root[data-theme="dark"][data-band="forgetmenot"] { --band: radial-gradient(ellipse 45% 120% at 12% 20%, #344875 0%, transparent 70%), radial-gradient(ellipse 40% 110% at 58% 95%, #1b3b77 0%, transparent 70%), radial-gradient(ellipse 35% 120% at 88% 15%, #24476e 0%, transparent 75%), linear-gradient(100deg, #17336b, #204173); }
:root[data-theme="dark"][data-band="forest"] { --band: radial-gradient(ellipse 70% 150% at 15% 25%, #2c4a40 0%, transparent 70%), radial-gradient(ellipse 60% 150% at 85% 30%, #3b6654 0%, transparent 70%), linear-gradient(100deg, #1f3934, #29473f); }
:root[data-theme="dark"][data-band="berry"] { --band: radial-gradient(ellipse 45% 120% at 12% 20%, #634882 0%, transparent 70%), radial-gradient(ellipse 40% 110% at 58% 95%, #6b2a55 0%, transparent 70%), radial-gradient(ellipse 35% 120% at 88% 15%, #5c2a3b 0%, transparent 75%), linear-gradient(100deg, #5b2a62, #642a48); }
:root[data-theme="dark"][data-band="sunflower"] { --band: radial-gradient(ellipse 45% 120% at 12% 20%, #953232 0%, transparent 70%), radial-gradient(ellipse 40% 110% at 58% 95%, #8b362c 0%, transparent 70%), radial-gradient(ellipse 35% 120% at 88% 15%, #bd6a1b 0%, transparent 75%), linear-gradient(100deg, #9d2915, #a5512c); }
:root[data-theme="dark"][data-band="deep-teal"] { --band: radial-gradient(ellipse 45% 120% at 12% 20%, #2f575c 0%, transparent 70%), radial-gradient(ellipse 40% 110% at 58% 95%, #0f4246 0%, transparent 70%), radial-gradient(ellipse 35% 120% at 88% 15%, #1b5a55 0%, transparent 75%), linear-gradient(100deg, #0e3f44, #154e4e); }
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"][data-band="lavender"] { --band: radial-gradient(ellipse 45% 120% at 12% 20%, #594c80 0%, transparent 70%), radial-gradient(ellipse 40% 110% at 58% 95%, #2c3a66 0%, transparent 70%), radial-gradient(ellipse 35% 120% at 88% 15%, #23515e 0%, transparent 75%), linear-gradient(100deg, #353569, #284662); }
    :root[data-theme="auto"][data-band="forgetmenot"] { --band: radial-gradient(ellipse 45% 120% at 12% 20%, #344875 0%, transparent 70%), radial-gradient(ellipse 40% 110% at 58% 95%, #1b3b77 0%, transparent 70%), radial-gradient(ellipse 35% 120% at 88% 15%, #24476e 0%, transparent 75%), linear-gradient(100deg, #17336b, #204173); }
    :root[data-theme="auto"][data-band="forest"] { --band: radial-gradient(ellipse 70% 150% at 15% 25%, #2c4a40 0%, transparent 70%), radial-gradient(ellipse 60% 150% at 85% 30%, #3b6654 0%, transparent 70%), linear-gradient(100deg, #1f3934, #29473f); }
    :root[data-theme="auto"][data-band="berry"] { --band: radial-gradient(ellipse 45% 120% at 12% 20%, #634882 0%, transparent 70%), radial-gradient(ellipse 40% 110% at 58% 95%, #6b2a55 0%, transparent 70%), radial-gradient(ellipse 35% 120% at 88% 15%, #5c2a3b 0%, transparent 75%), linear-gradient(100deg, #5b2a62, #642a48); }
    :root[data-theme="auto"][data-band="sunflower"] { --band: radial-gradient(ellipse 45% 120% at 12% 20%, #953232 0%, transparent 70%), radial-gradient(ellipse 40% 110% at 58% 95%, #8b362c 0%, transparent 70%), radial-gradient(ellipse 35% 120% at 88% 15%, #bd6a1b 0%, transparent 75%), linear-gradient(100deg, #9d2915, #a5512c); }
    :root[data-theme="auto"][data-band="deep-teal"] { --band: radial-gradient(ellipse 45% 120% at 12% 20%, #2f575c 0%, transparent 70%), radial-gradient(ellipse 40% 110% at 58% 95%, #0f4246 0%, transparent 70%), radial-gradient(ellipse 35% 120% at 88% 15%, #1b5a55 0%, transparent 75%), linear-gradient(100deg, #0e3f44, #154e4e); }
}

/* accent colors: lavender until a color is chosen, then light / dark per color */
:root { --accent: #5b45b0; --on-accent: #ffffff; --accent-soft: #e2dafa; --on-accent-soft: #2e1f6b; }
:root[data-band="lavender"] { --accent: #5b45b0; --on-accent: #ffffff; --accent-soft: #e2dafa; --on-accent-soft: #2e1f6b; }
:root[data-band="berry"] { --accent: #9c2f7a; --on-accent: #ffffff; --accent-soft: #f8d6ea; --on-accent-soft: #5a1544; }
:root[data-band="forgetmenot"] { --accent: #2f5bb8; --on-accent: #ffffff; --accent-soft: #d6e3fc; --on-accent-soft: #14306b; }
:root[data-band="forest"] { --accent: #23784a; --on-accent: #ffffff; --accent-soft: #cfeadb; --on-accent-soft: #0f4227; }
:root[data-band="sunflower"] { --accent: #cb4810; --on-accent: #ffffff; --accent-soft: #fcdcb8; --on-accent-soft: #6a3006; }
:root[data-band="deep-teal"] { --accent: #11706f; --on-accent: #ffffff; --accent-soft: #cbe7e4; --on-accent-soft: #073f3f; }
:root[data-theme="dark"][data-band="lavender"] { --accent: #c9b8f5; --on-accent: #24174d; --accent-soft: #3b3163; --on-accent-soft: #e9e2fb; }
:root[data-theme="dark"][data-band="berry"] { --accent: #f2b6dc; --on-accent: #4a1238; --accent-soft: #5a2a4c; --on-accent-soft: #fbe0f0; }
:root[data-theme="dark"][data-band="forgetmenot"] { --accent: #a9c6fa; --on-accent: #10295c; --accent-soft: #26406e; --on-accent-soft: #dde8fd; }
:root[data-theme="dark"][data-band="forest"] { --accent: #9fd8b0; --on-accent: #0f3a22; --accent-soft: #24483a; --on-accent-soft: #d8efdf; }
:root[data-theme="dark"][data-band="sunflower"] { --accent: #f0b27f; --on-accent: #6c1f0e; --accent-soft: #aa4813; --on-accent-soft: #f8e1cb; }
:root[data-theme="dark"][data-band="deep-teal"] { --accent: #8fd1cb; --on-accent: #053a38; --accent-soft: #1f4a4a; --on-accent-soft: #d3ecea; }
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"][data-band="lavender"] { --accent: #c9b8f5; --on-accent: #24174d; --accent-soft: #3b3163; --on-accent-soft: #e9e2fb; }
    :root[data-theme="auto"][data-band="berry"] { --accent: #f2b6dc; --on-accent: #4a1238; --accent-soft: #5a2a4c; --on-accent-soft: #fbe0f0; }
    :root[data-theme="auto"][data-band="forgetmenot"] { --accent: #a9c6fa; --on-accent: #10295c; --accent-soft: #26406e; --on-accent-soft: #dde8fd; }
    :root[data-theme="auto"][data-band="forest"] { --accent: #9fd8b0; --on-accent: #0f3a22; --accent-soft: #24483a; --on-accent-soft: #d8efdf; }
    :root[data-theme="auto"][data-band="sunflower"] { --accent: #f0b27f; --on-accent: #6c1f0e; --accent-soft: #aa4813; --on-accent-soft: #f8e1cb; }
    :root[data-theme="auto"][data-band="deep-teal"] { --accent: #8fd1cb; --on-accent: #053a38; --accent-soft: #1f4a4a; --on-accent-soft: #d3ecea; }
}
[data-accent-swatch="lavender"] { --sw: #5b45b0; --sw-on: #ffffff; }
[data-accent-swatch="berry"] { --sw: #9c2f7a; --sw-on: #ffffff; }
[data-accent-swatch="forgetmenot"] { --sw: #2f5bb8; --sw-on: #ffffff; }
[data-accent-swatch="forest"] { --sw: #23784a; --sw-on: #ffffff; }
[data-accent-swatch="sunflower"] { --sw: #cb4810; --sw-on: #ffffff; }
[data-accent-swatch="deep-teal"] { --sw: #11706f; --sw-on: #ffffff; }
[data-theme="dark"] [data-accent-swatch="lavender"] { --sw: #c9b8f5; --sw-on: #24174d; }
[data-theme="dark"] [data-accent-swatch="berry"] { --sw: #f2b6dc; --sw-on: #4a1238; }
[data-theme="dark"] [data-accent-swatch="forgetmenot"] { --sw: #a9c6fa; --sw-on: #10295c; }
[data-theme="dark"] [data-accent-swatch="forest"] { --sw: #9fd8b0; --sw-on: #0f3a22; }
[data-theme="dark"] [data-accent-swatch="sunflower"] { --sw: #f0b27f; --sw-on: #6c1f0e; }
[data-theme="dark"] [data-accent-swatch="deep-teal"] { --sw: #8fd1cb; --sw-on: #053a38; }
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] [data-accent-swatch="lavender"] { --sw: #c9b8f5; --sw-on: #24174d; }
    [data-theme="auto"] [data-accent-swatch="berry"] { --sw: #f2b6dc; --sw-on: #4a1238; }
    [data-theme="auto"] [data-accent-swatch="forgetmenot"] { --sw: #a9c6fa; --sw-on: #10295c; }
    [data-theme="auto"] [data-accent-swatch="forest"] { --sw: #9fd8b0; --sw-on: #0f3a22; }
    [data-theme="auto"] [data-accent-swatch="sunflower"] { --sw: #f0b27f; --sw-on: #6c1f0e; }
    [data-theme="auto"] [data-accent-swatch="deep-teal"] { --sw: #8fd1cb; --sw-on: #053a38; }
}

/* ------------------------------------------------------------------ Settings window */
.ig-settings { width: 600px; max-height: calc(100vh - 96px); padding: 0; gap: 0; overflow: hidden; }
@supports (height: 100dvh) { .ig-settings { max-height: calc(100dvh - 96px); } }
.ig-settings .ig-modal-head { padding: 18px 20px 14px; align-items: center; border-bottom: 1px solid var(--line); }
.ig-settings.is-prefs .ig-modal-head { padding-bottom: 6px; border-bottom: none; } /* the tabs have the line */
.ig-modal-body { flex: 1; min-height: 0; overflow-y: auto; }
.ig-modal-foot { padding: 16px 20px 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line); }
.ig-modal-foot .ig-note { flex: 1 1 100%; order: -1; }
.ig-set-sec { padding: 22px 20px; display: flex; flex-direction: column; gap: 20px; border-top: 1px solid var(--line); }
.ig-set-sec:first-child { border-top: none; }
/* Settings tabs: one section at a time (the heading is the tab, the description stays) */
.ig-set-tabs { flex: none; display: flex; border-bottom: 1px solid var(--line); }
.ig .ig-set-tabs button { min-width: 0; height: 48px; padding: 0 8px; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.ig .ig-set-tabs button:hover { color: var(--ink); }
.ig .ig-set-tabs button.is-on { border-bottom-color: var(--accent); color: var(--ink); }
.ig .ig-set-tabs button.is-admin { color: var(--violet); }
.ig .ig-set-tabs button.is-admin.is-on { border-bottom-color: var(--violet); }
.ig-settings.is-prefs .ig-modal-body { display: flex; flex-direction: column; }
.ig-settings.is-prefs .ig-set-sec { flex: 1 0 auto; border-top: none; }
/* same height on every tab: as tall as the tallest one (Look; admins also have the profile photo there) */
@media (min-width: 761px) { .ig-settings.is-prefs .ig-modal-body { min-height: 396px; } .ig-settings.is-prefs.is-admin-set .ig-modal-body { min-height: 486px; } }
.ig-tab-short { display: none; }
/* more than 2 tabs (admins): the short names, so nothing gets squeezed */
.ig-set-tabs.is-many .ig-tab-long { display: none; }
.ig-set-tabs.is-many .ig-tab-short { display: inline; }
.ig .ig-set-tabs button:focus-visible { outline-offset: -3px; border-radius: 10px; }
@media (max-width: 520px) { .ig-tab-long { display: none; } .ig-tab-short { display: inline; } .ig .ig-set-tabs button { padding: 0 4px; gap: 4px; } }
.ig-settings.is-prefs .ig-set-head h3 { display: none; }
/* admin tabs: the purple tab is enough, the content keeps the normal background */
.ig-settings.is-prefs .ig-set-sec.is-admin { background: none; }
.ig-settings.is-prefs .ig-set-sec.is-admin .ig-seg { background: var(--seg-track); }
.ig-settings.is-prefs .ig-key-state { background: var(--soft); }
.ig-settings.is-prefs .ig-set-head p { margin-top: 0 !important; }
.ig-set-sec.is-admin { background: var(--violet-bg); }
.ig-set-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.ig-set-head p { margin-top: 2px !important; font-size: 13px; color: var(--muted); }
.ig-set-sec.is-admin .ig-set-head h3 { color: var(--violet); }
/* a label's hint sits under it, like the setting rows; it starts with a capital whatever the markup says */
.ig-label small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }
.ig-label small::first-letter { text-transform: uppercase; }
.ig-label small.is-side { position: absolute; top: 2px; right: 0; margin: 0; line-height: inherit; } /* "Optional": on the label's line, at the right */
.ig-set-row > span:first-child { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; }
.ig-set-row small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.ig-set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ig-set-sec.is-admin .ig-seg { background: var(--card); }
.ig-set-sec.is-admin .ig-seg button.is-on { background: var(--violet-strong); color: #fff; }
.ig-badge.is-violet { background: var(--card); color: var(--violet); }
.ig .ig-link-btn { align-self: flex-start; padding: 0; border: none; background: none; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--field-open); text-underline-offset: 3px; }
.ig .ig-link-btn:hover { color: var(--ink); text-decoration-color: currentColor; }

/* accent color picker: rounded squares; the chosen one becomes a scalloped "cookie" with a check */
.ig-bands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
.ig .ig-band-pick { padding: 4px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; border: none; border-radius: 12px; background: none; color: var(--soft-ink); font-size: 13px; font-weight: 500; text-align: center; }
.ig .ig-band-pick.is-on { color: var(--ink); font-weight: 700; }
.ig-band-swatch { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 20px; background: var(--sw); color: transparent; transition: border-radius .2s, transform .2s; }
.ig-band-pick:hover .ig-band-swatch { transform: scale(1.05); }
.ig-band-pick.is-on .ig-band-swatch, .ig-accents button.is-on .ig-band-swatch { border-radius: 0; clip-path: polygon(100.00% 50.00%, 99.58% 52.60%, 98.41% 55.09%, 96.72% 57.40%, 94.81% 59.52%, 93.02% 61.53%, 91.62% 63.52%, 90.74% 65.64%, 90.39% 67.98%, 90.40% 70.59%, 90.53% 73.40%, 90.47% 76.28%, 89.96% 79.03%, 88.83% 81.44%, 87.04% 83.35%, 84.69% 84.69%, 81.98% 85.51%, 79.14% 85.98%, 76.40% 86.34%, 73.94% 86.86%, 71.80% 87.76%, 69.95% 89.16%, 68.27% 91.04%, 66.59% 93.22%, 64.77% 95.45%, 62.70% 97.39%, 60.36% 98.75%, 57.82% 99.35%, 55.16% 99.12%, 52.53% 98.19%, 50.00% 96.80%, 47.63% 95.29%, 45.38% 93.97%, 43.17% 93.10%, 40.90% 92.80%, 38.47% 93.02%, 35.84% 93.57%, 33.05% 94.16%, 30.20% 94.47%, 27.46% 94.24%, 25.00% 93.30%, 22.96% 91.64%, 21.39% 89.38%, 20.23% 86.76%, 19.35% 84.04%, 18.51% 81.49%, 17.48% 79.28%, 16.09% 77.46%, 14.23% 75.99%, 11.97% 74.70%, 9.47% 73.40%, 7.01% 71.91%, 4.88% 70.09%, 3.36% 67.90%, 2.60% 65.40%, 2.61% 62.70%, 3.26% 59.94%, 4.27% 57.24%, 5.33% 54.70%, 6.11% 52.30%, 6.40% 50.00%, 6.11% 47.70%, 5.33% 45.30%, 4.27% 42.76%, 3.26% 40.06%, 2.61% 37.30%, 2.60% 34.60%, 3.36% 32.10%, 4.88% 29.91%, 7.01% 28.09%, 9.47% 26.60%, 11.97% 25.30%, 14.23% 24.01%, 16.09% 22.54%, 17.48% 20.72%, 18.51% 18.51%, 19.35% 15.96%, 20.23% 13.24%, 21.39% 10.62%, 22.96% 8.36%, 25.00% 6.70%, 27.46% 5.76%, 30.20% 5.53%, 33.05% 5.84%, 35.84% 6.43%, 38.47% 6.98%, 40.90% 7.20%, 43.17% 6.90%, 45.38% 6.03%, 47.63% 4.71%, 50.00% 3.20%, 52.53% 1.81%, 55.16% 0.88%, 57.82% 0.65%, 60.36% 1.25%, 62.70% 2.61%, 64.77% 4.55%, 66.59% 6.78%, 68.27% 8.96%, 69.95% 10.84%, 71.80% 12.24%, 73.94% 13.14%, 76.40% 13.66%, 79.14% 14.02%, 81.98% 14.49%, 84.69% 15.31%, 87.04% 16.65%, 88.83% 18.56%, 89.96% 20.97%, 90.47% 23.72%, 90.53% 26.60%, 90.40% 29.41%, 90.39% 32.02%, 90.74% 34.36%, 91.62% 36.48%, 93.02% 38.47%, 94.81% 40.48%, 96.72% 42.60%, 98.41% 44.91%, 99.58% 47.40%); color: var(--sw-on); transform: scale(1.12); }

.ig .ig-mnav-btn { min-height: 46px; padding: 0 4px; display: flex; align-items: center; gap: 8px; border: none; border-bottom: 1px solid var(--line); background: none; color: var(--soft-ink); font-size: 16px; font-weight: 500; text-align: left; }

.ig-key-state { padding: 10px 12px; display: flex; align-items: center; gap: 8px; border-radius: 12px; background: var(--card); color: var(--soft-ink); font-size: 13px; font-weight: 500; }
.ig-key-state span { display: inline-flex; }
.ig-key-state.is-ok { color: var(--green); }

/* photo matching: progress instead of a spinner */
.ig-finding { min-height: 0; padding: 14px 16px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; border-radius: 12px; }
.ig-finding-text { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ig-finding-text strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.ig-finding-text span { font-size: 13px; font-weight: 500; color: var(--muted); }
.ig-progress { height: 8px; overflow: hidden; border-radius: 999px; background: var(--card); }
.ig-progress i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .1s linear; }

@media (max-width: 760px) {
    /* dvh = the height between the browser's own bars, so the buttons at the bottom stay visible */
    .ig-settings { max-height: calc(100vh - 120px); }
    @supports (height: 100dvh) { .ig-settings { max-height: calc(100dvh - 32px); } }
    .ig-set-grid { grid-template-columns: minmax(0, 1fr); }
    .ig-modal-foot .ig-tour-reset { flex: 1 1 100%; order: -1; margin-right: 0; text-align: left; }
}