:root{
	--bg:#0f1217;
	--card:#151a22;
	--text:#e8eef7;
	--muted:#9aa7b5;
	--border:#263041;
	--accent:#4aa3ff;

	--r:12px;
	--pad:16px;
	--maxw: 1100px;
	--topbar-h: 56px;

	--shadow: 0 6px 18px rgba(0,0,0,.35);
}

*{
	box-sizing:border-box;
	font-size: 15px;
}
html,body{
	height:100%;
}
body{
	margin:0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height: 1.35;
}

a{
	color: var(--text);
	text-decoration:none;
}
a:hover{
	color: var(--accent);
}

.container{
	max-width: var(--maxw);
	margin: 0 auto;
	padding: calc(var(--pad) + 10px) var(--pad) 60px;
}

.topbar{
	position: sticky;
	top: 0;
	z-index: 20;
	height: var(--topbar-h);
	display:flex;
	align-items:center;
	gap: 10px;
	padding: 0 var(--pad);
	background: rgba(15,18,23,.88);
	border-bottom: 1px solid var(--border);
	backdrop-filter: blur(10px);
}

.left, .right{
	display:flex;
	align-items:center;
	gap: 10px;
}
.right{
	margin-left:auto;
}

.brand{
	font-weight: 700;
	letter-spacing:.3px;
	margin-left: 6px;
	white-space: nowrap;
}

/* HOME BUTTON + DROPDOWN */
.home-btn{
	width: 42px;
	height: 42px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: rgba(255,255,255,.04);
	color: var(--text);
	cursor:pointer;
	margin:0;
	font-size: 24px;
}
.home-btn:hover{
	border-color: rgba(74,163,255,.55);
}
.home-btn .icon{
	font-size: 18px;
	line-height: 1;
}

.dropdown{
	position: absolute;
	top: calc(var(--topbar-h) - 2px);
	left: var(--pad);
	min-width: 220px;
	background: rgba(15,18,23,.97);
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: var(--shadow);
	padding: 8px;
	display:none;
}
.dropdown.is-open{
	display:block;
}

.dropdown-spacer {
	border-top: 1px solid var(--border);
	margin: 10px 0;
}

.dropdown-item{
	display:block;
	padding: 10px 10px;
	border-radius: 10px;
}
.dropdown-item:hover{
	background: rgba(255,255,255,.04);
	color: var(--accent);
}

.dropdown-item button{
	text-align: left;
	width: 100%;
	margin: 0;
    padding: 0;
    border: none;
    background: none !important;
    color: var(--text);
    cursor: pointer;
}

/* AUTH AREA */
.topbar-login{
	display:flex;
	align-items:center;
	gap: 8px;
}

.inp{
	height: 42px;
	margin: 0;
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: rgba(255,255,255,.03);
	color: var(--text);
	outline:none;
	min-width: 130px;
}
.inp:focus{
	border-color: rgba(74,163,255,.75);
	box-shadow: 0 0 0 3px rgba(74,163,255,.20);
}
.inp-login{
	min-width: 120px;
}
.inp-pass{
	min-width: 130px;
}

.btn-accent{
	height: 42px;
	margin:0;
	font-size: 24px;
	padding: 0 12px;
	border-radius: 12px;
	border: 1px solid rgba(74,163,255,.45);
	background: rgba(74,163,255,.10);
	color: var(--text);
	cursor:pointer;
}
.btn-accent:hover{
	border-color: rgba(74,163,255,.75);
}

.btn-ghost{
	height: 42px;
	margin-top: 0px;
	padding: 0 10px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: rgba(255,255,255,.03);
	color: var(--text);
	cursor:pointer;
	font-size: 24px;
}
.btn-ghost:hover{
	border-color: rgba(74,163,255,.55);
}

.user-pill{
	display:flex;
	align-items:center;
	gap: 10px;
	padding: 6px 10px;
	border-radius: 14px;
	border: 1px solid var(--border);
	background: rgba(255,255,255,.03);
}
.user-pill:hover{
	border-color: rgba(74,163,255,.55);
}

.avatar-sm{
	width: 28px;
	height: 28px;
	border-radius: 10px;
	overflow:hidden;
	border: 1px solid var(--border);
	background: rgba(255,255,255,.03);
	display:flex;
	align-items:center;
	justify-content:center;
}
.avatar-sm img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.user-name{
	max-width: 240px;
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.card{
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--r);
	box-shadow: var(--shadow);
	padding: 16px;
	margin: 14px 0;
}
h1{
	font-size: 20px;
	margin: 0 0 10px;
}
h2{
	font-size: 16px;
	margin: 0 0 10px;
}

