/* /Layout/Footer.razor.rz.scp.css */
.footer[b-ms6p8bag9j] {
    font-size: 0.8rem;
    color: #8ca0b3;
    text-align: center;
    padding: 1.25rem 1rem 2.5rem;
    background-color: #0d1117; /* dark background */
    margin-top: 3rem;
    border-top: 1px solid #272d35;
}

.footer a[b-ms6p8bag9j] {
    color: #3b82f6;
    text-decoration: none;
}

.footer a:hover[b-ms6p8bag9j] {
    text-decoration: underline;
    color: #60a5fa;
}

.footer p[b-ms6p8bag9j] {
    margin: 0;
    line-height: 1.4;
    letter-spacing: .2px;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-5kwjrqwat7] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 3.5rem;
    min-height: 100vh;
    /* Account for fixed top navigation */
}

main[b-5kwjrqwat7] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.content[b-5kwjrqwat7] {
    flex: 1;
}

/* Dark outer background to match generator page theme */
article.content[b-5kwjrqwat7] {
    background:#0d1117; /* same as --g-bg */
    color:#d8e2ec;
}

body[b-5kwjrqwat7], main[b-5kwjrqwat7], .page[b-5kwjrqwat7] { background:#0d1117; }

.sidebar[b-5kwjrqwat7] {
    background: linear-gradient(180deg,#1f2330 0%,#141922 60%,#10161d 100%);
    border-right:1px solid #272d35;
}

@media (max-width: 640.98px) {
    /* Mobile styles */
}

@media (min-width: 641px) {
    .page[b-5kwjrqwat7] {
        flex-direction: row;
    }

    .sidebar[b-5kwjrqwat7] {
        /* Keep sidebar visible but it will be positioned fixed via NavMenu.razor.css */
        width: 48px;
    }

    article[b-5kwjrqwat7] {
        padding-left: 56px !important; /* 48px sidebar + 8px gap */
        /* Account for fixed 48px sidebar */
        padding-right: 1.5rem !important;
        width: calc(100% - 48px);
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-k73zk4vsw9] {
    background-color: rgba(255, 255, 255, 0.1);
}

 .top-row[b-k73zk4vsw9] {
     min-height: 3.5rem;
     background: linear-gradient(90deg,#121820,#1d2430 50%,#121820); /* dark top bar */
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

.navbar-brand[b-k73zk4vsw9] {
    font-size: 1.1rem;
}

/* Added logo/icon sizing */
.navbar-logo[b-k73zk4vsw9] {
    width: 28px;
    height: 28px;
    display: inline-block;
}

.nav-icon[b-k73zk4vsw9] {
    width: 32px;
    height: 32px;
    display: block;
}

/* Single-icon sidebar adjustments */
.nav-link.nav-single[b-k73zk4vsw9] {
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    height: 48px;
    width: 48px;
}

.nav-link.nav-single.active[b-k73zk4vsw9], .nav-link.nav-single:focus[b-k73zk4vsw9], .nav-link.nav-single:hover[b-k73zk4vsw9] {
    background: rgba(255,255,255,0.12) !important;
    border-radius: 0 !important;
}

.bi[b-k73zk4vsw9] {
    display: inline-block;
    position: relative;
    top: -1px;
}

.nav-item[b-k73zk4vsw9] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.nav-item:first-of-type[b-k73zk4vsw9] {
    padding-top: 1rem;
}

.nav-item:last-of-type[b-k73zk4vsw9] {
    padding-bottom: 1rem;
}

 .nav-item[b-k73zk4vsw9]  a {
     color: #b8c4cf;
     border-radius: 4px;
     height: 3rem;
     display: flex;
     align-items: center;
     justify-content: center;
     min-width: 3rem;
     padding: 0.5rem;
     transition:.18s background,.18s color;
 }

 .nav-item[b-k73zk4vsw9]  a.active {
     background: #2563eb;
     color: #fff;
 }

.nav-item[b-k73zk4vsw9]  a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

@media (max-width: 640.98px) {
    .navbar-toggler[b-k73zk4vsw9] {
        display: block;
        /* Show hamburger menu on mobile */
    }

    .nav-scrollable[b-k73zk4vsw9] {
        position: fixed;
        top: 3.5rem;
        left: 0;
        width: 100%;
        background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
        z-index: 1020;
    }

    .nav-scrollable.collapse[b-k73zk4vsw9] {
        display: none;
        /* Hide on mobile when collapsed */
    }

    .nav-scrollable:not(.collapse)[b-k73zk4vsw9] {
        display: block;
        /* Show on mobile when expanded */
    }
}

@media (min-width: 641px) {
    .navbar-toggler[b-k73zk4vsw9] {
        display: none;
        /* Hide hamburger menu on desktop */
    }

    .nav-scrollable[b-k73zk4vsw9] {
        /* Always show sidebar on desktop */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
        position: fixed;
        top: 3.5rem;
        left: 0;
        width: 48px; /* Narrowed to fit single icon */
        background: linear-gradient(180deg,#1f2330 0%,#141922 60%,#10161d 100%);
        display: block !important;
        /* Always visible on desktop */
    }

    /* Adjust anchor to avoid horizontal clipping in 48px sidebar */
    .nav-scrollable .nav-item[b-k73zk4vsw9]  a {
        padding: 0 !important;
        min-width: 48px;
        width: 48px;
        height: 48px;
        line-height: 48px;
        border-radius: 0 !important;
        box-sizing: border-box;
    }

    /* Scale icon slightly smaller for visual balance */
    .nav-scrollable .nav-icon[b-k73zk4vsw9] {
        width: 28px;
        height: 28px;
    }
}
/* /Pages/GoogleButtonGenerator.razor.rz.scp.css */
/* CSS Isolation file for GoogleButtonGenerator component */
/* Dark mode theme variables (scoped) */
.generator-dark[b-97g43pk6d4] {
    --g-bg:#0d1117;
    --g-surface:#161b22;
    --g-surface-alt:#1e2530;
    --g-border:#2a323b;
    --g-border-strong:#3a4754;
    --g-text:#d8e2ec;
    --g-text-soft:#aab9c7;
    --g-text-mute:#8ea0b1;
    --g-accent:#3d6df2; /* unified accent */
    background:var(--g-bg);
    color:var(--g-text);
    padding-bottom:3rem;
}

.generator-dark h1[b-97g43pk6d4] { color: var(--g-text); font-weight:600; letter-spacing:.5px; }
.generator-dark .lead-desc[b-97g43pk6d4] { color: var(--g-text-soft); font-size:.95rem; }

.dark-card[b-97g43pk6d4] { background: var(--g-surface); border:1px solid var(--g-border); }
.dark-card-header[b-97g43pk6d4] { background: var(--g-surface-alt); border-bottom:1px solid var(--g-border); }
.dark-card-body[b-97g43pk6d4] { background: var(--g-surface); }

.generator-dark .card[b-97g43pk6d4] { box-shadow: none; }
.generator-dark .card:not(:last-child)[b-97g43pk6d4] { margin-bottom:1.25rem; }

.generator-dark .preview-container[b-97g43pk6d4] { background: var(--g-surface-alt); border:1px solid var(--g-border); }

/* Typography & contrast adjustments */
.generator-dark .card-header h5[b-97g43pk6d4],
.generator-dark .form-label[b-97g43pk6d4],
.generator-dark label[b-97g43pk6d4],
.generator-dark .nav-tabs .nav-link[b-97g43pk6d4],
.generator-dark h5[b-97g43pk6d4] { color: var(--g-text-soft); }

.generator-dark .nav-tabs .nav-link.active[b-97g43pk6d4] { color: var(--g-text); }
.generator-dark .nav-tabs .nav-link:not(.active):hover[b-97g43pk6d4] { background: var(--g-surface); }

.generator-dark .card-header h5[b-97g43pk6d4] { font-weight:600; letter-spacing:.3px; }

.generator-dark .form-control[b-97g43pk6d4],
.generator-dark .form-select[b-97g43pk6d4],
.generator-dark textarea.form-control[b-97g43pk6d4] { background:#121a22; color:var(--g-text); border:1px solid var(--g-border); }
.generator-dark .form-control:focus[b-97g43pk6d4],
.generator-dark .form-select:focus[b-97g43pk6d4] { background:#151f28; }

.generator-dark [b-97g43pk6d4]::placeholder { color: var(--g-text-mute); opacity:.75; }
.generator-dark input[type=text][b-97g43pk6d4],
.generator-dark select[b-97g43pk6d4] { color: var(--g-text); }

/* Range slider track for better visibility */
.generator-dark .form-range[b-97g43pk6d4]::-webkit-slider-runnable-track { background:#2f3944; }
.generator-dark .form-range[b-97g43pk6d4]::-moz-range-track { background:#2f3944; }
.generator-dark .form-range[b-97g43pk6d4] { background:transparent; }

.generator-dark .text-muted[b-97g43pk6d4], .generator-dark .form-text[b-97g43pk6d4] { color: var(--g-text-soft) !important; }

.generator-dark .form-control[b-97g43pk6d4], .generator-dark .form-select[b-97g43pk6d4], .generator-dark textarea.form-control[b-97g43pk6d4] { background: #0f141b; color: var(--g-text); border:1px solid var(--g-border); }
.generator-dark .form-control:focus[b-97g43pk6d4], .generator-dark .form-select:focus[b-97g43pk6d4] { box-shadow:0 0 0 2px rgba(61,109,242,.35); border-color: var(--g-accent); }

.generator-dark .btn-outline-secondary.btn-sm[b-97g43pk6d4] { color: var(--g-text-soft); border-color: var(--g-border); background: #10161d; }
.generator-dark .btn-outline-secondary.btn-sm:hover[b-97g43pk6d4] { background: var(--g-surface-alt); color: var(--g-text); border-color: var(--g-border-strong); }

.generator-dark .btn-info[b-97g43pk6d4] { background:#0ea5e9; border-color:#0ea5e9; color:#fff; }
.generator-dark .btn-info:hover[b-97g43pk6d4] { background:#0284c7; border-color:#0284c7; }
.generator-dark .btn-success[b-97g43pk6d4] { background:#15803d; border-color:#15803d; }
.generator-dark .btn-success:hover[b-97g43pk6d4] { background:#166534; border-color:#166534; }
.generator-dark .btn-primary[b-97g43pk6d4] { background:var(--g-accent); border-color:var(--g-accent); }
.generator-dark .btn-primary:hover[b-97g43pk6d4] { background:#3159c5; border-color:#3159c5; }
.generator-dark .btn-secondary[b-97g43pk6d4] { background:#374151; border-color:#374151; }
.generator-dark .btn-secondary:hover[b-97g43pk6d4] { background:#4b5563; border-color:#4b5563; }
/* Remove Bootstrap focus ring/white border on click for buttons within the generator */
.generator-dark .btn:focus[b-97g43pk6d4],
.generator-dark .btn:focus-visible[b-97g43pk6d4],
.generator-dark .btn:active:focus[b-97g43pk6d4],
.generator-dark .btn:active[b-97g43pk6d4] {
    outline: none !important;
    box-shadow: none !important;
}

.generator-dark .nav-tabs[b-97g43pk6d4] { border-bottom:1px solid var(--g-border); }
.generator-dark .nav-tabs .nav-link[b-97g43pk6d4] { background:var(--g-surface-alt); color: var(--g-text-soft); border:1px solid var(--g-border); margin-right:2px; }
.generator-dark .nav-tabs .nav-link.active[b-97g43pk6d4] { background: var(--g-surface); color: var(--g-text); border-bottom:1px solid var(--g-surface); }
.generator-dark .nav-tabs .nav-link:hover[b-97g43pk6d4] { color: var(--g-text); }

.generator-dark #svgCodeTextarea[b-97g43pk6d4] { background:#0f141b; color:#a9c0d3; border:1px solid var(--g-border); }

.generator-dark input[type=color][b-97g43pk6d4] { background:var(--g-surface-alt); border:1px solid var(--g-border); }

.generator-dark .btn-group[b-97g43pk6d4], .generator-dark .btn-group-vertical[b-97g43pk6d4] { box-shadow:none; }
/* Logo selector group: single rounded outline to match section/card, with inner dividers only */
.generator-dark .dark-card-header .btn-group[b-97g43pk6d4] {
    border: 1px solid var(--g-border);
    border-radius: .75rem;
    overflow: hidden; /* clip active bg to rounded corners */
    background: var(--g-surface-alt);
}
.generator-dark .dark-card-header .btn-group .btn[b-97g43pk6d4] {
    background: var(--g-surface-alt);
    color: var(--g-text-soft);
    border: none; /* remove per-button border to prevent double outlines */
}
.generator-dark .dark-card-header .btn-group .btn + .btn[b-97g43pk6d4] {
    border-left: 1px solid var(--g-border); /* inner separators */
}
.generator-dark .dark-card-header .btn-group .btn:hover[b-97g43pk6d4] { color: var(--g-text); }
.generator-dark .dark-card-header .btn-group .btn.active[b-97g43pk6d4] { background: var(--g-accent); color:#fff; }
/* Ensure the first/last buttons inherit rounded outer corners for consistent feel */
.generator-dark .dark-card-header .btn-group .btn:first-child[b-97g43pk6d4] {
    border-top-left-radius: .75rem;
    border-bottom-left-radius: .75rem;
}
.generator-dark .dark-card-header .btn-group .btn:last-child[b-97g43pk6d4] {
    border-top-right-radius: .75rem;
    border-bottom-right-radius: .75rem;
}
/* Ensure the currently active/pressed button stays above neighbors to avoid overlap when hovering adjacent buttons */
.generator-dark .btn-group .btn[b-97g43pk6d4],
.generator-dark .btn-group-vertical .btn[b-97g43pk6d4] {
    position: relative; /* enable z-index stacking */
}
.generator-dark .btn-group .btn.active[b-97g43pk6d4],
.generator-dark .btn-group .btn:active[b-97g43pk6d4],
.generator-dark .btn-group .btn:focus[b-97g43pk6d4],
.generator-dark .btn-group-vertical .btn.active[b-97g43pk6d4],
.generator-dark .btn-group-vertical .btn:active[b-97g43pk6d4],
.generator-dark .btn-group-vertical .btn:focus[b-97g43pk6d4] {
    z-index: 2;
}
.generator-dark .btn-group .btn:hover[b-97g43pk6d4],
.generator-dark .btn-group-vertical .btn:hover[b-97g43pk6d4] {
    z-index: 1;
}
/* When using Bootstrap's .btn-check radios, the label after a checked input needs an explicit rule */
.generator-dark .btn-check:checked + .btn[b-97g43pk6d4],
.generator-dark .btn-check:checked + .btn-outline-primary[b-97g43pk6d4],
.generator-dark .btn-check:active + .btn[b-97g43pk6d4],
.generator-dark .btn-check:focus + .btn[b-97g43pk6d4] {
    background: var(--g-accent) !important;
    color: #fff !important;
    border-color: var(--g-accent) !important;
}

.generator-dark .form-range[b-97g43pk6d4]::-webkit-slider-thumb { background:var(--g-accent); }
.generator-dark .form-range[b-97g43pk6d4]::-moz-range-thumb { background:var(--g-accent); }
.generator-dark .form-range[b-97g43pk6d4] { accent-color:var(--g-accent); }

.generator-dark .preview-container svg[b-97g43pk6d4] { filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }

@media (max-width: 767.98px){ .generator-dark h1[b-97g43pk6d4] { font-size:1.5rem; } }

/* Preview container styling */
/* Removed light theme preview container to keep dark style */
/* (previous light .preview-container block deleted) */

/* Wrapper layout simplification */
.generator-wrapper[b-97g43pk6d4] { max-width: 1180px; margin:0 auto; padding:0 0 3rem; }
.generator-wrapper .page-head[b-97g43pk6d4] { margin-bottom:1.25rem; }

/* Collapsible card headers */
.card-header[data-bs-toggle="collapse"][b-97g43pk6d4] {
    cursor: pointer;
}

/* Color input controls */
.form-control-color[b-97g43pk6d4] {
    width: 60px;
}

/* Plus/minus buttons for sliders */
.btn-outline-secondary.btn-sm[b-97g43pk6d4] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    min-width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-outline-secondary.btn-sm:hover[b-97g43pk6d4] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

/* Slider container styling */
.form-range.flex-grow-1[b-97g43pk6d4] {
    margin: 0 0.5rem;
}

/* Logo image styling within buttons */
.btn img[b-97g43pk6d4] {
    transition: opacity 0.2s ease-in-out;
}

.btn:hover img[b-97g43pk6d4] {
    opacity: 0.8;
}


/* SVG textarea styling */
#svgCodeTextarea[b-97g43pk6d4] {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    resize: vertical;
}

/* Action buttons styling */
.d-grid .btn[b-97g43pk6d4] {
    margin-bottom: 0.5rem;
}

@media (max-width: 767.98px) {
    .d-grid .btn[b-97g43pk6d4] {
        margin-bottom: 0.75rem;
    }
}

/* Card spacing improvements */
.card[b-97g43pk6d4] {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header h5[b-97g43pk6d4] {
    margin-bottom: 0;
}

/* Collapse arrow animation */
.card-header[data-bs-toggle="collapse"] .float-end[b-97g43pk6d4] {
    transition: transform 0.2s ease-in-out;
}

.card-header[data-bs-toggle="collapse"][aria-expanded="true"] .float-end[b-97g43pk6d4] {
    transform: rotate(180deg);
}

/* Form control spacing */
.form-control[b-97g43pk6d4],
.form-select[b-97g43pk6d4],
.form-range[b-97g43pk6d4] {
    margin-bottom: 0.5rem;
}

/* Button group responsive improvements */
@media (min-width: 768px) {
    .btn-group[b-97g43pk6d4] {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
}

@media (max-width: 767.98px) {
    .btn-group-vertical[b-97g43pk6d4] {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
}

/* Enhanced preview container */
.preview-container svg[b-97g43pk6d4] {
    max-width: 100%;
    height: auto;
}

/* Logo size consistency */
.btn-group .btn img[b-97g43pk6d4],
.btn-group-vertical .btn img[b-97g43pk6d4] {
    object-fit: contain;
}

/* Improved button spacing in action rows */
.row .col-md-3[b-97g43pk6d4] {
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .row .col-md-3[b-97g43pk6d4] {
        margin-bottom: 0;
    }
}
/* /Pages/Home.razor.rz.scp.css */
:root[b-dzv9w3e8he] {
    --bg: #0d1117;
    --panel: #161b22;
    --panel-alt: #1e2530;
    --border: #2a323b;
    --text: #d8e2ec;
    --text-soft: #aab9c7;
    --text-mute: #8ea0b1;
    --accent: #3d6df2;
}

.dev-hero[b-dzv9w3e8he] { background: radial-gradient(circle at 20% 25%, #1e2634 0%, #0d1117 60%); padding:4.5rem 1rem 3rem; color:var(--text); position:relative; overflow:hidden; text-align:center; }
.dev-hero[b-dzv9w3e8he]:before { content:""; position:absolute; inset:0; background-image:linear-gradient(transparent 60%, rgba(99,102,241,.08)); pointer-events:none; }

.headline[b-dzv9w3e8he] { font-size:clamp(2.2rem,6vw,3.3rem); font-weight:700; line-height:1.05; margin-bottom:1.1rem; }
.grad[b-dzv9w3e8he], .grad-sm[b-dzv9w3e8he] { color:var(--accent); }
.tagline[b-dzv9w3e8he] { max-width:760px; margin:0 auto 1.75rem; font-size:1.05rem; color:var(--text-soft);  text-align:left;}
.actions a[b-dzv9w3e8he] { backdrop-filter:blur(4px); }

.preview-wrapper[b-dzv9w3e8he] { margin-top:2.5rem; display:flex; flex-direction:column; gap:.85rem; align-items:center; }
.preview-surface[b-dzv9w3e8he] { background:var(--panel); border:1px solid var(--border); padding:1rem 1.25rem 1rem; border-radius:14px; position:relative; width:min(560px,100%); }
.preview-surface[b-dzv9w3e8he]:after { content:""; position:absolute; inset:0; border-radius:14px; border:1px solid var(--border); pointer-events:none; }
.mini-label[b-dzv9w3e8he] { font-size:.65rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:.35rem; }
.example-svg[b-dzv9w3e8he] { background:var(--panel-alt); border:1px solid var(--border); border-radius:10px; padding:.75rem 1rem; }
.code-snippet[b-dzv9w3e8he] { background:#0f141b; color:#9fb3c9; border:1px solid var(--border); padding:.75rem 1rem; margin:0; width:min(560px,100%); font-size:.8rem; border-radius:10px; overflow-x:auto; }

.features-grid[b-dzv9w3e8he] { padding-top:3.5rem !important; }
.sec-title[b-dzv9w3e8he] { font-size:clamp(1.6rem,4vw,2.2rem); font-weight:600; margin-bottom:.5rem; }
.muted[b-dzv9w3e8he] { color:var(--text-mute); }

.feat[b-dzv9w3e8he] { background:var(--panel); border:1px solid var(--border); padding:1.1rem 1.15rem 1.15rem; border-radius:12px; display:flex; flex-direction:column; gap:.5rem; position:relative; overflow:hidden; transition:.18s background,.18s border-color; }
.feat[b-dzv9w3e8he]:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 15%, rgba(99,102,241,.18), transparent 60%); opacity:0; transition:.3s opacity; }
.feat h5[b-dzv9w3e8he] { font-size:1rem; font-weight:600; margin:0; color:var(--text); }
.feat p[b-dzv9w3e8he] { font-size:.82rem; line-height:1.35; margin:0; color:var(--text-soft); }
.feat:hover[b-dzv9w3e8he] { border-color:var(--accent); background:var(--panel-alt); }
.feat:hover[b-dzv9w3e8he]:before { opacity:1; }

/* Remove outline border from Features button when clicked/focused */
.actions .btn-outline-secondary:focus[b-dzv9w3e8he],
.actions .btn-outline-secondary:focus-visible[b-dzv9w3e8he],
.actions .btn-outline-secondary:active:focus[b-dzv9w3e8he],
.actions .btn-outline-secondary:active[b-dzv9w3e8he] {
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width:768px){ .preview-wrapper[b-dzv9w3e8he] { margin-top:2rem; } .preview-surface[b-dzv9w3e8he] { padding:1rem; } }

@font-face {
    font-family: 'Roboto Medium';
    src: url('/fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
}