/* ==========================================================================
   TechLink — Dark-Mode Tech Design System
   ==========================================================================
   Single stylesheet, no Tailwind runtime needed.
   Layout: CSS Grid + Container Queries.
   Theme: dark, cyan accents, JetBrains Mono for code/metrics.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* --- Reset ----------------------------------------------------------------- */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
    ul, ol { list-style: none; }
    button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
    a { color: inherit; text-decoration: none; }
    img, svg, video { display: block; max-width: 100%; height: auto; }
    input, textarea, select { font: inherit; color: inherit; }
}

/* --- Design Tokens --------------------------------------------------------- */
@layer tokens {
    :root {
        /* Color scale — neutral */
        --c-bg:          #07090d;
        --c-bg-elev:     #0d1117;
        --c-surface:     #11161d;
        --c-surface-2:   #161c25;
        --c-border:      rgba(255, 255, 255, 0.08);
        --c-border-soft: rgba(255, 255, 255, 0.04);
        --c-border-hard: rgba(255, 255, 255, 0.16);

        /* Text */
        --c-text:        #e7eaf0;
        --c-text-soft:   #aeb6c4;
        --c-text-faint:  #6c7587;

        /* Accent */
        --c-accent:        #00d4ff;
        --c-accent-soft:   #4fe5ff;
        --c-accent-glow:   rgba(0, 212, 255, 0.35);
        --c-accent-2:      #00ff88;

        /* Status */
        --c-success: #00ff88;
        --c-warning: #ffb300;
        --c-error:   #ff5470;

        /* Type — system fonts, no external CDN to keep CSP strict */
        --f-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
        --f-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, 'Cascadia Code', Consolas, 'Liberation Mono', monospace;

        --fs-xs:   0.75rem;
        --fs-sm:   0.875rem;
        --fs-base: 1rem;
        --fs-lg:   1.125rem;
        --fs-xl:   1.25rem;
        --fs-2xl:  1.5rem;
        --fs-3xl:  2rem;
        --fs-4xl:  2.75rem;
        --fs-5xl:  3.75rem;

        /* Spacing scale (4px base) */
        --s-1:  0.25rem;
        --s-2:  0.5rem;
        --s-3:  0.75rem;
        --s-4:  1rem;
        --s-5:  1.5rem;
        --s-6:  2rem;
        --s-7:  3rem;
        --s-8:  4rem;
        --s-9:  6rem;

        /* Radius */
        --r-sm: 4px;
        --r-md: 8px;
        --r-lg: 12px;
        --r-xl: 20px;
        --r-pill: 999px;

        /* Shadow + glow */
        --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
        --shadow-md: 0 4px 16px rgba(0,0,0,.5);
        --shadow-lg: 0 16px 48px rgba(0,0,0,.6);
        --glow:      0 0 24px var(--c-accent-glow);

        /* Layout */
        --container:  1200px;
        --container-wide: 1440px;
        --duration:  150ms;
        --easing:    cubic-bezier(.4,.2,.2,1);
    }

    /* Light mode override (system pref) — kept dark by default but accessible */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { animation: none !important; transition: none !important; }
    }
}

/* --- Base ------------------------------------------------------------------ */
@layer base {
    html { font-size: 100%; scroll-behavior: smooth; }

    body {
        font-family: var(--f-sans);
        font-size: var(--fs-base);
        line-height: 1.6;
        color: var(--c-text);
        background:
            radial-gradient(ellipse at top, rgba(0, 212, 255, 0.07) 0%, transparent 50%),
            linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-elev) 100%);
        background-attachment: fixed;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    main { flex: 1; }

    h1, h2, h3, h4 {
        font-family: var(--f-sans);
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.15;
    }
    h1 { font-size: clamp(2rem, 4vw + 1rem, var(--fs-5xl)); }
    h2 { font-size: clamp(1.5rem, 2vw + 1rem, var(--fs-4xl)); }
    h3 { font-size: var(--fs-2xl); }
    h4 { font-size: var(--fs-xl); }

    p { color: var(--c-text-soft); max-width: 70ch; }
    p + p { margin-top: var(--s-3); }

    a {
        color: var(--c-accent);
        transition: color var(--duration) var(--easing);
    }
    a:hover { color: var(--c-accent-soft); }

    code, pre, kbd, samp { font-family: var(--f-mono); font-size: 0.95em; }
    code {
        background: var(--c-surface-2);
        border: 1px solid var(--c-border);
        border-radius: var(--r-sm);
        padding: 0.1em 0.4em;
    }

    ::selection { background: var(--c-accent-glow); color: var(--c-text); }

    :focus-visible {
        outline: 2px solid var(--c-accent);
        outline-offset: 2px;
        border-radius: var(--r-sm);
    }
}

