:root {
    --ink: #172321;
    --muted: #66736f;
    --line: #dfe7e4;
    --surface: #ffffff;
    --canvas: #f4f8f7;
    --primary: #105c52;
    --primary-strong: #0b443d;
    --accent: #f26d4f;
    --warning: #c47b13;
    --radius: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--canvas);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

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

.btn { border-radius: 8px; font-weight: 650; }
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-strong); --bs-btn-hover-border-color: var(--primary-strong); }
.btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); }

.app-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 100vh;
}

.app-sidebar {
    background: #13211f;
    color: #eef7f4;
    padding: 24px 16px;
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
    margin-bottom: 28px;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--accent);
    color: #ffffff;
    font-weight: 800;
}

.brand-lockup small { display: block; color: #a8bbb6; }

.app-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #c8d7d3;
    border-radius: 8px;
    padding: 10px 12px;
}

.app-sidebar .nav-link.active,
.app-sidebar .nav-link:hover { background: #203633; color: #ffffff; }
.app-sidebar .nav-link.disabled { opacity: .48; }

.app-main { padding: 28px; min-width: 0; }

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.app-topbar h1,
.panel-header h2,
.asset-row h3 { margin: 0; letter-spacing: 0; }
.app-topbar h1 { font-size: clamp(1.6rem, 2vw, 2.3rem); font-weight: 780; }
.panel-header h2 { font-size: 1.2rem; font-weight: 760; }

.eyebrow {
    color: var(--accent);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.topbar-actions { display: flex; align-items: center; gap: 12px; }
.search-shell { position: relative; width: min(320px, 34vw); }
.search-shell i { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--muted); }
.search-shell input { padding-left: 38px; border-radius: 8px; border-color: var(--line); }

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

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

.metric-card,
.content-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(18, 35, 31, .06);
}

.metric-card { padding: 18px; }
.metric-card span,
.metric-card small { display: block; color: var(--muted); }
.metric-card strong { display: block; margin: 6px 0 2px; font-size: 2rem; line-height: 1; }
.metric-card.warning strong { color: var(--warning); }
.small-metric { font-size: 1.1rem !important; line-height: 1.25 !important; }

.content-panel { padding: 22px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.panel-header.compact { margin-bottom: 12px; }
.table-subline { display: block; color: var(--muted); font-size: .86rem; }

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 750;
    background: #ecf4f2;
    color: var(--primary);
}

.status-paused { background: #fff4df; color: #8a560f; }
.status-archived { background: #eceff1; color: #596366; }
.status-draft { background: #eef0ff; color: #42488a; }

.icon-button {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--primary);
    text-decoration: none;
}

.roadmap-grid,
.hub-highlight-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.roadmap-grid div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.roadmap-grid i { color: var(--accent); }

.segmented-control {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: #eef4f2;
    border-radius: 8px;
}

.segmented-control button {
    border: 0;
    background: transparent;
    border-radius: 6px;
    padding: 7px 12px;
    font-weight: 700;
    color: var(--muted);
}

.segmented-control button.active { background: #ffffff; color: var(--primary); box-shadow: 0 3px 10px rgba(18, 35, 31, .08); }

.asset-list { display: grid; gap: 12px; }
.asset-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.asset-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #ecf4f2;
    color: var(--primary);
    font-size: 1.25rem;
}
.asset-row h3 { font-size: 1rem; font-weight: 760; }
.asset-row p { margin: 4px 0 0; color: var(--muted); }
.asset-row-stats { display: flex; gap: 12px; color: var(--muted); white-space: nowrap; }

.asset-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 18px;
}

.detail-list { display: grid; gap: 12px; margin: 0; }
.detail-list div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.detail-list dt { color: var(--muted); font-weight: 650; }
.detail-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.action-bar { display: flex; flex-wrap: wrap; gap: 10px; }

.qr-panel { text-align: center; }
.qr-panel img { width: 180px; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }
.qr-actions { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }

.empty-state { text-align: center; padding: 40px 16px; }
.empty-state i { font-size: 2.5rem; color: var(--accent); }
.empty-state h1,
.empty-state h2 { margin: 14px 0 8px; font-weight: 780; }
.empty-state p { color: var(--muted); }

.public-shell {
    min-height: 100vh;
    display: grid;
    place-items: start center;
    padding: 24px 14px;
    background: #e8f0ee;
}

.public-card {
    width: min(100%, 430px);
    min-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(17, 35, 31, .18);
}

.bc-header {
    background: var(--brand-primary);
    color: #ffffff;
    text-align: center;
    padding: 22px 24px 30px;
}

.bc-brand { font-weight: 760; opacity: .86; margin-bottom: 18px; }
.bc-avatar {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--brand-accent);
    border: 5px solid rgba(255, 255, 255, .9);
    font-size: 1.6rem;
    font-weight: 800;
}
.bc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bc-header h1 { font-size: 1.85rem; font-weight: 820; margin: 0; }
.bc-header p { margin: 6px 0 4px; color: rgba(255, 255, 255, .86); }
.bc-header span { color: rgba(255, 255, 255, .72); }

