:root{
    --sn-bg:#f4f7fb;
    --sn-surface:#ffffff;
    --sn-surface-soft:#f9fbfe;
    --sn-border:#dbe3ef;
    --sn-border-strong:#ccd8ea;
    --sn-text:#1f2d3d;
    --sn-text-strong:#223a5e;
    --sn-text-muted:#6b7c93;
    --sn-primary:#223a5e;
    --sn-primary-text:#ffffff;
    --sn-success-bg:#edf9f0;
    --sn-success-border:#b8e0c1;
    --sn-success-text:#1d5f2e;
    --sn-error-bg:#fff0f0;
    --sn-error-border:#efc7c7;
    --sn-error-text:#8a2f2f;
    --sn-warning-bg:#fff8eb;
    --sn-warning-border:#f3ddb0;
    --sn-warning-text:#805b00;
    --sn-info-bg:#eef5ff;
    --sn-info-border:#c8daf9;
    --sn-info-text:#244d8a;
    --sn-badge-bg:#f7faff;
    --sn-badge-border:#d9e3f2;
    --sn-badge-text:#345079;
    --sn-shadow:0 8px 24px rgba(27,39,51,0.05);
    --sn-radius-card:18px;
    --sn-radius-control:10px;
    --sn-radius-pill:999px;
    --sn-page-width:1240px;
    --sn-font:Arial, Helvetica, sans-serif;
}

html[data-theme="dark"]{
    --sn-bg:#0f1722;
    --sn-surface:#182231;
    --sn-surface-soft:#1d2a3b;
    --sn-border:#2a3a50;
    --sn-border-strong:#3a4c66;
    --sn-text:#e5edf7;
    --sn-text-strong:#f2f7fd;
    --sn-text-muted:#a9b7ca;
    --sn-primary:#8fb4ff;
    --sn-primary-text:#0f1722;
    --sn-success-bg:#11281b;
    --sn-success-border:#24553a;
    --sn-success-text:#a9e1b9;
    --sn-error-bg:#31191c;
    --sn-error-border:#7a3238;
    --sn-error-text:#f3b3b7;
    --sn-warning-bg:#33270f;
    --sn-warning-border:#7f6530;
    --sn-warning-text:#efd59a;
    --sn-info-bg:#18273b;
    --sn-info-border:#35537f;
    --sn-info-text:#b8d3ff;
    --sn-badge-bg:#1c2a3d;
    --sn-badge-border:#395273;
    --sn-badge-text:#c6dbff;
    --sn-shadow:0 10px 28px rgba(0,0,0,0.28);
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}

body.sn-body{
    background:var(--sn-bg);
    color:var(--sn-text);
    font-family:var(--sn-font);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.sn-page{
    max-width:var(--sn-page-width);
    margin:0 auto;
    padding:32px 20px 60px 20px;
}

.sn-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:24px;
    flex-wrap:wrap;
}

.sn-page-title{
    margin:0;
    font-size:30px;
    line-height:36px;
    color:var(--sn-text-strong);
    font-weight:700;
}

.sn-page-subtitle{
    margin:0;
    font-size:14px;
    line-height:22px;
    color:var(--sn-text-muted);
}

.sn-section-title{
    margin:0;
    font-size:20px;
    line-height:26px;
    color:var(--sn-text-strong);
    font-weight:700;
}

.sn-spacer-sm{
    height:8px;
}

.sn-spacer-md{
    height:16px;
}

.sn-toplinks{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.sn-btn,
.sn-btn:link,
.sn-btn:visited,
button.sn-btn{
    display:inline-block;
    padding:12px 18px;
    border-radius:var(--sn-radius-control);
    border:1px solid var(--sn-border-strong);
    background:var(--sn-surface);
    color:var(--sn-text-strong);
    text-decoration:none;
    font-size:14px;
    line-height:18px;
    cursor:pointer;
    transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}

.sn-btn:hover,
button.sn-btn:hover{
    transform:translateY(-1px);
}

.sn-btn-primary,
button.sn-btn-primary{
    background:var(--sn-primary);
    border-color:var(--sn-primary);
    color:var(--sn-primary-text);
}

.sn-btn-danger,
button.sn-btn-danger{
    background:#9b2c2c;
    border-color:#9b2c2c;
    color:#ffffff;
}

html[data-theme="dark"] .sn-btn-danger,
html[data-theme="dark"] button.sn-btn-danger{
    background:#c45757;
    border-color:#c45757;
    color:#0f1722;
}

.sn-card{
    background:var(--sn-surface);
    border:1px solid var(--sn-border);
    border-radius:var(--sn-radius-card);
    padding:24px;
    box-shadow:var(--sn-shadow);
    margin-bottom:20px;
}

.sn-alert{
    border-radius:12px;
    padding:16px 18px;
    margin-bottom:18px;
    font-size:14px;
    line-height:21px;
}

.sn-alert-success{
    background:var(--sn-success-bg);
    border:1px solid var(--sn-success-border);
    color:var(--sn-success-text);
}

.sn-alert-error{
    background:var(--sn-error-bg);
    border:1px solid var(--sn-error-border);
    color:var(--sn-error-text);
}

.sn-alert-warning{
    background:var(--sn-warning-bg);
    border:1px solid var(--sn-warning-border);
    color:var(--sn-warning-text);
}

.sn-alert-info{
    background:var(--sn-info-bg);
    border:1px solid var(--sn-info-border);
    color:var(--sn-info-text);
}

.sn-meta-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:14px;
}