/* --- Layout ---------------------------------------------------------------- */
@layer layout {
    .container {
        width: min(100% - 2rem, var(--container));
        margin-inline: auto;
    }
    .container-wide {
        width: min(100% - 2rem, var(--container-wide));
        margin-inline: auto;
    }

    .stack > * + * { margin-top: var(--s-4); }
    .stack-lg > * + * { margin-top: var(--s-6); }
    .stack-xl > * + * { margin-top: var(--s-8); }

    .grid { display: grid; gap: var(--s-5); }
    .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
    .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

    section { padding-block: var(--s-9); }

    /* Page sections need breathing room above the fixed header */
    main > section:first-child { padding-top: calc(var(--s-7) + 72px); }
}

/* --- Header --------------------------------------------------------------- */
@layer components {
    .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        backdrop-filter: blur(12px) saturate(160%);
        -webkit-backdrop-filter: blur(12px) saturate(160%);
        background: color-mix(in srgb, var(--c-bg) 75%, transparent);
        border-bottom: 1px solid var(--c-border);
    }
    .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-6);
        min-height: 72px;
    }
    .logo {
        display: flex;
        align-items: center;
        gap: var(--s-2);
        font-family: var(--f-mono);
        font-size: var(--fs-lg);
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--c-text);
    }
    .logo__mark {
        display: inline-grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: var(--r-md);
        background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
        color: var(--c-bg);
        font-weight: 800;
    }
    .logo__img {
        width: 40px;
        height: 40px;
        /* Invert the black-on-white original to a cyan-tinted mark for dark mode */
        filter: invert(1) sepia(1) saturate(5) hue-rotate(150deg) brightness(1.1);
        transition: filter var(--duration) var(--easing);
    }
    .logo:hover .logo__img {
        filter: invert(1) sepia(1) saturate(5) hue-rotate(150deg) brightness(1.3) drop-shadow(0 0 10px var(--c-accent-glow));
    }
    .logo__name { color: var(--c-text); }
    .logo__name b { color: var(--c-accent); }

    .nav { display: flex; align-items: center; gap: var(--s-5); }
    .nav__list { display: flex; align-items: center; gap: var(--s-1); }
    .nav__link {
        display: inline-flex;
        align-items: center;
        height: 36px;
        padding: 0 var(--s-3);
        border-radius: var(--r-md);
        font-size: var(--fs-sm);
        font-weight: 500;
        color: var(--c-text-soft);
        transition: background var(--duration) var(--easing), color var(--duration) var(--easing);
    }
    .nav__link:hover, .nav__link[aria-current="page"] {
        color: var(--c-text);
        background: var(--c-surface);
    }
    .nav__link[aria-current="page"] {
        box-shadow: inset 0 -2px 0 var(--c-accent);
    }

    .nav__dropdown { position: relative; }
    .nav__menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%) translateY(-6px);
        min-width: 200px;
        padding: var(--s-2);
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-md);
        opacity: 0;
        visibility: hidden;
        transition: all var(--duration) var(--easing);
    }
    .nav__dropdown:hover .nav__menu,
    .nav__dropdown:focus-within .nav__menu {
        opacity: 1; visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    .hamburger {
        display: none;
        width: 36px; height: 36px;
        border-radius: var(--r-md);
        place-items: center;
    }
    .hamburger:hover { background: var(--c-surface); }

    @media (max-width: 880px) {
        .hamburger { display: grid; }
        .nav__list { display: none; }
        .nav.is-open .nav__list {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            position: absolute;
            inset: 100% 0 auto 0;
            padding: var(--s-3);
            background: var(--c-bg-elev);
            border-bottom: 1px solid var(--c-border);
            gap: var(--s-1);
        }
        .nav.is-open .nav__link { height: 44px; }
    }
}

