.dp-fe {
	--dp-dark:   #172536;
	--dp-accent: #134E8E;
	--dp-deep:   #0F3D70;
	--dp-gold:   #FFB33F;
	--dp-orange: #FF4400;
	--dp-card:   #ffffff;
	--dp-ch:     #F5F8FC;
	--dp-border: #D9E2EE;
	--dp-muted:  #66758B;
	--dp-txt:    #172536;
	--dp-txt2:   #2E4057;
	--dp-shadow: 0 2px 12px rgba(16,24,40,.05);
	--dp-fh:     'Sora', system-ui, sans-serif;
	--dp-fb:     'Manrope', system-ui, sans-serif;

	font-family: var(--dp-fb);
	color: var(--dp-txt);
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px;
	box-sizing: border-box;
	line-height: 1.5;
}
.dp-fe *, .dp-fe *::before, .dp-fe *::after { box-sizing: border-box; }
.dp-fe h1, .dp-fe h2, .dp-fe h3 { font-family: var(--dp-fh); margin: 0; }

.dp-fe-card {
	background: #fff;
	border: 1px solid var(--dp-border);
	border-radius: 12px;
	box-shadow: var(--dp-shadow);
	padding: 22px 26px;
	font-size: 14px;
	color: var(--dp-txt2);
	max-width: 520px;
	margin: 30px auto;
	text-align: center;
}
.dp-fe-card a { color: var(--dp-accent); font-weight: 700; text-decoration: none; }
.dp-fe-card a:hover { text-decoration: underline; }

/* Auth (register, login) */
.dp-fe-auth {
	max-width: 460px;
	margin: 30px auto;
	background: #fff;
	border: 1px solid var(--dp-border);
	border-radius: 14px;
	box-shadow: var(--dp-shadow);
	overflow: hidden;
}
.dp-fe-auth-hd {
	background: linear-gradient(160deg, #0F1F35 0%, #134E8E 100%);
	padding: 28px 28px 22px;
	color: #fff;
	position: relative;
	overflow: hidden;
	text-align: center;
}
.dp-fe-auth-hd::after {
	content: '';
	position: absolute;
	top: -40px; right: -40px;
	width: 200px; height: 200px;
	background: radial-gradient(circle, rgba(255,179,63,.18) 0%, transparent 70%);
	pointer-events: none;
}
.dp-fe-auth-mark {
	width: 44px;
	height: 44px;
	display: block;
	margin: 0 auto 12px;
	background: #fff;
	border-radius: 50%;
	padding: 4px;
	position: relative;
	z-index: 1;
}
.dp-fe-auth-hd h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 6px;
	letter-spacing: -.01em;
	position: relative;
	z-index: 1;
}
.dp-fe-auth-hd p {
	font-size: 13px;
	color: rgba(255,255,255,.7);
	margin: 0;
	position: relative;
	z-index: 1;
	line-height: 1.5;
}
.dp-fe-auth .dp-fe-form { padding: 24px 28px 28px; }
.dp-fe-auth .dp-fe-msg { margin: 18px 28px 0; }

/* Header for dashboards */
.dp-fe-hd {
	background: linear-gradient(160deg, #0F1F35 0%, #134E8E 100%);
	border-radius: 12px;
	padding: 22px 28px;
	display: flex;
	align-items: center;
	gap: 16px;
	position: relative;
	overflow: hidden;
	margin-bottom: 22px;
	color: #fff;
}
.dp-fe-hd::after {
	content: '';
	position: absolute;
	top: -60px; right: -60px;
	width: 280px; height: 280px;
	background: radial-gradient(circle, rgba(255,179,63,.18) 0%, transparent 70%);
	pointer-events: none;
}
.dp-fe-hd-mark {
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}
.dp-fe-hd-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.dp-fe-hd-text h1 {
	font-size: 1.4rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: -.01em;
	line-height: 1.2;
	margin: 0;
}
.dp-fe-hd-text p { margin: 4px 0 0; font-size: 13px; color: rgba(255,255,255,.55); }
.dp-fe-hd-pill {
	background: rgba(255,179,63,.16);
	border: 1px solid rgba(255,179,63,.32);
	color: var(--dp-gold);
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .06em;
	padding: 5px 11px;
	border-radius: 999px;
	position: relative;
	z-index: 1;
}
.dp-fe-hd-logout { position: relative; z-index: 1; margin: 0; }
.dp-fe-logout-btn {
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.25);
	color: #fff;
	font-family: var(--dp-fb);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 8px;
	cursor: pointer;
	transition: background .15s;
}
.dp-fe-logout-btn:hover { background: rgba(255,255,255,.22); }

