* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

:root {
--bg: #08090d;
--card: rgba(20, 22, 30, 0.78);
--border: rgba(255, 255, 255, 0.09);
--text: #f5f7ff;
--muted: #8d93a5;
--accent: #7c5cff;
--accent2: #5b8cff;
}

body {
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;


background:
    radial-gradient(
        circle at 20% 10%,
        rgba(124, 92, 255, 0.16),
        transparent 30%
    ),
    radial-gradient(
        circle at 80% 20%,
        rgba(91, 140, 255, 0.12),
        transparent 30%
    ),
    var(--bg);

color: var(--text);

min-height: 100vh;

overflow-x: hidden;


}

/* =========================
BACKGROUND GLOW
========================= */

body::before {
content: "";


position: fixed;

width: 500px;
height: 500px;

border-radius: 50%;

background: rgba(124, 92, 255, 0.08);

filter: blur(100px);

top: 30%;
left: 50%;

transform: translate(-50%, -50%);

pointer-events: none;


}

/* =========================
CONTAINER
========================= */

.container {
position: relative;


z-index: 1;

width: 90%;
max-width: 850px;

margin: auto;

padding: 70px 0 40px;


}

/* =========================
TITRE
========================= */

h1 {
font-size: clamp(38px, 7vw, 64px);


text-align: center;

font-weight: 800;

letter-spacing: -2px;

background:
    linear-gradient(
        135deg,
        #ffffff,
        #a9b7ff
    );

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

margin-bottom: 10px;


}

.subtitle {
text-align: center;


color: var(--muted);

font-size: 15px;

margin-bottom: 35px;


}

/* =========================
SEARCH
========================= */

.search-box {
display: flex;


align-items: center;

gap: 10px;

width: 100%;

margin-bottom: 25px;

padding: 14px 17px;

background: var(--card);

border: 1px solid var(--border);

border-radius: 14px;

backdrop-filter: blur(15px);

-webkit-backdrop-filter: blur(15px);

transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;


}

.search-box:focus-within {
border-color: rgba(124, 92, 255, 0.5);


box-shadow:
    0 0 25px rgba(124, 92, 255, 0.08);


}

.search-box span {
font-size: 18px;
}

.search-box input {
width: 100%;


border: none;

outline: none;

background: transparent;

color: white;

font-size: 15px;


}

.search-box input::placeholder {
color: #777d8e;
}

/* =========================
FILES
========================= */

.files {
display: flex;


flex-direction: column;

gap: 16px;


}

/* =========================
FILE CARD
========================= */

.file {
position: relative;


display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

padding: 20px;

background: var(--card);

border: 1px solid var(--border);

border-radius: 18px;

backdrop-filter: blur(15px);

-webkit-backdrop-filter: blur(15px);

box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.25),
    inset 0 1px rgba(255, 255, 255, 0.03);

transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;


}

.file:hover {
transform: translateY(-4px);


border-color:
    rgba(124, 92, 255, 0.45);

box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(124, 92, 255, 0.08);


}

/* =========================
FILE INFO
========================= */

.file-info {
display: flex;


align-items: center;

gap: 15px;

min-width: 0;


}

.icon {
width: 52px;
height: 52px;


flex-shrink: 0;

display: flex;

align-items: center;
justify-content: center;

border-radius: 14px;

background:
    linear-gradient(
        135deg,
        rgba(124, 92, 255, 0.22),
        rgba(91, 140, 255, 0.14)
    );

border:
    1px solid rgba(124, 92, 255, 0.2);

font-size: 25px;


}

h2 {
font-size: 17px;


font-weight: 650;

margin-bottom: 5px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;


}

.file p {
color: var(--muted);


font-size: 13px;


}

/* =========================
DOWNLOAD BUTTON
========================= */

.download {
display: inline-flex;


align-items: center;

justify-content: center;

flex-shrink: 0;

padding: 11px 18px;

border-radius: 10px;

color: white;

text-decoration: none;

font-size: 14px;

font-weight: 650;

background:
    linear-gradient(
        135deg,
        var(--accent),
        var(--accent2)
    );

box-shadow:
    0 8px 20px rgba(92, 82, 255, 0.22);

transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;


}

.download::before {
content: "↓";


margin-right: 7px;

font-size: 17px;


}

.download:hover {
transform:
translateY(-2px)
scale(1.02);


filter: brightness(1.1);

box-shadow:
    0 10px 25px rgba(92, 82, 255, 0.35);


}

.download:active {
transform: scale(0.97);
}

/* =========================
FOOTER
========================= */

footer {
text-align: center;


color: #555b6d;

margin-top: 50px;

font-size: 12px;


}

/* =========================
MOBILE
========================= */

@media (max-width: 650px) {


.container {
    padding: 40px 0 30px;
}

h1 {
    font-size: 36px;

    letter-spacing: -1px;
}

.file {
    padding: 17px;

    flex-direction: column;

    align-items: stretch;
}

.download {
    width: 100%;

    text-align: center;
}

.file-info {
    gap: 12px;
}

.icon {
    width: 46px;
    height: 46px;

    font-size: 21px;
}

h2 {
    font-size: 15px;
}

.file p {
    font-size: 12px;
}