/* Espace admin — hérite des tokens de style.css */
body.admin-body{overflow-x:hidden}
body.admin-body::after{opacity:.2}

/* ---------- Login ---------- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem}
.auth-card{width:100%; max-width:420px; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:2.6rem; box-shadow:var(--shadow-lg)}
.auth-card .brand-row{display:flex; align-items:center; gap:.7rem; margin-bottom:1.6rem; justify-content:center}
.auth-card .brand-row img{height:40px}
.auth-card h1{font-size:1.4rem; text-align:center}
.auth-card p.sub{text-align:center; color:var(--ink-dim); font-size:.88rem; margin-top:.5rem; margin-bottom:1.8rem}
.auth-error{background:rgba(255,93,108,.12); border:1px solid rgba(255,93,108,.4); color:#ffb3ba; font-size:.84rem; padding:.7rem 1rem; border-radius:10px; margin-bottom:1rem; display:none}
.auth-error.show{display:block}
.auth-back{display:block; text-align:center; margin-top:1.4rem; font-size:.84rem; color:var(--ink-faint)}

/* ---------- App shell ---------- */
.admin-shell{display:grid; grid-template-columns:250px 1fr; min-height:100vh}
@media (max-width:900px){.admin-shell{grid-template-columns:1fr}}

.admin-sidebar{
  background:var(--navy-2); border-right:1px solid var(--line);
  padding:1.4rem 1rem; position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
}
@media (max-width:900px){
  .admin-sidebar{position:fixed; z-index:200; width:250px; transform:translateX(-100%); transition:transform .3s var(--ease); height:100vh}
  .admin-sidebar.open{transform:translateX(0)}
}
.admin-brand{display:flex; align-items:center; gap:.6rem; padding:.6rem .5rem 1.4rem}
.admin-brand img{height:32px}
.admin-brand span{font-family:'Space Grotesk'; font-weight:700; font-size:.92rem}
.admin-nav{display:flex; flex-direction:column; gap:.2rem; flex:1}
.admin-nav button{
  display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem; border-radius:10px; border:none;
  background:transparent; color:var(--ink-dim); font-size:.88rem; font-weight:500; text-align:left; transition:all .2s;
}
.admin-nav button svg{width:17px; height:17px; flex-shrink:0}
.admin-nav button:hover{background:rgba(255,255,255,.04); color:var(--ink)}
.admin-nav button.active{background:var(--grad-brand); color:#fff}
.admin-nav .badge{margin-left:auto; background:var(--danger); color:#fff; font-size:.68rem; padding:.1rem .45rem; border-radius:999px; font-weight:700}
.admin-user{border-top:1px solid var(--line); padding-top:1rem; margin-top:1rem}
.admin-user .who{display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem}
.admin-user .avatar{width:36px; height:36px; border-radius:50%; background:var(--grad-brand); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem}
.admin-user .who b{font-size:.82rem; display:block}
.admin-user .who span{font-size:.72rem; color:var(--ink-faint)}

.admin-main{padding:1.6rem clamp(1rem,3vw,2.4rem); max-width:1200px}
.admin-topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.8rem; gap:1rem}
.admin-topbar h2{font-size:1.5rem}
.admin-topbar p{color:var(--ink-dim); font-size:.9rem; margin-top:.2rem}
.mobile-menu-btn{display:none; background:var(--panel); border:1px solid var(--line-strong); border-radius:10px; width:40px; height:40px; align-items:center; justify-content:center}
@media (max-width:900px){.mobile-menu-btn{display:flex}}

.admin-view{display:none}
.admin-view.active{display:block; animation:page-in .4s var(--ease)}

/* Stat cards */
.stat-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:2rem}
.stat-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.4rem}
.stat-card .n{font-family:'Space Grotesk'; font-size:1.8rem; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat-card .l{font-size:.8rem; color:var(--ink-dim); margin-top:.3rem}

/* Table */
.admin-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; gap:1rem; flex-wrap:wrap}
.table-wrap{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; overflow-x:auto}
table.admin-table{width:100%; border-collapse:collapse; min-width:600px}
table.admin-table th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); padding:.9rem 1rem; border-bottom:1px solid var(--line); white-space:nowrap}
table.admin-table td{padding:.85rem 1rem; border-bottom:1px solid var(--line); font-size:.86rem; vertical-align:middle}
table.admin-table tr:last-child td{border-bottom:none}
table.admin-table tr:hover td{background:rgba(255,255,255,.015)}
.cell-thumb{width:44px; height:44px; border-radius:8px; object-fit:cover; background:var(--navy)}
.pill{display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:600; padding:.25rem .6rem; border-radius:999px}
.pill.on{background:rgba(47,209,136,.14); color:var(--success)}
.pill.off{background:rgba(255,93,108,.14); color:var(--danger)}
.row-actions{display:flex; gap:.4rem; justify-content:flex-end}
.icon-btn{width:32px; height:32px; border-radius:8px; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; background:transparent; transition:all .2s}
.icon-btn svg{width:15px; height:15px}
.icon-btn:hover{border-color:var(--cyan); color:var(--cyan)}
.icon-btn.del:hover{border-color:var(--danger); color:var(--danger)}

/* Modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(2,5,14,.72); backdrop-filter:blur(4px); z-index:300; display:none; align-items:center; justify-content:center; padding:1.4rem}
.modal-backdrop.show{display:flex}
.modal{background:var(--panel-2); border:1px solid var(--line-strong); border-radius:18px; width:100%; max-width:560px; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lg)}
.modal-header{display:flex; justify-content:space-between; align-items:center; padding:1.4rem 1.6rem; border-bottom:1px solid var(--line)}
.modal-header h3{font-size:1.1rem}
.modal-close{width:32px; height:32px; border-radius:8px; border:1px solid var(--line-strong); background:transparent; display:flex; align-items:center; justify-content:center}
.modal-body{padding:1.6rem}
.modal-footer{padding:1.2rem 1.6rem; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:.8rem}
.checkbox-row{display:flex; align-items:center; gap:.6rem; margin:.4rem 0 1rem}
.checkbox-row input{width:18px; height:18px}
.checkbox-row label{font-size:.88rem; color:var(--ink-dim)}

/* Messages list */
.msg-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.4rem; margin-bottom:.9rem; position:relative}
.msg-card.unread{border-color:var(--blue-bright)}
.msg-card.unread::before{content:""; position:absolute; top:1.2rem; left:-1px; width:3px; height:calc(100% - 2.4rem); background:var(--grad-brand); border-radius:0 3px 3px 0}
.msg-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap}
.msg-head b{font-size:.94rem}
.msg-head .meta{font-size:.76rem; color:var(--ink-faint); margin-top:.2rem}
.msg-body{margin-top:.7rem; color:var(--ink-dim); font-size:.88rem; line-height:1.6}
.msg-actions{display:flex; gap:.5rem; margin-top:.9rem}

/* Settings form */
.settings-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:700px){.settings-grid{grid-template-columns:1fr}}

.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}