body {
    margin: 0 !important;
    padding: 0 !important;
    background: #f6fbfd;
    color: #1f2937;
}

* {
    box-sizing: border-box;
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
}

body {
    background: #f6fbfd;
    margin: 0;
    padding: 0;
    color: #1f2937;
}
/* =====================================================
   PAGE CONTAINER — DESKTOP LAYOUT (ADJUSTED)
===================================================== */
.container {
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 64px;   /* ⬅ pushes card more towards left */
}


/* =========================================================
   MAIN CARD CONTAINER — WIDTH TUNING
   Purpose: Allow short URLs to display fully
========================================================= */

.card {
    background: #ffffff;
    width: 100%;
    max-width: 460px;        /* 🔑 increased from 420px */
    padding: 36px 36px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 28px rgba(39, 207, 245, 0.18);
}


h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.subtitle {
    margin-top: 6px;
    margin-bottom: 26px;
    color: #4b5563;
    font-size: 14px;
}

form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

input[type="url"] {
    padding: 13px 14px;
    font-size: 14px;
    border-radius: 9px;
    border: 1px solid #d1eaf1;
    outline: none;
}

input[type="url"]:focus {
    border-color: #27CFF5;
    box-shadow: 0 0 0 3px rgba(39, 207, 245, 0.25);
}

button {
    padding: 13px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 9px;
    border: none;
    background: #27CFF5;
    color: #0f172a;
    cursor: pointer;
}

button:hover {
    background: #1fbfe2;
}

.result {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px dashed #d1eaf1;
}

.result p {
    margin: 0 0 6px;
    font-size: 13px;
    color: #4b5563;
}

.result a {
    font-weight: 600;
    color: #27CFF5;
    text-decoration: none;
    word-break: break-all;
}
/* =========================================================
   SHORT URL BOX — IMPROVED WIDTH & BALANCE
========================================================= */

.short-url-box {
    margin-top: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f0fbfe;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}


/* =========================================================
   SHORT URL TEXT — PRIORITY VISIBILITY
========================================================= */

.short-url-box a {
    flex: 1;                 /* 🔑 takes maximum space */
    min-width: 0;            /* required for flex ellipsis logic */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #27CFF5;
    font-weight: 600;
    font-size: 15px;         /* slightly bigger */
    text-decoration: none;
}

/* =========================================================
   ACTION ICONS — COMPACT & RIGHT-ALIGNED
========================================================= */

.actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;          /* icons never squeeze the URL */
}


/* =========================================================
   ICON BUTTONS — COPY & SHARE (NEX URL)
   Purpose: Clear, visible, minimal action icons
   Notes:
   - Button controls hit area
   - SVG is visually scaled for proper weight
========================================================= */

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;              /* hit area */
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b7280;           /* neutral icon color */
    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.icon-btn:hover {
    background: rgba(39, 207, 245, 0.18);
    color: #27CFF5;
    box-shadow: 0 4px 10px rgba(39, 207, 245, 0.25);
}

.icon-btn:active {
    transform: scale(0.95);
}

/* =========================================================
   ICON SVG VISUAL SIZE (IMPORTANT)
   This scales the actual icon path, not just the container.
   Increase/decrease scale value if needed.
========================================================= */

.icon-btn svg {
    width: 22px;
    height: 22px;
    transform: scale(1.35);   /* 🔑 REAL size control */
    display: block;
}

/* =========================================================
   COPY FEEDBACK MESSAGE
========================================================= */

.copy-msg {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #16a34a;
}
/* =========================================================
   QR CODE MODAL — PHASE 2B
========================================================= */

.qr-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.qr-box {
    background: #ffffff;
    padding: 24px;
    border-radius: 14px;
    text-align: center;
    width: 260px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.qr-title {
    margin-bottom: 14px;
    font-weight: 600;
}

.qr-box img {
    width: 200px;
    height: 200px;
}

.qr-close {
    margin-top: 16px;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    background: #27CFF5;
    cursor: pointer;
    font-weight: 600;
}
/* =========================================================
   QR ICON — VISUAL TUNING
========================================================= */

.icon-btn.qr-btn svg {
    transform: scale(1.15);   /* slightly smaller than others */
    opacity: 0.75;
}

.icon-btn.qr-btn:hover svg {
    opacity: 1;
}
/* =========================================================
   MOBILE LAYOUT OVERRIDE — NEX URL
   Purpose: Make app feel like a real mobile page
========================================================= */

@media (max-width: 768px) {
	    /* MOBILE RESET — kill desktop layout completely */
    .layout {
        all: unset;
    }
    .layout {
        display: block;
        width: 100%;
    }


    body {
        background: #f6fbfd;
    }

    /* Stop desktop centering logic */
    .container {
        min-height: auto;
        display: block;
        padding: 16px;
    }
    
        /* Disable desktop layout on mobile */
    .layout {
        display: block;
        width: 100%;
    }


    /* Card becomes the page */
    .card {
        max-width: 100%;
        width: 100%;
        padding: 28px 18px 30px;
        margin-top: 10px;
        border-radius: 14px;
    }

    h1 {
        font-size: 22px;
        margin-bottom: 4px;
    }

    .subtitle {
        font-size: 13px;
        margin-bottom: 18px;
    }

    input[type="url"] {
        font-size: 16px;
        padding: 14px;
    }

    button[type="submit"] {
        font-size: 16px;
        padding: 14px;
        margin-top: 6px;
    }

    .result-title {
        margin-top: 22px;
    }

    .short-url-box {
        padding: 16px;
    }

    .short-url-box a {
        font-size: 14px;
    }

    .actions {
        gap: 8px;
    }
}

/* =========================================================
   ERROR MESSAGE — FORM FEEDBACK
========================================================= */

.error {
    margin: 10px 0 14px;
    color: #dc2626;
    font-size: 14px;
    font-weight: 500;
}
/* =========================================================
   CUSTOM ALIAS INPUT — UNIFIED BEAUTIFUL FIELD
========================================================= */

.alias-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    border: 1.5px solid #cfeef7;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden; /* 🔑 makes it feel like ONE field */
}

