:root {
  --primary: #ff6b00;
  --primary-rgb: 255 107 0;
  --primary-hover: #e65c00;
  --primary-hover-rgb: 230 92 0;
  --secondary: #14213d;
  --secondary-rgb: 20 33 61;
  --accent: #ff6b00;
  --accent-rgb: 255 107 0;
  --background: #fafaf5;
  --background-rgb: 250 250 245;
  --surface: #f4f1de;
  --surface-rgb: 244 241 222;
  --card: #ffffff;
  --card-rgb: 255 255 255;
  --text: #1c1c1c;
  --text-rgb: 28 28 28;
  --text-primary: #1c1c1c;
  --text-primary-rgb: 28 28 28;
  --text-secondary: #6c757d;
  --text-secondary-rgb: 108 117 125;
  --heading: #1b263b;
  --heading-rgb: 27 38 59;
  --border: #0e0e0e;
  --border-rgb: 14 14 14;
  --success: #00bfa6;
  --success-rgb: 0 191 166;
  --warning: #f4a261;
  --warning-rgb: 244 162 97;
  --danger: #d72638;
  --danger-rgb: 215 38 56;
  --info: #3b82f6;
  --info-rgb: 59 130 246;
  --button: #ff6b00;
  --button-rgb: 255 107 0;
  --button-hover: #e65c00;
  --button-hover-rgb: 230 92 0;
  --button-text: #ffffff;
  --button-text-rgb: 255 255 255;
  --header-background: #f8f9fb;
  --header-background-rgb: 248 249 251;
  --sidebar-background: #0f3460;
  --sidebar-background-rgb: 15 52 96;
  --footer-background: #1b1b1b;
  --footer-background-rgb: 27 27 27;
  --footer-text: #bcbcbc;
  --footer-text-rgb: 188 188 188;
  --footer-border: #c7c7c7;
  --footer-border-rgb: 199 199 199;
  --link: #ff6b00;
  --link-rgb: 255 107 0;
  --link-hover: #e65c00;
  --link-hover-rgb: 230 92 0;
  --gradient-start: #ff6b00;
  --gradient-start-rgb: 255 107 0;
  --gradient-end: #f4a261;
  --gradient-end-rgb: 244 162 97;
  --font-family: Inter, sans-serif;
  --badge-trending: #d72638;
  --badge-trending-rgb: 215 38 56;
  --badge-sale: #00bfa6;
  --badge-sale-rgb: 0 191 166;
  --badge-free: #f4a261;
  --badge-free-rgb: 244 162 97;
  --badge-new: #3b82f6;
  --badge-new-rgb: 59 130 246;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgb(var(--surface-rgb) / 0.88), rgb(var(--background-rgb) / 1) 38%),
        linear-gradient(180deg, rgb(var(--background-rgb) / 1), rgb(var(--background-rgb) / 1));
    color: var(--text-primary);
    font-family: var(--font-family);
    line-height: 1.6;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg, rgb(var(--gradient-start-rgb) / 0.04), transparent 24%),
        repeating-linear-gradient(135deg, rgb(var(--border-rgb) / 0.035) 0 1px, transparent 1px 28px);
    opacity: 0.7;
    z-index: -1;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
}

img {
    max-width: 100%;
    display: block;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

textarea,
input {
    width: 100%;
    border-radius: 0;
    border: 1px solid rgb(var(--border-rgb) / 0.18);
    background:
        linear-gradient(135deg, rgb(var(--card-rgb) / 1), rgb(var(--surface-rgb) / 0.9));
    color: var(--text-primary);
    padding: 1rem 1.1rem;
    outline: 0;
    clip-path: polygon(0.85rem 0, 100% 0, 100% calc(100% - 0.85rem), calc(100% - 0.85rem) 100%, 0 100%, 0 0.85rem);
    transition: border-color 0.2s ease, background 0.2s ease;
}

textarea:focus,
input:focus {
    border-color: rgb(var(--primary-rgb) / 0.44);
    box-shadow: none;
    background:
        linear-gradient(135deg, rgb(var(--card-rgb) / 1), rgb(var(--accent-rgb) / 0.07));
}

textarea {
    min-height: 16rem;
    resize: vertical;
}

pre,
code {
    font-family: var(--font-family);
}

::selection {
    background: rgb(var(--accent-rgb) / 0.18);
    color: var(--text-primary);
}

.site-frame {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(14px);
    background:
        linear-gradient(90deg, rgb(var(--header-background-rgb) / 0.96), rgb(var(--surface-rgb) / 0.9));
    border-bottom: 1px solid rgb(var(--border-rgb) / 0.18);
}

.site-header__inner {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 1.05rem 0.6rem 1.25rem;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--heading);
    background: rgb(var(--surface-rgb) / 0.88);
    border: 1px solid rgb(var(--border-rgb) / 0.16);
    clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 0 100%, 0.65rem 50%);
}

