:root{
    --bg:#07030f;
    --panel:rgba(24,14,44,.88);
    --panel2:rgba(47,24,82,.72);
    --violet:#8b5cf6;
    --violet2:#c084fc;
    --text:#f7f2ff;
    --muted:#bca7df;
    --danger:#ff6b8b;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 15% 0%, rgba(139,92,246,.28), transparent 35%),
        radial-gradient(circle at 90% 100%, rgba(192,132,252,.18), transparent 40%),
        linear-gradient(135deg,#040208,#12091f 55%,#070510);
    min-height:100vh;
}
.login-page{display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{
    width:100%;max-width:430px;padding:36px;
    border:1px solid rgba(192,132,252,.35);
    background:linear-gradient(180deg,rgba(30,18,54,.9),rgba(8,5,17,.95));
    border-radius:26px;box-shadow:0 0 70px rgba(139,92,246,.24);
}
.login-sigil{font-size:42px;color:var(--violet2);margin-bottom:12px}
.login-card h1{margin:0 0 8px;font-size:32px}
.login-card p{margin:0 0 26px;color:var(--muted)}
input{
    width:100%;margin:0 0 14px;padding:14px 16px;
    border-radius:14px;border:1px solid rgba(192,132,252,.28);
    background:rgba(255,255,255,.06);color:var(--text);
}
button{
    width:100%;padding:14px 16px;border:0;border-radius:14px;
    background:linear-gradient(135deg,var(--violet),var(--violet2));
    color:white;font-weight:700;cursor:pointer;
}
.error{padding:12px;border-radius:12px;margin-bottom:16px;background:rgba(255,107,139,.14);color:#ffd1dc}
.app-shell{display:flex;min-height:100vh}
.sidebar{
    width:280px;padding:26px 20px;background:rgba(5,3,12,.75);
    border-right:1px solid rgba(192,132,252,.18);
}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.sigil{
    width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
    background:rgba(139,92,246,.18);color:var(--violet2);border:1px solid rgba(192,132,252,.25)
}
.sidebar h1{margin:0;font-size:27px}
.sidebar p{color:var(--muted);margin:4px 0 0}
.sidebar a{
    display:block;padding:12px 14px;margin:8px 0;border-radius:12px;
    color:var(--text);text-decoration:none;background:rgba(255,255,255,.045);
}
.sidebar a:hover{background:rgba(139,92,246,.28)}
.content{flex:1;padding:34px}
.hero{
    padding:28px;border-radius:24px;
    background:linear-gradient(135deg,var(--panel),var(--panel2));
    border:1px solid rgba(192,132,252,.22);margin-bottom:24px;
}
.hero h2{margin:0 0 10px;font-size:30px}
.hero p{margin:0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{
    padding:22px;border-radius:20px;background:rgba(255,255,255,.055);
    border:1px solid rgba(192,132,252,.16);
}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--muted)}
@media(max-width:800px){
    .app-shell{display:block}
    .sidebar{width:auto}
    .content{padding:20px}
}

.btn-link{
    display:inline-block;
    padding:10px 13px;
    border-radius:12px;
    color:white;
    text-decoration:none;
    background:linear-gradient(135deg,var(--violet),var(--violet2));
    font-weight:700;
}
.notice{
    padding:14px 16px;
    border-radius:16px;
    margin-bottom:20px;
    background:rgba(34,197,94,.15);
    border:1px solid rgba(34,197,94,.35);
    color:#d1fae5;
}
.form-panel{
    padding:24px;
    border-radius:24px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(192,132,252,.16);
}
.form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
}
label{
    display:block;
    color:var(--muted);
    font-weight:700;
    margin-bottom:14px;
}
textarea{
    width:100%;
    min-height:110px;
    margin-top:8px;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid rgba(192,132,252,.28);
    background:rgba(255,255,255,.06);
    color:var(--text);
    resize:vertical;
}
label input{
    margin-top:8px;
}

.tabs{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:20px;
}
.tab{
    padding:11px 14px;
    border-radius:14px;
    color:var(--text);
    text-decoration:none;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(192,132,252,.14);
}
.tab.active{
    background:linear-gradient(135deg,var(--violet),var(--violet2));
    font-weight:700;
}
.image-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:18px;
    margin-top:20px;
}
.image-card{
    padding:12px;
    border-radius:18px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(192,132,252,.16);
}
.image-card img{
    width:100%;
    border-radius:14px;
    display:block;
}
.image-card p{
    margin:10px 0 4px;
    font-weight:700;
}
.image-card small{
    color:var(--muted);
}

select{
    width:100%;
    margin-top:8px;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid rgba(192,132,252,.28);
    background:rgba(255,255,255,.06);
    color:var(--text);
}
select option{
    background:#140b24;
    color:#fff;
}

.empty-preview{
    min-height:160px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.045);
    border:1px dashed rgba(192,132,252,.25);
    color:var(--muted);
    margin-bottom:12px;
}
.image-card form{
    margin-top:12px;
}
.image-card input[type=file]{
    margin:8px 0 12px;
}
.image-card button{
    margin-top:8px;
}