.alias-prefix {
    padding: 13px 14px;
    background: #f0fbfe;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    border-right: 1px solid #e5f6fb;
}

.alias-wrapper input {
    flex: 1;
    border: none;
    outline: none;
    padding: 13px 14px;
    font-size: 14px;
    background: transparent;
}

/* Focus effect — matches main URL input */
.alias-wrapper:focus-within {
    border-color: #27CFF5;
    box-shadow: 0 0 0 3px rgba(39, 207, 245, 0.18);
}
/* =========================================================
   DESKTOP FIX — ENSURE ANALYTICS LINK IS VISIBLE
========================================================= */

@media (min-width: 768px) {
    .stats-link {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }
}
/* =========================================================
   ANALYTICS PAGE — NEX-URL PREMIUM STYLE
========================================================= */

.analytics-box {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.analytics-row {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}

.analytics-row .label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
}

.analytics-row .value {
    font-size: 14px;
    color: #111827;
    word-break: break-all;
    text-decoration: none;
}

.analytics-row .value:hover {
    text-decoration: underline;
}

.analytics-row.highlight {
    background: linear-gradient(
        135deg,
        rgba(39, 207, 245, 0.12),
        rgba(39, 207, 245, 0.04)
    );
    border-color: rgba(39, 207, 245, 0.35);
}

.analytics-row.highlight .value {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}

/* Footer note */
.analytics-note {
    margin-top: 22px;
    font-size: 13px;
    color: #6b7280;
    text-align: center;
}

/* Title spacing fix */
.analytics-box + .analytics-note {
    margin-top: 18px;
}
/* =========================================================
   ANALYTICS PAGE — MICRO POLISH
========================================================= */

.back-home {
    display: inline-block;
    margin-top: 6px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #27CFF5;
    text-decoration: none;
    font-weight: 500;
}

.back-home:hover {
    text-decoration: underline;
}

.copy-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.copy-btn {
    border: none;
    background: rgba(39, 207, 245, 0.12);
    color: #27CFF5;
    font-size: 16px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.copy-btn:hover {
    background: rgba(39, 207, 245, 0.22);
}

.analytics-box {
    margin-top: 18px;
}
/* =========================================================
   ANALYTICS LABEL POLISH (HEADINGS)
========================================================= */

.analytics-row .label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280; /* soft neutral */
    margin-bottom: 6px;
    display: block;
}

.analytics-row .value {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
}
/* =========================================================
   ANALYTICS HIGHLIGHT — TOTAL CLICKS (COMPACT)
========================================================= */

.analytics-row.highlight {
    background: linear-gradient(
        135deg,
        rgba(39, 207, 245, 0.15),
        rgba(39, 207, 245, 0.05)
    );
    border: 1px solid rgba(39, 207, 245, 0.35);
    border-radius: 12px;
    padding: 10px 14px;     /* 👈 reduced height */
    margin-top: 8px;
    text-align: center;
}

.analytics-row.highlight .label {
    margin-bottom: 2px;    /* 👈 tighter */
}

.analytics-row.highlight .value {
    font-size: 24px;       /* 👈 slightly smaller */
    font-weight: 700;
    color: #27CFF5;
    margin-top: 0;
    line-height: 1.2;
}

/* =========================================================
   ANALYTICS FOOT NOTE — TWO-LINE CENTERED
========================================================= */