.sn-meta-item{
    background:var(--sn-surface-soft);
    border:1px solid var(--sn-border);
    border-radius:12px;
    padding:14px 16px;
}

.sn-meta-label{
    font-size:12px;
    line-height:16px;
    color:var(--sn-text-muted);
    margin-bottom:6px;
}

.sn-meta-value{
    font-size:15px;
    line-height:20px;
    color:var(--sn-text-strong);
    font-weight:700;
}

.sn-badge{
    display:inline-block;
    padding:5px 10px;
    border-radius:var(--sn-radius-pill);
    border:1px solid var(--sn-badge-border);
    background:var(--sn-badge-bg);
    color:var(--sn-badge-text);
    font-size:12px;
    line-height:16px;
    white-space:nowrap;
}

.sn-form-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px 20px;
}

.sn-filter-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:18px 20px;
}

.sn-field{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.sn-field-full{
    grid-column:1 / -1;
}

.sn-label{
    font-size:13px;
    line-height:18px;
    color:var(--sn-text-muted);
    font-weight:700;
}

.sn-input,
.sn-select,
.sn-textarea{
    width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    border:1px solid var(--sn-border-strong);
    border-radius:var(--sn-radius-control);
    font-size:14px;
    line-height:18px;
    background:var(--sn-surface);
    color:var(--sn-text);
    font-family:var(--sn-font);
}

.sn-textarea{
    min-height:120px;
    resize:vertical;
}

.sn-checkbox-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding-top:30px;
}

.sn-checkbox-row input{
    width:auto;
    margin:0;
}

.sn-checkbox-row label{
    margin:0;
    font-weight:400;
    color:var(--sn-text);
    font-size:14px;
    line-height:18px;
}

.sn-helper{
    margin-top:8px;
    font-size:12px;
    line-height:18px;
    color:var(--sn-text-muted);
}

.sn-submit-row{
    margin-top:24px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.sn-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.sn-muted{
    color:var(--sn-text-muted);
    font-size:13px;
    line-height:18px;
}

.sn-table-wrap{
    overflow-x:auto;
}

.sn-table{
    width:100%;
    border-collapse:collapse;
    min-width:980px;
}

.sn-table th,
.sn-table td{
    padding:12px 14px;
    border-bottom:1px solid var(--sn-border);
    text-align:left;
    font-size:14px;
    line-height:20px;
    vertical-align:top;
}

.sn-table th{
    color:var(--sn-text-muted);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.04em;
    background:var(--sn-surface-soft);
}

.sn-pagination{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-top:18px;
}

.sn-stack{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.sn-inline-break{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--sn-border);
    font-size:14px;
    line-height:22px;
}

@media (max-width: 960px){
    .sn-filter-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px){
    .sn-form-grid{
        grid-template-columns:1fr;
    }
    .sn-checkbox-row{
        padding-top:0;
    }
}

@media (max-width: 680px){
    .sn-page{
        padding:24px 14px 42px 14px;
    }
    .sn-page-title{
        font-size:26px;
        line-height:32px;
    }
    .sn-filter-grid{
        grid-template-columns:1fr;
    }
    .sn-checkbox-row{
        padding-top:0;
    }
    .sn-btn,
    .sn-btn:link,
    .sn-btn:visited,
    button.sn-btn{
        width:100%;
        text-align:center;
    }
    .sn-toplinks,
    .sn-submit-row,
    .sn-actions{
        width:100%;
    }
}