/* ============================================================
   SendNudes — SPECTRE / CatchIT theme
   Farb- und Formsprache aus catchit.specr.eu
   ============================================================ */
@import url('fonts/fonts.css');

:root, [data-theme="light"], [data-theme="dark"] {
    /* CatchIT-Palette */
    --bg: #070707;
    --panel: #151515;
    --panel-2: #1e1e1e;
    --accent: #c91515;
    --accent-rgb: 201, 21, 21;
    --accent-hover: #ff3b00;
    --radius: 22px;
    --shadow: 0 18px 40px rgba(0,0,0,.45);
    --font-primary: "Poppins", Arial, sans-serif;
    --font-secondary: "Titillium Web", "Poppins", Arial, sans-serif;
    --font-tertiary: "Montserrat", "Poppins", Arial, sans-serif;

    /* DumbDrop-Variablen auf die Palette umbiegen */
    --bg-color: var(--bg);
    --text-color: #e6e6e8;
    --container-bg: var(--panel);
    --border-color: #242528;
    --highlight-color: var(--accent);
    --highlight-hover: var(--accent-hover);
    --progress-bg: #242528;
    --primary-color: var(--accent);
    --secondary-color: #2a2b2f;
    --textarea-bg: rgba(255,255,255,.05);
    --danger-color: #ff4d4d;
}

* { margin:0; padding:0; box-sizing:border-box; font-family: var(--font-primary); }

html { color-scheme: dark only; }

body {
    min-height: 100vh;
    background: var(--bg);
    color: #aaa;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 3rem 1rem 4rem;
    font-size: 18px;
    line-height: 1.5;
    position: relative;
    overflow-x: hidden;
}

/* Hintergrund: dezenter roter Glow + technisches Raster */
body::before {
    content:""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(900px 520px at 50% -10%, rgba(var(--accent-rgb),.16), transparent 62%),
      radial-gradient(700px 480px at 90% 110%, rgba(var(--accent-rgb),.07), transparent 60%);
}
body::after {
    content:""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity:.5;
    background-image:
      linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 50% 30%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 20%, transparent 78%);
}