.analytics-note {
    text-align: center;
    font-size: 14px;
    color: #6b7280;
    margin-top: 20px;
    line-height: 1.5;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

/* subtle emphasis on reassurance */
.analytics-note strong {
    font-weight: 600;
    color: #374151;
}
/* =========================================================
   ANALYTICS — SHORT URL STACKED LAYOUT
   (URL on top, actions below, centered)
========================================================= */

/* Target only analytics short URL box */
.analytics-short-box {
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Full short URL — single line, centered */
.analytics-short-box > a {
    max-width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

/* Actions row — centered below URL */
.analytics-short-box .actions {
    display: flex;
    justify-content: center;
    gap: 14px;
}
/* =========================================================
   FOOTER — LEGAL LINKS
========================================================= */

.footer {
    margin-top: 58px;
    padding: 18px 16px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    font-size: 14px;
    color: #6b7280;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 10px;
}

.footer-links a {
    color: #27CFF5;
    text-decoration: none;
    font-weight: 500;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-copy {
    font-size: 13px;
    color: #9ca3af;
}
/* =====================================================
   HERO INTRO — ABOVE MAIN CARD (NEX-URL)
===================================================== */

.hero-intro {
    max-width: 720px;
    margin: 0 auto 0px auto;   /* space below hero */
    text-align: center;
    padding: 0 16px;            /* mobile safety */
}

.hero-title {
    font-family: 'Manrope', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.hero-desc {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    color: #475569;
    max-width: 640px;
    margin: 0 auto;
}

/* --- Mobile refinement --- */
@media (max-width: 640px) {
    .hero-title {
        font-size: 24px;
    }

    .hero-desc {
        font-size: 14.5px;
    }
}
/* =====================================================
   DESKTOP LAYOUT BALANCER — HERO + CARD
===================================================== */
.layout {
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;        /* STACK vertically */
    align-items: center;           /* CENTER horizontally */
    gap: 36px;                     /* Controlled spacing */
}

/* Center layout inside container */
.container {
    justify-content: center;
    padding-left: 64px;
    padding-right: 64px;
}

/* Mobile: make main card wider */
@media (max-width: 640px) {

    .card {
        width: 96%;
        max-width: 96%;
        margin-left: 0;
        margin-right: 0;
        border-radius: 14px;
    }

    /* Reduce side padding of outer container */
    .container,
    .page-container,
    .hero-container {
        padding-left: 12px;
        padding-right: 12px;
    }
}
/* =========================================
   Total Links Counter – Elegant Style
========================================= */

.stats-strip {
    margin: 6px auto 6px;   /* reduced vertical gap */
    text-align: center;
    font-size: 14px;
    color: #64748b;
}


.stats-number {
    font-size: 20px;
    font-weight: 700;
    color: #0ea5e9; /* brand aqua */
    letter-spacing: 0.3px;
}

.stats-text {
    margin-left: 4px;
}

/* Mobile polish */
@media (max-width: 640px) {
    .stats-strip {
        margin: 22px auto 16px;
        font-size: 13px;
    }

    .stats-number {
        font-size: 18px;
    }
}
.card {
    margin-bottom: 10px !important;
}
/* Fix excessive vertical gap below card */
.layout {
    justify-content: flex-start;
}
.layout {
    min-height: auto;
}
/* ===== MOBILE: REMOVE FORCED VERTICAL SPACE ===== */
@media (max-width: 640px) {

    .container {
        padding-bottom: 0 !important;
        min-height: auto !important;
    }

    .layout {
        min-height: auto !important;
        padding-bottom: 0 !important;
        justify-content: flex-start !important;
        row-gap: 0 !important;
    }

    .hero-intro {
        margin-bottom: 12px !important;
    }

    .card {
        margin-bottom: 6px !important;
    }

    .stats-strip {
        margin-top: 4px !important;
        margin-bottom: 6px !important;
    }
}
@media (max-width: 640px) {
    footer {
        margin-top: 6px !important;
        padding-top: 8px !important;
    }
}
@media (max-width: 640px) {

    .layout {
        display: block !important;
    }

    .hero-intro {
        display: none !important;
    }
}
/* Ensure hero text is visible on mobile */
@media (max-width: 640px) {
    .hero-intro {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}
@media (max-width: 640px) {
    .hero-intro {
        margin-bottom: 12px;
        text-align: center;
    }

    .hero-intro h1 {
        font-size: 26px;
        line-height: 1.2;
    }

    .hero-intro p {
        font-size: 14px;
        margin-top: 8px;
    }
}
@media (max-width: 640px) {
  .card {
    width: 96%;
    max-width: 96%;
    margin: 0 auto;   /* centers the box */
  }
}
@media (max-width: 640px) {
  .hero-intro p {
    margin-bottom: 20px;   /* adds breathing space before the box */
  }
}
@media (max-width: 640px) {
  .stats-strip {
    margin-top: 14px;     /* space above */
    margin-bottom: 18px;  /* space below */
  }
}
@media (max-width: 640px) {
  .layout {
    gap: 14px;   /* controls spacing between ALL sections */
  }
}
@media (max-width: 640px) {
  .stats-strip {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}
.card button {
    font-size: 16px;     /* increase text size */
    font-weight: 600;    /* semi-bold */
}
@media (max-width: 640px) {
    .card button {
        font-size: 17px;
        font-weight: 600;
    }
}
.card button {
    letter-spacing: 0.3px;
}
.short-url-box a {
    display: block;
    white-space: nowrap;        /* single line */
    overflow: hidden;           /* hide overflow */
    text-overflow: ellipsis;    /* ... if too long */
    text-align: center;
    font-size: 15px;
}
.short-url-box {
    display: flex;
    flex-direction: column;   /* stack URL and icons */
    align-items: center;
    gap: 10px;
}

.actions {
    display: flex;
    justify-content: center;
    gap: 14px;                /* space between icons */
}
/* ===============================
   Private Analytics Section
================================ */

.stats-link {
    margin-top: 24px;          /* space from result above */
    padding-top: 16px;
    border-top: 1px dashed #e5e7eb;  /* subtle separation */
    text-align: center;
}

.stats-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.stats-link a {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 500;
}

.stats-desc {
    font-size: 13px;
    line-height: 1.5;
    max-width: 420px;
    margin: 0 auto;
    color: #64748b;
}
@media (max-width: 640px) {
    .stats-link {
        margin-top: 20px;
        padding-top: 14px;
    }

    .stats-desc {
        font-size: 12.5px;
        padding: 0 6px;
    }
}
.stats-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 12px;
}

.stats-actions .icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 14px;
    opacity: 0.75;
}

.stats-actions .icon-btn:hover {
    opacity: 1;
}
/* Analytics icons – slightly larger */
.stats-actions .icon-btn {
    width: 40px;
    height: 40px;
}

.stats-actions .icon-btn svg {
    width: 22px;
    height: 22px;
}
/* Short URL display – prevent overflow */
.short-url-box a {
    display: block;
    max-width: 100%;
    white-space: nowrap;        /* force one line */
    overflow: hidden;           /* hide overflow */
    text-overflow: ellipsis;    /* show ... */
    word-break: normal;
    text-align: center;
}
.short-url-box {
    width: 100%;
    overflow: hidden;
}
@media (max-width: 640px) {
    .short-url-box a {
        font-size: 14px;
    }
}
/* Desktop card: depth + brand aqua glow */
@media (min-width: 768px) {
  .card {
    border: 1.5px solid rgba(34, 199, 243, 0.25); /* aqua edge */

    box-shadow:
      0 10px 28px rgba(0, 0, 0, 0.06),          /* depth */
      0 0 0 1px rgba(34, 199, 243, 0.35);       /* aqua glow */
  }
}
/* ================================
   LINK EXPIRY — BASIC STYLING
================================ */

.expiry-wrapper {
    margin-top: 14px;
}

.expiry-wrapper label.field-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text, #111);
}

.expiry-wrapper select,
.expiry-wrapper input[type="datetime-local"] {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: #fff;
}

.expiry-wrapper select:focus,
.expiry-wrapper input[type="datetime-local"]:focus {
    outline: none;
    border-color: #4fd1c5; /* aqua */
    box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.25);
}

.expiry-wrapper .helper-text {
    display: block;
    font-size: 12px;
    margin-top: 6px;
    color: #6b7280;
}
/* =========================================================
   LINK EXPIRY — ALIAS STYLE MATCH
   Makes expiry row visually identical to custom alias row
========================================================= */

/* 1. Force SAME prefix width for alias + expiry */
.alias-wrapper .alias-prefix {
    min-width: 140px;   /* 👈 controls aqua width for BOTH rows */
    text-align: center;
}

/* 2. Expiry select should behave like input field */
.expiry-alias-wrapper select.expiry-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;

    padding: 14px 16px;
    font-size: 15px;
    color: #111;
    cursor: pointer;
}

/* 3. Remove dark borders / default select UI */
.expiry-alias-wrapper select.expiry-select:focus {
    outline: none;
    box-shadow: none;
}

/* 4. Add dropdown arrow (soft, minimal) */
.expiry-alias-wrapper {
    position: relative;
}


/* 5. Hover + focus glow same as alias */
.expiry-alias-wrapper:hover,
.expiry-alias-wrapper:focus-within {
    border-color: #4fd1c5;
    box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.25);
}
/* =========================================================
   CUSTOM EXPIRY — MATCH EXPIRY ROW
   Makes datetime picker identical to expiry dropdown row
========================================================= */

.expiry-alias-wrapper input.expiry-datetime {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;

    padding: 14px 16px;
    font-size: 15px;
    color: #111;
    cursor: pointer;
}

/* Remove inner borders / weird browser UI */
.expiry-alias-wrapper input.expiry-datetime:focus {
    outline: none;
    box-shadow: none;
}
/* =========================================================
   FINAL COMPOUND ROW ALIGNMENT FIX
   Normalizes alias / expiry / custom expiry rows
========================================================= */

/* 1. Lock compound row height */
.alias-wrapper {
    display: flex;
    align-items: stretch;
    height: 56px; /* 👈 single source of truth */
}

/* 2. Prefix box must fill height exactly */
.alias-wrapper .alias-prefix {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    line-height: 1;
}

/* 3. Input & select must fill remaining height */
.alias-wrapper input,
.alias-wrapper select {
    height: 100%;
    line-height: normal;
}

/* 4. Normalize datetime-local quirks */
.expiry-alias-wrapper input[type="datetime-local"] {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

/* 5. Ensure focus glow is consistent */
.alias-wrapper:focus-within {
    border-color: #4fd1c5;
    box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.25);
}
/* =========================================================
   EXPIRY ARROW — ONLY FOR SELECT (NOT datetime input)
========================================================= */

.expiry-alias-wrapper {
    position: relative;
}

/* arrow only when there's a select inside */
.expiry-alias-wrapper:has(select.expiry-select)::after {
    content: "▾";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 14px;
    color: #555;
}
/* =========================================================
   CUSTOM EXPIRY INPUT — LEFT ALIGN + CLICKABLE
========================================================= */

#custom_expiry_wrapper .alias-prefix {
    justify-content: center; /* keeps prefix like others */
}