.bc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 18px; }
.public-action,
.hub-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 54px;
    padding: 10px;
    border-radius: 8px;
    background: #f3f8f6;
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 760;
}
.public-action i,
.hub-tile i { font-size: 1.15rem; }

.bc-info-stack { display: grid; gap: 12px; padding: 0 18px 18px; }
.bc-info-stack > p,
.bc-info-stack article { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; }
.bc-info-stack h2 { font-size: .95rem; font-weight: 780; margin: 0 0 4px; }
.bc-info-stack p { color: var(--muted); }

.public-socials { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 22px; }
.public-socials a { flex: 1 1 auto; text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; text-decoration: none; font-weight: 720; }

.brand-constellation {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--brand-primary);
}

.brand-constellation svg {
    width: 182px;
    max-width: 100%;
    overflow: visible;
}

.brand-constellation svg text {
    fill: currentColor;
    font-size: 1.25rem;
    font-weight: 820;
    letter-spacing: .45rem;
}

.brand-constellation svg polyline {
    fill: none;
    stroke: currentColor;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brand-constellation svg polygon { fill: var(--brand-accent); }

.brand-constellation__tagline {
    margin-top: -2px;
    font-size: .92rem;
    font-weight: 680;
}

.brand-constellation--dark { color: #ffffff; }
.brand-constellation--ribbon { align-items: flex-start; }

.template-avatar {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, #ffffff, #d9e2ee 72%);
    box-shadow: 0 16px 30px rgba(8, 31, 64, .12);
}

.template-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.template-avatar span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--brand-primary);
    font-size: 2rem;
    font-weight: 820;
}

.template-kosi-light {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
    color: #07274f;
}

.template-kosi-light::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(140deg, transparent 0 58%, rgba(7, 39, 79, .05) 58% 64%, transparent 64%),
        linear-gradient(122deg, transparent 0 76%, rgba(7, 39, 79, .04) 76% 82%, transparent 82%);
    pointer-events: none;
}

.kosi-clean-shell {
    position: relative;
    z-index: 1;
    padding: 26px 22px 0;
}

.kosi-clean-hero {
    position: relative;
    padding-bottom: 10px;
    text-align: center;
}

.kosi-clean-hero::after {
    content: "";
    position: absolute;
    right: -22px;
    top: 116px;
    width: 188px;
    height: 94px;
    background: var(--brand-primary);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    z-index: -1;
}

.template-avatar--clean {
    width: 130px;
    height: 130px;
    margin: 6px auto 18px;
    border: 4px solid rgba(255, 255, 255, .96);
}

.kosi-clean-shell h1,
.kosi-dark-shell h1,
.kosi-ribbon-copy h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.65rem);
    font-weight: 830;
    line-height: 1.04;
}

.kosi-role {
    margin: 8px 0 0;
    color: var(--brand-accent);
    font-size: 1.02rem;
    font-weight: 620;
}

.kosi-role--dark { color: rgba(255, 255, 255, .92); }

.kosi-divider {
    width: 42px;
    height: 4px;
    margin: 14px auto 18px;
    border-radius: 999px;
    background: var(--brand-accent);
}

.kosi-divider--left { margin-left: 0; }

.kosi-square-actions,
.kosi-circle-actions,
.kosi-ribbon-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.kosi-square-actions { margin: 0 0 18px; }

.kosi-square-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 82px;
    padding: 12px 8px;
    border-radius: 16px;
    background: var(--brand-primary);
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(7, 39, 79, .18);
}

.kosi-square-action i { font-size: 1.32rem; }
.kosi-square-action span { font-size: .9rem; font-weight: 680; line-height: 1.1; }

