/* ── Settings card ("gc") — shared component used by admin.html and dashboard.html.
   Relies on --glass/--blur/--glass-border/--r-xl/--glass-shadow/--glass-border-soft/
   --text-1/--text-4 custom properties, defined in each page's own stylesheet. ── */
.gc {
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-xl);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    /* Grid/flex items default to min-width:auto, which respects the intrinsic width of
       non-wrapping content inside (e.g. the KB JSON sample, a receipt row) -- without
       this, that content can force the *card* wider than its column, pushing the whole
       grid past the container's right edge (reads as "padding on the left, none on the
       right" since the left edge is still correctly positioned, only the right overflows). */
    min-width: 0;
}
.gc-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 20px;
    border-bottom: 1px solid var(--glass-border-soft);
    background: rgba(255,255,255,0.15);
}
.gc-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--text-1);
}
.gc-title svg { color: var(--text-4); }
.gc-body { padding: 17px 20px; }

/* ── Locked (paid-tier teaser) — one visual language for both full sections
   (gc-locked) and inline elements (locked-inline, e.g. a single form) ────── */
.gc-locked,
.locked-inline { position: relative; }
.gc-locked > *:not(.gc-lock-badge),
.locked-inline > * {
    opacity: 0.45; filter: grayscale(55%); pointer-events: none; user-select: none;
}
.gc-lock-badge {
    position: absolute; top: 10px; right: 14px; z-index: 6;
    background: rgba(20,20,30,0.78); color: #fff; font-size: 11px; font-weight: 700;
    padding: 4px 10px; border-radius: 999px; white-space: nowrap;
    text-decoration: none; cursor: pointer; transition: background 0.15s;
}
.gc-lock-badge:hover { background: rgba(20,20,30,0.92); }
.locked-inline .gc-lock-badge { top: -2px; right: 0; opacity: 1; }

/* ── Modals — shared gray-glass style, one visual language for every
   overlay/dialog (admin.html, dashboard.html, kb_constructor*.html).
   Opened/closed via static/js/modal.js's openModal(id)/closeModal(id). ── */
.mo {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(15,23,42,0.35);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.md {
    width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
    padding: 26px 28px;
    background: rgba(255,255,255,0.55);
    backdrop-filter: var(--blur-heavy); -webkit-backdrop-filter: var(--blur-heavy);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-xl);
    box-shadow: 0 20px 60px rgba(31,38,135,0.18);
}
.md.sm { max-width: 380px; }
.md-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; padding-bottom: 14px;
    border-bottom: 1px solid var(--glass-border-soft);
}
.md-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-1); }
.md-x {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--r-sm);
    background: rgba(255,255,255,0.4); border: 1px solid var(--glass-border-soft);
    font-size: 16px; cursor: pointer; color: var(--text-3);
    transition: background 0.15s, color 0.15s;
}
.md-x:hover { background: rgba(255,255,255,0.7); color: var(--text-1); }
.md-sec { border-top: 1px solid var(--glass-border-soft); padding-top: 16px; margin-top: 16px; }
.md-sec-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text-4); margin-bottom: 12px;
}
.md-info { font-size: 12px; color: var(--text-4); margin-bottom: 10px; font-style: italic; }
.md-foot {
    display: flex; gap: 10px; justify-content: flex-end;
    margin-top: 22px; padding-top: 16px;
    border-top: 1px solid var(--glass-border-soft);
}

/* Optional price-delta line inside a confirmAction() dialog (static/js/modal.js) --
   a real charge shouldn't be easy to miss in a plain "are you sure?" sentence, so
   when a confirmation has a money consequence it gets its own prominent row, not
   just a parenthetical in the message text. Hidden by default; confirmAction()
   only shows it when called with a priceInfo argument. */
.confirm-price { display: none; font-size: 22px; font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; }
.confirm-price.add { color: var(--accent-dark); }
.confirm-price.remove { color: var(--text-2); }
.confirm-price .per { font-size: 12px; font-weight: 600; color: var(--text-3); margin-left: 4px; }