/* ensure input is visible and clickable */
#custom_expiry_wrapper input[type="datetime-local"] {
    width: 100%;
    cursor: pointer;
    padding: 0 16px;
}
/* =========================================================
   FINAL EXPIRY UI FIX — NO DUPLICATION
   Fixes:
   - Duplicate-looking expiry row
   - Native select box showing
   - Non-clickable datetime input
========================================================= */

/* 1. Base compound row (shared by alias, expiry, datetime) */
.alias-wrapper {
    display: flex;
    align-items: stretch;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
}

/* 2. Left aqua prefix — fixed width & centered */
.alias-wrapper .alias-prefix {
    min-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ecfeff;
    font-size: 15px;
    font-weight: 500;
}

/* 3. RIGHT SIDE — shared reset for input & select */
.alias-wrapper input,
.alias-wrapper select {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    padding: 0 16px;
}

/* =========================
   EXPIRY SELECT ROW
========================= */

/* Kill native select UI completely */
.expiry-select-row select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

/* Custom arrow ONLY for select row */
.expiry-select-row {
    position: relative;
}

.expiry-select-row::after {
    content: "▾";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 14px;
    color: #555;
}

/* =========================
   DATETIME ROW
========================= */

/* Make datetime input fully clickable */
.expiry-datetime-row input[type="datetime-local"] {
    width: 100%;
    cursor: pointer;
}

/* REMOVE arrow for datetime row */
.expiry-datetime-row::after {
    content: none !important;
}

/* =========================
   FOCUS / HOVER GLOW
========================= */

.alias-wrapper:hover,
.alias-wrapper:focus-within {
    border-color: #4fd1c5;
    box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.25);
}
/* =========================================================
   FIX DATETIME CLICK — FINAL
   Ensures datetime-local input is fully clickable
========================================================= */

/* Make sure wrapper allows clicks */
.expiry-datetime-row {
    position: relative;
}

/* Force datetime input to fully occupy right side */
.expiry-datetime-row input[type="datetime-local"] {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    background: transparent;
}

