:root{
    --db-bg        : #f6f7f9;
    --db-panel     : #ffffff;
    --db-border    : #e5e8ec;
    --db-text      : #14212c;
    --db-muted     : #6b7684;
    --db-faint     : #9aa3ad;
    --db-accent    : #3b6fd9;
    --db-ok        : #1e7d32;
    --db-warn      : #b06d02;
    --db-err       : #c0392b;
}

*{ box-sizing: border-box; }

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

body{
    margin     : 0;
    padding    : 0 !important;
    background : var(--db-bg);
    color      : var(--db-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

a{ color: inherit; }

header.db-header{
    background     : var(--db-panel);
    padding        : 16px 28px;
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    border-bottom  : 1px solid var(--db-border);
    position       : sticky;
    top            : 0;
    z-index        : 5;
}

header.db-header .db-brand{
    font-size     : 13px;
    font-weight   : 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color         : var(--db-text);
    text-decoration: none;
}

header.db-header .db-brand-accent{
    color: var(--db-accent);
}

header.db-header .db-back{
    color          : var(--db-muted);
    text-decoration: none;
    font-size      : 13px;
}

header.db-header .db-back:hover{
    color: var(--db-text);
}

.db-page{
    max-width: 860px;
    margin   : 0 auto;
    padding  : 40px 20px 70px;
}

.panel{
    background   : var(--db-panel);
    border       : 1px solid var(--db-border);
    border-radius: 8px;
    margin-bottom: 18px;
    padding      : 18px 20px;
    box-shadow   : 0 1px 3px rgba(20,33,44,0.04);
}

.panel-title{
    font-size     : 10px;
    font-weight   : 700;
    color         : var(--db-faint);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom : 14px;
}

.category-badge{
    display        : inline-block;
    padding        : 3px 10px;
    border-radius  : 4px;
    background     : #f0f2f5;
    border         : 1px solid #dde1e6;
    color          : var(--db-muted);
    font-size      : 11px;
    font-weight    : 700;
    letter-spacing : .04em;
    text-transform : uppercase;
}

.heat-badge{
    display        : inline-block;
    padding        : 3px 10px;
    border-radius  : 4px;
    font-size      : 11px;
    font-weight    : 700;
    letter-spacing : .04em;
}

.heat-ok  { color: var(--db-ok);   background: #e9f6ec; border: 1px solid #bfe3c8; }
.heat-warn{ color: var(--db-warn); background: #fdf3e0; border: 1px solid #f0d9a3; }
.heat-err { color: var(--db-err);  background: #fceceb; border: 1px solid #f3c4bf; }

.stat-row{
    display        : flex;
    justify-content: space-between;
    align-items    : baseline;
    padding        : 9px 0;
    font-size      : 13px;
}

.stat-row + .stat-row{
    border-top: 1px solid #eef0f3;
}

.stat-name{ color: var(--db-muted); }

.stat-val{
    font-weight         : 700;
    color               : var(--db-text);
    font-variant-numeric: tabular-nums;
}

.stat-val.ok  { color: var(--db-ok); }
.stat-val.warn{ color: var(--db-warn); }
.stat-val.err { color: var(--db-err); }

.row-desc{
    padding-bottom: 9px;
    margin        : -4px 0 4px;
    font-size     : 12px;
    color         : var(--db-faint);
    line-height   : 1.7;
}

.row-desc + .stat-row{
    border-top: 1px solid #eef0f3;
}

.tag-box{
    display   : flex;
    flex-wrap : wrap;
    gap       : 6px;
    margin-top: 14px;
}

.tag-chip{
    padding      : 2px 9px;
    border-radius: 3px;
    background   : #f0f2f5;
    border       : 1px solid #dde1e6;
    color        : var(--db-muted);
    font-size    : 11px;
}

.editor-row{ padding: 12px 0; }
.editor-row + .editor-row{ border-top: 1px solid #eef0f3; }

.editor-label{
    font-size     : 10px;
    font-weight   : 700;
    color         : var(--db-accent);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom : 6px;
}

.editor-text{
    font-size  : 13px;
    color      : #3c4552;
    line-height: 1.9;
    margin     : 0;
}

.theme-pending{
    font-size: 13px;
    color    : var(--db-faint);
    margin   : 0;
}

/*for SmartPhone and Tablet */
@media screen and (max-width:800px) {

    header.db-header{ padding: 12px 16px; }

    .db-page{ padding: 28px 16px 40px; }

    .stat-row{
	flex-direction: column;
	align-items   : flex-start;
	gap           : 2px;
    }

}