/**
 * Linkix Admin Design System — v2.2
 *
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  TABLE OF CONTENTS                                          ║
 * ╠══════════════════════════════════════════════════════════════╣
 * ║  1.  CSS Variables & Global Reset                           ║
 * ║  2.  Page Layout — Wrap & Background                        ║
 * ║  3.  Grid System                                            ║
 * ║  4.  Form Elements                                          ║
 * ║  5.  Buttons                                                ║
 * ║  6.  Hero Block                                             ║
 * ║  7.  Dashboard — Cards & Stats                              ║
 * ║  8.  Panels & Panel Variants                                ║
 * ║  9.  Shortlinks — Toolbar                                   ║
 * ║  10. Shortlinks — Grid & Layout                             ║
 * ║  11. Shortlinks — Short Card                                ║
 * ║  12. Shortlinks — Inline Editor                             ║
 * ║  13. QR Studio                                              ║
 * ║  14. QR Library                                             ║
 * ║  15. QR Inline Toolbar                                      ║
 * ║  16. Settings                                               ║
 * ║  17. Analytics & Snapshot                                   ║
 * ║  18. Advisor / Score Badges                                 ║
 * ║  19. License                                                ║
 * ║  20. Navigation Tabs                                        ║
 * ║  21. Smart App Links                                        ║
 * ║  22. Bio Pages                                              ║
 * ║  23. Utility Classes                                        ║
 * ║  24. Animations                                             ║
 * ║  25. Responsive — Media Queries                             ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ══════════════════════════════════════════════ */
/* │ 1. CSS VARIABLES & GLOBAL RESET            │ */
/* ══════════════════════════════════════════════ */

/*
 * All Linkix UI components are scoped under .linkix-ui to avoid
 * conflicts with WordPress core or other plugin styles.
 * Design tokens are defined as CSS custom properties here.
 */

.linkix-ui,
.linkix-ui * {
    font-family: "Zain", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-sizing: border-box;
}

.linkix-ui {

    /* ── Colors ── */
    --lx-color-bg:           #f4f6fb;
    --lx-color-surface:      #ffffff;
    --lx-color-surface-soft: #f8fafc;
    --lx-color-text:         #1f2937;
    --lx-color-muted:        #667085;
    --lx-color-line:         #e7eaf3;
    --lx-color-brand:        #5a8186;
    --lx-color-brand-strong: #436a70;
    --lx-color-accent:       #b27a88;
    --lx-color-success:      #0f9d58;
    --lx-color-warning:      #b7791f;
    --lx-color-danger:       #c53030;

    /* ── Legacy aliases (kept for backward compatibility) ── */
    --lx-bg:         var(--lx-color-bg);
    --lx-panel:      var(--lx-color-surface);
    --lx-ink:        var(--lx-color-text);
    --lx-muted:      var(--lx-color-muted);
    --lx-line:       var(--lx-color-line);
    --lx-brand:      var(--lx-color-brand);
    --lx-brand-dark: var(--lx-color-brand-strong);
    --lx-accent:     var(--lx-color-accent);

    /* ── Border Radii ── */
    --lx-radius-xs: 10px;
    --lx-radius-sm: 12px;
    --lx-radius-md: 16px;
    --lx-radius-lg: 20px;
    --lx-radius-xl: 28px;

    /* ── Shadows ── */
    --lx-shadow-sm: 0 8px 20px rgba(17, 24, 39, .05);
    --lx-shadow-md: 0 18px 40px rgba(17, 24, 39, .06);

    /* ── Spacing scale ── */
    --lx-space-2: 8px;
    --lx-space-3: 12px;
    --lx-space-4: 16px;
    --lx-space-5: 20px;
    --lx-space-6: 24px;
    --lx-space-7: 28px;

    /* ── Control Heights ── */
    --lx-control-height-sm: 36px;
    --lx-control-height-md: 42px;
    --lx-control-height-lg: 48px;
    --lx-control-height:    42px; /* legacy alias */

    /* ── Text extremes ── */
    --dark-color:  #000000;
    --light-color: #ffffff;

    /* ── Grid ── */
    --lx-grid-gap: 18px;

    width: 100%;
    color: var(--lx-color-text);
}

/* ══════════════════════════════════════════════ */
/* │ 2. PAGE LAYOUT — WRAP & BACKGROUND         │ */
/* ══════════════════════════════════════════════ */

/*
 * .linkix-wrap stretches to the full WP admin content area.
 * The per-page body selectors add a gradient background and
 * rounded container on every Linkix admin page.
 */

.linkix-wrap {
    width: 100%;
    max-width: stretch;
}