/* Ensure prefix does NOT block clicks */
.expiry-datetime-row .alias-prefix {
    pointer-events: none;
}
/* =========================================================
   DATETIME OVERLAY — GUARANTEED CLICK
   Reliable way to open datetime picker
========================================================= */

/* Position row */
.expiry-datetime-row {
    position: relative;
}

/* Visible text layer (already styled) */
.expiry-datetime-row .alias-prefix {
    z-index: 1;
}

/* Invisible real input overlay */
.expiry-datetime-row input[type="datetime-local"] {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 140px); /* subtract prefix width */
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    border: none;
    padding: 0;
}
/* =========================================================
   STEP A2 — DATETIME DISPLAY + PICKER (STABLE)
   Purpose:
   - Make datetime clickable on mobile & desktop
   - Show selected date/time as text
========================================================= */

.expiry-datetime-row {
    position: relative;
}

/* Visible display text */
.expiry-datetime-row .expiry-display {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 15px;
    color: #111;
    cursor: pointer;
}

/* Invisible real datetime input (captures clicks) */
.expiry-datetime-row input[type="datetime-local"] {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 140px); /* same as prefix width */
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}

/* Prefix should not block clicks */
.expiry-datetime-row .alias-prefix {
    pointer-events: none;
}
/* =========================================================
   DESKTOP DATETIME FIX — DO NOT BREAK MOBILE
   Reason:
   Chrome desktop will not open picker on invisible inputs
========================================================= */

@media (min-width: 768px) {

    /* Make the REAL datetime input visible on desktop */
    .expiry-datetime-row input[type="datetime-local"] {
        position: static;
        opacity: 1;
        height: 100%;
        width: 100%;
        padding: 0 16px;
        border: none;
        background: transparent;
        cursor: pointer;
        z-index: auto;
    }

    /* Hide the fake display text on desktop */
    .expiry-datetime-row .expiry-display {
        display: none;
    }
}
/* =========================================================
   DESKTOP DATETIME — NATIVE INPUT (FINAL & CORRECT)
   Reason:
   Desktop Chrome requires visible input to open picker
========================================================= */

@media (min-width: 768px) {

    /* Show real datetime input */
    .expiry-datetime-row input[type="datetime-local"] {
        position: static;
        opacity: 1;
        width: 100%;
        height: 100%;
        padding: 0 16px;
        background: transparent;
        border: none;
        cursor: pointer;
    }

    /* Hide custom display text on desktop */
    .expiry-datetime-row .expiry-display {
        display: none;
    }
}
/* =========================================================
   DESKTOP BORDER VISIBILITY — SUBTLE DARKEN
   Improves clarity on large screens without affecting mobile
========================================================= */

@media (min-width: 768px) {

    /* Main input fields */
    input[type="url"],
    input[type="text"],
    .alias-wrapper {
        border: 1.5px solid rgba(0, 0, 0, 0.18);
    }

}
/* =========================================================
   DESKTOP BORDER BALANCE — IDLE vs FOCUS
========================================================= */

@media (min-width: 768px) {

    /* Idle state */
    .alias-wrapper {
        border-color: rgba(0, 0, 0, 0.22);
    }

    /* Focused state (keep stronger) */
    .alias-wrapper:focus-within {
        border-color: #4fd1c5;
        box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.28);
    }
}
/* =========================================================
   STEP E3 — REMOVE VERTICAL DIVIDER LINE (GLOBAL)
========================================================= */

.alias-prefix {
    border-right: none !important;
}
/* =========================================================
   STEP E3.1 — KILL PREFIX DIVIDER (border / shadow / pseudo)
========================================================= */