.site-logo__image {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    object-fit: contain;
}

.site-logo__text {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.site-nav a,
.site-nav-panel summary,
.site-nav-panel__menu a {
    color: var(--text-secondary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    min-height: 2.65rem;
    padding: 0.55rem 0.95rem 0.55rem 1.1rem;
    border: 1px solid rgb(var(--border-rgb) / 0.14);
    background: rgb(var(--surface-rgb) / 0.74);
    clip-path: polygon(0.8rem 0, 100% 0, calc(100% - 0.8rem) 100%, 0 100%);
}

.site-nav a.is-active {
    color: var(--heading);
    background: rgb(var(--accent-rgb) / 0.12);
    border-color: rgb(var(--accent-rgb) / 0.26);
}

.site-nav-panel {
    display: none;
    position: relative;
}

.site-nav-panel summary {
    list-style: none;
    padding-right: 1.1rem;
}

.site-nav-panel summary::-webkit-details-marker {
    display: none;
}

.site-nav-panel__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.75rem);
    min-width: 12rem;
    display: grid;
    gap: 0.35rem;
    padding: 0.8rem;
    border-radius: 0;
    border: 1px solid rgb(var(--border-rgb) / 0.16);
    background:
        linear-gradient(135deg, rgb(var(--card-rgb) / 1), rgb(var(--surface-rgb) / 0.92));
    box-shadow: none;
    clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
}

.page-shell {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
    flex: 1;
    padding: 3rem 0 4rem;
}

.hero-grid,
.tool-layout,
.docs-layout,
.admin-layout {
    display: grid;
    gap: 1.5rem;
}

.hero-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
    align-items: stretch;
}

.stack-lg {
    display: grid;
    gap: 1.25rem;
}

.hero-title,
.section-title,
.card-title,
.metric-value {
    color: var(--heading);
}

.hero-title {
    margin: 0;
    font-size: clamp(2.6rem, 5vw, 4.8rem);
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.hero-copy,
.section-copy,
.card-copy,
.metric-label,
.footer-block p,
.field-hint,
.tool-meta,
.empty-state p {
    color: var(--text-secondary);
}

.hero-panel,
.card,
.tool-surface,
.docs-surface,
.admin-surface,
.metric-card,
.notice,
.empty-state {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    border: 1px solid rgb(var(--border-rgb) / 0.16);
    background:
        linear-gradient(145deg, rgb(var(--card-rgb) / 1), rgb(var(--surface-rgb) / 0.9));
    box-shadow: none;
    clip-path: polygon(0 0, calc(100% - 1.75rem) 0, 100% 1.75rem, 100% 100%, 1.75rem 100%, 0 calc(100% - 1.75rem));
}

.hero-panel {
    padding: 1.5rem;
    background:
        linear-gradient(135deg, rgb(var(--gradient-start-rgb) / 0.1), transparent 38%),
        linear-gradient(315deg, rgb(var(--gradient-end-rgb) / 0.1), transparent 42%),
        linear-gradient(145deg, rgb(var(--card-rgb) / 1), rgb(var(--surface-rgb) / 0.92));
}

.card-grid > .card:nth-child(3n + 2),
.related-grid > .card:nth-child(odd),
.metric-grid > .metric-card:nth-child(even) {
    clip-path: polygon(1.4rem 0, 100% 0, calc(100% - 1.4rem) 100%, 0 100%);
}

.card-grid > .card:nth-child(3n),
.definition-grid > div:nth-child(even) {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.25rem), calc(100% - 1.25rem) 100%, 0 100%);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.metric-card {
    padding: 1rem;
    background:
        linear-gradient(135deg, rgb(var(--accent-rgb) / 0.08), transparent 44%),
        linear-gradient(145deg, rgb(var(--card-rgb) / 1), rgb(var(--surface-rgb) / 0.9));
}

