/* ============================================================
   NEXUS // QR MODUL — qr.css
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    background-color: #09090b;
    color: #d4d4d8;
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    --r: 34; --g: 197; --b: 94;
}
::selection { background-color: #3f3f46; }

/* --- Neon transition --- */
.neon-transition {
    transition: border-color 1s ease, box-shadow 1s ease, color 1s ease,
                transform 0.3s ease, opacity 0.3s ease;
}

/* --- Matrix Canvas --- */
#matrix-canvas {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    z-index: -20; opacity: 0.4;
}

/* --- Main --- */
main {
    position: relative; z-index: 10;
    width: 100%; min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    padding: 1.5rem 1rem 4rem;
}

/* --- Page Header --- */
.page-header {
    width: 100%; max-width: 42rem;
    margin-bottom: 2rem;
    display: flex; flex-direction: column; gap: 1rem;
}

/* Back link */
.back-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: #71717a; text-decoration: none;
    transition: color 0.3s ease;
    width: fit-content;
}
.back-link:hover { color: rgb(var(--r),var(--g),var(--b)); }
.back-link iconify-icon { transition: transform 0.3s ease; }
.back-link:hover iconify-icon { transform: translateX(-4px); }

/* Title row */
.page-title-row {
    display: flex; align-items: center; gap: 0.75rem;
}
.page-title-row iconify-icon {
    font-size: 1.75rem;
    color: rgb(var(--r),var(--g),var(--b)); transition: color 1s ease;
}
.page-title-row h1 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: rgb(var(--r),var(--g),var(--b)); transition: color 1s ease;
}
.page-title-row p {
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    color: #71717a; margin-top: 0.125rem;
}

/* --- App Card --- */
.qr-card {
    background: rgba(9,9,11,0.75);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--r),var(--g),var(--b),0.15);
    border-radius: 0.75rem;
    padding: 1.25rem;
    width: 100%; max-width: 42rem;
}

/* --- Section Label --- */
.section-label {
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: #52525b; font-family: 'JetBrains Mono', monospace;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 6px; margin-bottom: 12px; margin-top: 20px;
}
.section-label:first-child { margin-top: 0; }

/* --- Inputs --- */
.qr-input {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 8px 12px;
    font-size: 13px; color: #e4e4e7;
    font-family: 'JetBrains Mono', monospace;
    outline: none; transition: border-color 0.3s ease;
}
.qr-input:focus { border-color: rgb(var(--r),var(--g),var(--b)); }
.qr-input::placeholder { color: #52525b; }

.qr-select {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 8px 12px;
    font-size: 13px; color: #e4e4e7;
    font-family: 'JetBrains Mono', monospace;
    outline: none; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    transition: border-color 0.3s ease;
}
.qr-select:focus { border-color: rgb(var(--r),var(--g),var(--b)); }

.qr-color {
    height: 38px; width: 100%;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 2px 4px;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
}

/* --- Logo Tabs --- */
.logo-tabs {
    display: flex;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; overflow: hidden;
    width: fit-content; margin-bottom: 10px;
}
.logo-tab {
    padding: 6px 14px; font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer; background: transparent; border: none;
    color: #71717a; letter-spacing: 0.03em;
    transition: background 0.2s, color 0.2s;
}
.logo-tab.active { background: rgba(255,255,255,0.07); color: #e4e4e7; }
.logo-panel { display: none; }
.logo-panel.active { display: block; }

/* --- Upload Area --- */
.upload-area {
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 8px; padding: 1.25rem;
    text-align: center; cursor: pointer;
    transition: background 0.2s;
}
.upload-area:hover { background: rgba(255,255,255,0.04); }
.upload-area input { display: none; }
.upload-area p { font-size: 0.875rem; font-family: 'JetBrains Mono', monospace; color: #71717a; }
.upload-area p span { color: rgb(var(--r),var(--g),var(--b)); }
.upload-area .upload-sub { font-size: 0.75rem; color: #52525b; margin-top: 0.25rem; }

.hint-text { font-size: 0.75rem; font-family: 'JetBrains Mono', monospace; color: #52525b; margin-top: 0.5rem; }
.hint-text-sm { font-size: 0.75rem; font-family: 'JetBrains Mono', monospace; color: #52525b; padding: 0.5rem 0; }

/* --- Logo Info --- */
.logo-info { display: none; align-items: center; margin-top: 8px; font-size: 12px; color: #71717a; }
.logo-info.show { display: flex; }
.logo-thumb {
    width: 44px; height: 44px; object-fit: contain;
    border-radius: 6px; border: 1px solid rgba(255,255,255,0.1);
    vertical-align: middle; margin-right: 8px;
}
.logo-info span { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; }

/* --- Settings Grid --- */
.settings-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.settings-grid-3 { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.field-label {
    font-size: 0.75rem; font-family: 'JetBrains Mono', monospace;
    color: #71717a; margin-bottom: 0.375rem; display: block;
}

/* --- Range Slider --- */
input[type=range] {
    width: 100%; accent-color: rgb(var(--r),var(--g),var(--b));
    display: block; margin-top: 0.5rem;
}

/* --- Size Badge --- */
.size-badge {
    display: inline-block;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; padding: 3px 10px;
    font-size: 11px; font-family: 'JetBrains Mono', monospace;
    color: #52525b; margin-top: 6px;
}

/* --- Generate Button --- */
.btn-generate {
    margin-top: 1.5rem; width: 100%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em;
    padding: 0.75rem 1.5rem; border-radius: 0.5rem;
    border: 1px solid rgba(var(--r),var(--g),var(--b),0.4);
    color: rgb(var(--r),var(--g),var(--b));
    background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.btn-generate:hover {
    background: rgba(var(--r),var(--g),var(--b),0.08);
    border-color: rgb(var(--r),var(--g),var(--b));
    box-shadow: 0 0 20px rgba(var(--r),var(--g),var(--b),0.2);
}

/* --- Status --- */
#status {
    font-size: 0.75rem; font-family: 'JetBrains Mono', monospace;
    text-align: center; margin-top: 0.75rem; min-height: 18px;
    color: #71717a;
}
#status.ok  { color: rgb(var(--r),var(--g),var(--b)); }
#status.err { color: #f87171; }

/* --- Preview --- */
.preview-box {
    display: flex; justify-content: center; align-items: center;
    min-height: 220px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; overflow: hidden;
    padding: 1rem; margin-top: 0.5rem;
}
.preview-box img {
    max-width: 100%; max-height: 300px;
    display: block; border-radius: 6px; cursor: context-menu;
}

/* --- Save Hint --- */
.save-hint-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; padding: 14px 18px; margin-top: 12px;
}
.save-hint-box .hint-title {
    font-size: 0.625rem; font-family: 'JetBrains Mono', monospace;
    color: #71717a; text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}
.save-hint-box p {
    font-size: 0.75rem; font-family: 'JetBrains Mono', monospace;
    color: #a1a1aa; margin-top: 0.25rem;
}
.save-hint-box p span { color: rgb(var(--r),var(--g),var(--b)); }

/* --- Footer --- */
footer { margin-top: 2.5rem; text-align: center; }
footer p {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem; color: #3f3f46;
    letter-spacing: 0.05em; text-transform: uppercase;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 640px) {
    main { padding: 2rem 1.5rem 4rem; }
    .qr-card { padding: 2rem; }
    .page-title-row h1 { font-size: 1.875rem; }
    .settings-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
    main { padding: 2rem; }
}