body.toplevel_page_linkix          .wrap.linkix-wrap,
body.linkix_page_linkix-permalinks .wrap.linkix-wrap,
body.linkix_page_linkix-shortlinks .wrap.linkix-wrap,
body.linkix_page_linkix-qr-studio  .wrap.linkix-wrap,
body.linkix_page_linkix-redirects  .wrap.linkix-wrap,
body.linkix_page_linkix-url-health .wrap.linkix-wrap,
body.linkix_page_linkix-canonical  .wrap.linkix-wrap,
body.linkix_page_linkix-analytics  .wrap.linkix-wrap,
body.linkix_page_linkix-settings   .wrap.linkix-wrap {
    background: linear-gradient(180deg, #f7f8fc 0%, #f0f4fb 100%);
    padding: 14px;
    border-radius: var(--lx-radius-xl);
}

/* ══════════════════════════════════════════════ */
/* │ 3. GRID SYSTEM                             │ */
/* ══════════════════════════════════════════════ */

/*
 * Responsive grid helpers used throughout the admin.
 * - lx-grid--2/--3/--4  : explicit column counts
 * - linkix-dashboard-lists : 2-col layout for dashboard list panels
 * - linkix-shortlinks-grid : 2-col layout for short-link cards
 * Legacy class names are kept for backward compatibility with existing PHP.
 */

.linkix-ui .lx-grid,
.linkix-ui .linkix-grid {
    display: grid;
    gap: var(--lx-grid-gap);
}

.linkix-ui .lx-grid--2,
.linkix-ui .linkix-dashboard-lists,
.linkix-ui .linkix-shortlinks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.linkix-ui .lx-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.linkix-ui .lx-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Legacy grid classes — still rendered by page PHP files */
.linkix-grid,
.linkix-dashboard-grid,
.linkix-analytics-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

/* 3-column variant used on the dashboard stats row */
.linkix-dashboard-grid--two {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ══════════════════════════════════════════════ */
/* │ 4. FORM ELEMENTS                           │ */
/* ══════════════════════════════════════════════ */

/* Normalize all text-like inputs and selects inside .linkix-ui */

.linkix-ui input[type="text"],
.linkix-ui input[type="search"],
.linkix-ui input[type="number"],
.linkix-ui input[type="url"],
.linkix-ui select,
.linkix-ui textarea {
    min-height: var(--lx-control-height-md);
    border-radius: var(--lx-radius-sm);
    border: 1px solid var(--lx-color-line);
    padding: 0 14px;
    background: var(--lx-color-surface);
    color: var(--lx-color-text);
    box-shadow: none;
}

.linkix-ui textarea {
    padding: 12px 14px;
    min-height: 120px;
}

/* ══════════════════════════════════════════════ */
/* │ 5. BUTTONS                                 │ */
/* ══════════════════════════════════════════════ */

/*
 * Base button reset — applies to WP .button, our .lx-btn, and bare <button>.
 * Variants below add color and intent.
 */

.linkix-ui .button,
.linkix-ui .lx-btn,
.linkix-ui button {
    min-height: var(--lx-control-height-md);
    border-radius: var(--lx-radius-sm);
    border: 1px solid transparent;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
    cursor: pointer;
}

.linkix-ui .button:hover,
.linkix-ui .lx-btn:hover,
.linkix-ui button:hover {
    transform: translateY(-1px);
}

/* Primary button — brand fill */
.linkix-ui .button.button-primary,
.linkix-ui .lx-btn--primary {
    background: var(--lx-color-brand);
    border-color: var(--lx-color-brand);
    color: #fff;
}

.linkix-ui .button.button-primary:hover,
.linkix-ui .lx-btn--primary:hover {
    background: var(--lx-color-brand-strong);
    border-color: var(--lx-color-brand-strong);
}

/* Secondary / Ghost button — outlined */
.linkix-ui .button.button-secondary,
.linkix-ui .lx-btn--secondary,
.linkix-ui .lx-btn--ghost {
    background: var(--lx-color-surface);
    border-color: var(--lx-color-line);
    color: var(--lx-color-text);
}

/* Destructive link-style button (delete actions) */
.linkix-short-card__actions .button-link,
.button.button-link-delete {
    color: var(--lx-color-accent) !important;
}

/* ══════════════════════════════════════════════ */
/* │ 6. HERO BLOCK                              │ */
/* ══════════════════════════════════════════════ */

/*
 * Full-width hero header rendered by Linkix_Admin_Layout::page_header().
 * Contains a logo/brand column and a title + description column.
 */

.linkix-hero {
    margin: 12px 0 18px;
    background: linear-gradient(90deg, #fff, rgba(94, 94, 94, .05));
    border: 1px solid rgba(90, 129, 134, .12);
    border-radius: var(--lx-radius-xl);
    padding: 28px 30px;
    box-shadow: var(--lx-shadow-md);
}

.linkix-hero-inner {
    display: grid;
    grid-template-columns: minmax(175px, 265px) 1fr;
    gap: 28px;
    align-items: center;
}

.linkix-hero h1 {
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: .01em;
    font-weight: 700;
    color: #182230;
    margin: 0 0 8px;
}

.linkix-hero p {
    font-size: 17px;
    color: #475467;
    max-width: 920px;
    line-height: 1.5;
}

.linkix-hero-brand {
    display: flex;
    align-items: center;
}

.linkix-hero-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    box-shadow: none;
}

.linkix-hero-logo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    filter: none;
}

/* ══════════════════════════════════════════════ */
/* │ 7. DASHBOARD — CARDS & STATS               │ */
/* ══════════════════════════════════════════════ */

/*
 * .linkix-cards  — auto-fit stat cards row (via Linkix_Admin_UI::render_cards)
 * .linkix-card   — individual stat tile (large number + label)
 * .linkix-panel  — general content panel (shared with section 8)
 */

.linkix-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--lx-grid-gap);
    margin: 20px 0;
}

.linkix-card,
.linkix-panel,
.linkix-settings-form {
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--lx-color-line);
    border-radius: var(--lx-radius-lg);
    padding: 22px;
    box-shadow: var(--lx-shadow-md);
}

.linkix-card h2,
.linkix-panel h2 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: #253041;
}

/* Large metric number inside a stat card */
.linkix-card strong {
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    color: #111827;
}

/* 2-up grid of quick-access nav links on the dashboard */
.linkix-dashboard-quicklinks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.linkix-quicklink-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border: 1px solid #dbe4ea;
    border-radius: 16px;
    background: #f7fafb;
    color: #264a51;
    text-decoration: none;
    font-weight: 700;
    transition: all .18s ease;
}

.linkix-quicklink-card:hover {
    background: #edf4f5;
    border-color: #5c8f97;
    transform: translateY(-1px);
}

