/* Helvetic Visuals — identité "studio" : fond encre profonde, accent rouge
   suisse utilisé avec parcimonie comme signature (transformation photo),
   Space Grotesk pour les titres (précision géométrique), Inter pour le
   texte courant (cohérence avec les autres outils internes). */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
    --ink: #12161c;
    --panel: #1a1f27;
    --panel-raised: #212734;
    --border: #2a303c;
    --text: #edeff2;
    --muted: #8b93a3;
    --accent: #e0393e;
    --accent-hover: #c92e33;
    --success: #3fb68b;
    --warning: #d9a441;
    --error: #e0393e;
    --radius: 6px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.5;
}

h1, h2, h3, .brand {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

a { color: inherit; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    border-bottom: 1px solid var(--border);
}

.brand {
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
    color: var(--text);
}
.brand span { color: var(--accent); }

.topnav {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
}
.topnav a {
    text-decoration: none;
    color: var(--muted);
    transition: color .15s;
}
.topnav a:hover { color: var(--text); }
.topnav-user {
    color: var(--muted);
    padding-right: 4px;
    border-right: 1px solid var(--border);
    margin-right: 4px;
}

.page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 32px 80px;
}

.flash-stack { margin-bottom: 24px; display: flex; flex-direction: column; gap: 8px; }
.flash {
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 14px;
    border: 1px solid transparent;
}
.flash-error { background: rgba(224,57,62,0.1); border-color: var(--error); color: #f4a5a8; }
.flash-success { background: rgba(63,182,139,0.1); border-color: var(--success); color: #8fdcc2; }
.flash-warning { background: rgba(217,164,65,0.1); border-color: var(--warning); color: #f0c988; }

/* --- Login --- */
.login-shell {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px;
    position: relative;
    overflow: hidden;
}
.login-card::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 60px; height: 60px;
    background: linear-gradient(135deg, transparent 50%, var(--accent) 50%);
    opacity: .8;
}
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-card p.sub { color: var(--muted); font-size: 14px; margin: 0 0 28px; }

.field { margin-bottom: 18px; }
.field label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px;
}
.field input, .field textarea, .field select {
    width: 100%;
    background: var(--panel-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
}
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: var(--accent);
}
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.field-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted); }
.field-checkbox input { width: auto; }

.btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}
.btn:hover { background: var(--accent-hover); }
.btn-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}
.btn-secondary:hover { border-color: var(--muted); background: var(--panel-raised); }
.btn-block { width: 100%; text-align: center; }

/* --- Dashboard --- */
.quota-banner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin-bottom: 28px;
}
.quota-banner .num { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 700; }
.quota-banner .label { color: var(--muted); font-size: 13px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}
.panel h2 { font-size: 16px; margin: 0 0 20px; }

.history-item {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.history-item:last-child { border-bottom: none; }
.history-item img {
    width: 64px; height: 64px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.history-item .thumb-placeholder {
    width: 64px; height: 64px;
    border-radius: 4px;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--muted);
    text-align: center;
}
.history-meta { flex: 1; min-width: 0; }
.history-meta p { margin: 0 0 4px; font-size: 13px; }
.history-meta .desc { color: var(--text); }
.history-meta .date { color: var(--muted); font-size: 12px; }
.status-tag {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}
.status-success { background: rgba(63,182,139,0.15); color: var(--success); }
.status-error { background: rgba(224,57,62,0.15); color: var(--error); }
.status-pending { background: rgba(217,164,65,0.15); color: var(--warning); }

/* --- Admin --- */
table.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.admin-table th, table.admin-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
table.admin-table th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--panel-raised); border: 1px solid var(--border); }
.badge-off { color: var(--error); border-color: var(--error); }
.badge-admin { color: var(--accent); border-color: var(--accent); }

details.user-edit summary { cursor: pointer; color: var(--muted); font-size: 12px; }
details.user-edit { margin-top: 6px; }
.inline-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; margin-top: 10px; }