/* ============================================================
   Secure Links — shared front-end design system
   Refined technical control-panel aesthetic (2025-26).
   Applied to: My Links, Tools, Account, Upgrade/Payment.
   Scope: everything lives under .sl-page so it never leaks
   into the host theme.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

.sl-page {
    --sl-bg:        #0b0d10;
    --sl-surface:   #191f26;
    --sl-surface-2: #222a33;
    --sl-line:      #2f3a44;
    --sl-line-soft: #28313a;
    --sl-text:      #eef3f8;
    --sl-text-dim:  #9aa7b4;
    --sl-text-faint:#6b7884;
    --sl-accent:    #3ddc84;
    --sl-accent-2:  #2cb86c;
    --sl-accent-dim:#1f7a4d;
    --sl-danger:    #ff5d5d;
    --sl-gold:      #e8c46a;
    --sl-font-display: 'Chakra Petch','Space Grotesk',system-ui,sans-serif; --sl-font-body:'Space Grotesk',system-ui,sans-serif;
    --sl-font-mono: 'JetBrains Mono', ui-monospace, monospace;

    color: var(--sl-text);
    font-family: var(--sl-font-body);
    max-width: 860px;
    margin: 0 auto;
    padding: 28px 16px 60px;
    position: relative;
    -webkit-font-smoothing: antialiased;
}

/* Faint technical grid + glow backdrop, masked to fade out. */
.sl-page::before {
    content: "";
    position: absolute;
    inset: -30px -20px auto -20px;
    height: 420px;
    background:
        radial-gradient(620px 300px at 80% -10%, rgba(61,220,132,0.07), transparent 70%),
        linear-gradient(var(--sl-line-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--sl-line-soft) 1px, transparent 1px);
    background-size: 100% 100%, 34px 34px, 34px 34px;
    -webkit-mask-image: linear-gradient(180deg,#000,transparent 90%);
            mask-image: linear-gradient(180deg,#000,transparent 90%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}
.sl-page > * { position: relative; z-index: 1; }

/* ---- Headings ---- */
.sl-page h2 {
    font-family: var(--sl-font-display);
    font-weight: 600;
    font-size: 26px;
    letter-spacing: -0.02em;
    margin: 4px 0 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sl-text);
}
.sl-page h2::before {
    content: "";
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--sl-accent);
    box-shadow: 0 0 0 4px rgba(61,220,132,0.14), 0 0 14px rgba(61,220,132,0.65);
    animation: sl-pulse 2.6s ease-in-out infinite;
    flex: 0 0 auto;
}
@keyframes sl-pulse {
    0%,100% { box-shadow: 0 0 0 4px rgba(61,220,132,0.14), 0 0 14px rgba(61,220,132,0.55); }
    50%     { box-shadow: 0 0 0 5px rgba(61,220,132,0.05), 0 0 22px rgba(61,220,132,0.85); }
}
.sl-page h3 {
    font-family: var(--sl-font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    color: var(--sl-text);
}
.sl-page h4 {
    font-family: var(--sl-font-mono);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sl-text-dim);
    margin: 0 0 10px;
}
.sl-page .sl-eyebrow {
    font-family: var(--sl-font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sl-text-faint);
    margin: 0 0 26px 21px;
}
.sl-page p { color: var(--sl-text-dim); line-height: 1.6; }

/* ---- Cards ---- */
.sl-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015), transparent 120px),
        var(--sl-surface);
    border: 1px solid var(--sl-line);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 18px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 24px 60px -34px rgba(0,0,0,0.9);
    animation: sl-rise .5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes sl-rise { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

/* ---- Inputs ---- */
.sl-page input[type="text"],
.sl-page input[type="password"],
.sl-page input[type="email"],
.sl-page input[type="datetime-local"],
.sl-page select {
    background: var(--sl-bg);
    color: var(--sl-text);
    border: 1px solid var(--sl-line);
    border-radius: 10px;
    font-family: var(--sl-font-mono);
    font-size: 14px;
    padding: 11px 13px;
    box-sizing: border-box;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.sl-page input:focus,
.sl-page select:focus {
    outline: none;
    border-color: var(--sl-accent-dim);
    box-shadow: 0 0 0 3px rgba(61,220,132,0.12);
    background: var(--sl-surface);
}
.sl-page ::placeholder { color: var(--sl-text-faint); opacity: 1; }

/* ---- Checkboxes ---- */
.sl-page input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px;
    border: 1px solid var(--sl-line);
    border-radius: 6px;
    background: var(--sl-surface-2);
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
    vertical-align: middle;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.sl-page input[type="checkbox"]:hover { border-color: var(--sl-accent-dim); }
.sl-page input[type="checkbox"]:checked {
    border-color: var(--sl-accent);
    background: rgba(61,220,132,0.12);
    box-shadow: 0 0 0 3px rgba(61,220,132,0.10);
}
.sl-page input[type="checkbox"]:checked:after {
    content: "";
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 10px;
    border: solid var(--sl-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.sl-page input[type="checkbox"]:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- Buttons ---- */
.sl-btn-primary,
.sl-page button[type="submit"]:not(.sl-plain) {
    font-family: var(--sl-font-mono);
    background: linear-gradient(180deg, var(--sl-accent), var(--sl-accent-2));
    color: #04140a;
    border: 1px solid var(--sl-accent);
    border-radius: 10px;
    padding: 11px 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: 0 8px 24px -10px rgba(61,220,132,0.6), 0 1px 0 rgba(255,255,255,0.25) inset;
    transition: transform .12s, box-shadow .2s;
}
.sl-btn-primary:hover,
.sl-page button[type="submit"]:not(.sl-plain):hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px -10px rgba(61,220,132,0.8), 0 1px 0 rgba(255,255,255,0.3) inset;
}
.sl-btn-ghost {
    font-family: var(--sl-font-mono);
    background: var(--sl-surface-2);
    color: var(--sl-text);
    border: 1px solid var(--sl-line);
    border-radius: 10px;
    padding: 11px 22px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: border-color .18s, color .18s, background .18s;
}
.sl-btn-ghost:hover { border-color: var(--sl-accent-dim); color: var(--sl-accent); background: var(--sl-surface); }

/* ---- Status pills ---- */
.sl-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sl-font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--sl-line);
    background: var(--sl-surface-2);
    color: var(--sl-text-dim);
}
.sl-pill.is-pro {
    color: var(--sl-accent);
    border-color: var(--sl-accent-dim);
    background: rgba(61,220,132,0.08);
}
.sl-pill.is-pro::before {
    content: "";
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--sl-accent);
    box-shadow: 0 0 8px rgba(61,220,132,0.9);
}

