@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
    --ink:#1a293d;
    --muted:#7b8798;
    --line:#e9edf3;
    --paper:#fff;
    --canvas:#f8fafc;
    --blue:#315de9;
    --blue-soft:#eef2ff;
    --shadow:0 12px 40px rgba(22,39,66,.055);
    --radius:18px;
    --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif
}

*,*:before,*:after {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%
}

body {
    margin:0;
    color:var(--ink);
    background:var(--canvas);
    font:15px/1.55 var(--font);
    -webkit-font-smoothing:antialiased
}

a {
    text-decoration:none;
    color:inherit
}

button,input,select,textarea {
    font:inherit
}

button {
    cursor:pointer
}

img {
    max-width:100%;
    display:block
}

input,textarea,select {
    min-width:0
}

h1,h2,h3,h4,p {
    margin-top:0
}

h1,h2,h3 {
    letter-spacing:-.035em;
    line-height:1.15
}

h1 {
    font-size:clamp(30px,4vw,48px)
}

h2 {
    font-size:clamp(22px,2vw,28px)
}

h3 {
    font-size:18px
}

::selection {
    background:#dce5ff;
    color:#14254a
}

*:focus-visible {
    outline:3px solid #8aa7ff;
    outline-offset:3px
}

.muted {
    color:var(--muted)
}

.small {
    font-size:12px
}

.kicker,.eyebrow {
    display:block;
    font-size:11px;
    color:#7c8faa;
    letter-spacing:.15em;
    font-weight:800
}

.notice {
    display:flex;
    gap:10px;
    align-items:center;
    color:#2c537f;
    background:#eff5ff;
    border:1px solid #dfeaff;
    border-radius:13px;
    padding:12px 15px;
    margin:12px 0;
    font-size:13px
}

.notice-error {
    background:#fff4f3;
    color:#a43232;
    border-color:#ffdfdf
}

.js-flash[hidden] {
    display:none
}

.pill,.count-pill {
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:1px solid var(--line);
    border-radius:99px;
    padding:5px 11px;
    font-size:12px;
    font-weight:700;
    background:#fff
}

.btn {
    border:1px solid transparent;
    min-height:39px;
    border-radius:10px;
    padding:9px 15px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:13px;
    font-weight:700;
    line-height:1.3;
    transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
    text-align:center
}

.btn:hover {
    transform:translateY(-1px)
}

.btn-primary {
    background:var(--blue);
    color:#fff
}

.btn-primary:hover {
    background:#234dda
}

.btn-secondary {
    background:#eef3ff;
    color:#2857bb;
    border-color:#dfe8fa
}

.btn-ghost {
    background:#fff;
    color:#435b78;
    border-color:var(--line)
}

.btn-success {
    background:#e5f7ed;
    color:#07804c
}

.btn-danger {
    background:#ffedf0;
    color:#c83c53
}

.btn-small {
    font-size:12px;
    min-height:31px;
    padding:5px 9px;
    border-radius:8px
}

.btn-full {
    width:100%
}

.btn[disabled],button[disabled] {
    opacity:.55;
    cursor:not-allowed
}

.btn i {
    font-size:12px
}

.panel {
    padding:23px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:17px;
    box-shadow:0 4px 16px rgba(28,41,66,.025);
    margin-bottom:16px
}

.panel-title {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:21px
}

.panel-title>i {
    width:36px;
    height:36px;
    border-radius:11px;
    display:grid;
    place-items:center;
    background:#edf3ff;
    color:#3868d9
}

.panel-title h2 {
    font-size:17px;
    letter-spacing:-.025em;
    margin:0
}

.panel-title p {
    font-size:12px;
    color:var(--muted);
    margin:4px 0 0
}

.form {
    display:grid;
    gap:16px
}

.form label:not(.check-line):not(.file-drop) {
    font-weight:700;
    font-size:12px;
    color:#3a5067;
    display:grid;
    gap:7px
}