.metric-value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    padding: 0.45rem 0.95rem 0.45rem 1rem;
    border-radius: 0;
    border: 1px solid rgb(var(--accent-rgb) / 0.22);
    background: rgb(var(--accent-rgb) / 0.1);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    clip-path: polygon(0.85rem 0, 100% 0, calc(100% - 0.85rem) 100%, 0 100%);
}

.button-row,
.output-actions,
.card-footer,
.card-topline,
.tool-meta-row,
.notice-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.button,
.button-plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.5rem 0.95rem 1.25rem;
    border-radius: 0;
    border: 1px solid rgb(var(--button-rgb) / 0.28);
    background: var(--button);
    color: var(--button-text);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    box-shadow: none;
    clip-path: polygon(1rem 0, 100% 0, calc(100% - 1rem) 100%, 0 100%);
}

.button:hover,
.button-plain:hover {
    background: var(--button-hover);
    color: var(--button-text);
    transform: translateX(0.35rem);
}

.button--ghost,
.button-plain {
    background: rgb(var(--surface-rgb) / 0.94);
    color: var(--text-primary);
    border-color: rgb(var(--border-rgb) / 0.18);
    box-shadow: none;
}

.button--ghost:hover,
.button-plain:hover {
    background: rgb(var(--surface-rgb) / 0.82);
    color: var(--text-primary);
}

.section-block {
    margin-top: 4rem;
    display: grid;
    gap: 1.5rem;
}

.section-block--tight {
    margin-top: 0;
}