/* ---- Links/anchors styled as buttons ---- */
.sl-page a.sl-btn-primary, .sl-page a.sl-btn-ghost { text-decoration: none; display: inline-block; }

/* ---- Status text ---- */
.sl-status-ok { color: var(--sl-accent); }
.sl-status-err { color: var(--sl-danger); }
.sl-status-dim { color: var(--sl-text-faint); }

@media (max-width: 600px) {
    .sl-page h2 { font-size: 22px; }
    .sl-card { padding: 18px; border-radius: 14px; }
}

/* When a plugin page is shown, let any site background (e.g. an animated
   background block) show through Astra's opaque content containers. */
body:has(.sl-page) .ast-separate-container,
body:has(.sl-page) .ast-separate-container .ast-article-single,
body:has(.sl-page) #content,
body:has(.sl-page) #primary,
body:has(.sl-page) .site-content,
body:has(.sl-page) .entry-content,
body:has(#sl-create-section) .ast-separate-container,
body:has(#sl-create-section) #content,
body:has(#sl-create-section) .site-content,
body:has(#sl-create-section) .entry-content {
    background: transparent !important;
    box-shadow: none !important;
}

/* ---- Harmonize legacy inline colors (Tools/Account/etc.) ---- */
.sl-page [style*="background:#222a33"],
.sl-page [style*="background:#111"] {
    background: var(--sl-bg) !important;
    border-color: var(--sl-line) !important;
}
.sl-page [style*="background:#0f2a0f"] {
    background: rgba(61,220,132,0.08) !important;
}
.sl-page [style*="background:#2a1f1f"],
.sl-page [style*="background:#2a2211"] {
    background: rgba(232,196,106,0.08) !important;
}
.sl-page [style*="color:#3ddc84"] { color: var(--sl-accent) !important; }
.sl-page [style*="color:#fff"] { color: var(--sl-text) !important; }
.sl-page [style*="color:#ccc"],
.sl-page [style*="color:#eee"] { color: var(--sl-text-dim) !important; }
.sl-page [style*="color:#888"],
.sl-page [style*="color:#777"],
.sl-page [style*="color:#666"] { color: var(--sl-text-faint) !important; }
.sl-page [style*="border:1px solid #2f3a44"],
.sl-page [style*="border:1px solid #2f3a44"],
.sl-page [style*="border-top:1px solid #2f3a44"] { border-color: var(--sl-line) !important; }
/* Legacy green buttons → primary style */
.sl-page button[style*="background:#3ddc84"] {
    background: linear-gradient(180deg, var(--sl-accent), var(--sl-accent-2)) !important;
    color: #04140a !important;
    border: 1px solid var(--sl-accent) !important;
    border-radius: 10px !important;
    font-family: var(--sl-font-mono) !important;
    font-weight: 700 !important;
}

/* ================= OVERHAUL LAYER — scanner hardware identity ================= */
/* Cards: lifted surface + fine scanline texture + glowing top hairline */
.sl-page .sl-card{
    background:
        repeating-linear-gradient(180deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, rgba(255,255,255,0.03), transparent 90px),
        var(--sl-surface) !important;
    border:1px solid var(--sl-line) !important;
    border-radius:10px !important;
    position:relative;
    box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 70px -38px rgba(0,0,0,0.95) !important;
}
.sl-page .sl-card::before{
    content:"";position:absolute;top:0;left:10%;right:10%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(61,220,132,0.55),transparent);
}
/* Corner brackets — targeting-UI accents */
.sl-page .sl-card::after{
    content:"";position:absolute;inset:6px;pointer-events:none;border-radius:6px;
    background:
        linear-gradient(90deg,var(--sl-accent) 0 10px,transparent 10px) top left,
        linear-gradient(180deg,var(--sl-accent) 0 10px,transparent 10px) top left,
        linear-gradient(270deg,var(--sl-accent) 0 10px,transparent 10px) top right,
        linear-gradient(180deg,var(--sl-accent) 0 10px,transparent 10px) top right,
        linear-gradient(90deg,var(--sl-accent) 0 10px,transparent 10px) bottom left,
        linear-gradient(0deg,var(--sl-accent) 0 10px,transparent 10px) bottom left,
        linear-gradient(270deg,var(--sl-accent) 0 10px,transparent 10px) bottom right,
        linear-gradient(0deg,var(--sl-accent) 0 10px,transparent 10px) bottom right;
    background-size:10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px;
    background-repeat:no-repeat;
    opacity:0.5;
}
/* Buttons: sharp terminal controls */
.sl-page .sl-btn, .sl-page button.sl-btn{
    border-radius:4px !important;
    text-transform:uppercase;
    letter-spacing:0.1em !important;
    font-size:12px !important;
}
.sl-page .sl-btn::before{content:"[ ";opacity:0.65;}
.sl-page .sl-btn::after{content:" ]";opacity:0.65;}
.sl-page .sl-btn-secondary{border-radius:4px !important;letter-spacing:0.06em;}
/* Headings: stark hierarchy with mono system readout */
.sl-page h2, .sl-page h3{letter-spacing:-0.02em;}
.sl-page .sl-eyebrow{color:var(--sl-accent) !important;opacity:0.75;}
/* Inputs: terminal focus */
.sl-page input:focus, .sl-page select:focus, .sl-page textarea:focus{
    border-color:var(--sl-accent) !important;
    box-shadow:0 0 0 1px var(--sl-accent), 0 0 18px -6px rgba(61,220,132,0.55) !important;
}