/* 2-up grid of small numeric stat tiles (used in dashboard panels) */
.linkix-mini-stats {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.linkix-mini-stats > div {
    background: #f8f9fd;
    border: 1px solid var(--lx-color-line);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.linkix-mini-stats span {
    display: block;
    color: var(--lx-color-muted);
    font-size: 13px;
    margin-bottom: 6px;
}

.linkix-mini-stats strong {
    font-size: 21px;
    color: #182230;
    text-transform: none;
}

/* Action button row at the bottom of dashboard panels */
.linkix-dashboard-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* ══════════════════════════════════════════════ */
/* │ 8. PANELS & PANEL VARIANTS                 │ */
/* ══════════════════════════════════════════════ */

/*
 * Base .linkix-panel styles live in section 7 (shared with cards).
 * This section adds variants and interior layout helpers.
 */

/* Action row inside a panel (e.g. save/reset buttons) */
.linkix-panel .linkix-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 8px 0 10px;
}

/* Inline success/error message bar shown after AJAX actions */
.linkix-panel .linkix-message {
    margin-top: 10px;
    padding: 8px 10px;
    border-left: 4px solid #46b450;
    background: #fff;
}

.linkix-panel .notice-error {
    border-left-color: #d63638;
}

/* Read-only inputs inherit white background inside panels */
.linkix-panel .widefat[readonly] {
    background: #fff;
}

/* Accent panel — dark brand gradient, used for featured/CTA panels */
.linkix-panel-accent {
    background: linear-gradient(135deg, rgba(90, 129, 134, .95), rgba(67, 106, 112, .95));
    color: #fff;
}

.linkix-panel-accent h2,
.linkix-panel-accent li,
.linkix-panel-accent p {
    color: #fff;
}

/* Invert primary button inside accent panel for contrast */
.linkix-panel-accent .button-primary {
    background: #fff !important;
    border-color: #fff !important;
    color: #234046 !important;
}

/* Prevent cards/panels from overflowing their grid column */
.linkix-short-card,
.linkix-settings-card,
.linkix-panel {
    min-width: 0;
    overflow: hidden;
}

/* Scrollable wrapper for wide data tables */
.linkix-table-wrap {
    overflow-x: auto;
}

.linkix-table-wrap table,
.linkix-ui .widefat {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border: 1px solid var(--lx-color-line);
    border-radius: var(--lx-radius-md);
    overflow: hidden;
    background: #fff;
}

.linkix-table-wrap th,
.linkix-table-wrap td,
.linkix-ui .widefat th,
.linkix-ui .widefat td {
    padding: 12px 14px;
    vertical-align: top;
}

.linkix-table-wrap thead,
.linkix-ui .widefat thead {
    background: var(--lx-color-surface-soft);
}

/* ══════════════════════════════════════════════ */
/* │ 9. SHORTLINKS — TOOLBAR                    │ */
/* ══════════════════════════════════════════════ */

/*
 * Top toolbar bar on the Short Links page.
 * Left: page title + description.
 * Right: search field, status filter, and action buttons.
 */

.linkix-shortlinks-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(90, 129, 134, .08), rgba(178, 122, 136, .08));
    border: 1px solid rgba(90, 129, 134, .12);
    border-radius: 26px;
    padding: 16px 20px;
}

.linkix-shortlinks-toolbar__left h2 {
    margin: 0 0 8px;
    font-size: 24px;
}

.linkix-shortlinks-toolbar__left p {
    margin: 0;
    color: var(--lx-color-muted);
    max-width: 720px;
}

.linkix-shortlinks-toolbar__right {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

.linkix-shortlinks-toolbar__right > * {
    max-width: 100%;
}

/* Search input, status filter, and studio form inputs — shared border style */
.linkix-search-field input,
.linkix-shortlinks-filter,
.linkix-inline-download-form select,
.linkix-studio-form input,
.linkix-studio-form textarea,
.linkix-studio-form select {
    border: 1px solid #d8deea !important;
    border-radius: 14px !important;
    background: #fff;
    min-height: 44px;
    box-shadow: none !important;
}

.linkix-search-field input,
.linkix-shortlinks-filter {
    min-width: 240px;
    padding: 10px 14px;
}

/* Primary buttons inside toolbar and short card action rows */
.linkix-short-card__actions .button.button-primary,
.linkix-shortlinks-toolbar .button.button-primary,
.linkix-studio-actions .button.button-primary {
    background: var(--lx-color-brand) !important;
    border-color: var(--lx-color-brand) !important;
    color: #fff !important;
}

.linkix-short-card__actions .button.button-primary:hover,
.linkix-shortlinks-toolbar .button.button-primary:hover,
.linkix-studio-actions .button.button-primary:hover {
    background: var(--lx-color-brand-strong) !important;
    border-color: var(--lx-color-brand-strong) !important;
}

/* Secondary buttons inside toolbar and short card action rows */
.linkix-short-card__actions .button.button-secondary,
.linkix-shortlinks-toolbar .button.button-secondary {
    border-color: #d4dae8 !important;
    color: #253041 !important;
    background: #fff !important;
}

/* ══════════════════════════════════════════════ */
/* │ 10. SHORTLINKS — GRID & LAYOUT             │ */
/* ══════════════════════════════════════════════ */

/*
 * Page-level layout wrappers for Short Links and Settings pages.
 * .linkix-shortlinks-layout — full-width block wrapper
 * .linkix-shortlinks-grid   — 2-column card grid
 * .linkix-settings-grid     — 2-column settings card grid
 */

.linkix-shortlinks-layout {
    display: block;
    gap: 24px;
    align-items: start;
    margin-top: 20px;
}

.linkix-shortlinks-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 24px;
    align-items: stretch;
    min-width: 0;
}

.linkix-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
    min-width: 0;
}

/* ══════════════════════════════════════════════ */
/* │ 11. SHORTLINKS — SHORT CARD                │ */
/* ══════════════════════════════════════════════ */

/*
 * Each short link is rendered as a .linkix-short-card.
 * Internal structure:
 *   __head     — slug + status badge row
 *   __layout   — 2-col: QR preview (left) + content (right)
 *   __meta     — 5-up metric grid (clicks, type, created...)
 *   __meta2nd  — 3-up secondary metric grid
 *   __actions  — action button row (copy, edit, delete...)
 */

.linkix-short-card {
    background: rgba(255, 255, 255, .98);
    border: 1px solid #e9edf5;
    border-radius: 24px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .05);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.linkix-short-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.linkix-short-card h3 {
    margin: 6px 0 0;
    font-size: 22px;
    line-height: 1;
}

/* ── Status Badges ── */

/*
 * .linkix-status-badge is a pill-shaped badge used in multiple contexts:
 * short card heads, URL health rows, analytics snapshot cards, etc.
 * State modifier classes (.is-active, .is-low, .is-excellent, etc.)
 * are applied dynamically by PHP or JavaScript.
 */

.linkix-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Active / Inactive states */
.linkix-status-badge.is-active {
    background: rgba(90, 129, 134, .12);
    color: var(--dark-color);
    margin-left: 15px;
}

