/* Frontend styling v1.0.5
   - No forced theme background (keeps site background)
   - Orange copy button and dashed orange card border (as requested)
   - Verified badge style
   - Modal table styles to match screenshot
   - Scoped CSS to .dam-wrap container to prevent theme conflicts
*/

.dam-wrap{
	--accent-orange:#f97316;
	--muted:#6b7280;
	--card-bg:#ffffff;
	--card-text:#0b1220;
	--verified-green:#10b981;
	width:100%;
	max-width:100%;
	padding:clamp(16px, 3vw, 32px);
	overflow-x:clip;
	background:transparent;
	color:inherit;
	font-family:Arial,Helvetica,sans-serif;
}

.dam-wrap,
.dam-wrap *{
	box-sizing:border-box;
}

.dam-wrap .dam-container{
	width:100%;
	max-width:1200px;
	min-width:0;
	margin:0 auto;
}

.dam-wrap .dam-header{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
	margin-bottom:18px;
}

.dam-wrap .dam-title-with-badge{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:12px;
	width:100%;
	min-width:0;
	margin-bottom:12px;
}

.dam-wrap .dam-title-main{
	flex:1 1 560px;
	min-width:0;
	margin:0;
	font-size:clamp(22px, 3vw, 28px);
	line-height:1.25;
	text-align:center;
	overflow-wrap:anywhere;
}

/* Verified Badge Styles */
.dam-wrap .verified-toggle {
	display: inline-flex;
	flex:0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: transparent;
	color: #57c45a;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid #6fdc7a;
	user-select: none;
	white-space: nowrap;
	touch-action: manipulation;
}

.dam-wrap .verified-toggle svg {
	width: 16px;
	height: 16px;
	fill: #57c45a;
}

.dam-wrap .security-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	width: min(480px, calc(100vw - 32px));
	max-width: 100%;
	min-width: 0;
	transform: translateX(-50%);
	background: #38483f;
	border-radius: 10px;
	padding: 18px 20px;
	display: none;
	z-index: 1000;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dam-wrap .panel-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px 16px;
	margin-bottom: 14px;
}

.dam-wrap .panel-title {
	display: flex;
	gap: 10px;
	align-items: center;
	font-weight: 600;
	color: #6fdd7b;
}

.dam-wrap .panel-title svg {
	width: 20px;
	height: 20px;
	fill: #6fdd7b;
}

.dam-wrap .last-scan {
	font-size: 13px;
	color: #9fb7a5;
}

.dam-wrap .panel-desc {
	font-size: 14px;
	color: #b8d2bf;
	margin-bottom: 14px;
	overflow-wrap: anywhere;
}

.dam-wrap .security-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.dam-wrap .security-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	margin-bottom: 8px;
	color: #e3f5e6;
}

.dam-wrap .security-list svg {
	width: 16px;
	height: 16px;
	fill: #57c45a;
	flex-shrink: 0;
}