.kosi-contact-list {
    display: grid;
    gap: 12px;
    padding-bottom: 18px;
}

.kosi-contact-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.kosi-contact-row i {
    color: var(--brand-primary);
    font-size: 1.08rem;
    margin-top: 4px;
}

.kosi-contact-row span,
.kosi-ribbon-contact-row span {
    display: block;
    color: #6a7586;
    font-size: .85rem;
    font-weight: 650;
}

.kosi-contact-row strong,
.kosi-ribbon-contact-row strong,
.kosi-dark-contact-row strong {
    display: block;
    font-size: 1rem;
    font-weight: 690;
}

.kosi-contact-row small,
.kosi-ribbon-contact-row small,
.kosi-dark-contact-row small {
    display: block;
    color: #667188;
    font-size: .9rem;
}

.kosi-footer-band {
    margin-top: 8px;
    padding: 14px 18px 16px;
    border-top: 4px solid var(--brand-accent);
    background: var(--brand-primary);
    color: #ffffff;
}

.kosi-tag-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.kosi-tag-row span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .8rem;
    letter-spacing: .02em;
}

.kosi-tag-row span + span::before {
    content: "";
    width: 2px;
    height: 12px;
    border-radius: 999px;
    background: var(--brand-accent);
}

.template-kosi-dark {
    position: relative;
    background: radial-gradient(circle at top, #183765 0%, #081a34 58%, #04101f 100%);
    color: #ffffff;
}

.template-kosi-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(138deg, transparent 0 56%, rgba(255, 255, 255, .06) 56% 61%, transparent 61%),
        linear-gradient(121deg, transparent 0 74%, rgba(255, 255, 255, .04) 74% 80%, transparent 80%);
    pointer-events: none;
}

.kosi-dark-shell {
    position: relative;
    z-index: 1;
    padding: 24px 22px 24px;
    text-align: center;
}

.kosi-dark-shell .brand-constellation { margin-bottom: 18px; }

.template-avatar--dark {
    width: 132px;
    height: 132px;
    margin: 0 auto 18px;
    border: 2px solid rgba(255, 255, 255, .6);
    background: radial-gradient(circle at 32% 26%, #f7f9fd, #91a3c3 88%);
}

.template-avatar--dark::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-bottom-color: var(--brand-accent);
    transform: rotate(-18deg);
}

.kosi-circle-actions { margin: 20px 0 18px; }

.kosi-circle-action {
    color: #ffffff;
    text-decoration: none;
}

.kosi-circle-action__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .44);
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.kosi-circle-action__icon i { font-size: 1.36rem; }

.kosi-circle-action strong {
    display: block;
    font-size: .88rem;
    font-weight: 650;
    color: rgba(255, 255, 255, .92);
}

.kosi-dark-contact-list {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.kosi-dark-contact-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .08);
    text-align: left;
    backdrop-filter: blur(10px);
}

.kosi-dark-contact-row i {
    color: rgba(255, 255, 255, .96);
    font-size: 1.08rem;
}

.kosi-dark-contact-row strong,
.kosi-dark-contact-row small { color: #ffffff; }

.kosi-dark-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 58px;
    padding: 12px 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ef2a31, #c90f16);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 720;
    box-shadow: 0 14px 30px rgba(201, 15, 22, .32);
}

.template-kosi-ribbon {
    background: linear-gradient(180deg, #ffffff 0%, #eef3f7 100%);
    color: #08274c;
}

.kosi-ribbon-header {
    position: relative;
    margin: 0;
    padding: 22px 20px 40px;
    background: var(--brand-primary);
    color: #ffffff;
    clip-path: polygon(0 0, 100% 0, 100% 55%, 79% 100%, 0 87%);
}

.kosi-ribbon-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(132deg, transparent 74%, var(--brand-accent) 76%, var(--brand-accent) 78%, transparent 80%);
    pointer-events: none;
}

.kosi-ribbon-shell { padding: 0 18px 20px; }

.kosi-ribbon-intro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 18px;
}

.template-avatar--ribbon {
    width: 92px;
    height: 92px;
    border: 3px solid rgba(255, 255, 255, .96);
}

.kosi-ribbon-copy { min-width: 0; }

.kosi-ribbon-copy h1 {
    font-size: clamp(1.8rem, 4vw, 2.35rem);
    line-height: 1.06;
}