.section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.section-title,
.card-title {
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.section-title {
    font-size: clamp(1.7rem, 3vw, 2.6rem);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.card-grid--wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card,
.tool-surface,
.docs-surface,
.admin-surface {
    padding: 1.4rem;
}

.card-title {
    font-size: 1.35rem;
}

.card-meta,
.field-label,
.faq-item dt,
.footer-block h2 {
    color: var(--heading);
    font-weight: 700;
}

.card-footer {
    justify-content: space-between;
    margin-top: 1rem;
}

.text-link {
    color: var(--link);
    font-weight: 700;
}

.text-link:hover {
    color: var(--link-hover);
}

.inline-code,
.code-block {
    border-radius: 0;
    background: rgb(var(--secondary-rgb) / 0.96);
    color: var(--button-text);
    clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 0.9rem, 100% 100%, 0.9rem 100%, 0 calc(100% - 0.9rem));
}

.inline-code {
    padding: 0.35rem 0.7rem;
    font-size: 0.92rem;
}

.code-block {
    padding: 1rem;
    overflow-x: auto;
}

.definition-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.definition-grid--full {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.definition-grid div {
    padding: 1rem;
    border-radius: 0;
    background:
        linear-gradient(135deg, rgb(var(--surface-rgb) / 1), rgb(var(--card-rgb) / 0.92));
    border: 1px solid rgb(var(--border-rgb) / 0.16);
    clip-path: polygon(0.95rem 0, 100% 0, calc(100% - 0.95rem) 100%, 0 100%);
}

.definition-grid dt {
    color: var(--heading);
    font-weight: 700;
}

.definition-grid dd {
    margin: 0.45rem 0 0;
    color: var(--text-secondary);
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.9rem 0.35rem 1rem;
    border-radius: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    clip-path: polygon(0.8rem 0, 100% 0, calc(100% - 0.8rem) 100%, 0 100%);
}

.badge--trending {
    background: rgb(var(--badge-trending-rgb) / 0.14);
    color: var(--badge-trending);
}

.badge--sale {
    background: rgb(var(--badge-sale-rgb) / 0.14);
    color: var(--badge-sale);
}

.badge--free {
    background: rgb(var(--badge-free-rgb) / 0.14);
    color: var(--badge-free);
}

.badge--new,
.badge--info {
    background: rgb(var(--badge-new-rgb) / 0.14);
    color: var(--badge-new);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.95rem 0.45rem 1rem;
    border-radius: 0;
    background: rgb(var(--surface-rgb) / 0.96);
    border: 1px solid rgb(var(--border-rgb) / 0.16);
    color: var(--text-secondary);
    clip-path: polygon(0.8rem 0, 100% 0, calc(100% - 0.8rem) 100%, 0 100%);
}

.breadcrumb {
    margin-bottom: 1rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.tool-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
    align-items: start;
}

.tool-form,
.stack-md,
.docs-stack,
.faq-list,
.related-grid {
    display: grid;
    gap: 1rem;
}

.form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.field {
    display: grid;
    gap: 0.45rem;
}

.field-label {
    font-size: 0.95rem;
}

.field-hint {
    font-size: 0.92rem;
}

.output-panel textarea {
    min-height: 18rem;
}

.faq-item {
    padding: 1rem 0;
    border-top: 1px solid rgb(var(--border-rgb) / 0.12);
}

.faq-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.faq-item dt {
    margin-bottom: 0.45rem;
}

.faq-item dd {
    margin: 0;
    color: var(--text-secondary);
}

.docs-layout,
.admin-layout {
    grid-template-columns: minmax(16rem, 18rem) minmax(0, 1fr);
    align-items: start;
}

.sidebar-nav {
    position: sticky;
    top: 6rem;
    display: grid;
    gap: 1rem;
}

.sidebar-group {
    padding: 1.2rem;
    border-radius: 0;
    border: 1px solid rgb(var(--border-rgb) / 0.16);
    background:
        linear-gradient(135deg, rgb(var(--surface-rgb) / 1), rgb(var(--card-rgb) / 0.92));
    clip-path: polygon(0 0, calc(100% - 1.15rem) 0, 100% 1.15rem, 100% 100%, 1.15rem 100%, 0 calc(100% - 1.15rem));
}

.sidebar-group h2 {
    margin: 0 0 0.8rem;
    color: var(--heading);
    font-size: 1rem;
}

.sidebar-group a {
    display: block;
    padding: 0.35rem 0;
    color: var(--text-secondary);
}

.sidebar-group a.is-active {
    color: var(--link);
    font-weight: 700;
}

.prose,
.prose p,
.prose li {
    color: var(--text-secondary);
}

.prose h1,
.prose h2,
.prose h3 {
    color: var(--heading);
}

.prose pre,
.prose code {
    white-space: pre-wrap;
    word-break: break-word;
}

.notice {
    padding: 1rem 1.1rem;
}

.notice--success {
    border-color: rgb(var(--success-rgb) / 0.24);
    background: rgb(var(--success-rgb) / 0.08);
}

.notice--danger {
    border-color: rgb(var(--danger-rgb) / 0.24);
    background: rgb(var(--danger-rgb) / 0.08);
}

.site-footer {
    background: var(--footer-background);
    color: var(--footer-text);
    border-top: 1px solid rgb(var(--footer-border-rgb) / 0.38);
    margin-top: auto;
}

.site-footer a,
.site-footer h2,
.site-footer p,
.site-footer span {
    color: var(--footer-text);
}

.site-footer__inner,
.site-footer__meta {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 2.5rem 0 2rem;
}

.footer-block {
    display: grid;
    gap: 0.55rem;
}

.footer-block h2 {
    margin: 0;
    font-size: 1rem;
}

.site-footer__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0 1.5rem;
    color: var(--footer-text);
}

.empty-state {
    padding: 1.4rem;
}

.screen-reader {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

@media (max-width: 960px) {
    .hero-grid,
    .tool-layout,
    .docs-layout,
    .admin-layout,
    .card-grid,
    .card-grid--wide,
    .site-footer__inner,
    .form-grid,
    .definition-grid,
    .definition-grid--full {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-nav--desktop {
        display: none;
    }

    .site-nav-panel {
        display: block;
    }

    .site-footer__meta,
    .section-header,
    .card-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .page-shell {
        padding: 2rem 0 3rem;
    }

    .site-header__inner {
        width: min(1120px, calc(100% - 1.2rem));
    }

    .page-shell,
    .site-footer__inner,
    .site-footer__meta {
        width: min(1120px, calc(100% - 1.2rem));
    }

    .metric-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .button-row,
    .output-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
}