.container {
    width: 100%;
    max-width: 680px;
    padding: 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Theme-Toggle: bei Dark-only versteckt */
.theme-toggle { display: none !important; }

/* Kopfzeile / Wortmarke */
h1 {
    font-family: var(--font-tertiary);
    font-weight: 800;
    font-size: clamp(2rem, 6vw, 3rem);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #e8e8ea;
    margin-bottom: 6px;
    text-shadow: 0 2px 24px rgba(var(--accent-rgb),.35);
}
h1::first-letter { color: var(--accent); }

.brand-rule {
    width: 100%; max-width: 420px; height: 2px; margin: 0 auto 8px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.brand-sub {
    font-family: var(--font-secondary);
    font-size: .82rem; letter-spacing: .34em; text-transform: uppercase;
    color: #7d7d82; margin-bottom: 28px;
}
.brand-sub b { color: var(--accent); font-weight: 700; }

/* Dropzone als Panel mit Eckmarkierungen */
.upload-container {
    position: relative;
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    border: 1px dashed #3a3b40;
    border-radius: var(--radius);
    padding: 54px 24px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    margin-bottom: 20px;
}
.upload-container::before,
.upload-container::after {
    content:""; position:absolute; width:34px; height:34px; pointer-events:none;
    border-color: rgba(var(--accent-rgb),.62); border-style: solid; border-width:0;
}
.upload-container::before { top:12px; left:12px; border-top-width:2px; border-left-width:2px; border-top-left-radius:8px; }
.upload-container::after  { bottom:12px; right:12px; border-bottom-width:2px; border-right-width:2px; border-bottom-right-radius:8px; }

.upload-container:hover,
.upload-container.highlight {
    border-color: var(--accent);
    box-shadow: var(--shadow), 0 0 0 1px rgba(var(--accent-rgb),.35), 0 0 46px rgba(var(--accent-rgb),.22) inset;
    transform: translateY(-2px);
}

.upload-content { display:flex; flex-direction:column; align-items:center; gap:16px; }
.upload-content svg { color: var(--accent); margin-bottom: 6px; filter: drop-shadow(0 0 14px rgba(var(--accent-rgb),.45)); }
.upload-content p {
    color: #c8c8cc; font-size: 1.02rem; line-height: 1.55;
    font-family: var(--font-secondary); letter-spacing: .01em;
}

/* Buttons */
button {
    background: var(--accent);
    color: #f2f2f4;
    border: none;
    padding: 12px 22px;
    border-radius: 12px;
    font-family: var(--font-tertiary);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(var(--accent-rgb),.28);
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
button:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255,59,0,.32); }
button:active { transform: translateY(0); }
button:disabled { background:#2a2b2f; color:#77777c; box-shadow:none; cursor:not-allowed; transform:none; }

.button-group { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.button-group button {
    background: #16171a; color:#dcdce0;
    border: 1px solid rgba(var(--accent-rgb),.42);
    box-shadow: none;
}
.button-group button:hover { background: rgba(var(--accent-rgb),.14); border-color: var(--accent); color:#fff; }

.upload-button { margin: 20px auto 0; width:100%; max-width: 240px; display:block; }

/* Dateiliste (Auswahl vor Upload) */
.file-list { margin-top: 20px; display:flex; flex-direction:column; gap:8px; }
.file-item {
    background: #131417;
    border: 1px solid #242528;
    border-left: 3px solid rgba(var(--accent-rgb),.7);
    padding: 11px 15px;
    border-radius: 10px;
    text-align: left;
    color: #cfcfd4;
    font-family: var(--font-secondary);
    font-size: .92rem;
}

/* Fortschritt */
#uploadProgress { margin: 20px 0; display:flex; flex-direction:column; gap: 14px; }
.progress-container {
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    border: 1px solid #242528;
    padding: 15px;
    border-radius: 14px;
    box-shadow: var(--shadow);
}
.progress-label { text-align:left; margin-bottom:8px; color:#dcdce0; font-size:.9rem; font-family:var(--font-secondary); }
.progress-status { display:flex; justify-content:space-between; align-items:center; font-size:.78rem; color:#8a8a8f; margin-top:8px; }
.progress-info { text-align:left; }
.progress-details { text-align:right; }
.progress { background:#0e0f11; border:1px solid #242528; border-radius:999px; height:9px; overflow:hidden; margin:8px 0; }
.progress-bar {
    height:100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    box-shadow: 0 0 14px rgba(var(--accent-rgb),.55);
    transition: width .3s ease;
}

/* PIN-Modal / Login */
.modal { position:fixed; inset:0; background: var(--bg); z-index:1000; display:none; }
.modal.visible { display:flex; align-items:center; justify-content:center; }
#pin-modal .modal-content {
    text-align:center; padding: 3rem 2rem; width:100%; max-width: 420px;
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    border: 1px solid #242528;
    border-radius: var(--radius);
    box-shadow: var(--shadow), 0 0 0 1px rgba(var(--accent-rgb),.16);
    position: relative;
}
#pin-modal .modal-content::before,
#pin-modal .modal-content::after {
    content:""; position:absolute; width:30px; height:30px;
    border-color: rgba(var(--accent-rgb),.6); border-style:solid; border-width:0;
}
#pin-modal .modal-content::before { top:12px; left:12px; border-top-width:2px; border-left-width:2px; }
#pin-modal .modal-content::after { bottom:12px; right:12px; border-bottom-width:2px; border-right-width:2px; }

.pin-header { margin-bottom: 2rem; }
.pin-header h1 { font-size: 2.2rem; margin-bottom: .6rem; }
.pin-header h2 {
    color:#8a8a8f; font-size:.82rem; font-weight:600;
    font-family: var(--font-secondary); letter-spacing:.24em; text-transform:uppercase;
}
.pin-container { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:2rem 0; padding:0 1rem; }
.pin-digit {
    width:2.6rem; height:3.1rem; padding:0;
    border:1px solid #33343a; border-radius:10px;
    background:#0e0f11; color:#e6e6e8;
    font-family: var(--font-tertiary); font-size:1.3rem; font-weight:700;
    text-align:center; transition: all .18s ease; caret-color: var(--accent);
}
.pin-digit:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.35); outline:none; }
.pin-digit.filled { border-color: var(--accent); background: rgba(var(--accent-rgb),.18); color:#fff; }
.error-message { color: var(--danger-color); margin-top:1rem; font-size:.875rem; font-family:var(--font-secondary); }
#pin-modal .modal-buttons { display:flex; justify-content:center; margin-top:2rem; }
#pin-modal .modal-buttons button.primary { padding:.8rem 2.2rem; min-width:140px; border-radius:12px; }

body:has(.login-container) { align-items: center; padding: 1rem; }

/* Login-Seite (login.html) — eigenes Markup, .login-container statt .modal */
.login-container {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: auto;
    text-align: center;
    padding: 3rem 2rem 2.6rem;
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    border: 1px solid #242528;
    border-radius: var(--radius);
    box-shadow: var(--shadow), 0 0 0 1px rgba(var(--accent-rgb),.16);
    z-index: 1;
}
.login-container::before,
.login-container::after {
    content:""; position:absolute; width:34px; height:34px; pointer-events:none;
    border-color: rgba(var(--accent-rgb),.62); border-style:solid; border-width:0;
}
.login-container::before { top:12px; left:12px; border-top-width:2px; border-left-width:2px; border-top-left-radius:8px; }
.login-container::after  { bottom:12px; right:12px; border-bottom-width:2px; border-right-width:2px; border-bottom-right-radius:8px; }

#pin-form {
    display:flex; flex-wrap:wrap; gap:.5rem;
    justify-content:center; margin:2rem 0 .5rem;
}

.pin-digit.locked { opacity:.5; cursor:not-allowed; border-color: var(--danger-color); }

/* Rename-Modal (nur aktiv wenn Dateiliste an ist) */
.rename-modal-content {
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    border:1px solid #242528; border-radius:16px; color:#e6e6e8;
}
.rename-input {
    background:#0e0f11; border:1px solid #33343a; color:#e6e6e8;
    border-radius:10px; padding:10px 12px; width:100%;
}
.rename-input:focus { border-color: var(--accent); outline:none; }

/* Fußzeile */
.snp-footer {
    margin-top: 34px;
    font-family: var(--font-secondary);
    font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:#5c5c61;
}
.snp-footer b { color: rgba(var(--accent-rgb),.85); font-weight:700; }

/* Toastify an die Palette angleichen */
.toastify {
    background: linear-gradient(135deg, #18191d, #1e1f23) !important;
    border: 1px solid rgba(var(--accent-rgb),.4) !important;
    border-radius: 12px !important;
    color:#e6e6e8 !important;
    font-family: var(--font-secondary) !important;
    box-shadow: var(--shadow) !important;
}

@media (max-width: 480px) {
    body { padding-top: 1.6rem; }
    .container { padding: 10px; }
    .upload-container { padding: 36px 14px; }
    .pin-digit { width:2.25rem; height:2.75rem; font-size:1.1rem; }
    .brand-sub { letter-spacing:.22em; font-size:.72rem; }
}