:root
{ --dp-1st-color: #2563eb; --dp-1st-hover: #1d4ed8;
--dp-1st-light: #dbeafe;
--dp-1st-dark: #2f3339; --bg-dashboard: #f0f0f1; --bg-card: #ffffff; --text-main: #3c434a; --text-muted: #64748b; --border-color: #e2e8f0;  --success: #10b981; --danger: #ef4444; --warning: #f59e0b;  --radius: 5px; --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--trans-duration: 0.3s
}
*{margin: 0; padding: 0;box-sizing: border-box;}
body{font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; background-color: var(--bg-dashboard); color: var(--text-main); }
body.dp_portal{min-height: 100vh;}
a {text-decoration: none;color: #2563eb;transition: var(--trans-duration);}
img{max-width: 100%}
.border-bottom{border-bottom: 1px solid #CCC}
.logo{height: 80px;}
.dp_portal #primary {display: flex; min-height: 100vh;} .dp_portal #primary #main{flex: 1}
.container {padding: 20px}
.left {order: 1}
.right {order: 2}
.mobile_menu, .sidebartitle {display: none;}
.btn {padding: 10px 20px;border: none;border-radius: var(--radius);cursor: pointer; transition: background-color 0.3s ease;} .btn:hover { background-color: var(--dp-1st-hover); color: #FFF}
.dp_box{background: #fff; border: 1px solid #eaeaea; border-radius: var(--radius); padding: 20px;}
.dp_box .dp_row { display: flex; padding: 12px 0; border-bottom: 1px solid #eee;}
.dp_box .dp_row .label{width: 120px; display: block;}
.dp_row .hide {display: none !important;}
.dp-editable-row .value {display: flex;align-items: center;gap: 0; flex-grow: 1;}
.value .show-edit, .value .show-text{flex-grow: 1;}
.show-edit{display: flex;}
.edit-input {padding: 3px 20px 3px 8px;border: 1px solid #ddd; border-radius: 4px; flex-grow: 1;}
.btn-edit-meta, .btn-cancel-meta {cursor: pointer; font-size: 12px;}
.btn-edit-meta {background: #f0f0f0; border: 1px solid #ccc; border-radius: 3px; margin-left:10px; padding: 3px 10px;}
.btn-cancel-meta {color: var(--danger); background: none; border: none; padding: 4px; margin-left: -20px; width: 20px}
.dp-badge { padding: 4px 12px; border-radius: 20px; font-size: 0.8em; font-weight: bold; }
.dp-badge-success { background: #d4edda; color: #155724; }
.dp-badge-warning { background: #fff3cd; color: #856404; }
.dp-badge-danger { background: #f8d7da; color: #721c24; }
.dp_portal .sidebar{display: flex; flex-direction: column; width: 200px; background: var(--dp-1st-dark); color: #FFF}
.sidebarbody {display: flex; flex-direction: column; flex-grow: 1;}
.sidebar > * {padding: 10px}
.sidebar a{color: #FFF; display: block; padding: 10px}
.sidebar a:hover{background:#FFF5}
.sidebar ul, .sidebar li {margin: 0; padding: 0; list-style: none;}
.dp_dashboard_sidebar{display: flex;flex-direction: column; flex-grow: 1;}
.sidebar .dp_flex_end{margin-top: auto;}
@media (max-width: 768px) {
.dp_portal #primary {display: block; }
.mobile_menu{display: block; background: var(--text-main); padding: 6px 20px;}
.sidebar {
position: fixed;top: 0; left: 0; z-index: 999;
width: 80%; height: 100%; max-width: 320px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
box-sizing: border-box; display: none;
opacity: 0;
transform: translateX(-100%);
transition: all var(--trans-duration) ease;
}
.sidebar.show  {display: block; opacity: 1; }
.sidebar.viber {transform: translateX(0);}
.btn-close {display: block; background: var(--danger); color: #FFF}
.btn-toggle { display: block;}
.sidebartitle {border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 7px 10px 6px; display: flex;justify-content: flex-end; }
}