:root  {
    color-scheme:dark;
    --bg:#0b0b12;
    --surface:#151420;
    --border:#302c43;
    --text:#f4f1fc;
    --muted:#a09bb4;
    --purple:#a58aff;
    --cyan:#76dff1
}
*  {
    box-sizing:border-box
}
body  {
    margin:0;
    background:radial-gradient(ellipse at 65% 0,#281b42,transparent 42%),var(--bg);
    color:var(--text);
    font:15px/1.5 Inter,system-ui,sans-serif;
    display:grid;
    grid-template-columns:235px 1fr;
    min-height:100vh
}
aside  {
    background:#0d0c14;
    border-right:1px solid var(--border);
    padding:24px 16px;
    position:sticky;
    top:0;
    height:100vh
}
.brand  {
    font-weight:900;
    letter-spacing:.12em;
    padding:0 8px 35px
}
.brand small  {
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-top:4px
}
nav  {
    display:grid;
    gap:6px
}
nav a  {
    color:var(--muted);
    text-decoration:none;
    padding:12px;
    border-radius:9px;
    font-size:13px
}
nav a:hover  {
    background:#28203b;
    color:white
}
.foot  {
    position:absolute;
    bottom:12px;
    color:#83dfb0;
    font-size:11px
}
main  {
    padding:30px clamp(18px,4vw,55px);
    min-width:0
}
header,.row  {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px
}
header  {
    border-bottom:1px solid var(--border);
    padding-bottom:24px;
    margin-bottom:26px
}
small  {
    color:var(--purple);
    font-size:10px;
    letter-spacing:.13em;
    font-weight:800
}
h1  {
    font-size:30px;
    margin:5px 0
}
h2  {
    font-size:25px;
    margin:6px 0
}
h3  {
    margin:0 0 8px
}
.muted  {
    color:var(--muted);
    font-size:12px
}
.hero h2  {
    font-size:clamp(38px,5vw,62px);
    line-height:1.06;
    margin:25px 0
}
.hero em  {
    font-style:normal;
    color:var(--purple)
}
.hero p  {
    max-width:430px;
    color:var(--muted)
}
.pill  {
    display:inline-block;
    border:1px solid var(--border);
    border-radius:99px;
    padding:7px 12px
}
.card  {
    background:linear-gradient(145deg,#191724,#11111a);
    border:1px solid var(--border);
    border-radius:15px;
    padding:22px;
    margin:16px 0
}
.tabs  {
    display:flex;
    background:#0d0c14;
    padding:4px;
    border-radius:9px;
    margin-bottom:22px
}
.tabs button  {
    flex:1
}
.tabs .selected  {
    background:#2b2141;
    color:#eee4ff
}
button,input,select  {
    font:inherit
}
button  {
    cursor:pointer;
    border-radius:9px;
    padding:10px 13px;
    border:1px solid var(--border);
    background:#191724;
    color:var(--text);
    font-size:12px
}
.primary  {
    background:linear-gradient(135deg,#b6a2ff,#805ee3);
    border-color:transparent;
    color:#171022;
    font-weight:800
}
.primary:hover  {
    filter:brightness(1.08)
}
label  {
    display:grid;
    gap:7px;
    margin:15px 0;
    font-size:12px
}
input,select  {
    background:#0b0b12;
    color:var(--text);
    border:1px solid #39344e;
    border-radius:8px;
    padding:12px;
    width:100%;
    min-width:0
}
input:focus,select:focus  {
    outline:2px solid #9876fa
}
form .primary  {
    width:100%;
    margin:8px 0
}
.auth  {
    display:grid
}
#auth  {
    display:grid;
    grid-template-columns:1fr minmax(300px,400px);
    gap:clamp(25px,6vw,80px);
    align-items:center;
    max-width:1100px;
    margin:40px auto 80px
}
.spaces  {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:14px;
    margin:20px 0
}
.space  {
    padding:20px;
    text-align:left;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    color:var(--text)
}
.space:hover  {
    border-color:var(--purple);
    transform:translateY(-1px)
}
.stats  {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px
}
.stats b  {
    display:block;
    font-size:25px;
    margin-top:10px
}
.tablewrap  {
    overflow:auto
}
table  {
    width:100%;
    border-collapse:collapse;
    min-width:480px
}
th,td  {
    text-align:left;
    padding:13px 10px;
    border-bottom:1px solid var(--border);
    font-size:12px
}
th  {
    color:var(--muted)
}
footer  {
    border-top:1px solid var(--border);
    padding-top:20px;
    margin-top:50px;
    color:var(--muted);
    font-size:11px;
    display:flex;
    justify-content:space-between;
    gap:10px
}
dialog  {
    width:min(460px,calc(100% - 24px));
    background:#171522;
    color:var(--text);
    border:1px solid var(--border);
    border-radius:15px;
    padding:24px
}
dialog::backdrop  {
    background:#05050acc;
    backdrop-filter:blur(4px)
}
[hidden]  {
    display:none!important
}
#notice  {
    background:#2a203e;
    border:1px solid #59447e;
    padding:12px;
    border-radius:9px;
    margin-bottom:18px;
    font-size:13px
}
#notice.error  {
    background:#30181e;
    border-color:#783844
}
@media(max-width:800px)  {
    body  {
        grid-template-columns:1fr
    }
    aside  {
        position:relative;
        height:auto;
        padding:15px;
        border:0;
        border-bottom:1px solid var(--border)
    }
    .brand  {
        padding:0 5px 12px
    }
    nav  {
        display:flex;
        overflow:auto
    }
    nav a  {
        white-space:nowrap
    }
    .foot  {
        display:none
    }
    main  {
        padding:20px 14px
    }
    #auth  {
        grid-template-columns:1fr;
        margin:20px auto 45px;
        gap:22px
    }
    .hero h2  {
        font-size:43px
    }
    .row  {
        flex-wrap:wrap;
        align-items:flex-start
    }
    footer  {
        flex-direction:column
    }
    .stats  {
        grid-template-columns:1fr
    }
}
@media(prefers-reduced-motion:reduce)  {
    *  {
        scroll-behavior:auto!important;
        transition:none!important
    }
}