.linkix-status-badge.is-disabled {
    background: rgba(178, 122, 136, .12);
    color: #8a4f5f;
}

/* Risk level states (URL Health module) */
.linkix-status-badge.is-low {
    background: rgba(34, 197, 94, 0.12);
    color: var(--dark-color);
    border-color: rgba(34, 197, 94, 0.24);
}

.linkix-status-badge.is-medium {
    background: rgba(250, 204, 21, 0.12);
    color: var(--dark-color);
    border-color: rgba(250, 204, 21, 0.24);
}

.linkix-status-badge.is-high {
    background: rgba(239, 68, 68, 0.12);
    color: var(--dark-color);
    border-color: rgba(239, 68, 68, 0.24);
}

/* Routing safety states (Advisor module) */
.linkix-status-badge.is-excellent {
    background: rgba(16, 185, 129, 0.14);
    color: var(--dark-color);
    border-color: rgba(16, 185, 129, 0.28);
}

.linkix-status-badge.is-good {
    background: rgba(34, 197, 94, 0.12);
    color: var(--dark-color);
    border-color: rgba(34, 197, 94, 0.24);
}

.linkix-status-badge.is-fair {
    background: rgba(245, 158, 11, 0.12);
    color: var(--dark-color);
    border-color: rgba(245, 158, 11, 0.24);
}

.linkix-status-badge.is-weak {
    background: rgba(249, 115, 22, 0.12);
    color: var(--dark-color);
    border-color: rgba(249, 115, 22, 0.24);
}

.linkix-status-badge.is-critical {
    background: rgba(239, 68, 68, 0.12);
    color: var(--dark-color);
    border-color: rgba(239, 68, 68, 0.24);
}

/* Readability states (Advisor module) */
.linkix-status-badge.is-compact {
    background: rgba(16, 185, 129, 0.14);
    color: var(--dark-color);
    border-color: rgba(16, 185, 129, 0.28);
}

.linkix-status-badge.is-readable {
    background: rgba(59, 130, 246, 0.12);
    color: var(--dark-color);
    border-color: rgba(59, 130, 246, 0.24);
}

.linkix-status-badge.is-acceptable {
    background: rgba(245, 158, 11, 0.12);
    color: var(--dark-color);
    border-color: rgba(245, 158, 11, 0.24);
}

.linkix-status-badge.is-heavy {
    background: rgba(249, 115, 22, 0.12);
    color: var(--dark-color);
    border-color: rgba(249, 115, 22, 0.24);
}

.linkix-status-badge.is-poor {
    background: rgba(239, 68, 68, 0.12);
    color: var(--dark-color);
    border-color: rgba(239, 68, 68, 0.24);
}

.linkix-status-badge.is-neutral {
    background: rgba(148, 163, 184, 0.12);
    color: var(--dark-color);
    border-color: rgba(148, 163, 184, 0.24);
}

/* ── Short Card Body ── */

/* Target URL input — full-width, purple-tinted border */
.linkix-short-card__url input {
    width: 100%;
    border: 1px solid #d9dcff;
    border-radius: 14px;
    padding: 12px 14px;
    background: #f8f9ff;
}