/* --- Hero ------------------------------------------------------------------ */
@layer components {
    .hero {
        position: relative;
        overflow: hidden;
        padding-block: var(--s-9);
    }
    .hero__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        padding: var(--s-1) var(--s-3);
        border: 1px solid var(--c-border-hard);
        border-radius: var(--r-pill);
        font-family: var(--f-mono);
        font-size: var(--fs-xs);
        color: var(--c-accent);
        background: color-mix(in srgb, var(--c-accent) 8%, transparent);
    }
    .hero__eyebrow::before {
        content: '';
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--c-accent);
        box-shadow: 0 0 8px var(--c-accent);
        animation: pulse 2s var(--easing) infinite;
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: .3; }
    }
    .hero__title {
        margin-top: var(--s-4);
        background: linear-gradient(180deg, var(--c-text) 30%, var(--c-text-soft) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .hero__title em {
        font-style: normal;
        background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .hero__lead {
        margin-top: var(--s-5);
        font-size: var(--fs-xl);
        color: var(--c-text-soft);
        max-width: 56ch;
    }
    .hero__actions { display: flex; gap: var(--s-3); margin-top: var(--s-6); flex-wrap: wrap; }

    /* Decorative grid backdrop */
    .grid-bg {
        position: absolute; inset: 0;
        background-image:
            linear-gradient(to right, var(--c-border-soft) 1px, transparent 1px),
            linear-gradient(to bottom, var(--c-border-soft) 1px, transparent 1px);
        background-size: 48px 48px;
        mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
        pointer-events: none;
        z-index: -1;
    }
}

/* --- Buttons --------------------------------------------------------------- */
@layer components {
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--s-2);
        min-height: 44px;
        padding: 0 var(--s-5);
        border-radius: var(--r-md);
        font-size: var(--fs-sm);
        font-weight: 500;
        letter-spacing: 0.01em;
        cursor: pointer;
        transition: all var(--duration) var(--easing);
        border: 1px solid transparent;
    }

    .btn--primary {
        background: var(--c-accent);
        color: var(--c-bg);
        font-weight: 600;
    }
    .btn--primary:hover {
        background: var(--c-accent-soft);
        box-shadow: var(--glow);
        transform: translateY(-1px);
    }

    .btn--ghost {
        background: transparent;
        color: var(--c-text);
        border-color: var(--c-border-hard);
    }
    .btn--ghost:hover {
        background: var(--c-surface);
        border-color: var(--c-accent);
        color: var(--c-accent);
    }

    .btn--danger {
        background: transparent;
        color: var(--c-error);
        border-color: color-mix(in srgb, var(--c-error) 40%, transparent);
    }
    .btn--danger:hover { background: color-mix(in srgb, var(--c-error) 12%, transparent); }

    .btn--sm { min-height: 32px; padding: 0 var(--s-3); font-size: var(--fs-xs); }
}

/* --- Cards ----------------------------------------------------------------- */
@layer components {
    .card {
        position: relative;
        padding: var(--s-6);
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--r-lg);
        transition: border-color var(--duration) var(--easing), transform var(--duration) var(--easing);
    }
    .card:hover {
        border-color: var(--c-border-hard);
        transform: translateY(-2px);
    }
    .card--interactive::before {
        content: '';
        position: absolute; inset: -1px;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(135deg, transparent, var(--c-accent-glow), transparent);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity var(--duration) var(--easing);
    }
    .card--interactive:hover::before { opacity: 1; }
    .card__icon {
        width: 40px; height: 40px;
        display: grid; place-items: center;
        background: linear-gradient(135deg, var(--c-surface-2), var(--c-surface));
        border: 1px solid var(--c-border);
        border-radius: var(--r-md);
        color: var(--c-accent);
        margin-bottom: var(--s-4);
    }
    .card__title { font-size: var(--fs-lg); }
    .card__body { color: var(--c-text-soft); margin-top: var(--s-2); }
    .card__footer { margin-top: var(--s-5); }
}

