/* ── Reset / base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #212529;
    background: #f5f6f8;
    margin: 0;
    height: 100%;
}

/* ── Page shell ────────────────────────────────────────────────── */
.cv-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ── Navbar ────────────────────────────────────────────────────── */
.cv-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 1.25rem;
    background: #16213e;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,.06);
}

.cv-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: -.2px;
}
.cv-brand:hover { color: #a8d8ff; }
.cv-brand-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.cv-navbar-right {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cv-user-email {
    color: #8fa8c8;
    font-size: .8rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-btn {
    border: none;
    border-radius: 6px;
    padding: .3rem .75rem;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: background .15s, color .15s;
}
.cv-btn-ghost {
    background: transparent;
    color: #8fa8c8;
}
.cv-btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
.cv-btn-outline {
    background: transparent;
    color: #8fa8c8;
    border: 1px solid rgba(255,255,255,.2);
}
.cv-btn-outline:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.4); }

/* ── Body / content area ───────────────────────────────────────── */
.cv-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Vault layout (sidebar + content) ─────────────────────────── */
.vault-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.vault-sidebar {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid #e2e6ea;
    overflow: hidden;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid #e2e6ea;
    flex-shrink: 0;
    font-size: .85rem;
    background: #fff;
}

.sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: .5rem 0;
}

.vault-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.content-section {
    padding: 1.5rem;
    flex: 1;
}

.content-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── File tree ─────────────────────────────────────────────────── */
.file-tree { font-size: .85rem; }

.tree-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tree-node {
    cursor: pointer;
    border-radius: 0;
    user-select: none;
}