/* 5-column metrics row (clicks, type, object, created, updated) */
.linkix-short-card__meta {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.linkix-short-card__meta span {
    background: #f7f8fc;
    border: 1px solid #eceff5;
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 3-column secondary metrics row (status, QR count, advisor score...) */
.linkix-short-card__meta2nd {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.linkix-short-card__meta2nd span {
    background: var(--lx-color-surface-soft);
    border: 1px solid var(--lx-color-line);
    border-radius: var(--lx-radius-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Shared label/value typography inside meta grids */
.linkix-short-card__meta strong,
.linkix-short-card__meta2nd strong {
    font-size: 13px;
    color: var(--lx-color-muted);
    font-weight: 500;
}

.linkix-short-card__meta em,
.linkix-short-card__meta2nd em {
    font-style: normal;
    color: #111827;
    font-size: 15px;
}

.linkix-short-card__label,
.linkix-short-card__host {
    color: var(--lx-color-muted);
    font-size: 13px;
}

/* Long URLs break to prevent horizontal overflow */
.linkix-short-card__target p {
    margin: 8px 0 4px;
    word-break: break-word;
}

.linkix-short-card__target code {
    white-space: normal;
    word-break: break-word;
}

/* 8-column action button row — some actions span 2 columns */
.linkix-short-card__actions {
    display: grid;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    grid-template-columns: repeat(8, max-content);
}

.linkix-short-card__actions .button-link {
    padding: 0 6px;
}

/* Inline QR download form takes up 2 columns in the actions grid */
.linkix-short-card__actions .linkix-inline-download-form {
    grid-column: span 2;
}

/* QR preview box — dashed border, centred image */
.linkix-short-card__qr {
    border: 1px dashed rgba(90, 129, 134, .22);
    border-radius: 22px;
    background: linear-gradient(180deg, #fff, #f7f9fc);
    padding: 16px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.linkix-short-card__qr img {
    max-width: 220px;
    width: 100%;
    height: auto;
    margin: auto;
    display: block;
}

/* Placeholder text shown when no QR has been generated yet */
.linkix-short-card__qr--empty {
    color: var(--lx-color-muted);
    font-size: 13px;
    text-align: center;
}

/* 2-column card body: QR column (fixed 220px) + content column (fluid) */
.linkix-short-card__layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.linkix-short-card__media {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.linkix-short-card__content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* Prevent text overflow on fluid content columns */
.linkix-short-card__content,
.linkix-short-card__target,
.linkix-short-card__url {
    min-width: 0;
}

/* ══════════════════════════════════════════════ */
/* │ 12. SHORTLINKS — INLINE EDITOR             │ */
/* ══════════════════════════════════════════════ */

/*
 * Inline add/edit form that appears above the short link card grid.
 * Also reused on the Permalinks page for its add/edit form.
 * .linkix-inline-danger  — red destructive link button (no border/bg)
 */

.linkix-shortlinks-editor {
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid rgba(25, 52, 58, .08);
    border-radius: 20px;
    background: #fbfcfd;
}

/* 4-column field grid inside the editor */
.linkix-shortlinks-editor__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.linkix-shortlinks-editor__grid label {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Save / cancel / delete action row */
.linkix-shortlinks-editor__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
    flex-wrap: wrap;
}

/* Small helper note below the editor */
.linkix-shortlinks-note {
    color: #5f7378;
    font-size: 13px;
    margin-top: 10px;
}

/* Inline form wrappers inside card action rows */
.linkix-short-card__actions form {
    display: inline-flex;
}

.linkix-smart-delete-form {
    display: inline-flex;
}

/* Plain red text button for destructive actions (no background, no border) */
.linkix-inline-danger {
    color: #c62828;
    background: none;
    border: none;
    padding: 0 4px;
    font-weight: 600;
    cursor: pointer;
}

.linkix-inline-danger:hover {
    text-decoration: underline;
}

/* ══════════════════════════════════════════════ */
/* │ 13. QR STUDIO                              │ */
/* ══════════════════════════════════════════════ */

/*
 * QR Studio page — compose and preview QR codes for any URL.
 * Layout: narrow preview column (left) + form column (right).
 */

.linkix-studio-form label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    font-weight: 600;
    color: #344054;
}

.linkix-studio-form textarea {
    padding: 14px;
    min-height: 180px;
}

/* Header row for the composer panel (title + live-state indicator) */
.linkix-studio-composer__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

/* Generate / download button row at the bottom of the composer */
.linkix-studio-actions {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* Full-width composer section below the initial layout grid */
.linkix-studio-composer-full {
    margin-top: 24px;
}

/* Main 2-col layout: preview box (260px) + composer (fluid) */
.linkix-studio-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* QR preview box — dashed border, soft gradient background */
.linkix-studio-preview__box {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    background: linear-gradient(180deg, #fbfcff, #f3f6fb);
    border: 1px dashed #d7deea;
    border-radius: 22px;
    padding: 24px;
    min-height: 100%;
}

/* Placeholder square shown before a QR is generated */
.linkix-studio-preview__qr {
    width: 180px;
    height: 180px;
    border-radius: 20px;
    background: repeating-linear-gradient(45deg, #eef2ff, #eef2ff 10px, #f7f8fc 10px, #f7f8fc 20px);
    margin-bottom: 16px;
}

.linkix-studio-fields {
    margin-bottom: 16px;
}

/* ══════════════════════════════════════════════ */
/* │ 14. QR LIBRARY                             │ */
/* ══════════════════════════════════════════════ */

/*
 * The QR Library tab lists all saved custom QR codes.
 * Each item shows the QR image on the left and metadata + actions on the right.
 */

/* Small QR thumbnail used in post meta boxes */
.linkix-metabox-qr__image {
    max-width: 180px;
    width: 100%;
    height: auto;
    border: 1px solid #ebe7ff;
    border-radius: 14px;
    background: #fff;
    padding: 10px;
}

/* Single-column list of QR library items */
.linkix-qr-library {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}

/* Each library item: image column (220px) + info column (fluid) */
.linkix-qr-library__item {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    border: 1px solid #e8edf5;
    border-radius: 22px;
    background: #fbfcff;
    padding: 18px;
}

/* Centred image wrapper with a dashed border */
.linkix-qr-library__media {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #d7deea;
    border-radius: 18px;
    background: #fff;
    padding: 16px;
}

.linkix-qr-library__media img {
    max-width: 180px;
    width: 100%;
    height: auto;
}

/* Metadata and action buttons column */
.linkix-qr-library__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ══════════════════════════════════════════════ */
/* │ 15. QR INLINE TOOLBAR                      │ */
/* ══════════════════════════════════════════════ */

/*
 * Horizontal toolbar rendered below the QR library heading.
 * Contains bulk-operation form and maintenance action buttons.
 * Scrolls horizontally on smaller viewports rather than wrapping.
 */

.linkix-qr-tools-inline {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.linkix-qr-tools-inline__title {
    flex: 0 0 auto;
    min-width: max-content;
}

.linkix-qr-tools-inline__title h3 {
    margin: 0;
    font-size: 18px;
    color: #182230;
}

.linkix-qr-tools-inline__bulk,
.linkix-qr-tools-inline__maintenance {
    flex: 0 0 auto;
}

/* Inner button rows for bulk and maintenance sub-sections */
.linkix-qr-tools-inline .linkix-qr-bulk-bar,
.linkix-qr-tools-inline .linkix-qr-maintenance__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

/* Prevent label text from breaking across lines in tight toolbar */
.linkix-qr-tools-inline label {
    white-space: nowrap;
}

/* Format selector inside the bulk form */
.linkix-qr-tools-inline select {
    min-width: 150px;
}

/* Section heading inside the bulk form */
.linkix-qr-bulk-head {
    display: block;
}

/* Wrapping button row for bulk operations (standalone, outside toolbar) */
.linkix-qr-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Bulk form — no visual chrome, just a layout wrapper */
.linkix-qr-bulk-form {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* Maintenance action button row (orphan cleanup, etc.) */
.linkix-qr-maintenance__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ══════════════════════════════════════════════ */
/* │ 16. SETTINGS                               │ */
/* ══════════════════════════════════════════════ */

/*
 * Settings page uses tabbed navigation (section 20) with grouped
 * .linkix-settings-card panels inside each tab panel.
 */

/* Root form wrapper — block layout to allow full-width cards */
.linkix-settings-layout {
    display: block;
    gap: 24px;
    margin-top: 22px;
}

/* Individual settings card — white, rounded, shadowed */
.linkix-settings-card {
    background: rgba(255, 255, 255, .95);
    border: 1px solid var(--lx-color-line);
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 16px 36px rgba(16, 24, 40, .06);
}

.linkix-settings-card h2 {
    margin: 0 0 18px;
    font-size: 20px;
    color: #182230;
}

/* Span full grid width */
.linkix-settings-card--full {
    grid-column: 1 / -1;
}

.linkix-settings-card--full .description {
    max-width: 880px;
}

/* Compact single-column variant */
.linkix-settings-card--compact .linkix-settings-card__grid {
    grid-template-columns: 1fr;
    gap: 16px;
}

/* 2-column label + input grid inside a settings card */
.linkix-settings-card__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    min-width: 0;
}

.linkix-settings-card__grid label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.linkix-settings-card__grid input,
.linkix-settings-card__grid select,
.linkix-settings-card__grid textarea {
    width: 100%;
    border: 1px solid #d8deea;
    border-radius: 14px;
    padding: 12px 14px;
    background: #fff;
    min-height: 44px;
    max-width: 100%;
    box-sizing: border-box;
}

.linkix-settings-card__grid textarea {
    min-height: 120px;
}

/* Full-width field inside the 2-col grid */
.linkix-settings-card__full {
    grid-column: 1 / -1;
}

/* Checkbox row — horizontal label + checkbox layout */
.linkix-checkbox {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e8edf5;
    border-radius: 16px;
}

/* Reset WP default checkbox sizing inside our checkbox rows */
.linkix-checkbox input {
    width: auto !important;
    min-height: 0 !important;
    margin-top: 3px;
}

/* Auto-fit grid of checkbox options (e.g. module enable/disable list) */
.linkix-settings-checklist {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 14px;
    min-width: 0;
}

/* Informational dashed note box below setting groups */
.linkix-settings-note {
    background: #f8fafc;
    border: 1px dashed #dbe3ef;
    border-radius: 16px;
    padding: 14px;
    color: #475467;
    min-width: 0;
    margin-top: 15px;
}

.linkix-settings-note p {
    margin: 0 0 8px;
}

.linkix-settings-note p:last-child {
    margin-bottom: 0;
}

/* Submit button row at the bottom of the settings form */
.linkix-settings-submit {
    margin-top: 24px;
}

.linkix-settings-submit .button {
    min-width: 180px;
}

/* ══════════════════════════════════════════════ */
/* │ 17. ANALYTICS & SNAPSHOT                   │ */
/* ══════════════════════════════════════════════ */

/*
 * Analytics page uses two main card types:
 * - .linkix-list-card      — traffic source / referrer rows
 * - .linkix-snapshot-card  — per-link snapshot with 7-up metric grid
 * Also defines .linkix-inline-status pill for table status cells.
 */

.linkix-analytics-sections {
    margin-top: 24px;
}

/* Spacing between breakdown sections (top referrers, devices, etc.) */
.linkix-breakdown-block {
    margin-top: 22px;
}

.linkix-breakdown-block:first-child {
    margin-top: 0;
}

/* Vertical stack of list cards */
.linkix-stacked-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Single analytics list row */
.linkix-list-card {
    border: 1px solid #e9edf5;
    background: #fbfcff;
    border-radius: 18px;
    padding: 16px;
    display: grid;
    justify-content: space-between;
    align-items: center;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

/* Title + secondary info row at the top of a list card */
.linkix-list-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.linkix-list-card__head strong {
    font-size: 18px;
    color: #182230;
}

.linkix-list-card__head span {
    color: var(--lx-color-muted);
    font-size: 13px;
}

/* URL / description text inside list cards */
.linkix-list-card p {
    margin: 0 0 10px;
    color: #475467;
    word-break: break-word;
}

/* Inline metric chips inside list cards */
.linkix-list-card__meta span {
    background: #fff;
    border: 1px solid #e6ebf3;
    border-radius: 14px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 145px;
}

.linkix-list-card__meta strong {
    font-size: 12px;
    color: var(--lx-color-muted);
    font-weight: 600;
}

.linkix-list-card__meta em {
    font-style: normal;
    color: #182230;
}

/* ── Snapshot Cards ── */

/* Vertical list of snapshot cards (one per tracked link) */
.linkix-snapshot-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.linkix-snapshot-card {
    border: 1px solid #e8edf5;
    border-radius: 20px;
    padding: 18px;
    background: #fbfcff;
}

/* Header: URL info (left) + score badges (right) */
.linkix-snapshot-card__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}

.linkix-snapshot-card__title {
    min-width: 0;
    flex: 1 1 auto;
}

.linkix-snapshot-card__title h3 {
    margin: 0 0 6px;
    font-size: 20px;
}

.linkix-snapshot-card__title p {
    margin: 0;
    color: #475467;
    word-break: break-word;
}

/* Score badge cluster aligned to the right */
.linkix-snapshot-card__scores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    flex: 0 0 auto;
}

/* 7-column metric grid below each snapshot card header */
.linkix-snapshot-card__meta {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.linkix-snapshot-card__meta span {
    background: #fff;
    border: 1px solid #e6ebf3;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.linkix-snapshot-card__meta strong {
    font-size: 12px;
    color: var(--lx-color-muted);
}

.linkix-snapshot-card__meta em {
    font-style: normal;
    color: #182230;
}

/* ── Inline Status Pill ── */

/* Small pill badge used in table cells (e.g. redirect status, canonical on/off) */
.linkix-inline-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
}

.linkix-inline-status.is-ok {
    background: rgba(34, 197, 94, 0.12);
    color: var(--dark-color);
    border-color: rgba(34, 197, 94, 0.24);
}

.linkix-inline-status.is-problem {
    background: rgba(239, 68, 68, 0.12);
    color: var(--dark-color);
    border-color: rgba(239, 68, 68, 0.24);
}

/* ══════════════════════════════════════════════ */
/* │ 18. ADVISOR / SCORE BADGES                 │ */
/* ══════════════════════════════════════════════ */

/*
 * The Advisor meta box (post editor sidebar) shows live analysis of
 * permalink routing safety and readability as the user types.
 * JS (admin.js renderAdvisor / setAdvisorState) updates badge classes
 * and text content in real time via a debounced AJAX call.
 */

/* Header row: "Changes will be analyzed live." + live-state pill */
.linkix-advisor-box .linkix-advisor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

/* Animated state indicator pill (Analyzing... / Unsaved / Saved) */
.linkix-live-state {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.linkix-live-state.is-saved    { background: #e8f7ee; color: #166534; }
.linkix-live-state.is-unsaved  { background: #fff7e6; color: #92400e; }
.linkix-live-state.is-analyzing { background: #eaf3ff; color: #1d4ed8; }

/* Pulsing dot prefix while analysis AJAX request is in flight */
.linkix-live-state.is-analyzing::before {
    content: '• ';
    animation: linkixPulse 1s infinite;
}

/* 2-col summary grid: routing safety tile + readability tile */
.linkix-advisor-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

/* Individual score summary tile */
.linkix-summary-card {
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    padding: 10px;
}

/* Risk level badge (Low / Medium / High) */
.linkix-risk-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    font-weight: 700;
}

.linkix-risk-badge.low    { background: #e8f7ee; color: #166534; }
.linkix-risk-badge.medium { background: #fff7e6; color: #92400e; }
.linkix-risk-badge.high   { background: #ffecec; color: #991b1b; }

/* Section heading within the advisor (Structure / Notes) */
.linkix-advisor-section {
    margin-top: 12px;
}

/* Plain analysis text body (reasons and hints) */
.linkix-advisor-analysis {
    color: #4b5563;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════ */
/* │ 19. LICENSE                                │ */
/* ══════════════════════════════════════════════ */

/*
 * License page: two-column grid with activation form (main) and
 * status/stats panel (side). AJAX handlers update badge classes
 * and text without a page reload via linkixUpdateLicenseUI().
 */

/* Main 2-col layout: activation card (wider) + status card (narrower) */

@media (max-width: 1280px) {
    .linkix-shortlinks-grid {
        grid-template-columns: 1fr;
    }
}

/* ── 1200px — 3 and 4-col grids collapse to 2 cols; QR toolbar wraps ── */
@media (max-width: 1200px) {
    .linkix-ui .lx-grid--3,
    .linkix-ui .lx-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .linkix-qr-tools-inline {
        flex-wrap: wrap;
        overflow: visible;
    }

    .linkix-qr-tools-inline__maintenance {
        width: 100%;
    }
}

/* ── 1100px — Most 2-col layouts collapse; shortlinks editor narrows ── */
@media (max-width: 1100px) {
    .linkix-grid,
    .linkix-dashboard-grid,
    .linkix-analytics-sections,
    .linkix-studio-layout,
    .linkix-qr-library__item,
    .linkix-snapshot-card__meta,
    .linkix-settings-card__grid {
        grid-template-columns: 1fr;
    }

    .linkix-shortlinks-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }

    .linkix-dashboard-grid--two,
    .linkix-dashboard-quicklinks {
        grid-template-columns: 1fr;
    }

        grid-template-columns: 1fr;
    }

    .linkix-shortlinks-editor__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── 960px — Hero collapses; mini stats and download form adjust ── */
@media (max-width: 960px) {
    .linkix-hero-inner {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .linkix-hero-logo {
        width: min(320px, 100%);
    }

    .linkix-mini-stats {
        grid-template-columns: 1fr;
    }

    .linkix-inline-download-form {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* ── 900px — All remaining multi-col grids collapse to single column ── */
@media (max-width: 900px) {
    .linkix-ui .lx-grid--2,
    .linkix-ui .lx-grid--3,
    .linkix-ui .lx-grid--4,
    .linkix-ui .linkix-dashboard-lists,
    .linkix-ui .linkix-shortlinks-grid {
        grid-template-columns: 1fr;
    }

    .linkix-smart-card__top {
        grid-template-columns: 1fr;
    }

    .linkix-smart-card__main {
        grid-template-columns: 1fr;
    }

    .linkix-smart-card__actions {
        flex-wrap: wrap;
    }

    .linkix-smart-form-head,
    .linkix-smart-link-box__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── 782px — WordPress admin narrow breakpoint ── */
@media (max-width: 782px) {
    .linkix-short-card__actions {
        grid-template-columns: 1fr;
    }

    .linkix-short-card__actions .linkix-inline-download-form {
        grid-column: auto;
    }

    .linkix-shortlinks-grid,
    .linkix-settings-grid {
        grid-template-columns: 1fr;
    }

    .linkix-shortlinks-toolbar {
        flex-direction: column;
    }

    .linkix-shortlinks-toolbar__right {
        justify-content: flex-start;
        width: 100%;
    }

    .linkix-search-field input,
    .linkix-shortlinks-filter {
        min-width: 0;
        width: 100%;
    }

    .linkix-short-card__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .linkix-short-card__layout {
        grid-template-columns: 1fr;
    }

    .linkix-snapshot-card__head {
        flex-direction: column;
    }

    .linkix-snapshot-card__scores {
        justify-content: flex-start;
    }

    /* Bio editor: unstick tab nav and make buttons full-width */
    .linkix-bio-tabs__nav {
        position: static;
    }

    .linkix-bio-tabs__button {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }

    .linkix-bio-tabs__panel {
        padding: 16px;
    }
}



/* Restored tab system styles */
.linkix-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 18px;
    justify-content: center;
}

.linkix-tab-button {
    appearance: none;
    border: 1px solid #d8deea;
    background: #fff;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 600;
    color: #344054;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.linkix-tab-button.is-active {
    background: var(--lx-color-brand);
    border-color: var(--lx-color-brand);
    color: #fff;
}

.linkix-tab-panel {
    display: none;
}

.linkix-tab-panel.is-active {
    display: block;
}

.linkix-bio-tabs__nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px;
    border: 1px solid rgba(25, 52, 58, .08);
    border-radius: 18px;
    background: #f6f8fb;
    position: sticky;
    top: 42px;
    z-index: 5;
}

.linkix-bio-tabs__button {
    appearance: none;
    border: 1px solid rgba(25, 52, 58, .1);
    background: #fff;
    border-radius: 999px;
    padding: 10px 14px;
    line-height: 1;
    font-weight: 700;
    color: #26424a;
    cursor: pointer;
    transition: all .2s ease;
}

.linkix-bio-tabs__button:hover {
    border-color: rgba(25, 52, 58, .18);
    transform: translateY(-1px);
}

.linkix-bio-tabs__button.is-active {
    background: #17343a;
    border-color: #17343a;
    color: #fff;
    box-shadow: 0 8px 20px rgba(23, 52, 58, .14);
}

.linkix-bio-tabs__panel {
    display: none;
    padding: 18px;
    border: 1px solid rgba(25, 52, 58, .08);
    border-radius: 20px;
    background: #fbfcfd;
}

.linkix-bio-tabs__panel.is-active {
    display: block;
}

/* ── 640px — Shortlinks editor collapses to single column ── */
@media (max-width: 640px) {
    .linkix-shortlinks-editor__grid {
        grid-template-columns: 1fr;
    }
}

/* ── 480px — Mobile: reduced padding, smaller typography ── */
@media (max-width: 480px) {
    body.toplevel_page_linkix          .wrap.linkix-wrap,
    body.linkix_page_linkix-permalinks .wrap.linkix-wrap,
    body.linkix_page_linkix-shortlinks .wrap.linkix-wrap,
    body.linkix_page_linkix-qr-studio  .wrap.linkix-wrap,
    body.linkix_page_linkix-redirects  .wrap.linkix-wrap,
    body.linkix_page_linkix-url-health .wrap.linkix-wrap,
    body.linkix_page_linkix-canonical  .wrap.linkix-wrap,
    body.linkix_page_linkix-analytics  .wrap.linkix-wrap,
    body.linkix_page_linkix-settings   .wrap.linkix-wrap {
        padding: 8px;
        border-radius: var(--lx-radius-lg);
    }

    .linkix-hero {
        padding: 20px 16px;
        border-radius: var(--lx-radius-lg);
    }

    .linkix-hero h1 {
        font-size: 28px;
    }

    .linkix-card strong {
        font-size: 26px;
    }

    .linkix-short-card__meta {
        grid-template-columns: 1fr;
    }

    .linkix-short-card__meta2nd {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .linkix-advisor-summary {
        grid-template-columns: 1fr;
    }

    .linkix-snapshot-card__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .linkix-tab-nav {
        gap: 6px;
    }

    .linkix-tab-button {
        padding: 8px 12px;
        font-size: 13px;
    }
}



/* Restored tab system styles */
/* Tab panel — hidden by default, shown when .is-active is added by JS */
.linkix-tab-panel {
    display: none;
}

.linkix-tab-panel.is-active {
    display: block;
}

/* Tab panel — hidden by default, shown when .is-active is toggled by JS */
.linkix-bio-tabs__panel {
    display: none;
    padding: 18px;
    border: 1px solid rgba(25, 52, 58, .08);
    border-radius: 20px;
    background: #fbfcfd;
}

.linkix-bio-tabs__panel.is-active {
    display: block;
}

.linkix-template-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 10px;
}
.linkix-template-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--lx-line);
    border-radius: 18px;
    background: var(--lx-surface);
    cursor: pointer;
}
.linkix-template-option:hover {
    border-color: var(--lx-color-brand);
}
.linkix-template-option.is-selected {
    border-color: var(--lx-color-brand);
    box-shadow: 0 0 0 2px rgba(90,129,134,.12);
}
.linkix-template-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.linkix-template-option__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border-radius: 14px;
    background: #f7f8fc;
    overflow: hidden;
}
.linkix-template-option__preview img {
    display: block;
    width: 100%;
    height: auto;
}
.linkix-template-option__preview--empty {
    font-size: 13px;
    color: var(--lx-muted);
    border: 1px dashed var(--lx-line);
}
.linkix-template-option__label {
    font-weight: 700;
    color: var(--lx-text);
    line-height: 1.35;
}

.linkix-settings-card__grid .is-hidden{display:none!important;}
.linkix-settings-card__grid input[type="color"]{width:100%;min-height:42px;padding:4px;}


.linkix-hero-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}

/* Short card head inner layout */
.linkix-short-card__head-inner{display:flex;gap:12px;align-items:flex-start}

/* Utility: initially hidden elements */
.linkix-message{display:none}
/* Redirects panel spacing */
.linkix-panel--spaced{margin-top:24px}
/* Inline form */
.linkix-form-inline{display:inline}


/* Bio page editor polish */
.linkix-bio-side-panel{display:flex;flex-direction:column;gap:18px}
.linkix-bio-device{position:relative;max-width:360px;margin:0 auto;width:100%}
.linkix-bio-device__frame{display:block;width:100%;height:auto;position:relative;z-index:2;pointer-events:none}
.linkix-bio-device__screen{position:absolute;left:8.6%;right:8.6%;top:8.2%;bottom:7.6%;overflow:hidden;border-radius:34px;background:#fff;z-index:1}
.linkix-bio-device__screen iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.linkix-bio-preview-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.linkix-bio-form__footer{margin-top:16px}
@media (max-width: 1200px){
  .linkix-bio-device{max-width:300px}
}


/* Free cleanup / layout fixes */
body.linkix_page_linkix-shortlinks .linkix-shortlinks-grid {
    grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
}
.linkix-qr-library {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.linkix-dashboard-lists {
    grid-template-columns: 1fr;
}
.linkix-bio-side-panel {
    position: sticky;
    top: 24px;
    align-self: start;
}
@media (max-width: 1280px) {
    .linkix-qr-library {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 900px) {
    body.linkix_page_linkix-shortlinks .linkix-shortlinks-grid {
        grid-template-columns: 1fr !important;
    }
}


/* Final admin fixes */
.linkix-shortlinks-grid__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(360px, 1fr));
    gap: 22px;
}
.linkix-dashboard-lists.linkix-dashboard-lists--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: strech;
}
@media (max-width: 1200px) {
    .linkix-shortlinks-grid__form,
    .linkix-dashboard-lists.linkix-dashboard-lists--two {
        grid-template-columns: 1fr;
    }
}


/* Final dashboard + shortlinks layout fixes */
.linkix-shortlinks-list {
    display: block;
}

.linkix-dashboard-side-stack {
    display: grid;
    gap: 24px;
    align-content: start;
}


/* Bulk selection controls for Short Links cards */
.linkix-short-card__select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
    flex: 0 0 auto;
}

.linkix-short-card__select input[type="checkbox"],
.linkix-qr-bulk-bar .linkix-check-all {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #7c3aed;
    cursor: pointer;
}

.linkix-short-card__select input[type="checkbox"]:checked {
    outline: 2px solid rgba(124, 58, 237, .18);
    outline-offset: 2px;
}

.linkix-short-card__head-inner {
    align-items: center;
}