.header-actions{display:flex;align-items:center;gap:12px}.secondary{background:#191724;border:1px solid var(--border);color:var(--text)}#admin-area form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;align-items:end}#admin-area form label{margin:8px 0}#admin-area form button{min-height:42px}@media(max-width:600px){.header-actions{align-items:flex-end;flex-direction:column;gap:6px}}

/* Tri des commandes */
.order-sort-controls{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;margin:14px 0 16px;padding:12px;border:1px solid var(--border);border-radius:12px;background:rgba(10,9,18,.35)}
.order-sort-controls label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:12px;font-weight:600;min-width:190px}
.order-sort-controls select{min-height:40px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font:inherit}
.order-sort-controls button{min-height:40px;padding:8px 13px;border:1px solid var(--border);border-radius:8px;color:var(--text);background:var(--surface);cursor:pointer}
.order-sort-controls button:hover{border-color:var(--purple)}
@media(max-width:700px){.order-sort-controls{align-items:stretch;flex-direction:column}.order-sort-controls label{min-width:0;width:100%}.order-sort-controls button{width:100%}}

/* Page de connexion : masquer la navigation latérale jusqu'à l'authentification */
body.auth-page {
 display:block;
}
body.auth-page > aside {
 display:none;
}
body.auth-page > main {
 min-height:100vh;
}

button.danger {
 background:#3a1825;
 border:1px solid #8f334f;
 color:#ffdce5;
 border-radius:8px;
 padding:8px 12px;
 cursor:pointer;
}
button.danger:hover { background:#552033; border-color:#d75b7b; }
#admin-workspaces { margin:12px 0 24px; }
#admin-workspaces table { width:100%; border-collapse:collapse; }
#admin-workspaces th,#admin-workspaces td { padding:10px 8px; border-bottom:1px solid var(--border); text-align:left; }

#admin-users table { width:100%; border-collapse:collapse; }
#admin-users th,#admin-users td { padding:10px 8px; border-bottom:1px solid var(--border); text-align:left; }