/* --- Forms ---------------------------------------------------------------- */
@layer components {
    .field { display: flex; flex-direction: column; gap: var(--s-2); }
    .field__label {
        font-size: var(--fs-sm);
        font-weight: 500;
        color: var(--c-text-soft);
    }
    .field__hint {
        font-size: var(--fs-xs);
        color: var(--c-text-faint);
    }
    .field__error {
        font-size: var(--fs-xs);
        color: var(--c-error);
    }
    .input, .textarea, .select {
        width: 100%;
        min-height: 44px;
        padding: var(--s-3) var(--s-4);
        background: var(--c-surface);
        border: 1px solid var(--c-border-hard);
        border-radius: var(--r-md);
        color: var(--c-text);
        transition: border-color var(--duration) var(--easing), box-shadow var(--duration) var(--easing);
    }
    .input:focus, .textarea:focus, .select:focus {
        outline: none;
        border-color: var(--c-accent);
        box-shadow: 0 0 0 3px var(--c-accent-glow);
    }
    .textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

    .form { display: flex; flex-direction: column; gap: var(--s-5); }
    .form__row { display: grid; gap: var(--s-4); }
    @container (min-width: 600px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

    .notice {
        padding: var(--s-3) var(--s-4);
        border-radius: var(--r-md);
        border: 1px solid var(--c-border);
        background: var(--c-surface);
        font-size: var(--fs-sm);
    }
    .notice--success { border-color: color-mix(in srgb, var(--c-success) 40%, transparent); color: var(--c-success); }
    .notice--error   { border-color: color-mix(in srgb, var(--c-error)   40%, transparent); color: var(--c-error); }
    .notice--warning { border-color: color-mix(in srgb, var(--c-warning) 40%, transparent); color: var(--c-warning); }
}

/* --- File Manager ---------------------------------------------------------- */
@layer components {
    .filebox {
        container-type: inline-size;
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--r-lg);
        overflow: hidden;
    }
    .filebox__bar {
        display: flex;
        align-items: center;
        gap: var(--s-3);
        padding: var(--s-3) var(--s-4);
        border-bottom: 1px solid var(--c-border);
        background: var(--c-surface-2);
        font-family: var(--f-mono);
        font-size: var(--fs-sm);
        color: var(--c-text-soft);
    }
    .filebox__path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .filebox__actions { display: flex; gap: var(--s-2); }
    .filebox__body { padding: var(--s-4); }
    .filebox__list { display: grid; gap: var(--s-1); }
    .filebox__item {
        display: flex;
        align-items: center;
        gap: var(--s-3);
        padding: var(--s-2) var(--s-3);
        border-radius: var(--r-sm);
        font-family: var(--f-mono);
        font-size: var(--fs-sm);
        color: var(--c-text-soft);
        transition: background var(--duration) var(--easing), color var(--duration) var(--easing);
    }
    .filebox__item:hover { background: var(--c-surface-2); color: var(--c-text); }
    .filebox__item--folder::before { content: '▸'; color: var(--c-accent); }
    .filebox__item--file::before { content: '·'; color: var(--c-text-faint); }
    .filebox__size { color: var(--c-text-faint); margin-left: auto; font-size: var(--fs-xs); }
}

/* --- Password Generator Panel --------------------------------------------- */
@layer components {
    .pwgen-panel {
        display: flex;
        flex-direction: column;
        gap: var(--s-3);
        padding: var(--s-4);
        background: var(--c-surface-2);
        border: 1px solid var(--c-border);
        border-radius: var(--r-md);
    }
    .pwgen-panel__head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--s-3);
    }
    .pwgen-panel__controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--s-3);
    }
    .pwgen-len {
        display: flex;
        align-items: center;
        gap: var(--s-2);
        font-size: var(--fs-sm);
        color: var(--c-text-soft);
    }
    .pwgen-len .input {
        width: 80px;
        min-height: 36px;
        padding: 0 var(--s-2);
        text-align: center;
        font-family: var(--f-mono);
    }
    .pwgen-set {
        display: inline-flex;
        align-items: center;
        gap: var(--s-1);
        padding: var(--s-1) var(--s-3);
        border: 1px solid var(--c-border-hard);
        border-radius: var(--r-pill);
        font-family: var(--f-mono);
        font-size: var(--fs-xs);
        color: var(--c-text-soft);
        cursor: pointer;
        transition: all var(--duration) var(--easing);
        user-select: none;
    }
    .pwgen-set:hover { border-color: var(--c-accent); color: var(--c-accent); }
    .pwgen-set input { accent-color: var(--c-accent); }
    .pwgen-set:has(input:checked) {
        border-color: var(--c-accent);
        background: color-mix(in srgb, var(--c-accent) 8%, transparent);
        color: var(--c-accent);
    }
}

/* --- Footer --------------------------------------------------------------- */
@layer components {
    .site-footer {
        margin-top: var(--s-9);
        padding-block: var(--s-7);
        border-top: 1px solid var(--c-border);
        color: var(--c-text-faint);
        font-size: var(--fs-sm);
    }
    .site-footer__grid {
        display: grid;
        gap: var(--s-6);
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
    @media (max-width: 700px) {
        .site-footer__grid { grid-template-columns: 1fr 1fr; }
    }
    .site-footer__col h4 { color: var(--c-text); margin-bottom: var(--s-3); font-size: var(--fs-sm); }
    .site-footer__col ul { display: flex; flex-direction: column; gap: var(--s-2); }
    .site-footer__col a { color: var(--c-text-soft); }
    .site-footer__col a:hover { color: var(--c-accent); }
    .site-footer__legal {
        margin-top: var(--s-6);
        padding-top: var(--s-4);
        border-top: 1px solid var(--c-border);
        display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3);
    }
}

/* --- Utilities ------------------------------------------------------------- */
@layer utilities {
    .text-center { text-align: center; }
    .text-mono { font-family: var(--f-mono); }
    .text-faint { color: var(--c-text-faint); }
    .text-soft  { color: var(--c-text-soft); }
    .text-accent { color: var(--c-accent); }
    .visually-hidden {
        position: absolute !important;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}