/* ===========================
   DARK MODE (default)
   =========================== */
:root {
    --color-primary:   #F1E01E; /* Highlights */
    --color-secondary: #2E293A; /* Background */
    --color-accent:    #50A795; /* Design elements */
    --color-copy:      #CECAC1; /* Text */
    --color-new:       #ff3860 /* New */
}

/* ===========================
   LIGHT MODE
   accent becomes the new primary
   =========================== */
:root.light {
    --color-primary:   #50A795; /* accent becomes primary */
    --color-secondary: #FFFFFF; /* Light background */
    --color-accent:    #F1E01E; /* Previous primary becomes accent? (optional) */
    --color-copy:      #2E293A; /* Dark readable text */
}

body { font-family: 'Urbanist', sans-serif; background: var(--color-secondary); color: var(--color-copy); }

/* ===========================
    # Breadcrumbs
   =========================== */

.breadcrumb a {
    color: var(--color-primary);
}

.breadcrumb li.is-active a {
    color: var(--color-copy);
    cursor: default;
}

/* ===========================
    # App Card
   =========================== */
.app-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    padding: 0;
    background: #f5f5f5;
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.6s ease;
}

.app-card:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

/* NEW badge */
.app-card .badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--color-new);
    color: white;
    padding: 0.15rem 0.45rem;
    border-radius: 0.75rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 10;
}

/* Hero section */
.app-card .hero {
    width: 100%;
    height: 110px;
    background: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.6s ease;
}

.app-card:hover .hero {
    background: white;
}
.app-card:hover .hero i {
    color: var(--color-primary);
}

.app-card .hero i {
    font-size: 2.4rem;
    color: white;
}

.app-card .title {
    margin: 1rem 1rem 2rem 1rem;
}

.app-card .description {
    margin: 0 1rem 1.25rem 1rem;
}

/* ===========================
    # Tool row
   =========================== */

.output {
	background-color: #f5f5f5;
	border-radius: 6px;
	padding: 1.5rem;
	min-height: 260px;
}

.create-tool-row {
    width: 100%;
}

.create-tool-card {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    background: var(--color-secondary);
    border-radius: 8px;
    border: 1px solid var(--color-secondary);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: all 0.4s ease;
	box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.create-tool-card:hover {
	border: 1px solid var(--color-primary);
}

.create-tool-card.is-disabled {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

.create-tool-card .icon-area {
    border-radius: 6px 0 0 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;               /* square */
	align-self: stretch;               /* full card height */
	flex-shrink: 0;
	background: var(--color-primary);
	padding: 1.25rem;
	color: var(--color-secondary);
}

.create-tool-card .icon-area i {
    font-size: 1.5rem;
    color: #363636;
}

.create-tool-card .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* MOBILE: stack vertically */
@media (max-width: 768px) {
    .create-tool-card {
        flex-direction: column;
        text-align: left;
    }

    .create-tool-card .icon-area {
        margin-bottom: 0.5rem;
    }
}