.kosi-ribbon-actions {
    margin-bottom: 18px;
    gap: 14px;
}

.kosi-ribbon-action {
    color: var(--brand-primary);
    text-align: center;
    text-decoration: none;
}

.kosi-ribbon-action__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(8, 39, 76, .18);
}

.kosi-ribbon-action__icon i { font-size: 1.28rem; }

.kosi-ribbon-action strong {
    display: block;
    font-size: .86rem;
    font-weight: 650;
}

.kosi-ribbon-card {
    display: grid;
    gap: 4px;
    padding: 10px 16px;
    border: 1px solid rgba(8, 39, 76, .08);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 30px rgba(8, 39, 76, .08);
}

.kosi-ribbon-contact-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid #e8edf4;
}

.kosi-ribbon-contact-row:last-child { border-bottom: 0; }

.kosi-ribbon-contact-row i {
    color: var(--brand-primary);
    font-size: 1.08rem;
    margin-top: 3px;
}

.kosi-ribbon-note {
    margin-top: 18px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #0b2a50, #081f3e);
    color: #ffffff;
}

.kosi-ribbon-note__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 12px;
}

.kosi-note-badge {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .38);
}

.kosi-note-badge::before {
    content: "";
    position: absolute;
    inset: 17px 14px 17px 14px;
    border-top: 3px solid rgba(255, 255, 255, .9);
    border-right: 3px solid rgba(255, 255, 255, .9);
    transform: skew(-35deg) rotate(-10deg);
}

.kosi-note-badge::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 12px;
    width: 9px;
    height: 9px;
    background: var(--brand-accent);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.kosi-ribbon-note h2 {
    margin: 0 0 4px;
    font-size: 1.08rem;
    font-weight: 760;
}

.kosi-ribbon-note p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
}

.kosi-tag-row--left { justify-content: flex-start; }

.kosi-tag-row--left span + span::before { background: var(--brand-accent); }

.hub-template { padding: 20px; background: #fbfdfc; }
.hub-top {
    background: var(--brand-primary);
    color: #ffffff;
    border-radius: 8px;
    padding: 24px;
}
.hub-top span { display: inline-flex; margin-bottom: 34px; color: rgba(255, 255, 255, .78); font-weight: 750; }
.hub-top h1 { margin: 0; font-size: 2rem; line-height: 1.08; font-weight: 840; }
.hub-top p { margin: 12px 0 0; color: rgba(255, 255, 255, .82); }

.hub-highlight-row { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0; }
.hub-highlight-row div { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #ffffff; }
.hub-highlight-row strong,
.hub-highlight-row span { display: block; }
.hub-highlight-row strong { color: var(--brand-primary); }
.hub-highlight-row span { color: var(--muted); font-size: .82rem; }
.hub-tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hub-tile { min-height: 88px; flex-direction: column; background: #ffffff; border: 1px solid var(--line); }
.hub-tile i { color: var(--brand-accent); font-size: 1.55rem; }
.public-powered { padding: 18px 0 2px; color: var(--muted); text-align: center; font-size: .82rem; }

.public-not-found { display: grid; place-items: center; min-height: 70vh; }

@media (max-width: 980px) {
    .app-layout { grid-template-columns: 1fr; }
    .app-sidebar { position: static; }
    .metric-grid,
    .metric-grid.tight,
    .roadmap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .asset-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .app-main { padding: 18px; }
    .app-topbar { align-items: flex-start; flex-direction: column; }
    .topbar-actions { width: 100%; align-items: stretch; }
    .search-shell { width: 100%; }
    .metric-grid,
    .metric-grid.tight,
    .roadmap-grid,
    .asset-row,
    .hub-highlight-row { grid-template-columns: 1fr; }
    .asset-row-stats { justify-content: flex-start; }
    .detail-list div { grid-template-columns: 1fr; gap: 4px; }
    .bc-actions,
    .hub-tile-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .kosi-square-actions,
    .kosi-circle-actions,
    .kosi-ribbon-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .kosi-clean-hero::after { width: 152px; top: 124px; }

    .kosi-ribbon-intro {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .template-avatar--ribbon { margin: 0 auto; }

    .kosi-divider--left { margin-left: auto; }

    .brand-constellation--ribbon { align-items: center; }

    .kosi-ribbon-note__header { grid-template-columns: 1fr; text-align: center; }

    .kosi-tag-row--left { justify-content: center; }
}