*{box-sizing:border-box}body{margin:0;font-family:Arial;background:#f3f6fb;color:#172033}header{background:#0c2448;color:#fff;padding:18px 28px;display:flex;justify-content:space-between}nav a{color:#fff;text-decoration:none;margin-left:18px}main{max-width:1400px;margin:auto;padding:28px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.card,.panel{background:#fff;padding:20px;border-radius:12px;box-shadow:0 4px 18px #ccd5e3}.card b{display:block;font-size:32px;margin-top:10px}table{width:100%;border-collapse:collapse;background:#fff;margin-top:20px}th,td{padding:12px;border-bottom:1px solid #e2e8f0;text-align:left}th{background:#eaf0f8}label{display:block;margin-top:12px;font-weight:bold}input,select{width:100%;padding:10px;margin:5px 0 12px;border:1px solid #ccd5e3;border-radius:6px}button,.btn{background:#0c5bd8;color:#fff;border:0;padding:10px 16px;border-radius:7px;text-decoration:none;cursor:pointer}.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#0c2448}.loginbox{background:#fff;padding:30px;width:360px;border-radius:12px}.err{color:#a00}

/* V4 Dashboard */
.dashboard-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:22px;
}
.dashboard-heading h1,
.section-title h2 { margin:0; }
.muted { color:#6b778c; margin:6px 0 0; }

.metric-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:20px;
}
.metric {
    background:#fff;
    border-radius:12px;
    padding:18px;
    border-left:6px solid;
    box-shadow:0 4px 18px rgba(30,50,85,.08);
}
.metric span { display:block; color:#667085; }
.metric b { display:block; font-size:32px; margin:8px 0 4px; }
.metric small { font-weight:bold; }
.metric-green { border-color:#16a34a; }
.metric-green b,.metric-green small { color:#15803d; }
.metric-blue { border-color:#2563eb; }
.metric-blue b,.metric-blue small { color:#1d4ed8; }
.metric-red { border-color:#dc2626; }
.metric-red b,.metric-red small { color:#b91c1c; }

.dashboard-grid {
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);
    gap:20px;
    margin-bottom:20px;
}
.lower-grid { grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr); }
.chart-panel {
    background:#fff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 4px 18px rgba(30,50,85,.08);
    margin-bottom:20px;
}
.dashboard-grid .chart-panel { margin-bottom:0; }
.section-title {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:18px;
}
.donut-wrap {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    min-height:270px;
}
.donut {
    --done:0;
    --progress:0;
    width:210px;
    height:210px;
    flex:0 0 210px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:
        conic-gradient(
            #16a34a 0 calc(var(--done) * 1%),
            #2563eb calc(var(--done) * 1%)
                calc((var(--done) + var(--progress)) * 1%),
            #dc2626 calc((var(--done) + var(--progress)) * 1%) 100%
        );
}
.donut::before {
    content:"";
    width:132px;
    height:132px;
    background:#fff;
    border-radius:50%;
    position:absolute;
}
.donut-center {
    position:relative;
    z-index:1;
    text-align:center;
}
.donut-center b { display:block; font-size:34px; }
.donut-center span { color:#667085; }
.legend { min-width:190px; }
.legend > div {
    display:grid;
    grid-template-columns:14px 1fr auto;
    align-items:center;
    gap:9px;
    padding:10px 0;
    border-bottom:1px solid #edf0f5;
}
.dot,.bar-legend i {
    width:10px;
    height:10px;
    border-radius:50%;
    display:inline-block;
}
.green { background:#16a34a; }
.blue { background:#2563eb; }
.red { background:#dc2626; }

.ranking-list { display:flex; flex-direction:column; gap:13px; }
.ranking-row {
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding-bottom:13px;
    border-bottom:1px solid #edf0f5;
}
.rank-number {
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-weight:bold;
    background:#e5e7eb;
    color:#374151;
}
.rank-1 { background:#facc15; color:#713f12; }
.rank-2 { background:#cbd5e1; color:#334155; }
.rank-3 { background:#d97706; color:#fff; }
.employee-main { flex:1; min-width:0; }
.employee-title {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
}
.employee-title b,.employee-title span { display:block; }
.employee-title span { color:#667085; font-size:13px; margin-top:2px; }
.employee-title strong { color:#1d4ed8; white-space:nowrap; }
.rating-track {
    height:9px;
    background:#e5e7eb;
    border-radius:999px;
    overflow:hidden;
    margin:9px 0 7px;
}
.rating-track span {
    display:block;
    height:100%;
    border-radius:999px;
    background:#2563eb;
}
.employee-details {
    display:flex;
    flex-wrap:wrap;
    gap:7px 14px;
    font-size:12px;
    color:#667085;
}
.green-text { color:#15803d !important; }
.blue-text { color:#1d4ed8 !important; }
.red-text { color:#b91c1c !important; }

.employee-bars { display:flex; flex-direction:column; gap:15px; }
.employee-bar-row {
    display:grid;
    grid-template-columns:190px 1fr;
    align-items:center;
    gap:15px;
}
.bar-label { display:flex; justify-content:space-between; gap:8px; }
.bar-label span { color:#667085; font-size:13px; }
.stacked-bar {
    height:18px;
    background:#e5e7eb;
    border-radius:999px;
    overflow:hidden;
    display:flex;
}
.stacked-bar span { display:block; height:100%; }
.bar-green { background:#16a34a; }
.bar-blue { background:#2563eb; }
.bar-red { background:#dc2626; }
.bar-legend {
    display:flex;
    gap:18px;
    justify-content:flex-end;
    margin-top:14px;
    color:#667085;
    font-size:13px;
}
.bar-legend span { display:flex; align-items:center; gap:6px; }

.status-badge {
    display:inline-block;
    border-radius:999px;
    padding:5px 9px;
    font-size:12px;
    font-weight:bold;
}
.status-badge.done { color:#166534; background:#dcfce7; }
.status-badge.progress { color:#1e40af; background:#dbeafe; }
.status-badge.new { color:#991b1b; background:#fee2e2; }
.group-list > div {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid #edf0f5;
}
.text-link { color:#1d4ed8; text-decoration:none; font-weight:bold; }
.table-wrap { overflow-x:auto; }
.empty { color:#667085; }

@media(max-width:1050px) {
    .metric-grid { grid-template-columns:repeat(2,1fr); }
    .dashboard-grid,.lower-grid { grid-template-columns:1fr; }
}
@media(max-width:650px) {
    .dashboard-heading { align-items:flex-start; flex-direction:column; }
    .metric-grid { grid-template-columns:1fr; }
    .donut-wrap { flex-direction:column; }
    .employee-bar-row { grid-template-columns:1fr; gap:7px; }
    .employee-title { flex-direction:column; }
}

textarea{width:100%;padding:10px;border:1px solid #ccd5e3;border-radius:7px;font:inherit}.knowledge-warning{background:#fff3cd;color:#7a5b00;padding:14px;border-radius:9px;margin-bottom:18px;border:1px solid #ffe69c}.knowledge-form{margin-bottom:22px}.knowledge-list{display:flex;flex-direction:column;gap:12px}.knowledge-item{background:#fff;border-radius:10px;padding:17px;display:flex;justify-content:space-between;gap:20px;box-shadow:0 4px 16px rgba(30,50,85,.07);border-left:5px solid #2563eb}.knowledge-item.inactive{opacity:.55;border-left-color:#9ca3af}.knowledge-item h3{margin:8px 0}.knowledge-item p{white-space:pre-wrap;margin:0;color:#4b5563}.section-chip{display:inline-block;background:#dbeafe;color:#1e40af;padding:4px 8px;border-radius:999px;font-size:12px}.knowledge-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.danger{background:#dc2626}.check-row{display:flex;align-items:center;gap:8px}.check-row input{width:auto;margin:0}.secondary{background:#6b7280}@media(max-width:700px){.knowledge-item{flex-direction:column}.knowledge-actions{justify-content:flex-start}}


/* V6 Branding */
.branding-layout {
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
    gap:20px;
}
.branding-preview {
    text-align:center;
}
.brand-logo-preview {
    display:block;
    width:190px;
    height:190px;
    object-fit:contain;
    margin:12px auto 20px;
    border:1px solid #dce3ed;
    border-radius:18px;
    background:#fff;
}
.brand-logo-placeholder {
    width:190px;
    height:190px;
    margin:12px auto 20px;
    border:2px dashed #b8c4d6;
    border-radius:18px;
    display:grid;
    place-items:center;
    color:#7b8798;
    font-size:28px;
    font-weight:bold;
}
.telegram-preview {
    max-width:420px;
    margin:0 auto 18px;
    padding:18px;
    border-radius:16px;
    background:#e7f3ff;
    text-align:left;
    border:1px solid #c9def2;
}
.telegram-preview b {
    display:block;
    margin-bottom:6px;
}
.telegram-preview p {
    margin:12px 0;
}
.telegram-preview small {
    color:#65758a;
    font-style:italic;
}
.branding-check {
    display:flex;
    align-items:center;
    gap:10px;
    margin:12px 0 20px;
}
.branding-check input {
    width:auto;
    margin:0;
}
.success-message {
    background:#dcfce7;
    color:#166534;
    border:1px solid #86efac;
    border-radius:10px;
    padding:12px 16px;
    margin-bottom:18px;
}
.danger-button {
    background:#b91c1c;
}
@media(max-width:850px) {
    .branding-layout {
        grid-template-columns:1fr;
    }
}


/* V8 compact branding preview */
.brand-logo-preview{
    width:100%;
    max-width:520px;
    height:130px;
    object-fit:contain;
    padding:10px;
}


/* V10 large Telegram branding preview */
.brand-logo-preview {
    width:260px;
    height:260px;
    max-width:100%;
    object-fit:contain;
    padding:10px;
}