/* APPLE / FIGMA INSPIRED BENTO GRID CSS */
:root {
    --bg-color: #F5F5F7;
    /* Apple's light gray background */
    --card-bg: #FFFFFF;
    --text-main: #1D1D1F;
    --text-secondary: #86868B;
    --accent-color: #5E5CE6;
    /* Electric Indigo */
    --accent-hover: #4A48C8;
    --border-light: rgba(0, 0, 0, 0.04);
    --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    --shadow-hover: 0 20px 40px -5px rgba(0, 0, 0, 0.08), 0 10px 15px -3px rgba(0, 0, 0, 0.04);
    --radius-default: 24px;
    --radius-small: 12px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: border-box;
}

/* Ambient Glow */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
    background: linear-gradient(180deg, rgba(94, 92, 230, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
    /* filter: blur(100px); removed blur for cleaner gradient, or keep if preferred. user asked for edge to edge fade. usually linear gradients are smooth enough without extreme blur, but blur helps mesh with white background. Let's keep a softer blur but less extreme */
    z-index: -1;
    pointer-events: none;
}

/* Tool Layout Shell */
.app-shell {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px 80px;
    animation: fadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 100px 20px 80px;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-secondary);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 24px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.hero h1 {
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    margin: 0 0 24px;
    background: linear-gradient(90deg, #363457 0%, #363457 40%, #5E5CE6 50%, #363457 60%, #363457 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
    animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s backwards, shimmer 6s linear infinite;
}

.hero p {
    font-size: 1.4rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.5;
    animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards;
}

@keyframes shimmer {
    0% {
        background-position: 100% center;
    }

    100% {
        background-position: -100% center;
    }
}

/* Compact Hero Modifier (For Tools) */
.hero-compact {
    padding: 0px 0px 0px;
}

.hero-compact h1 {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.hero-compact p {
    font-size: 1.1rem;
    max-width: 500px;
}

/* Guide Accordion (Custom JS for Smoothness) */
.guide-wrapper {
    max-width: 600px;
    margin: 24px auto 0;
    text-align: left;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.guide-wrapper.expanded {
    box-shadow: 0 8px 24px rgba(94, 92, 230, 0.06);
    border-color: rgba(94, 92, 230, 0.2);
}

.guide-toggle {
    width: 100%;
    padding: 12px 20px;
    background: rgba(94, 92, 230, 0.04);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #5E5CE6;
    transition: background 0.2s;
    outline: none;
}

.guide-toggle:hover {
    background: rgba(94, 92, 230, 0.08);
}

.guide-chevron {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.guide-wrapper.expanded .guide-chevron {
    transform: rotate(180deg);
}

.guide-content {
    height: 0;
    overflow: hidden;
    transition: height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.guide-inner {
    padding: 20px 24px;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.guide-inner strong {
    color: var(--text-main);
    font-weight: 600;
}

.guide-inner p {
    margin: 0 0 10px;
}

.guide-inner p:last-child {
    margin: 0;
}



/* Segmented Control Tabs */
.tabs-nav {
    display: flex;
    background: rgba(118, 118, 128, 0.12);
    padding: 4px;
    border-radius: 99px;
    margin: 0 auto;
    /* Moved margin to parent container if needed */
    max-width: 400px;
    position: relative;
}

.card-header-tabs {
    padding-top: 24px;
    padding-bottom: 0px;
    display: flex;
    justify-content: center;
}

.tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    outline: none;
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text-main);
}

.tab-btn.active {
    background: white;
    color: var(--text-main);
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.tab-pane {
    display: none;
    animation: fadeUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding: 32px 32px 32px 32px;
    /* Tight top padding */
}

.tab-pane.active {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Focused Tool Layout */
.tool-container {
    max-width: 600px;
    margin: 0 auto;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bento Grid Layout */
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px 100px;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 Column Grid */
    grid-auto-rows: minmax(280px, auto);
    gap: 24px;
}

/* Responsive Grid */
@media (max-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }

    .container {
        padding: 0 20px 80px;
    }

    .hero h1 {
        font-size: 2.5rem;
    }
}

/* Card Base Styles */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-default);
    padding: 32px;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    text-decoration: none;
    color: inherit;
    display: flex;
    animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    position: relative;
}

/* Staggered Delays */
.card:nth-child(1) {
    animation-delay: 0.1s;
}

.card:nth-child(2) {
    animation-delay: 0.15s;
}

.card:nth-child(3) {
    animation-delay: 0.2s;
}

.card:nth-child(4) {
    animation-delay: 0.25s;
}

.card:nth-child(5) {
    animation-delay: 0.3s;
}

.card:nth-child(6) {
    animation-delay: 0.35s;
}

.card:nth-child(7) {
    animation-delay: 0.4s;
}

.card:nth-child(8) {
    animation-delay: 0.45s;
}

.card:nth-child(9) {
    animation-delay: 0.5s;
}

.card:nth-child(10) {
    animation-delay: 0.55s;
}

.card:nth-child(11) {
    animation-delay: 0.6s;
}

.card:hover {
    transform: translateY(-4px) scale(1.005);
    box-shadow: var(--shadow-hover);
    border-color: rgba(94, 92, 230, 0.4);
    z-index: 10;
}

/* Static Card (No Hover / No Gap) */
.card.card-static {
    gap: 0;
}

.card.card-static:hover {
    transform: none;
    box-shadow: var(--shadow-soft);
    border-color: var(--border-light);
    cursor: default;
    z-index: 1;
}

/* Feature Cards (Span across) */
.col-span-2 {
    grid-column: span 2;
}

@media (max-width: 1024px) {
    .col-span-2 {
        grid-column: span 1;
    }

    /* Make specific important cards span 2 even on tablet if needed, but span 1 is safer */
}

@media (min-width: 601px) and (max-width: 1024px) {

    /* On tablet, maybe let feature cards span 2 still? */
    .col-span-2 {
        grid-column: span 2;
    }
}


.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.icon-box {
    width: 56px;
    height: 56px;
    background-color: #F2F1FA;
    /* Light Indigo Tint */
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: transform 0.3s ease;
}

.card:hover .icon-box {
    transform: scale(1.1) rotate(5deg);
    background-color: #E2E0F5;
    /* Slightly darker Indigo Tint */
}

.card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #363457;
    margin: 0 0 10px 0;
    letter-spacing: -0.02em;
}

.card p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
    font-weight: 400;
}

/* Large Card Typography Tweaks */
.col-span-2 h3 {
    font-size: 1.8rem;
}

.col-span-2 p {
    font-size: 1.1rem;
    max-width: 90%;
}

/* Tags */
.tags {
    margin-top: auto;
    padding-top: 24px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tag {
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 100px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background-color: #F5F5F7;
    color: var(--text-secondary);
    transition: all 0.2s;
}

/* === Shared Tool Styles (Refactored from QR) === */

/* Inputs */
.field-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 8px;
}

textarea,
input[type="text"],
select {
    width: 100%;
    border-radius: var(--radius-small);
    border: 1px solid #D1D1D6;
    background: #F5F5F7;
    color: var(--text-main);
    padding: 16px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: all 0.2s;
}

textarea:focus,
input:focus,
select:focus {
    background: #FFFFFF;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(94, 92, 230, 0.15);
}

/* Buttons */
.btn {
    border: none;
    border-radius: 99px;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #E5E5EA;
    color: var(--text-main);
}

.btn:hover:not(:disabled) {
    background: #D1D1D6;
    transform: translateY(-1px);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--accent-color);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    box-shadow: 0 4px 12px rgba(94, 92, 230, 0.25);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.btn-ghost {
    background: transparent;
    color: var(--accent-color);
}

.btn-ghost:hover {
    background: rgba(94, 92, 230, 0.05);
}

/* Dropzone */
.decode-dropzone {
    border: 2px dashed #C7C7CC;
    border-radius: var(--radius-small);
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #F9F9FA;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.decode-dropzone:hover,
.decode-dropzone.dragover {
    background: #FFFFFF;
    border-color: var(--accent-color);
}

.dropzone-icon {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
}

.dropzone-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Status Indicators */
.status {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #C7C7CC;
}

.status-dot.active {
    background: #34C759;
}

.status-dot.error {
    background: #FF3B30;
}

/* Controls Container */
.controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
    z-index: 100;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* === Home Page Mobile Optimizations (Scoped) === */
@media (max-width: 640px) {

    /* Hero Compactness */
    .home-page .hero {
        padding: 40px 20px 30px;
    }

    .home-page .hero h1 {
        font-size: 2.2rem;
        margin-bottom: 16px;
    }

    .home-page .hero p {
        font-size: 1.1rem;
        line-height: 1.4;
    }

    .home-page .hero-badge {
        margin-top: 16px;
        font-size: 0.75rem;
        padding: 4px 12px;
    }

    /* Container Spacing */
    .home-page .app-shell {
        padding-top: 20px;
    }

    .home-page .container {
        padding: 0 16px 60px;
    }

    /* Grid Tightening */
    .home-page .bento-grid {
        gap: 12px;
        grid-auto-rows: auto;
    }

    /* Card Compactness */
    .home-page .card {
        padding: 16px;
        /* Decreased from 32px standard and 20px initial plan */
        min-height: auto;
        gap: 12px;
    }

    .home-page .card-header {
        margin-bottom: 12px;
    }

    .home-page .icon-box {
        width: 44px;
        height: 44px;
        font-size: 22px;
        border-radius: 12px;
    }

    .home-page .card h3 {
        font-size: 1.1rem;
        /* Slightly reduced */
        margin-bottom: 4px;
        /* Tighter margin */
    }

    .home-page .card p {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* Tags */
    .home-page .tags {
        padding-top: 16px;
        gap: 6px;
    }

    .home-page .tag {
        font-size: 0.7rem;
        padding: 4px 10px;
    }

    /* Specific overrides for col-span cards on mobile if they become stacked 1 col */
    .home-page .col-span-2 h3 {
        font-size: 1.3rem;
    }
}