.alias-wrapper .alias-prefix {
    border-right: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* If the divider was drawn using a pseudo element */
.alias-wrapper .alias-prefix::after,
.alias-wrapper .alias-prefix::before {
    content: none !important;
    display: none !important;
}

/* If the divider is actually the left border of the right-side control */
.alias-wrapper input,
.alias-wrapper select {
    border-left: none !important;
    box-shadow: none !important;
}
/* =====================================================
   ANALYTICS — EXPIRY STATUS COLORS
===================================================== */

.expiry.expired {
    color: #9b2c2c;          /* muted red */
    font-weight: 500;
}

.expiry.active {
    color: #2563eb;          /* neutral blue */
    font-weight: 500;
}

.expiry.never {
    color: #15803d;          /* soft green */
    font-weight: 500;
}
/* =====================================================
   DESKTOP FIX — SHOW TOTAL LINKS NUMBER
===================================================== */

@media (min-width: 768px) {

    .stats-strip {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .stats-number {
        font-size: 18px;
        font-weight: 600;
        color: #0f172a;          /* dark text */
        opacity: 1 !important;  /* ensure visible */
    }

    .stats-text {
        font-size: 14px;
        color: #475569;
    }
}
/* =====================================================
   STABLE DOT ANIMATION (NO TEXT MOVEMENT)
===================================================== */

.dots {
    display: inline-block;
    width: 1.5em;              /* reserve space for 3 dots */
    text-align: left;
}

.dots::before {
    content: "...";
    animation: dots-fade 1.5s infinite steps(3);
}

@keyframes dots-fade {
    0%   { content: ""; }
    33%  { content: "."; }
    66%  { content: ".."; }
    100% { content: "..."; }
}
/* =====================================================
   TOP NAVIGATION BAR (POLISHED)
===================================================== */
.top-nav {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.nav-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
}

.nav-links {
    display: flex;
    gap: 24px;
}

.nav-links a {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

.nav-links a:hover {
    color: #0284c7;
    border-bottom-color: #0284c7;
}

/* Mobile polish */
@media (max-width: 640px) {
    .nav-container {
        flex-direction: column;
        gap: 8px;
    }
}
/* =====================================================
   MOBILE NAVIGATION — LAYOUT FIX
===================================================== */

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #0f172a;
    font-size: 26px;
    padding: 6px;
    cursor: pointer;
    line-height: 1;
}

/* Remove mobile tap highlight & focus box */
.menu-toggle:focus,
.menu-toggle:active {
    outline: none;
    background: none;
    box-shadow: none;
}

/* Optional: subtle hover/tap feedback */
.menu-toggle:hover {
    opacity: 0.8;
}



@media (max-width: 768px) {

    /* Header stays in one row */
    .nav-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* Show hamburger */
    .menu-toggle {
        display: block;
    }

    /* Hide links initially */
    .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        text-align: center;
        margin-top: 10px;
    }

    .nav-links a {
        padding: 10px 0;
        font-size: 16px;
    }
}
/* =====================================================
   MOBILE MENU — MINI COMMAND CARD (FINAL)
===================================================== */

@media (max-width: 768px) {

.nav-links {
    position: absolute;
    top: 72px;
    right: 16px;
    width: 200px;



        background: #ffffff;
        border-radius: 16px;
        padding: 14px;

        display: none;
        flex-direction: column;
        gap: 12px;

        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        z-index: 1000;
    }

    .nav-links a {
        display: block;
        width: 100%;
        padding: 14px 0;

        text-align: center;
        font-size: 16px;
        font-weight: 600;

        color: #0f172a;
        background: #f0f9ff;
        border-radius: 12px;
        text-decoration: none;

        transition: background 0.2s ease, transform 0.1s ease;
    }

    .nav-links a:hover {
        background: #e0f2fe;
        transform: translateY(-1px);
    }
}
/* =====================================================
   FINAL OVERRIDE — REMOVE BLUE BOX ON ☰ / ✕ (MOBILE)
===================================================== */
.menu-toggle,
.menu-toggle:focus,
.menu-toggle:active,
.menu-toggle:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

/* Remove Android/Chrome tap highlight */
.menu-toggle {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    line-height: 1;
}
/* =====================================================
   NAV LOGO (ICON + TEXT)
   Used for NEX-URL and future NEX-* sites
===================================================== */

.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 20px;
    color: #0f172a;
    text-decoration: none;
}

.nav-logo-icon {
    width: 46px;
    height: 46px;
    object-fit: contain;
}
/* =========================================
   Legal pages – wider content
========================================= */
.legal-page {
    max-width: 960px;   /* wider, readable */
    margin: 0 auto;
}
/* =========================================
   Legal pages – readable formatting
========================================= */
.legal-page {
    max-width: 960px;
    margin: 0 auto;
    text-align: left;          /* 🔑 THIS fixes everything */
}

.legal-page h1,
.legal-page .subtitle {
    text-align: center;        /* keep title centered */
}

.legal-page ul {
    padding-left: 22px;        /* proper bullet indent */
    margin: 12px 0 20px;
}

.legal-page li {
    margin-bottom: 8px;
}
/* =========================================
   Homepage SEO content
========================================= */
.seo-content {
    max-width: 900px;
    margin: 24px auto 56px;
    padding: 0 20px;
    color: #374151;
    line-height: 1.7;
}


.seo-content h2 {
    margin-top: 32px;
    font-size: 20px;
    font-weight: 600;
}

.seo-content ul {
    padding-left: 20px;
    margin: 12px 0;
}

.seo-content li {
    margin-bottom: 8px;
}
.stats-strip {
    text-align: center;
    margin-top: 4px;
    margin-bottom: 8px;
}


.stats-number {
    font-weight: 600;
    color: #111827;
    margin-right: 4px;
}
/* Tighten gap between stats strip and SEO content */
.seo-content {
    margin-top: 5px !important;
}
/* Final footer spacing fix */
.footer {
    margin-top: 10px;   /* was too large */
    padding-top: 6px;
}
.stats-strip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    margin: 12px auto 16px;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.08);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.15);
    font-size: 14px;
    color: #374151;
}

.stats-number {
    font-weight: 600;
    color: #0f172a;
}
/* =========================================
   Homepage stats box
========================================= */
.stats-box {
    display: inline-flex;
    align-items: center;
    gap: 4px;                 /* 👈 tight spacing */
    padding: 10px 14px;
    margin: 14px auto 18px;
    border-radius: 10px;      /* softer than pill */
    background: rgba(56, 189, 248, 0.06);
    border: 1px solid rgba(56, 189, 248, 0.18);
    font-size: 14px;
    color: #374151;
}

/* Number emphasis */
.stats-box .stats-number {
    font-weight: 600;
    color: #0f172a;
}

/* Mobile tweak */
@media (max-width: 640px) {
    .stats-box {
        font-size: 13px;
        padding: 8px 12px;
    }
}
/* =========================================
   Homepage stats line (clean & centered)
========================================= */
.stats-textline {
    text-align: center;
    font-size: 14px;
    color: #4b5563;
    margin: 8px auto 12px;
}

.stats-textline strong {
    font-weight: 600;
    color: #111827;
    margin-right: 2px; /* 👈 controls gap between 24 and text */
}

/* Mobile tweak */
@media (max-width: 640px) {
    .stats-textline {
        font-size: 13px;
    }
}
/* =========================================
   FORCE stats display (desktop + mobile)
========================================= */
.stats-wrap {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: baseline;
    gap: 4px;                 /* controls space between 24 and links */
    margin: 8px 0 12px 0 !important;
    text-align: center !important;
}

.stats-count {
    font-weight: 600;
    color: #111827;
}

.stats-label {
    font-size: 14px;
    color: #4b5563;
}