.form input:not([type=checkbox]):not([type=color]):not([type=file]),.form textarea,.form select,.filter-form input,.filter-form select {
    width:100%;
    background:#fff;
    border:1px solid #dfe5ee;
    border-radius:10px;
    padding:11px 12px;
    font-size:13px;
    color:#263953;
    outline:0;
    transition:border .16s,box-shadow .16s
}

.form input:focus,.form select:focus,.form textarea:focus,.filter-form input:focus,.filter-form select:focus {
    border-color:#8aaaf0;
    box-shadow:0 0 0 3px #e5edff
}

.form textarea {
    resize:vertical
}

.form input[type=file] {
    font-weight:400;
    max-width:100%;
    font-size:12px
}

.field-optional {
    font-weight:500!important;
    color:#8b98ab
}

.field-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:17px
}

.field-subtitle {
    font-size:13px;
    margin:6px 0 0
}

.check-line {
    display:flex;
    align-items:center;
    gap:9px;
    font-weight:600;
    font-size:13px;
    cursor:pointer
}

.check-line input {
    accent-color:#315de9
}

.check-stack {
    display:grid;
    gap:12px;
    padding:10px 0
}

.two-panels {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    align-items:start
}

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

.row-actions form {
    display:inline-flex
}

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

.toolbar p {
    margin:0
}

.status-chip,.state-dot {
    border-radius:100px;
    padding:5px 10px;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
    background:#eef4ff;
    color:#426699;
    display:inline-flex;
    align-items:center;
    gap:6px
}

.state-dot.pending {
    background:#fff5e5;
    color:#9e6815
}

.state-dot.approved {
    background:#e7f8ef;
    color:#178a58
}

.state-dot.rejected {
    background:#ffedf0;
    color:#c1475f
}

.status-inline {
    margin-right:4px
}

.empty,.zero-state {
    text-align:center;
    padding:54px 20px;
    color:#718095
}

.empty i {
    font-size:22px;
    color:#6884b2
}

.empty h3,.zero-state h3 {
    color:#25374c;
    margin:12px 0 8px
}

.empty p,.zero-state p {
    font-size:13px
}

.empty .btn {
    margin-top:10px
}

.pagination {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:18px
}

.prose {
    white-space:normal;
    line-height:1.75
}

.cover-mini {
    width:220px;
    height:110px;
    object-fit:cover;
    border-radius:12px
}

.table-scroll {
    width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain
}

.vt-popup {
    border-radius:20px!important;
    padding:18px!important;
    font-family:var(--font)!important
}

.swal2-confirm {
    border-radius:10px!important;
    font-weight:700!important
}

.swal2-cancel {
    border-radius:10px!important
}

@media(max-width:780px) {
    .field-grid,.two-panels {
        grid-template-columns:1fr
    }
    .panel {
        padding:18px
    }
    .toolbar {
        align-items:flex-start
    }
}

@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        animation-duration:.01ms!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important
    }
}

.auth-wrap {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px 18px;
    background:radial-gradient(circle at 12% 10%,#e7eeff 0,transparent 40%),#f7f9fc
}

.auth-card {
    background:#fff;
    border:1px solid #e5ebf3;
    border-radius:22px;
    padding:36px;
    max-width:455px;
    width:100%;
    box-shadow:var(--shadow)
}

.auth-card>img {
    width:165px;
    margin-bottom:29px
}

.auth-card h1 {
    font-size:28px;
    margin:10px 0
}

.auth-card>p {
    color:#8a98a8;
    font-size:13px;
    margin:0 0 23px
}

.auth-card .form {
    margin-bottom:17px
}

.auth-card>a {
    font-size:12px
}

.simple-head {
    max-width:850px;
    margin:35px auto 25px;
    padding:0 15px
}

.simple-head h1 {
    margin:9px 0
}

.simple-head p {
    color:#7d8a9c
}

.site-main>.form {
    max-width:800px;
    margin:30px auto
}

.site-main>.panel {
    max-width:850px;
    margin-left:auto;
    margin-right:auto
}