.folder-label,
.file-node {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem 1rem;
    transition: background .1s;
    white-space: nowrap;
    /* overflow stays on .name only — having it on the row clips action buttons */
}
.folder-label:hover,
.file-node:hover { background: #f0f4f8; }

.file-node.selected,
.file-node:focus { background: #deeeff; font-weight: 500; }

.tree-node .icon { flex-shrink: 0; font-style: normal; }
.tree-node .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.tree-node .size  { color: #9ca3af; font-size: .75rem; flex-shrink: 0; }

.file-node-actions,
.folder-actions {
    display: flex;
    align-items: center;
    gap: .1rem;
    flex-shrink: 0;
    margin-left: .25rem;
    opacity: 0;
    transition: opacity .12s;
}
.file-node:hover .file-node-actions,
.folder-node > .folder-label:hover .folder-actions,
.file-node-actions:focus-within,
.folder-actions:focus-within { opacity: 1; }

.file-action-btn,
.folder-action-btn {
    color: #6c757d;
    font-size: .8rem;
    line-height: 1;
    padding: 0 .2rem !important;
    text-decoration: none;
    transition: color .1s;
}
.file-action-btn:hover { color: #0d6efd !important; }
.folder-action-btn:hover { color: #0d6efd !important; }
.file-action-btn.file-action-danger:hover,
.folder-action-btn.folder-action-danger:hover { color: #dc3545 !important; }

/* Inline rename / create input inside tree nodes */
.tree-inline-input {
    font-size: .8rem;
    padding: .1rem .35rem;
    border: 1px solid #0d6efd;
    border-radius: 4px;
    outline: none;
    min-width: 0;
    width: 130px;
    flex-shrink: 1;
}
.tree-inline-row {
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* ── File detail panel ─────────────────────────────────────────── */
.file-detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e2e6ea;
}

.file-icon-lg { font-size: 2.5rem; line-height: 1; }

.file-detail-info { min-width: 0; }

.file-action-bar {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

/* ── Drop zone ─────────────────────────────────────────────────── */
.drop-zone {
    border: 2px dashed #c8d5e8;
    border-radius: 12px;
    background: #f8fafd;
    transition: border-color .15s, background .15s;
    padding: 2rem 1.5rem;
    text-align: center;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.drop-zone.dragging {
    border-color: #0d6efd;
    background: #e8f0fe;
}

.drop-zone-inner { pointer-events: auto; }

.drop-icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: .75rem;
    filter: drop-shadow(0 2px 4px rgba(13,110,253,.25));
}

.upload-list {
    text-align: left;
    pointer-events: auto;
}

/* ── Vault unlock page ─────────────────────────────────────────── */
.vault-unlock-box {
    max-width: 380px;
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

.vault-lock-icon {
    font-size: 2.5rem;
    margin-bottom: .5rem;
}

/* ── Login / auth pages ────────────────────────────────────────── */
.row.justify-content-center.mt-5 {
    min-height: calc(100vh - 52px);
    align-items: center;
    display: flex;
}

/* ── Utility ───────────────────────────────────────────────────── */
a, .btn-link { color: #0d6efd; }

#blazor-error-ui {
    background: #fffbe6;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.15);
    display: none;
    left: 0;
    padding: .5rem 1rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: .85rem;
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 4px;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.loading-progress {
    position: absolute;
    display: block;
    width: 6rem;
    height: 6rem;
    inset: 25vh 0 auto 0;
    margin: 0 auto;
}
.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: .6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: #0d6efd;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%;
    transition: stroke-dasharray .05s ease-in-out;
}
.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(25vh + 3rem) 0 auto .2rem;
}
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }

/* ═══════════════════════════════════════════════════════════════════
   KeePass / KDBX Password Manager UI
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ──────────────────────────────────────────────────── */
.kp-page-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.kp-page-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 40px;
    padding: 0 1rem;
    background: #fff;
    border-bottom: 1px solid #e2e6ea;
    flex-shrink: 0;
}

.kp-toolbar-filename {
    font-size: .8rem;
    color: #6c757d;
    font-family: monospace;
}

/* ── 3-column browser ──────────────────────────────────────────────── */
.kp-browser {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Left sidebar (group tree) ─────────────────────────────────────── */
.kp-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #1c2a3a;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kp-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}

.kp-sidebar-title {
    color: #c8d8ea;
    font-size: .85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kp-save-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.2);
    color: #8fa8c8;
    border-radius: 5px;
    padding: .2rem .5rem;
    font-size: .75rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.kp-save-btn:hover { background: rgba(255,255,255,.08); color: #fff; }

.kp-group-tree {
    flex: 1;
    overflow-y: auto;
    padding: .4rem 0;
}

.kp-group-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    cursor: pointer;
    user-select: none;
    transition: background .1s;
    border-radius: 0;
}
.kp-group-item:hover { background: rgba(255,255,255,.06); }
.kp-group-item.selected { background: rgba(13,110,253,.25); }

.kp-group-chevron {
    color: #8fa8c8;
    font-size: .7rem;
    width: .8rem;
    text-align: center;
    flex-shrink: 0;
    cursor: pointer;
}
.kp-group-icon  { font-size: .9rem; flex-shrink: 0; }
.kp-group-name  { color: #c8d8ea; font-size: .82rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-group-count { color: #6c8baa; font-size: .7rem; flex-shrink: 0; }

.kp-sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .75rem;
    border-top: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}

.kp-sidebar-action {
    background: transparent;
    border: none;
    color: #8fa8c8;
    font-size: .78rem;
    cursor: pointer;
    padding: .2rem .4rem;
    border-radius: 4px;
    transition: background .1s, color .1s;
}
.kp-sidebar-action:hover { background: rgba(255,255,255,.08); color: #fff; }
.kp-sidebar-action-lock { color: #f8d7a8; }
.kp-sidebar-action-lock:hover { background: rgba(248,215,168,.1); color: #ffc97d; }

/* ── Middle panel (entry list) ─────────────────────────────────────── */
.kp-middle {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #f0f2f5;
    border-right: 1px solid #dde1e7;
    overflow: hidden;
}

.kp-middle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    border-bottom: 1px solid #dde1e7;
    flex-shrink: 0;
    background: #f0f2f5;
}

.kp-middle-title {
    font-size: .85rem;
    font-weight: 600;
    color: #344054;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kp-middle-count { color: #9ca3af; font-size: .75rem; flex-shrink: 0; }

.kp-entry-list-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .75rem;
    flex-shrink: 0;
}

.kp-search-wrap { flex: 1; }

.kp-search {
    width: 100%;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    padding: .3rem .6rem;
    font-size: .8rem;
    background: #fff;
    outline: none;
    transition: border-color .15s;
}
.kp-search:focus { border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13,110,253,.15); }

.kp-entry-list {
    flex: 1;
    overflow-y: auto;
}

.kp-entry-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,.04);
    transition: background .1s;
}
.kp-entry-row:hover { background: #e8edf3; }
.kp-entry-row.selected { background: #deeeff; }

.kp-entry-icon { font-size: 1.1rem; flex-shrink: 0; }
.kp-entry-row-info { flex: 1; min-width: 0; }
.kp-entry-title { font-size: .82rem; font-weight: 500; color: #212529; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-entry-sub   { font-size: .73rem; color: #6c757d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-otp-badge   { font-size: .7rem; color: #198754; flex-shrink: 0; }

.kp-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #9ca3af;
    font-size: .85rem;
}

/* ── Right panel (entry detail) ────────────────────────────────────── */
.kp-detail-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: #fff;
}

.kp-detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #9ca3af;
    font-size: .9rem;
}

.kp-detail {
    padding: 1.5rem;
    flex: 1;
}

.kp-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e9ecef;
}

.kp-detail-icon    { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.kp-detail-title-wrap { flex: 1; min-width: 0; }
.kp-detail-title   { font-size: 1.1rem; font-weight: 600; color: #212529; word-break: break-all; }
.kp-detail-url     { font-size: .78rem; color: #0d6efd; text-decoration: none; display: block; margin-top: .1rem; }
.kp-detail-url:hover { text-decoration: underline; }

.kp-detail-actions-top {
    display: flex;
    gap: .4rem;
    flex-shrink: 0;
}

.kp-detail-fields { display: flex; flex-direction: column; gap: .75rem; }

.kp-field { display: flex; flex-direction: column; gap: .2rem; }
.kp-field-label { font-size: .72rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: .04em; }
.kp-field-row   { display: flex; align-items: center; gap: .4rem; }
.kp-field-value { flex: 1; font-size: .85rem; color: #212529; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-field-value-url { color: #0d6efd; }
.kp-field-notes { font-size: .82rem; color: #495057; white-space: pre-wrap; background: #f8f9fa; border-radius: 6px; padding: .5rem .75rem; }
.kp-monospace   { font-family: 'Consolas', 'Courier New', monospace; }

.kp-copy-btn {
    background: none;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: .15rem .4rem;
    font-size: .75rem;
    cursor: pointer;
    color: #6c757d;
    transition: background .1s, color .1s, border-color .1s;
    flex-shrink: 0;
}
.kp-copy-btn:hover { background: #f0f2f5; color: #0d6efd; border-color: #0d6efd; }

/* ── OTP panel ─────────────────────────────────────────────────────── */
.kp-otp-panel {
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: #f0faf4;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
}

.kp-otp-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .4rem;
}

.kp-otp-code {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 1.6rem;
    font-weight: 700;
    color: #198754;
    letter-spacing: .1em;
}

.kp-otp-timer-wrap {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.kp-otp-ring { width: 36px; height: 36px; transform: rotate(-90deg); }
.kp-otp-ring-bg { fill: none; stroke: #d1e7dd; stroke-width: 3; }
.kp-otp-ring-fg { fill: none; stroke: #198754; stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .5s linear; }

.kp-otp-secs {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 700;
    color: #198754;
}

/* ── Detail meta ───────────────────────────────────────────────────── */
.kp-detail-meta {
    margin-top: 1.25rem;
    padding-top: .75rem;
    border-top: 1px solid #e9ecef;
    font-size: .72rem;
    color: #9ca3af;
}

/* ── Unlock screen ─────────────────────────────────────────────────── */
.kp-unlock-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1rem;
    background: #f0f2f5;
}

.kp-unlock-box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.kp-unlock-icon {
    font-size: 2.5rem;
    margin-bottom: .5rem;
    display: block;
}

.kp-unlock-filename {
    font-size: .8rem;
    color: #6c757d;
    font-family: monospace;
    margin-bottom: .75rem;
    word-break: break-all;
}

.kp-unlock-hint { font-size: .82rem; color: #6c757d; margin-bottom: .5rem; }

/* ── File picker page ──────────────────────────────────────────────── */
.kp-file-picker-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1rem;
    background: #f0f2f5;
}

.kp-file-picker {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    padding: 2rem;
    width: 100%;
    max-width: 440px;
    text-align: center;
}

.kp-file-list { text-align: left; }

.kp-file-list-header {
    font-size: .72rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .4rem;
    padding: 0 .25rem;
}

.kp-file-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    background: #f8f9fa;
    border: 1px solid #e2e6ea;
    border-radius: 6px;
    padding: .5rem .75rem;
    margin-bottom: .3rem;
    cursor: pointer;
    font-size: .85rem;
    text-align: left;
    transition: background .1s, border-color .1s;
}
.kp-file-item:hover { background: #e8f0fe; border-color: #0d6efd; }

/* ── Shared buttons & form ─────────────────────────────────────────── */
.kp-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: none;
    border-radius: 6px;
    padding: .35rem .75rem;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.kp-btn-primary { background: #0d6efd; color: #fff; }
.kp-btn-primary:hover { background: #0b5ed7; }
.kp-btn-outline { background: transparent; border: 1px solid #ced4da; color: #495057; }
.kp-btn-outline:hover { background: #f0f2f5; }
.kp-btn-ghost   { background: transparent; color: #6c757d; }
.kp-btn-ghost:hover { background: #f0f2f5; color: #212529; }
.kp-btn-danger-ghost { background: transparent; color: #9ca3af; }
.kp-btn-danger-ghost:hover { background: #fff5f5; color: #dc3545; }

.kp-form-field  { display: flex; flex-direction: column; gap: .3rem; text-align: left; }
.kp-form-field label { font-size: .78rem; font-weight: 600; color: #344054; }
.kp-form-row    { display: flex; gap: .5rem; align-items: flex-start; }
.kp-form-section { margin-top: .75rem; }

.kp-input {
    width: 100%;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    padding: .4rem .65rem;
    font-size: .85rem;
    color: #212529;
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.kp-input:focus { border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13,110,253,.15); }
.kp-textarea { resize: vertical; min-height: 70px; }

.kp-input-group { display: flex; }
.kp-input-group .kp-input { border-radius: 6px 0 0 6px; border-right: 0; flex: 1; }
.kp-input-addon {
    background: #f8f9fa;
    border: 1px solid #d0d5dd;
    border-left: none;
    padding: .4rem .65rem;
    cursor: pointer;
    font-size: .85rem;
    color: #6c757d;
    transition: background .1s;
    white-space: nowrap;
}
.kp-input-addon:last-child { border-radius: 0 6px 6px 0; }
.kp-input-addon:not(:last-child) { border-radius: 0; }
.kp-input-addon:hover { background: #e9ecef; }

.kp-toggle-link {
    background: none;
    border: none;
    color: #0d6efd;
    font-size: .8rem;
    cursor: pointer;
    padding: .1rem 0;
    text-align: left;
}
.kp-toggle-link:hover { text-decoration: underline; }

.kp-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: .3rem;
    border-radius: 4px;
    font-size: .85rem;
    line-height: 1;
}
.kp-icon-btn:hover { background: #f8f9fa; }

/* ── Modal ─────────────────────────────────────────────────────────── */
.kp-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.kp-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}
.kp-modal-header h5 { margin: 0; font-size: 1rem; }

.kp-modal-close {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    color: #6c757d;
    padding: .25rem;
    border-radius: 4px;
    line-height: 1;
}
.kp-modal-close:hover { background: #f0f2f5; color: #212529; }

.kp-modal-body {
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    flex: 1;
}

.kp-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-top: 1px solid #e9ecef;
    flex-shrink: 0;
}

/* ── Toast error ───────────────────────────────────────────────────── */
.kp-toast-error {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: #dc3545;
    color: #fff;
    border-radius: 8px;
    padding: .6rem 1rem;
    font-size: .85rem;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    animation: slideUp .2s ease;
}

@keyframes slideUp {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* ── Utilities ─────────────────────────────────────────────────────── */
.flex-1  { flex: 1; }
.flex-2  { flex: 2; }
.w-100   { width: 100%; }
.mt-1    { margin-top: .25rem; }
.mt-2    { margin-top: .5rem; }
.mt-3    { margin-top: 1rem; }
.gap-2   { gap: .5rem; }

/* ── File preview modal ──────────────────────────────────────────────── */
.cv-preview-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: previewFadeIn .15s ease;
}

@keyframes previewFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cv-preview-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 48px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    width: min(920px, 92vw);
    max-height: 88vh;
    overflow: hidden;
    animation: previewScaleIn .15s ease;
}

@keyframes previewScaleIn {
    from { transform: scale(.96); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.cv-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
    background: #fff;
}

.cv-preview-filename {
    font-weight: 600;
    font-size: .9rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1a1a2e;
}

.cv-preview-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.cv-preview-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    padding: .3rem .5rem;
    cursor: pointer;
    color: #6c757d;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.cv-preview-close:hover { background: #f0f0f0; color: #212529; }

.cv-preview-body {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    min-height: 200px;
}

.cv-preview-loading {
    display: flex;
    align-items: center;
    color: #6c757d;
    padding: 2.5rem;
}

.cv-preview-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 1.5rem;
}

.cv-preview-image {
    max-width: 100%;
    max-height: 76vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 16px rgba(0,0,0,.14);
}

.cv-preview-video {
    max-width: 100%;
    max-height: 76vh;
    display: block;
}

.cv-preview-audio-wrap {
    padding: 2.5rem;
    width: 100%;
}

.cv-preview-iframe {
    width: 100%;
    height: 76vh;
    border: none;
    display: block;
}

.cv-preview-text {
    width: 100%;
    margin: 0;
    padding: 1.25rem 1.5rem;
    font-family: 'Consolas', 'Fira Code', 'Courier New', monospace;
    font-size: .82rem;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    color: #1a1a2e;
    background: #f8f9fa;
    align-self: flex-start;
    min-height: 400px;
}
.justify-content-center { justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════
   KeePass – Drag-and-drop, inline rename, dialogs
   ═══════════════════════════════════════════════════════════════════ */

/* ── Drag-over highlight on group nodes ────────────────────────────── */
.kp-group-item.kp-drop-over {
    background: rgba(13,110,253,.3) !important;
    outline: 2px dashed rgba(13,110,253,.7);
    outline-offset: -2px;
}

/* draggable cursor hints */
.kp-entry-row[draggable="true"] { cursor: grab; }
.kp-entry-row[draggable="true"]:active { cursor: grabbing; }
.kp-group-item[draggable="true"] { cursor: grab; }
.kp-group-item[draggable="true"]:active { cursor: grabbing; }

/* ── Inline group-name input ───────────────────────────────────────── */
.kp-group-rename-input {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 3px;
    color: #c8d8ea;
    font-size: .82rem;
    padding: 0 .35rem;
    flex: 1;
    min-width: 0;
    outline: none;
    height: 1.5rem;
}
.kp-group-rename-input:focus {
    border-color: rgba(13,110,253,.8);
    background: rgba(255,255,255,.18);
}

/* ── KeePass overlay / modal dialogs ───────────────────────────────── */
.kp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.kp-dialog {
    background: #1e2a3a;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 1.75rem;
    min-width: 300px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 8px 40px rgba(0,0,0,.55);
    color: #c8d8ea;
}

.kp-dialog-icon {
    font-size: 2rem;
    text-align: center;
    margin-bottom: .75rem;
}

.kp-dialog-title {
    font-size: 1rem;
    font-weight: 600;
    color: #e0eaf8;
    text-align: center;
    margin-bottom: .5rem;
}

.kp-dialog-body {
    font-size: .85rem;
    color: #8fa8c8;
    text-align: center;
    margin-bottom: 1.25rem;
    line-height: 1.55;
}

.kp-dialog-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.kp-dialog .kp-input {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.2);
    color: #c8d8ea;
}
.kp-dialog .kp-input:focus {
    border-color: rgba(13,110,253,.7);
    background: rgba(255,255,255,.12);
}
.kp-dialog .kp-input::placeholder { color: rgba(200,216,234,.4); }