/* Mobile size adjustment */
@media (max-width: 640px) {
    .stats-label {
        font-size: 13px;
    }
}
/* =========================================
   FAQ section alignment (homepage)
========================================= */
.faq-block {
    max-width: 960px;   /* match SEO content width */
    margin: 40px auto;  /* center the block */
    padding: 0 16px;
}

.faq-block h2 {
    text-align: center;   /* center only the heading */
    margin-bottom: 24px;
}

.faq-item {
    margin-bottom: 20px;
}

.faq-item h3 {
    margin-bottom: 6px;
}
/* =========================================
   Align SEO content and FAQ perfectly
========================================= */

/* SEO content block */
.seo-content {
    max-width: 960px;
    margin: 0 auto 24px;   /* 👈 controls gap BELOW SEO content */
    padding: 0 16px;
}

/* FAQ block */
.faq-block {
    max-width: 960px;
    margin: 0 auto 32px;   /* 👈 slightly separated, not huge */
    padding: 0 16px;
}

/* FAQ heading */
.faq-block h2 {
    text-align: center;
    margin: 0 0 24px;
}
header,
.navbar,
.top-nav {
    position: relative;
    z-index: 9999;
    overflow: visible;
}
.home-icon-fixed {
    margin-right: 10px;
    font-size: 18px;
    text-decoration: none;
}
/* Home icon positioning fix */

/* Default (desktop) */
.home-icon-fixed {
    display: none; /* hidden on desktop */
}

/* Show home icon inside menu on desktop */
@media (min-width: 769px) {
    .nav-links .home-icon-link {
        display: inline-flex;
        align-items: center;
        margin-right: 12px;
        font-size: 18px;
        text-decoration: none;
    }
}

/* Mobile only: show fixed home icon next to hamburger */
@media (max-width: 768px) {
    .home-icon-fixed {
        display: inline-flex;
        align-items: center;
        margin-right: 10px;
        font-size: 18px;
        text-decoration: none;
    }

    .nav-links .home-icon-link {
        display: none; /* hide inside hamburger */
    }
}
/* Desktop home icon – optical baseline alignment */
@media (min-width: 769px) {
    .nav-links .home-icon-link {
        display: inline-block;
        font-size: 18px;
        line-height: 1;
        vertical-align: middle;
        transform: translateY(0px); /* pulls icon DOWN to text baseline */
        margin-right: 10px;
        text-decoration: none;
    }
}
@media (min-width: 769px) {
  .nav-links {
    gap: 24px; /* <-- change this number to match your desired spacing */
  }

  .nav-links .home-icon-link {
    margin-right: 0 !important;   /* kill any extra spacing */
    padding-right: 0 !important;
  }
}
/* Desktop spacing below top navigation */
@media (min-width: 769px) {
    main.container,
    main > .container {
        margin-top: 22px;
    }
}
/* Mobile: move home icon closer to hamburger */
@media (max-width: 768px) {
    .home-icon-fixed {
        margin-right: 0px;   /* pulls it closer to ☰ */
    }
}
/* Mobile nav: keep home icon tight to hamburger */
@media (max-width: 768px) {
    .nav-container {
        justify-content: flex-start;
    }

    .nav-logo {
        margin-right: auto; /* pushes the right items together */
    }

    .home-icon-fixed {
        margin-right: 10px; /* small natural spacing */
    }
}
/* =====================================================
   MOBILE FIX — Add safe space before footer (pseudo-element)
   Works even when margins/padding/layout fail
===================================================== */
@media (max-width: 768px) {
  main.container::after {
    content: "";
    display: block;
    height: 4px;
  }
}
/* Tighten spacing under message textarea */
#message {
    margin-bottom: 4px;
}

#charCounter {
    margin-top: 2px !important;
}

#charLimitMsg {
    margin-top: 2px !important;
}
/* =====================================================
   DESKTOP NAV ALIGNMENT FIX (SAFE)
   Forces top nav links to stay on the right
===================================================== */
@media (min-width: 769px) {
  .top-nav .nav-container {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .top-nav .nav-links {
    margin-left: auto;   /* <-- this is the key line */
  }
}
/* =====================================================
   DESKTOP LOGO VISIBILITY FIX
===================================================== */
@media (min-width: 769px) {
  .nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
  }

  .nav-logo img {
    height: 28px;   /* adjust if needed, but this matches typical header size */
    width: auto;
  }
}
/* Common content wrapper for all inner pages */
.page-content {
    max-width: 960px;
    margin: 40px auto;
    padding: 0 16px;
}

/* =====================================================
   FOOTER LINK CONSISTENCY (ALL PAGES)
===================================================== */

.footer a {
    color: #38bdf8;          /* light, calm blue (matches homepage) */
    font-weight: 400;        /* normal, not bold */
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}
/* =====================================================
   FOOTER TYPOGRAPHY — MATCH HOMEPAGE EXACTLY
===================================================== */

.footer a {
    font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: rgb(56, 189, 248);
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}
.card-body {
    min-height: 150px;   /* Slightly increased */
}

.card-footer {
    min-height: 36px;    /* 🔑 KEY FIX */
    display: flex;
    align-items: flex-start;
}
/* =========================================================
   TOOL CARD — STRUCTURE & VERTICAL UNIFORMITY
   ---------------------------------------------------------
   1) card-body   → Locks content height (title + text + badge)
   2) card-footer → Locks footer height (link / status text)
   3) status      → Ensures consistent spacing above footer
   ---------------------------------------------------------
   Result:
   - All tool cards align perfectly
   - Uniform spacing across rows
   - Scales safely for future cards
========================================================= */

/* Main content area (title, description, status badge) */
.card-body {
    min-height: 150px;
}

