:root{
    --bg:#f3f3f3;
    --panel:#ffffff;
    --text:#111111;
    --line:#d8d8d8;
    --black:#000000;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    background:var(--bg);
    color:var(--text);
    font:16px/1.45 Arial, Helvetica, sans-serif;
}
a{color:inherit}
.admin-layout{
    display:grid;
    grid-template-columns:220px 1fr;
    min-height:100vh;
}
.admin-sidebar{
    background:#000;
    color:#fff;
    padding:18px 14px;
}
.admin-brand{
    font-size:30px;
    font-weight:700;
    margin:4px 0 18px;
}
.admin-nav{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.admin-nav a{
    color:#fff;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.15);
    padding:14px 12px;
    display:block;
}
.admin-nav a.active,
.admin-nav a:hover{
    background:#fff;
    color:#000;
}
.admin-main{
    padding:28px;
}
.admin-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
}
.admin-user{
    font-weight:700;
}
h1{
    font-size:52px;
    line-height:1.05;
    margin:0 0 24px;
}
h2{
    font-size:28px;
    margin:0 0 16px;
}
.card{
    background:var(--panel);
    border:1px solid var(--line);
    padding:24px;
    margin-bottom:22px;
}
.notice{
    background:#fff;
    border:1px solid var(--line);
    padding:14px 16px;
    margin-bottom:20px;
}
.btn{
    display:inline-block;
    background:#000;
    color:#fff;
    text-decoration:none;
    border:1px solid #000;
    padding:14px 18px;
    cursor:pointer;
}
.btn--light{
    background:#fff;
    color:#000;
}
.actions{
    display:flex;
    gap:14px;
    align-items:center;
    flex-wrap:wrap;
}
.actions--right{
    justify-content:flex-end;
    margin-bottom:22px;
}
.admin-table{
    width:100%;
    border-collapse:collapse;
}
.admin-table th,
.admin-table td{
    text-align:left;
    padding:18px 14px;
    border-bottom:1px solid var(--line);
    vertical-align:middle;
}
.admin-table th{
    font-size:15px;
}
.sections-sortable .sortable-row{
    cursor:grab;
}
.sections-sortable .sortable-row.is-dragging{
    opacity:.55;
}
.drag-handle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border:1px solid #111;
    background:#fff;
    color:#111;
    cursor:grab;
    font-size:20px;
    line-height:1;
}
.drag-handle:hover{
    background:#111;
    color:#fff;
}
.form-group{
    margin-bottom:18px;
}
label{
    display:block;
    font-weight:700;
    margin:0 0 8px;
}
input[type=text],
input[type=password],
input[type=file],
input[type=color],
select,
textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid #111;
    background:#fff;
    color:#111;
    font:inherit;
}
textarea{
    min-height:160px;
}
.checkbox-row label{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:400;
}
.checkbox-row input[type=checkbox]{
    width:18px;
    height:18px;
    margin:0;
}
.color-row,
.range-row{
    display:flex;
    align-items:center;
    gap:12px;
}
.color-row input[type=color]{
    width:64px;
    min-width:64px;
    height:44px;
    padding:4px;
}
.color-text{
    max-width:140px;
}
.range-row input[type=range]{
    width:280px;
}
.upload-preview img{
    max-width:220px;
    height:auto;
    display:block;
    margin-bottom:12px;
    border:1px solid var(--line);
}
.hint{
    color:#666;
    margin-top:6px;
}
@media (max-width: 960px){
    .admin-layout{
        grid-template-columns:1fr;
    }
    .admin-sidebar{
        padding-bottom:10px;
    }
    .admin-main{
        padding:18px;
    }
    .admin-topbar{
        flex-direction:column;
        align-items:flex-start;
    }
    h1{
        font-size:38px;
    }
}