:root {
    color-scheme: light;
    font-family: Inter, "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    font-size: 16px;
    color: #1f2937;
    background: #f5f7fa;
    font-synthesis: none;
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
body { background: #f5f7fa; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[v-cloak] { display: none; }

.screen-center, .login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.login-page { background: #eef4f3; padding: 20px; }
.login-card {
    width: min(420px, 100%);
    padding: 46px;
    border: 1px solid #dce5e3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 45px rgba(15, 118, 110, .10);
    text-align: center;
}
.login-logo {
    width: 66px; height: 66px; margin: 0 auto 20px; display: grid; place-items: center;
    border-radius: 16px; background: #0f766e; color: #fff; font-size: 24px; font-weight: 800;
}
.login-card h1 { margin: 0; font-size: 28px; }
.login-card p { margin: 10px 0 28px; color: #6b7280; font-size: 15px; }
.login-card input { width: 100%; margin-bottom: 14px; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar {
    position: fixed; inset: 0 auto 0 0; width: 250px; padding: 30px 20px;
    display: flex; flex-direction: column; background: #102a2a; color: #fff;
}
.brand { display: flex; align-items: center; gap: 14px; padding: 0 8px 34px; }
.brand > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 11px; background: #14b8a6; font-size: 18px; font-weight: 800; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 19px; }
.brand small { margin-top: 5px; color: #92aaa8; font-size: 13px; }
.sidebar nav { display: grid; gap: 7px; }
.sidebar nav button, .logout {
    border: 0; border-radius: 9px; background: transparent; color: #b7c9c7; padding: 15px 16px; text-align: left; font-size: 15px;
}
.sidebar nav button:hover, .sidebar nav button.active { background: #1b4441; color: #fff; }
.logout { margin-top: auto; border: 1px solid #31514f; text-align: center; }

.main { width: calc(100% - 250px); margin-left: 250px; padding: 36px 40px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.topbar h1 { margin: 0; font-size: 30px; }
.topbar p { margin: 9px 0 0; color: #6b7280; font-size: 15px; }

.button {
    min-height: 44px; padding: 10px 18px; border: 1px solid #d7dde3; border-radius: 8px;
    background: #fff; color: #374151; font-size: 15px;
}
.button:hover { border-color: #93a4b4; }
.button.primary { border-color: #0f766e; background: #0f766e; color: #fff; }
.button.primary:hover { background: #0b625b; }
.button:disabled { cursor: not-allowed; opacity: .6; }
.button.wide { width: 100%; }

input, select, textarea {
    border: 1px solid #d7dde3; border-radius: 7px; background: #fff; color: #1f2937;
    min-height: 44px; padding: 10px 13px; outline: none; font-size: 15px;
}
input:focus, select:focus, textarea:focus { border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15, 118, 110, .10); }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 20px; }
.stats-row > div { min-height: 108px; padding: 22px 24px; border: 1px solid #e2e7eb; border-radius: 12px; background: #fff; }
.stats-row span { display: block; color: #6b7280; font-size: 15px; }
.stats-row strong { display: block; margin-top: 9px; font-size: 31px; }
.green { color: #138a5b; }
.red { color: #dc4b4b; }

.panel { border: 1px solid #e2e7eb; border-radius: 12px; background: #fff; overflow: hidden; }
.toolbar { min-height: 76px; padding: 15px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #edf0f2; }
.toolbar-spacer { flex: 1; }
.search { width: min(380px, 40vw); }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 960px; }
th, td { padding: 18px 20px; border-bottom: 1px solid #edf0f2; text-align: left; font-size: 15px; line-height: 1.5; vertical-align: middle; }
th { background: #fafbfc; color: #53616f; font-size: 14px; font-weight: 700; white-space: nowrap; }
tbody tr:hover { background: #fafcfb; }
tbody tr:last-child td { border-bottom: 0; }
.account-row { cursor: pointer; user-select: none; }
.account-row.selected-row { background: #eef8f6; }
.account-row.selected-row:hover { background: #e5f4f1; }
.check-col { width: 78px; text-align: center; }
.checkbox { width: 21px; height: 21px; accent-color: #0f766e; cursor: pointer; }
.account-cell { display: flex; align-items: center; gap: 14px; }
.account-cell strong, .account-cell small, .cell-small { display: block; }
.account-cell strong { font-size: 16px; }
.account-cell small { max-width: 390px; margin-top: 5px; color: #87919b; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.cell-small { margin-top: 5px; color: #87919b; font-size: 13px; }
.avatar-box { position: relative; flex: 0 0 46px; width: 46px; height: 46px; }
.avatar-box img, .avatar-box span { width: 46px; height: 46px; border-radius: 50%; }
.avatar-box img { display: block; object-fit: cover; background: #e8efee; }
.avatar-box span { display: none; place-items: center; background: #dcebea; color: #0f766e; font-weight: 700; }
.status { display: inline-block; min-width: 62px; padding: 6px 12px; border-radius: 99px; background: #eef1f3; color: #66717d; font-size: 14px; text-align: center; }
.status.alive { background: #e7f7ef; color: #12804e; }
.status.expired { background: #fdecec; color: #c73d3d; }
.muted { color: #7b8792; white-space: nowrap; }
.empty { padding: 68px 20px; color: #8a959f; font-size: 16px; text-align: center; }
.actions { white-space: nowrap; }
.actions button { border: 0; background: transparent; color: #0f766e; padding: 6px 9px; font-size: 15px; }
.actions .danger-link { color: #d14343; }

.modal-mask { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(16, 28, 28, .50); }
.modal { width: min(780px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 14px; background: #fff; box-shadow: 0 22px 60px rgba(0, 0, 0, .22); }
.modal-head { padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0f2; }
.modal-head h2 { margin: 0; font-size: 22px; }
.modal-head button { border: 0; background: transparent; color: #79838c; font-size: 27px; line-height: 1; }
.qr-modal { width: min(440px, 100%); }
.qr-body { padding: 34px; text-align: center; }
.qr-image, .qr-placeholder { width: 270px; height: 270px; margin: 0 auto 22px; display: grid; place-items: center; border: 1px solid #e0e5e8; border-radius: 10px; background: #fff; }
.qr-image img { width: 258px; height: 258px; object-fit: contain; }
.qr-body p { margin: 0 0 16px; color: #58636e; }
.error-text { color: #d14343 !important; }
.form-grid { padding: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid label span { display: block; margin-bottom: 8px; color: #4b5563; font-size: 15px; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; }
.form-grid .full { grid-column: 1 / -1; }
.fixed-info { padding: 16px 18px; border-radius: 8px; background: #f1f7f6; color: #46615e; }
.fixed-info span { display: block; margin-bottom: 7px; color: #7a8d8b; font-size: 13px; }
.fixed-info strong { color: #244743; font-size: 15px; }
.modal-foot { padding: 18px 24px; display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid #edf0f2; }

.toast { position: fixed; z-index: 50; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 11px 17px; border-radius: 8px; background: #153a37; color: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.toast.error { background: #b83737; }
.loader { width: 30px; height: 30px; border: 3px solid #d7e5e3; border-top-color: #0f766e; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .sidebar { position: static; width: 100%; padding: 12px; flex-direction: row; align-items: center; gap: 8px; overflow-x: auto; }
    .brand { padding: 0; margin-right: 8px; }
    .brand > div { display: none; }
    .brand > span { width: 38px; height: 38px; }
    .sidebar nav { display: flex; gap: 6px; }
    .sidebar nav button { white-space: nowrap; }
    .logout { margin: 0 0 0 auto; white-space: nowrap; }
    .app-shell { display: block; }
    .main { width: 100%; margin-left: 0; padding: 22px; }
    .stats-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
    .topbar { align-items: flex-start; }
    .topbar p { display: none; }
    .toolbar { flex-wrap: wrap; }
    .search { width: 100%; }
    .toolbar-spacer { display: none; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .full { grid-column: auto; }
}