/* Footer area (Visit Tool / Planned / In Development) */
.card-footer {
    min-height: 36px;
    display: flex;
    align-items: flex-start;
}

/* Status badge spacing consistency */
.status {
    display: inline-block;
    margin-top: 14px;
}
/* =========================================================
   TOOL CARD — FINAL UNIFORM LAYOUT SYSTEM
   Ensures perfect alignment across all cards
========================================================= */

.card-body {
    min-height: 150px;
}

.card-footer {
    min-height: 64px;              /* 🔑 fixed two-row area */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.status {
    display: inline-block;
}
/* Mobile nav toggle */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .nav-links.nav-open {
    display: flex;
    flex-direction: column;
  }
}
/* =====================================================
   MOBILE NAV — ENHANCED SLIDE ANIMATION (VISIBLE)
====================================================== */

@media (max-width: 768px) {
  .nav-links {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;

    max-height: 0;
    opacity: 0;
    transform: translateY(-18px) scale(0.98);

    transition:
      max-height 380ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 260ms ease,
      transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nav-links.nav-open {
    max-height: 720px;
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* =====================================================
   LOCK BODY SCROLL WHEN MOBILE MENU IS OPEN
====================================================== */
body.menu-open {
  overflow: hidden;
  touch-action: none;
}
/* =====================================================
   MOBILE NAV — LARGER TAP TARGETS (ACCESSIBILITY)
====================================================== */

@media (max-width: 768px) {
  .nav-links a {
    padding: 14px 16px;   /* increases tap area */
    line-height: 1.4;     /* improves readability */
  }
}
/* =====================================================
   ALIAS CHARACTER COUNTER (SAFE INLINE UX)
====================================================== */

.alias-wrapper {
  position: relative;
}

.alias-counter {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #6b7280; /* same calm grey */
  pointer-events: none; /* IMPORTANT: does not block typing */
}
/* =====================================================
   ALIAS INPUT — SPACE FOR COUNTER
====================================================== */

#custom-alias {
  padding-right: 56px; /* creates space for 0 / 20 */
}
@media (max-width: 480px) {
  .alias-counter {
    font-size: 10px;
    right: 10px;
  }
}
#custom-alias {
  padding-right: 64px; /* final safe space for counter */
}
/* =====================================================
   ALIAS COUNTER — MAX LIMIT STATE
====================================================== */

.alias-counter.limit-reached {
  color: #dc2626; /* clean, accessible red */
}
/* =====================================================
   ALIAS COUNTER — MOBILE BOTTOM-RIGHT POSITION
====================================================== */

@media (max-width: 480px) {
  .alias-counter {
    top: auto;
    bottom: 6px;
    transform: none;
    font-size: 10px;
  }

  #custom-alias {
    padding-right: 56px;   /* space for counter */
    padding-bottom: 22px;  /* space below text */
    padding-top: 18px;     /* re-center text vertically */
  }
}
/* ===============================
   RESULT & ANALYTICS TITLES — TUNABLE
   =============================== */

.result-title,
.stats-title {
    font-size: 1.0rem !important;   /* 👈 CHANGE ONLY THIS NUMBER */
    font-weight: 700;
    line-height: 1.25;               /* keeps it neat while scaling */
}
/* =====================================================
   DESKTOP DIVIDER — SUBMIT BUTTON → SHORT URL
===================================================== */
@media (min-width: 768px) {
    .result-title {
        margin-top: 24px;
        padding-top: 16px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
}
/* =====================================================
   DESKTOP SPACING — SHORT URL → ANALYTICS LINK
===================================================== */
@media (min-width: 768px) {
    .stats-title {
        margin-top: 20px;
    }
}
/* =====================================================
   RESULT BOX — SHORT URL
===================================================== */
.result-title {
    background: #f9fafb;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 16px 18px;
    margin-top: 24px;
}
/* =====================================================
   RESULT BOX — PRIVATE ANALYTICS LINK
===================================================== */
.stats-title {
    background: #f9fafb;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 14px;
}
/* =====================================================
   ADSENSE PLACEHOLDER — COLLAPSED (PRE-APPROVAL)
===================================================== */
.ad-slot {
    width: 100%;
    height: 0;
    overflow: hidden;
    margin: 0;
}

/* =====================================================
   ADSENSE PLACEHOLDER — ACTIVE (POST-APPROVAL)
   Add class="ads-active" to <body> later
===================================================== */
.ads-active .ad-slot {
    height: auto;
    min-height: 90px;
    margin: 24px 0;
    text-align: center;
}

@media (min-width: 768px) {
    .ads-active .ad-slot {
        min-height: 120px;
        margin: 32px 0;
    }
}

/* Fix excessive gap below tools grid on Useful Links page ONLY */
.useful-links-page .page-content:last-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.useful-links-page .page-content:last-of-type p {
    margin-top: 0;
}


/* =====================================================
   Page content spacing below fixed navbar
   ===================================================== */
.page-content {
  padding-top: 8px;   /* desktop */
}

@media (max-width: 768px) {
  .page-content {
    padding-top: 11px; /* mobile */
  }
}


/* =====================================================
   Footer link contrast fix (PageSpeed / Accessibility)
   ===================================================== */

footer a {
  color: #1f2937;
  font-weight: 500;
}

footer a:hover,
footer a:focus {
  color: #000000;
  text-decoration: underline;
}


/* =====================================================
   Footer link contrast — explicit states (PSI fix)
   ===================================================== */

footer a,
footer a:visited {
  color: #1f2937;          /* dark slate — WCAG AA pass */
  font-weight: 500;
}

footer a:hover,
footer a:focus {
  color: #000000;
  text-decoration: underline;
}