/* App Icon SVG */
.dam-wrap .dam-app-icon {
	display: inline-block;
	margin-left: 6px;
	vertical-align: middle;
}
.dam-wrap .dam-controls{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%;min-width:0}
.dam-wrap .dam-search{flex:0 1 320px;width:100%;max-width:320px;min-width:0;min-height:42px;padding:8px 12px;border-radius:8px;border:1px solid #e6e6e6;background:transparent;color:var(--muted);font-size:16px}
.dam-wrap .dam-category-buttons{display:flex;justify-content:center;gap:6px;flex:1 1 520px;min-width:0;flex-wrap:wrap}
.dam-wrap .dam-cat-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;max-width:100%;background:transparent;color:var(--muted);padding:7px 10px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);cursor:pointer;line-height:1.2;white-space:normal;overflow-wrap:anywhere;touch-action:manipulation}
.dam-wrap .dam-cat-btn.active{background:rgba(249,115,22,0.08);color:var(--accent-orange);font-weight:700}
.dam-wrap .dam-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:12px}
.dam-wrap .dam-card{min-width:0;background:var(--card-bg);border-radius:10px;padding:12px;box-shadow:0 4px 12px rgba(2,6,23,.06);overflow:hidden;border:1px dashed var(--accent-orange)}
.dam-wrap .dam-card-inner{display:flex;gap:12px;align-items:center;min-width:0}
.dam-wrap .dam-icon-wrap{position:relative;flex:0 0 72px;width:72px;height:72px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f5f5f7}
.dam-wrap .dam-icon{width:72px;height:72px;object-fit:cover;display:block;border-radius:10px}
.dam-wrap .dam-icon-placeholder{padding:8px;color:var(--muted);font-size:12px}
.dam-wrap .dam-verified{position:absolute;top:8px;right:8px;padding:6px 8px;border-radius:6px;background:rgba(16,185,129,0.08);color:var(--verified-green);font-weight:700;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.dam-wrap .dam-body{flex:1 1 auto;min-width:0;color:var(--card-text)}
.dam-wrap .dam-title{margin:0 0 6px 0;font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.dam-wrap .dam-meta{font-size:13px;color:var(--muted);margin-bottom:8px}
.dam-wrap .dam-meta .dam-cat-link{color:var(--accent-orange);text-decoration:none}
.dam-wrap .dam-code-row{display:flex;align-items:center;gap:8px;min-width:0}
.dam-wrap .dam-code{display:block;min-width:0;max-width:100%;background:transparent;padding:6px 4px;border-radius:6px;font-family:monospace;font-size:clamp(17px,2vw,20px);color:var(--card-text);overflow-wrap:anywhere}
.dam-wrap .dam-copy{flex:0 0 auto;min-height:40px;background:var(--accent-orange);border:0;color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer;box-shadow:0 2px 6px rgba(249,115,22,0.18);touch-action:manipulation}
.dam-wrap .dam-info{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--muted);padding:6px 8px;border-radius:8px;cursor:pointer}
.dam-wrap .dam-copy:hover{opacity:0.95}
.dam-wrap .dam-msg{margin-top:8px;padding:10px;border-radius:6px;background:#f0fdf4;color:#064e3b;display:none}
.dam-modal{position:fixed;inset:0;background:rgba(2,6,23,.5);display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,20px);overflow-y:auto;z-index:9999}
.dam-modal .box{box-sizing:border-box;background:#fff;padding:18px;border-radius:10px;max-width:560px;width:100%;max-height:calc(100dvh - 24px);overflow:auto;color:#111}
.dam-modal .box h3{margin-top:0}
.dam-modal .details-table{width:100%;table-layout:fixed;border-collapse:collapse;margin-top:12px}
.dam-modal .details-table td{padding:10px 8px;vertical-align:top;border-bottom:1px solid #f1f1f3;overflow-wrap:anywhere}
.dam-modal .details-table td.label{width:45%;font-weight:700;color:#333}
.dam-wrap .dam-no-results{margin-top:12px;color:var(--muted)}
.dam-wrap .hidden{display:none!important}

@media (max-width: 1100px){
	.dam-wrap .dam-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width: 860px){
	.dam-wrap .dam-title-main{flex-basis:100%}
	.dam-wrap .dam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.dam-wrap .dam-search{max-width:100%}
	.dam-wrap .dam-category-buttons{flex-basis:100%}
}

@media (max-width: 600px){
	.dam-wrap{padding:14px 10px}
	.dam-wrap .dam-header{align-items:stretch}
	.dam-wrap .dam-title-with-badge{gap:10px}
	.dam-wrap .dam-title-main{font-size:22px}
	.dam-wrap .verified-toggle{margin:0 auto}
	.dam-wrap .security-panel{width:calc(100vw - 20px);padding:16px}
	.dam-wrap .panel-header{align-items:flex-start}
	.dam-wrap .last-scan{flex-basis:100%}
	.dam-wrap .dam-controls{align-items:stretch}
	.dam-wrap .dam-category-buttons{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:2px 1px 8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
	.dam-wrap .dam-cat-btn{flex:0 0 auto;min-height:42px;white-space:nowrap}
	.dam-wrap .dam-grid{grid-template-columns:1fr}
	.dam-wrap .dam-card{padding:12px 10px}
}

@media (max-width: 380px){
	.dam-wrap .dam-card-inner{align-items:flex-start;gap:10px}
	.dam-wrap .dam-icon-wrap{flex-basis:60px;width:60px;height:60px}
	.dam-wrap .dam-icon{width:60px;height:60px}
	.dam-wrap .dam-code-row{flex-wrap:wrap}
	.dam-wrap .dam-copy{width:100%}
	.dam-modal .details-table,
	.dam-modal .details-table tbody,
	.dam-modal .details-table tr,
	.dam-modal .details-table td{display:block;width:100%}
	.dam-modal .details-table td.label{width:100%;padding-bottom:2px;border-bottom:0}
	.dam-modal .details-table td:not(.label){padding-top:2px}
}