/* Messages */
.dp-fe-msg {
	padding: 11px 16px;
	border-radius: 10px;
	font-size: 13px;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.dp-fe-msg code {
	background: rgba(255,255,255,.5);
	padding: 3px 8px;
	border-radius: 6px;
	font-family: 'Courier New', monospace;
	font-size: 12.5px;
}
.dp-fe-msg-ok { background: rgba(19,78,142,.07); color: var(--dp-accent); border: 1px solid rgba(19,78,142,.28); }
.dp-fe-msg-err { background: rgba(255,68,0,.07); color: #CC3600; border: 1px solid rgba(255,68,0,.3); }

/* Tabs */
.dp-fe-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--dp-border);
	margin-bottom: 22px;
	flex-wrap: wrap;
}
.dp-fe-tab {
	font-family: var(--dp-fb);
	font-size: 13px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 8px 8px 0 0;
	color: var(--dp-muted);
	text-decoration: none;
	border: 1px solid transparent;
	border-bottom: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.dp-fe-tab.is-active {
	color: var(--dp-txt);
	background: #fff;
	border-color: var(--dp-border);
	margin-bottom: -1px;
	padding-bottom: 10px;
}
.dp-fe-tab:hover:not(.is-active) { color: var(--dp-txt); }
.dp-fe-tab-badge {
	display: inline-block;
	background: var(--dp-orange);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 999px;
	min-width: 18px;
	text-align: center;
	line-height: 1.4;
}

/* Sections */
.dp-fe-section {
	background: #fff;
	border: 1px solid var(--dp-border);
	border-radius: 14px;
	box-shadow: var(--dp-shadow);
	margin-bottom: 22px;
	overflow: hidden;
}
.dp-fe-section-hd {
	background: linear-gradient(90deg, var(--dp-ch) 0%, #fff 60%);
	border-bottom: 1px solid var(--dp-border);
	padding: 18px 28px;
}
.dp-fe-section-hd h2 {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--dp-txt);
	letter-spacing: -.02em;
	margin: 0;
}
.dp-fe-section-hd p { margin: 4px 0 0; font-size: 12.5px; color: var(--dp-muted); }
.dp-fe-section-body { padding: 22px 28px; }

/* Forms */
.dp-fe-form { display: flex; flex-direction: column; gap: 16px; }
.dp-fe-field { display: flex; flex-direction: column; gap: 6px; }
.dp-fe-field > span {
	font-size: 13px;
	font-weight: 700;
	color: var(--dp-txt);
}
.dp-fe-field input[type=text],
.dp-fe-field input[type=email],
.dp-fe-field input[type=url],
.dp-fe-field input[type=password],
.dp-fe-field input[type=number],
.dp-fe-field input[type=datetime-local],
.dp-fe-field input[type=file],
.dp-fe-field textarea {
	width: 100%;
	padding: 10px 13px;
	border: 1px solid var(--dp-border);
	border-radius: 8px;
	font-family: var(--dp-fb);
	font-size: 14px;
	color: var(--dp-txt);
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.dp-fe-field input[type=file] { padding: 8px 10px; background: var(--dp-ch); }
.dp-fe-field input:focus,
.dp-fe-field textarea:focus {
	outline: none;
	border-color: var(--dp-accent);
	box-shadow: 0 0 0 3px rgba(19,78,142,.15);
}
.dp-fe-field textarea { resize: vertical; min-height: 80px; }
.dp-fe-field small { font-size: 11.5px; color: var(--dp-muted); margin-top: 2px; }
.dp-fe-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.dp-fe-btn {
	font-family: var(--dp-fb);
	font-weight: 700;
	font-size: 14px;
	padding: 11px 24px;
	border-radius: 9px;
	border: none;
	cursor: pointer;
	background: var(--dp-accent);
	color: #fff;
	transition: background .15s;
	align-self: flex-start;
}
.dp-fe-btn:hover { background: var(--dp-deep); }

.dp-fe-foot {
	font-size: 13px;
	color: var(--dp-muted);
	text-align: center;
	margin: 14px 0 0;
}
.dp-fe-foot a { color: var(--dp-accent); font-weight: 700; text-decoration: none; }
.dp-fe-foot a:hover { text-decoration: underline; }

/* Dropzone */
.dp-fe-dropzone {
	border: 2px dashed var(--dp-border);
	border-radius: 12px;
	padding: 30px 20px;
	text-align: center;
	background: var(--dp-ch);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.dp-fe-dropzone:hover, .dp-fe-dropzone.is-dragover {
	border-color: var(--dp-accent);
	background: rgba(19,78,142,.04);
}
.dp-fe-dropzone-icon {
	width: 36px; height: 36px;
	color: var(--dp-accent);
	margin: 0 auto 10px;
	display: block;
}
.dp-fe-dropzone-empty strong {
	display: block;
	font-family: var(--dp-fh);
	font-size: 14px;
	font-weight: 700;
	color: var(--dp-txt);
	margin-bottom: 4px;
}
.dp-fe-dropzone-empty span { font-size: 13px; color: var(--dp-muted); }
.dp-fe-dropzone-browse {
	background: none;
	border: none;
	color: var(--dp-accent);
	font-family: var(--dp-fb);
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
}
.dp-fe-dropzone-loaded {
	display: none;
	font-size: 13.5px;
	color: var(--dp-txt);
	font-weight: 600;
}
.dp-fe-dropzone-loaded.is-loaded { display: block; }
.dp-fe-dropzone-loaded.is-loaded ~ .dp-fe-dropzone-empty { display: none; }
.dp-fe-dropzone.is-loaded .dp-fe-dropzone-empty { display: none; }
.dp-fe-dropzone.is-loaded .dp-fe-dropzone-loaded { display: block; }

/* File list */
.dp-fe-files { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.dp-fe-file {
	background: var(--dp-ch);
	border: 1px solid var(--dp-border);
	border-radius: 10px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.dp-fe-file.is-inactive { opacity: .65; }
.dp-fe-file.is-inactive .dp-fe-file-name strong { text-decoration: line-through; }
.dp-fe-file-top { display: flex; align-items: flex-start; gap: 12px; }
.dp-fe-file-name {
	flex: 1;
	min-width: 0;
	display: flex;
	gap: 10px;
	align-items: center;
}
.dp-fe-file-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--dp-accent);
}
.dp-fe-file-name > div { flex: 1; min-width: 0; }
.dp-fe-file-name strong {
	display: block;
	font-family: var(--dp-fh);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--dp-txt);
	word-break: break-word;
}
.dp-fe-file-name span {
	font-size: 11.5px;
	color: var(--dp-muted);
}
.dp-fe-del-btn {
	background: #fff;
	border: 1px solid var(--dp-border);
	color: var(--dp-muted);
	width: 30px;
	height: 30px;
	border-radius: 7px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0;
}
.dp-fe-del-btn:hover { color: var(--dp-orange); border-color: var(--dp-orange); }
.dp-fe-file-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-fe-badge {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 5px;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.dp-fe-badge-blue { background: rgba(19,78,142,.08); color: var(--dp-accent); border: 1px solid rgba(19,78,142,.25); }
.dp-fe-badge-gold { background: rgba(255,179,63,.12); color: #7A5000; border: 1px solid rgba(255,179,63,.45); }
.dp-fe-badge-dark { background: rgba(23,37,54,.07); color: var(--dp-dark); border: 1px solid rgba(23,37,54,.22); }
.dp-fe-badge-err { background: rgba(255,68,0,.07); color: #CC3600; border: 1px solid rgba(255,68,0,.3); }
.dp-fe-badge-muted { background: #fff; color: var(--dp-muted); border: 1px solid var(--dp-border); }

.dp-fe-link-row { display: flex; gap: 6px; align-items: center; }
.dp-fe-link-row input {
	flex: 1;
	min-width: 0;
	padding: 7px 10px;
	border: 1px solid var(--dp-border);
	border-radius: 6px;
	font-family: 'Courier New', monospace;
	font-size: 11.5px;
	background: #fff;
	color: var(--dp-accent);
}
.dp-fe-link-row-short input { background: rgba(255,179,63,.08); color: #7A5000; border-color: rgba(255,179,63,.4); }
.dp-fe-link-row-compact { margin-top: 6px; }
.dp-fe-copy-mini, .dp-fe-shorten-btn {
	font-family: var(--dp-fb);
	font-size: 11.5px;
	font-weight: 700;
	padding: 6px 11px;
	border-radius: 6px;
	border: 1px solid var(--dp-accent);
	background: #fff;
	color: var(--dp-accent);
	cursor: pointer;
	transition: background .15s, color .15s;
	white-space: nowrap;
}
.dp-fe-copy-mini:hover, .dp-fe-shorten-btn:hover { background: var(--dp-accent); color: #fff; }
.dp-fe-copy-mini.is-copied { background: var(--dp-accent); color: #fff; }

.dp-fe-shorten-form { display: inline-block; margin: 0; }
.dp-fe-shorten-btn { border-color: var(--dp-gold); color: #7A5000; background: rgba(255,179,63,.08); }
.dp-fe-shorten-btn:hover { background: var(--dp-gold); color: var(--dp-dark); border-color: var(--dp-gold); }

/* Stats */
.dp-fe-stat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 22px;
}
.dp-fe-stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.dp-fe-stat-card {
	background: #fff;
	border: 1px solid var(--dp-border);
	border-radius: 14px;
	box-shadow: var(--dp-shadow);
	padding: 22px 24px;
	position: relative;
	overflow: hidden;
}
.dp-fe-stat-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 4px;
	height: 100%;
	background: var(--dp-accent);
}
.dp-fe-stat-card:nth-child(2)::before { background: var(--dp-gold); }
.dp-fe-stat-card:nth-child(3)::before { background: var(--dp-dark); }
.dp-fe-stat-card:nth-child(4)::before { background: #6B8FBF; }
.dp-fe-stat-label {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--dp-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 8px;
}
.dp-fe-stat-value {
	font-family: var(--dp-fh);
	font-size: 1.9rem;
	font-weight: 800;
	color: var(--dp-txt);
	letter-spacing: -.02em;
	line-height: 1.1;
}
.dp-fe-stat-sub { font-size: 12px; color: var(--dp-muted); margin-top: 6px; }
.dp-fe-stat-card-mini { padding: 16px 22px; }
.dp-fe-stat-card-mini::before { display: none; }
.dp-fe-stat-value-mini {
	font-family: var(--dp-fh);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--dp-txt);
}

/* Top file */
.dp-fe-top-file {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px;
	background: var(--dp-ch);
	border: 1px solid var(--dp-border);
	border-radius: 12px;
}
.dp-fe-top-icon {
	width: 48px;
	height: 48px;
	background: var(--dp-accent);
	color: #fff;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.dp-fe-top-icon svg { width: 22px; height: 22px; }
.dp-fe-top-info strong {
	display: block;
	font-family: var(--dp-fh);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--dp-txt);
	margin-bottom: 2px;
}
.dp-fe-top-info span { font-size: 12.5px; color: var(--dp-muted); }

/* Logo preview */
.dp-fe-logo-preview {
	background: var(--dp-ch);
	border: 1px solid var(--dp-border);
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 8px;
	display: inline-block;
}
.dp-fe-logo-preview img {
	display: block;
	max-width: 220px;
	max-height: 80px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Empty state */
.dp-fe-empty { padding: 40px 20px; text-align: center; color: var(--dp-muted); font-size: 13.5px; }

/* Tables (admin views) */
.dp-fe-table-wrap { overflow-x: auto; }
.dp-fe-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dp-fe-table thead th {
	text-align: left;
	padding: 10px 12px;
	background: var(--dp-ch);
	border-bottom: 1px solid var(--dp-border);
	font-weight: 700;
	color: var(--dp-txt);
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.dp-fe-table tbody td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--dp-border);
	vertical-align: middle;
	color: var(--dp-txt);
}
.dp-fe-table tbody tr:last-child td { border-bottom: none; }
.dp-fe-table tbody tr.is-inactive { opacity: .55; }
.dp-fe-table tbody tr.is-inactive td strong { text-decoration: line-through; }

.dp-fe-row-actions { white-space: nowrap; }
.dp-fe-action {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 6px;
	text-decoration: none;
	margin-right: 4px;
	border: 1px solid;
	margin-bottom: 4px;
}
.dp-fe-action-ok { color: var(--dp-accent); border-color: rgba(19,78,142,.4); background: rgba(19,78,142,.06); }
.dp-fe-action-ok:hover { background: var(--dp-accent); color: #fff; }
.dp-fe-action-warn { color: #7A5000; border-color: rgba(255,179,63,.5); background: rgba(255,179,63,.1); }
.dp-fe-action-warn:hover { background: var(--dp-gold); color: var(--dp-dark); }
.dp-fe-action-del { color: var(--dp-muted); border-color: var(--dp-border); background: #fff; }
.dp-fe-action-del:hover { color: var(--dp-orange); border-color: var(--dp-orange); }

@media (max-width: 900px) {
	.dp-fe-files { grid-template-columns: 1fr; }
	.dp-fe-grid { grid-template-columns: 1fr; }
	.dp-fe-stat-grid { grid-template-columns: repeat(2, 1fr); }
	.dp-fe-stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.dp-fe-hd { flex-wrap: wrap; }
	.dp-fe-stat-grid, .dp-fe-stat-grid-3 { grid-template-columns: 1fr; }
}