label{
	display:block;
	margin: 10px 0;
	font-size: 13px;
	color: var(--muted);
}
input{
	width: 100%;
	margin-top: 6px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: rgba(255,255,255,.03);
	color: var(--text);
	outline: none;
}
input:focus{
	border-color: rgba(74,163,255,.75);
	box-shadow: 0 0 0 3px rgba(74,163,255,.20);
}
button{
	margin-top: 8px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: rgba(255,255,255,.05);
	color: var(--text);
	cursor:pointer;
}
button:hover{
	border-color: rgba(74,163,255,.55);
}

.flash{
	border: 1px solid var(--border);
	background: rgba(74,163,255,.10);
	padding: 10px 12px;
	border-radius: 10px;
	margin: 10px 0 0;
}
.muted{
	color: var(--muted);
}

.userbox{
	display:flex;
	gap: 14px;
	align-items: flex-start;
	margin-top: 10px;
}
.avatar{
	width: 64px;
	height: 64px;
	flex: 0 0 64px;
	border-radius: 14px;
	border: 1px solid var(--border);
	overflow:hidden;
	background: rgba(255,255,255,.03);
	display:flex;
	align-items:center;
	justify-content:center;
}
.avatar img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.table-wrap{
	overflow-x:auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 12px;
}
.table{
	width:100%;
	border-collapse: collapse;
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow:hidden;
	min-width: 720px;
}
.table th,.table td{
	text-align:left;
	padding: 10px 10px;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
	font-size: 13px;
}
.table thead th{
	background: rgba(255,255,255,.03);
	color: var(--muted);
	font-weight: 600;
}

.footer{
	border-top: 1px solid var(--border);
	padding: 14px var(--pad);
	color: var(--muted);
	text-align:center;
}

@media (max-width: 920px){
	.container{
		padding: 14px var(--pad) 50px;
	}
	.user-name{
		max-width: 160px;
	}
}

@media (max-width: 620px){
	:root{
		--pad: 12px;
	}
	.brand{
		display:none;
	}
	.inp-login{
		min-width: 96px;
	}
	.inp-pass{
		min-width: 96px;
	}
	.user-name{
		display:none;
	}
	.dropdown{
		left: var(--pad);
		right: var(--pad);
		min-width: auto;
	}
}



.wizard-grid{
	display:grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin-top: 12px;
}

.wizard-card{
	display:block;
	border: 1px solid var(--border);
	background: rgba(255,255,255,.03);
	border-radius: 14px;
	padding: 12px;
	text-align: center;
	transition: transform .08s ease, border-color .12s ease;
}
.wizard-card:hover{
	border-color: rgba(74,163,255,.55);
	transform: translateY(-1px);
}

.wizard-icon{
	width: 140px;
	height: 140px;
	margin: 0 auto 10px;
	border-radius: 14px;
	border: 1px solid var(--border);
	background: rgba(255,255,255,.02);
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}
.wizard-icon img{
	width: 100%;
	height: 100%;
	object-fit: contain; /* для svg/png инструмента */
	display:block;
	padding: 10px;
}

.wizard-title{
	font-weight: 650;
	font-size: 14px;
	line-height: 1.2;
}
.wizard-desc{
	margin-top: 6px;
	font-size: 12px;
	color: var(--muted);
}

/* responsive */
@media (max-width: 1100px){
	.wizard-grid{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (max-width: 920px){
	.wizard-grid{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 620px){
	.wizard-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 400px){
	.wizard-grid{
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}




/*DEBUG*/

.debug-panel{
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	max-height: 45vh;
	overflow:auto;
	border-radius: 14px;
	border: 1px solid rgba(255,80,80,.35);
	background: rgba(30,10,10,.92);
	box-shadow: 0 12px 30px rgba(0,0,0,.55);
	padding: 12px;
	z-index: 9999;
}

.debug-title{
	font-weight: 700;
	margin-bottom: 10px;
	color: #ffd7d7;
}

.debug-item{
	border-top: 1px solid rgba(255,255,255,.08);
	padding-top: 10px;
	margin-top: 10px;
	color: #ffecec;
	font-size: 12px;
}

.debug-msg{
	margin-top: 6px;
	opacity: .95;
}
.debug-sql, .debug-params{
	margin-top: 6px;
	opacity: .9;
}

.debug-panel code{
	display:block;
	margin-top: 4px;
	padding: 8px;
	border-radius: 10px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.08);
	white-space: pre-wrap;
	word-break: break-word;
	color: #fff;
}