/* Animate Studio — public-site manager
   Design: dark editing-suite palette (this is a production tool, not a
   marketing page) with a "filmstrip" tab nav as the signature element —
   a nod to the frame-by-frame rig/animation data this tool manages.
   Everything is scoped under .asm-fe-wrap so no theme can override it. */

.asm-fe-wrap {
	--asm-bg: #15171b;
	--asm-panel: #1c1f24;
	--asm-panel-2: #21252b;
	--asm-border: #2c3038;
	--asm-text: #ecebe8;
	--asm-muted: #8b8f98;
	--asm-accent: #7c5cfc;
	--asm-accent-soft: rgba(124, 92, 252, 0.15);
	--asm-amber: #ffb454;
	--asm-ok: #4ade80;
	--asm-danger: #ff6b6b;
	--asm-radius: 10px;

	max-width: 780px;
	margin: 2.5rem auto;
	padding: 28px;
	background: var(--asm-bg);
	border: 1px solid var(--asm-border);
	border-radius: 16px;
	color: var(--asm-text);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 14.5px;
	line-height: 1.5;
}

.asm-fe-wrap h3 {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--asm-text);
}

.asm-fe-wrap p { margin: 0 0 14px; }
.asm-fe-wrap label {
	display: block;
	font-weight: 500;
	font-size: 0.85rem;
	color: var(--asm-muted);
	margin-bottom: 6px;
}
.asm-fe-wrap label input,
.asm-fe-wrap label select,
.asm-fe-wrap label textarea { margin-top: 6px; }

.asm-fe-wrap input[type="text"],
.asm-fe-wrap input[type="number"],
.asm-fe-wrap input[type="file"],
.asm-fe-wrap select,
.asm-fe-wrap textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	background: var(--asm-panel-2);
	border: 1px solid var(--asm-border);
	border-radius: 7px;
	color: var(--asm-text);
	font-size: 14px;
	font-family: inherit;
	transition: border-color 0.15s ease;
}
.asm-fe-wrap input:focus,
.asm-fe-wrap select:focus,
.asm-fe-wrap textarea:focus {
	outline: none;
	border-color: var(--asm-accent);
	box-shadow: 0 0 0 3px var(--asm-accent-soft);
}
.asm-fe-wrap .asm-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; }

.asm-checkbox-row label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--asm-text); }
.asm-checkbox-row input[type="checkbox"] { width: auto; accent-color: var(--asm-accent); }

/* Signature element: filmstrip tab nav */
.asm-filmstrip {
	display: flex;
	gap: 2px;
	margin-bottom: 24px;
	padding: 4px;
	background: var(--asm-panel);
	border: 1px solid var(--asm-border);
	border-radius: 10px;
	overflow-x: auto;
}
.asm-frame {
	position: relative;
	flex: 1;
	text-align: center;
	padding: 9px 10px;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--asm-muted);
	border-radius: 7px;
	white-space: nowrap;
	cursor: default;
	text-decoration: none;
	display: block;
	transition: color 0.15s ease, background 0.15s ease;
}
a.asm-frame { cursor: pointer; }
a.asm-frame:hover { color: var(--asm-text); background: var(--asm-panel-2); }
a.asm-frame:visited { color: var(--asm-muted); }
.asm-frame::before,
.asm-frame::after {
	content: "";
	position: absolute;
	top: 3px; bottom: 3px;
	width: 3px;
	border-radius: 1px;
	background: var(--asm-border);
}
.asm-frame::before { left: 2px; }
.asm-frame::after { right: 2px; }
.asm-frame.is-active {
	color: #fff;
	background: var(--asm-accent);
}
.asm-frame.is-active::before,
.asm-frame.is-active::after { background: rgba(255,255,255,0.35); }

/* Cards */
.asm-card {
	background: var(--asm-panel);
	border: 1px solid var(--asm-border);
	border-radius: var(--asm-radius);
	padding: 20px 22px;
	margin-bottom: 18px;
}
.asm-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 16px;
	gap: 10px;
}
.asm-eyebrow {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--asm-muted);
}
.asm-count-pill {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.78rem;
	color: var(--asm-accent);
	background: var(--asm-accent-soft);
	border-radius: 20px;
	padding: 2px 10px;
}

.asm-btn {
	background: var(--asm-accent);
	color: #fff;
	border: none;
	padding: 11px 20px;
	border-radius: 7px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	font-family: 'Space Grotesk', sans-serif;
	transition: background 0.15s ease, transform 0.1s ease;
}
.asm-btn:hover { background: #6c4ce8; }
.asm-btn:active { transform: scale(0.98); }

/* Lists / rows */
.asm-fe-list { list-style: none; padding: 0; margin: 0; }
.asm-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--asm-border);
}
.asm-row:last-child { border-bottom: none; }
.asm-row-title { font-weight: 500; }
.asm-row-meta { color: var(--asm-muted); font-size: 0.85rem; margin-left: auto; }

.asm-badge {
	font-size: 0.72rem;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.asm-badge-ok { background: rgba(74, 222, 128, 0.15); color: var(--asm-ok); }
.asm-badge-error { background: rgba(255, 107, 107, 0.15); color: var(--asm-danger); }

.asm-fe-empty { color: var(--asm-muted); font-style: italic; padding: 6px 0; }

/* Gallery (graphics) */
.asm-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 12px;
}
.asm-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 12px 8px;
	background: var(--asm-panel-2);
	border: 1px solid var(--asm-border);
	border-radius: 8px;
	text-align: center;
}
.asm-tile-preview {
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
}
.asm-tile-preview svg { width: 28px; height: 28px; }
.asm-tile-title { font-size: 0.75rem; color: var(--asm-text); word-break: break-word; }

/* Stat tiles (dashboard) */
.asm-stat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}
.asm-stat-tile {
	background: var(--asm-panel);
	border: 1px solid var(--asm-border);
	border-radius: var(--asm-radius);
	padding: 18px 14px;
	text-align: center;
}
.asm-stat-num {
	display: block;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--asm-accent);
	line-height: 1.1;
}
.asm-stat-label {
	display: block;
	margin-top: 4px;
	font-size: 0.75rem;
	color: var(--asm-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Plan grid (settings) */
.asm-plan-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.asm-plan-col {
	background: var(--asm-panel-2);
	border: 1px solid var(--asm-border);
	border-radius: 8px;
	padding: 14px;
}
.asm-plan-name {
	display: block;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 600;
	margin-bottom: 10px;
}
.asm-plan-free .asm-plan-name { color: var(--asm-muted); }
.asm-plan-silver .asm-plan-name { color: #c9cdd6; }
.asm-plan-gold .asm-plan-name { color: var(--asm-amber); }

/* Notices */
.asm-fe-notice {
	padding: 11px 15px;
	border-radius: 8px;
	margin-bottom: 18px;
	font-size: 0.9rem;
}
.asm-fe-notice-success { background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.3); color: var(--asm-ok); }
.asm-fe-notice-error { background: rgba(255, 107, 107, 0.12); border: 1px solid rgba(255, 107, 107, 0.3); color: var(--asm-danger); }

/* Responsive */
@media (max-width: 640px) {
	.asm-fe-wrap { padding: 18px; margin: 1.2rem 12px; }
	.asm-stat-grid { grid-template-columns: repeat(2, 1fr); }
	.asm-plan-grid { grid-template-columns: 1fr; }
	.asm-frame { font-size: 0.72rem; padding: 8px 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.asm-fe-wrap * { transition: none !important; }
}