* {
    box-sizing:border-box
}

body {
    margin:0;
    background:#eef2f7;
    color:#111827;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif
}

.admin-login {
    width:min(420px,calc(100% - 32px));
    margin:12vh auto;
    background:white;
    padding:30px;
    border-radius:26px;
    box-shadow:0 24px 70px rgba(15,23,42,.12)
}

.admin-login h1 {
    margin:0 0 8px
}

.admin-login p {
    color:#64748b
}

.admin-login form {
    display:grid;
    gap:12px
}

.admin-login input {
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:13px
}

.admin-login button {
    border:0;
    border-radius:14px;
    padding:13px;
    background:#2563eb;
    color:white;
    font-weight:800
}

.admin {
    min-height:100vh;
    display:grid;
    grid-template-columns:auto 1fr
}

aside {
    background:#0f172a;
    color:white;
    padding:22px;
    position:sticky;
    top:0;
    height:100vh
}

aside h2 { margin:0 0 20px }

aside a {
    display:block;
    color:#cbd5e1;
    text-decoration:none;
    padding:12px 14px;
    border-radius:14px;
    margin:4px 0
}

aside a:hover {
    background:#1e293b;
    color:white
}

main {
    padding:24px
}

header {
    height:64px;
    background:white;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    box-shadow:0 12px 34px rgba(15,23,42,.06);
    margin-bottom:18px
}

.stats {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-bottom:18px
}

.stats div,.card {
    background:white;
    border-radius:22px;
    padding:20px;
    box-shadow:0 12px 34px rgba(15,23,42,.06)
}

.stats b {
    display:block;
    font-size:30px
}

.stats span {
    color:#64748b
}

.table {
    display:grid;
    gap:8px
}

.table p {
    display:grid;
    grid-template-columns:80px 1fr 120px 160px;
    gap:10px;
    margin:0;
    padding:13px;
    border-radius:14px;
    background:#f8fafc
}

@media(max-width:800px) {
    .admin {
        grid-template-columns:1fr
    }

    .stats {
        grid-template-columns:1fr 1fr
    }

    .table p {
        grid-template-columns:1fr
    }

}

.admin-form {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px
}

.admin-form input,.admin-form textarea,.ticket textarea {
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px;
    font:inherit
}

.admin-form textarea {
    grid-column:1/-1;
    min-height:90px
}

.admin-form button,.ticket button,.table button {
    border:0;
    border-radius:12px;
    padding:10px 14px;
    background:#2563eb;
    color:white;
    font-weight:800
}

.cols4 p {
    grid-template-columns:80px 1fr 120px 120px
}

.cols5 p {
    grid-template-columns:70px 100px 1fr 150px 160px
}

.cols6 p {
    grid-template-columns:60px 1fr 80px 100px 100px 120px
}

.ticket-list {
    display:grid;
    gap:14px
}

.ticket {
    background:#f8fafc;
    border-radius:18px;
    padding:16px
}

.ticket p {
    white-space:pre-wrap
}

.ticket small {
    display:block;
    color:#64748b;
    margin:8px 0
}

.ticket form {
    display:grid;
    gap:10px;
    margin-top:10px
}

.ticket textarea {
    min-height:76px
}

@media(max-width:900px) {
    .admin-form {
        grid-template-columns:1fr
    }

    .cols4 p,.cols5 p,.cols6 p {
        grid-template-columns:1fr
    }

}

.toolbar {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:16px
}

.toolbar a {
    background:white;
    border-radius:14px;
    padding:12px 16px;
    text-decoration:none;
    color:#0f172a;
    font-weight:800;
    box-shadow:0 12px 34px rgba(15,23,42,.06)
}

.cols6 p {
    grid-template-columns:60px 1fr 80px 1fr 100px 100px
}

.cols3 p {
    grid-template-columns:80px 1fr 160px
}

.cols2 p {
    grid-template-columns:120px 1fr
}

.admin-link {
    display:inline-flex;
    margin-top:14px;
    border-radius:14px;
    padding:12px 16px;
    background:#2563eb;
    color:white;
    text-decoration:none;
    font-weight:800
}

.inline-actions {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center
}

.inline-actions form {
    display:inline;
    margin:0
}

