.koc-db-wrap {
max-width: 900px;
margin: 0 auto;
font-family: inherit;
color-scheme: light dark;
--koc-db-accent:      #1a6fb5;
--koc-db-danger:      #d32f2f;
--koc-db-premium:     #d4a017;
--koc-db-radius:      8px;
--koc-db-bg:          #fff;
--koc-db-bg-alt:      #f5f7fa;
--koc-db-bg-hover:    #f9fbfd;
--koc-db-bg-close:    #f0f0f0;
--koc-db-bg-close-hv: #e0e0e0;
--koc-db-border:      rgba(0,0,0,.18);
--koc-db-border-in:   rgba(0,0,0,.28);
--koc-db-text:        inherit;
--koc-db-text-strong: rgba(0,0,0,.87);
--koc-db-text-muted:  rgba(0,0,0,.55);
--koc-db-text-subtle: rgba(0,0,0,.42);
--koc-db-shadow:      0 20px 60px rgba(0,0,0,.18);
} @media (prefers-color-scheme: dark) {
.koc-db-wrap {
color-scheme: dark;
--koc-db-bg:          rgba(255,255,255,.04);
--koc-db-bg-alt:      rgba(255,255,255,.07);
--koc-db-bg-hover:    rgba(255,255,255,.09);
--koc-db-bg-close:    rgba(255,255,255,.12);
--koc-db-bg-close-hv: rgba(255,255,255,.20);
--koc-db-border:      rgba(255,255,255,.15);
--koc-db-border-in:   rgba(255,255,255,.25);
--koc-db-text-strong: rgba(255,255,255,.92);
--koc-db-text-muted:  rgba(255,255,255,.60);
--koc-db-text-subtle: rgba(255,255,255,.42);
--koc-db-shadow:      0 20px 60px rgba(0,0,0,.50);
}
} body.dark-bg .koc-db-wrap,
.dark-mode .koc-db-wrap,
.koc-db-wrap.koc-db-dark {
color-scheme: dark;
--koc-db-bg:          rgba(255,255,255,.04);
--koc-db-bg-alt:      rgba(255,255,255,.07);
--koc-db-bg-hover:    rgba(255,255,255,.09);
--koc-db-bg-close:    rgba(255,255,255,.12);
--koc-db-bg-close-hv: rgba(255,255,255,.20);
--koc-db-border:      rgba(255,255,255,.15);
--koc-db-border-in:   rgba(255,255,255,.25);
--koc-db-text-strong: rgba(255,255,255,.92);
--koc-db-text-muted:  rgba(255,255,255,.60);
--koc-db-text-subtle: rgba(255,255,255,.42);
--koc-db-shadow:      0 20px 60px rgba(0,0,0,.50);
} .koc-db-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
}
.koc-db-header h2 {
margin: 0;
font-size: 1.25rem;
}
.koc-db-sort {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
font-size: 0.9rem;
}
.koc-db-sort label {
display: inline;
margin: 0;
float: none;
width: auto;
font-weight: normal;
order: 0;
}
.koc-db-sort-select {
padding: 5px 10px;
border: 1px solid var(--koc-db-border-in);
border-radius: 6px;
font-size: 0.9rem;
background: inherit;
color: inherit;
cursor: pointer;
display: inline-block;
width: auto;
float: none;
order: 1;
} .koc-db-table-wrap {
overflow-x: auto;
border: 1px solid var(--koc-db-border);
border-radius: var(--koc-db-radius);
background: Canvas;
}
.koc-db-table {
width: 100%;
border-collapse: collapse;
background: Canvas;
color: inherit;
font-size: 0.9rem;
}
.koc-db-table th,
.koc-db-table td {
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid var(--koc-db-border);
vertical-align: middle;
}
.koc-db-table thead th {
background: inherit;
font-weight: 600;
color: inherit;
white-space: nowrap;
}
.koc-db-table tbody tr:last-child td {
border-bottom: none;
}
.koc-db-table tbody tr:hover td {
background: rgba(128, 128, 128, 0.08);
}
.koc-db-col-name    { min-width: 180px; }
.koc-db-col-cat     { min-width: 120px; color: var(--koc-db-text-muted); }
.koc-db-col-status  { min-width: 110px; }
.koc-db-col-date    { min-width: 90px; white-space: nowrap; color: var(--koc-db-text-muted); }
.koc-db-col-actions { min-width: 140px; white-space: nowrap; }
.koc-db-col-name a {
color: var(--koc-db-accent);
text-decoration: none;
font-weight: 500;
}
.koc-db-col-name a:hover { text-decoration: underline; }
.koc-db-premium { margin-left: 4px; } .koc-db-badge {
display: inline-block;
padding: 3px 9px;
border-radius: 12px;
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
}
.koc-db-badge--publish {
background: #e8f5e9;
color: #2e7d32;
border: 1px solid #a5d6a7;
}
.koc-db-badge--pending {
background: #fff8e1;
color: #c67000;
border: 1px solid #ffe082;
}
.koc-db-badge--draft {
background: rgba(0,0,0,.08);
color: var(--koc-db-text-muted);
border: 1px solid var(--koc-db-border);
} .koc-db-col-actions .koc-btn { margin-right: 6px; }
.koc-db-col-actions .koc-btn:last-child { margin-right: 0; } .koc-db-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 18px;
font-size: 0.9rem;
color: var(--koc-db-text-muted);
} .koc-db-empty {
padding: 20px;
color: var(--koc-db-text-muted);
text-align: center;
}
.koc-db-empty a { color: var(--koc-db-accent); } dialog.koc-db-modal {
position: fixed;
inset: 0;
z-index: 9990;
align-items: flex-start;
justify-content: center;
padding: 40px 16px;
overflow-y: auto;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
border: none;
background: transparent;
box-sizing: border-box;
}
dialog.koc-db-modal[open] { display: flex; }
dialog.koc-db-modal::backdrop { background: rgba(0,0,0,.55); }
.koc-db-modal-overlay { display: none; }
.koc-db-modal-box {
position: relative;
z-index: 9992;
background: Canvas;
color: inherit;
border-radius: 12px;
width: 100%;
max-width: 680px;
padding: 28px 32px 32px;
box-shadow: var(--koc-db-shadow);
margin-bottom: 40px;
}
.koc-db-modal-close {
position: absolute;
top: 14px;
right: 16px;
width: 32px;
height: 32px;
border: none;
background: var(--koc-db-bg-close);
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
line-height: 32px;
text-align: center;
padding: 0;
color: var(--koc-db-text-muted);
transition: background .15s;
}
.koc-db-modal-close:hover { background: var(--koc-db-bg-close-hv); }
.koc-db-modal-box h3 {
margin: 0 0 20px;
font-size: 1.2rem;
color: var(--koc-db-text-strong);
padding-right: 36px;
}
.koc-db-modal-loading {
text-align: center;
padding: 40px;
color: var(--koc-db-text-muted);
font-size: 1rem;
} .koc-db-edit-actions {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--koc-db-border);
}
.koc-db-edit-note {
font-size: 0.82rem;
color: var(--koc-db-text-subtle);
flex: 1;
}
.koc-db-save-btn {
color: inherit;
background: none;
border-color: currentColor;
} @media (max-width: 640px) {
.koc-db-modal-box { padding: 18px; margin: 0; }
.koc-db-table th,
.koc-db-table td  { padding: 8px 10px; }
.koc-db-col-cat,
.koc-db-col-date  { display: none; }
.koc-db-header    { flex-direction: column; align-items: flex-start; }
}