.check-grid {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px
}

.check-row {
    background:#f8fafc;
    border-radius:12px;
    padding:10px
}

.check-row small {
    display:block;
    color:#64748b;
    margin-left:22px
}

.admin-form select,.ticket select {
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px;
    font:inherit;
    background:white
}

.cols7 p {
    grid-template-columns:60px 1fr 80px 1fr 80px 100px 180px
}

@media(max-width:900px) {
    .check-grid {
        grid-template-columns:1fr
    }

    .cols7 p {
        grid-template-columns:1fr
    }

}

.admin-search {
    display:flex;
    gap:10px;
    align-items:center;
    margin:12px 0;
    flex-wrap:wrap
}

.admin-search input {
    max-width:320px
}

.admin-search a,.pager a {
    color:#2563eb;
    text-decoration:none
}

.pager {
    display:flex;
    gap:12px;
    align-items:center;
    margin-top:14px;
    color:#64748b;
    font-size:13px;
    flex-wrap:wrap
}

.pager a {
    padding:7px 10px;
    border:1px solid #dbeafe;
    border-radius:10px;
    background:#eff6ff
}

.export-link {
    display:inline-flex;
    margin:8px 0 10px;
    padding:8px 12px;
    border-radius:10px;
    background:#ecfdf5;
    color:#047857;
    text-decoration:none;
    font-size:13px;
    border:1px solid #bbf7d0
}

.batch-form {
    margin-top:10px
}

.batch-form>button {
    margin-bottom:12px;
    background:#fee2e2;
    color:#991b1b;
    border:1px solid #fecaca
}

/* production polish */
body {
    background:linear-gradient(135deg,#eef2ff 0%,#f8fafc 45%,#e0f2fe 100%)
}

header,.card,.stats div,.admin-login {
    border:1px solid rgba(148,163,184,.18);
    box-shadow:0 18px 45px rgba(15,23,42,.08)
}

.stats b {
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    -webkit-background-clip:text;
    color:transparent
}

.admin-form input,.admin-form textarea,.admin-form select,.admin-search input,.admin-search select,.ticket textarea,.ticket select {
    transition:.18s ease
}

.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus,
.admin-search input:focus,
.admin-search select:focus,
.ticket textarea:focus,
.ticket select:focus {
    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.10)
}

button,.admin-form button,.ticket button,.table button {
    cursor:pointer;
    transition:.18s ease
}

button:hover,.admin-form button:hover,.ticket button:hover,.table button:hover {
    filter:brightness(.96);
    transform:translateY(-1px)
}

.table p {
    border:1px solid rgba(148,163,184,.12)
}

.toolbar a:hover,.export-link:hover,.pager a:hover {
    transform:translateY(-1px);
    box-shadow:0 12px 28px rgba(15,23,42,.08)
}

header a {
    color:#2563eb;
    text-decoration:none;
    font-weight:800
}

header {
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(14px)
}

header b {
    font-size:20px
}

.card {
    position:relative;
    overflow:hidden
}

.card:before {
    content:"";
    position:absolute;
    right:-42px;
    top:-42px;
    width:120px;
    height:120px;
    border-radius:50%;
    background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(124,58,237,.05));
    pointer-events:none
}

.stats div {
    position:relative;
    overflow:hidden
}

.stats div:after {
    content:"";
    position:absolute;
    right:-18px;
    bottom:-22px;
    width:76px;
    height:76px;
    border-radius:24px;
    background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(124,58,237,.10));
    transform:rotate(18deg)
}

.table p:first-child {
    background:#0f172a;
    color:white
}

.table p:not(:first-child):hover {
    background:#eef6ff
}

.admin-login {
    background:linear-gradient(180deg,#fff,#f8fafc);
    border-top:5px solid #2563eb
}

.admin-login h1:before {
    content:"🔐 ";

}

.toolbar a {
    border:1px solid rgba(148,163,184,.16)
}

.export-link:before {
    content:"⬇ ";

}

.batch-form>button:before {
    content:"⚠ ";

}

.admin-form button:before {
    content:"✓ ";

}

.ticket {
    border:1px solid rgba(148,163,184,.18);
    box-shadow:0 10px 30px rgba(15,23,42,.04)
}