.kiemai-category-toggle{display:grid;gap:14px}.kiemai-category-toggle__item{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.kiemai-category-toggle__heading,.kiemai-category-toggle__subcategory-heading{margin:0}.kiemai-category-toggle__button,.kiemai-category-toggle__subcategory-button{width:100%;min-height:68px;border:0;background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;padding:18px 20px;font-weight:800}.kiemai-category-toggle__button{font-size:1.2rem}.kiemai-category-toggle__symbol,.kiemai-category-toggle__subcategory-symbol{color:var(--brand);font-size:1.7rem;line-height:1;flex:0 0 auto}.kiemai-category-toggle__panel{border-top:1px solid var(--line);padding:10px}.kiemai-category-toggle__subcategories{display:grid;gap:10px}.kiemai-category-toggle__subcategory{overflow:hidden;border:1px solid var(--line);border-radius:15px;background:var(--soft)}.kiemai-category-toggle__subcategory-button{min-height:62px;padding:14px 16px}.kiemai-category-toggle__subcategory-button strong{display:block;font-size:1rem}.kiemai-category-toggle__subcategory-button small{display:block;margin-top:4px;color:var(--muted);font-weight:500;line-height:1.4}.kiemai-category-toggle__tutorial-panel{border-top:1px solid var(--line);background:var(--surface)}.kiemai-category-toggle__tutorials{display:grid}.kiemai-category-toggle__tutorial-link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:650}.kiemai-category-toggle__tutorial-link:last-child{border-bottom:0}.kiemai-category-toggle__tutorial-link span:last-child{font-size:1.5rem;color:var(--brand)}.kiemai-category-toggle__empty{margin:0;padding:16px;color:var(--muted)}.kiemai-category-toggle button:focus-visible,.kiemai-category-toggle a:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 35%,transparent);outline-offset:-3px}@media(min-width:760px){.kiemai-category-toggle__button{font-size:1.28rem}.kiemai-category-toggle__panel{padding:14px}}

/* NailTeller-style silent tap: no flash, tint, background change, or movement. */
.kiemai-category-toggle,
.kiemai-category-toggle *,
.kiemai-category-toggle *::before,
.kiemai-category-toggle *::after {
    -webkit-tap-highlight-color: transparent !important;
}

.kiemai-category-toggle button,
.kiemai-category-toggle a {
    -webkit-appearance: none;
    appearance: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    transition: none !important;
    transform: none !important;
    box-shadow: none;
}

.kiemai-category-toggle__button,
.kiemai-category-toggle__subcategory-button,
.kiemai-category-toggle__tutorial-link {
    outline: none;
}

.kiemai-category-toggle__button:hover,
.kiemai-category-toggle__button:active,
.kiemai-category-toggle__button:focus,
.kiemai-category-toggle__subcategory-button:hover,
.kiemai-category-toggle__subcategory-button:active,
.kiemai-category-toggle__subcategory-button:focus {
    background: transparent !important;
    color: var(--ink) !important;
    transform: none !important;
    box-shadow: none !important;
}

.kiemai-category-toggle__tutorial-link:hover,
.kiemai-category-toggle__tutorial-link:active,
.kiemai-category-toggle__tutorial-link:focus {
    background: transparent !important;
    color: var(--ink) !important;
    transform: none !important;
    box-shadow: none !important;
}

.kiemai-category-toggle__symbol,
.kiemai-category-toggle__subcategory-symbol,
.kiemai-category-toggle__tutorial-link span {
    pointer-events: none;
}

/* Pointer/touch clicks stay visually silent. */
.kiemai-category-toggle button:focus:not(:focus-visible),
.kiemai-category-toggle a:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Keep accessibility only for real keyboard navigation. */
.kiemai-category-toggle button:focus-visible,
.kiemai-category-toggle a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent);
    outline-offset: -3px;
}

@media (hover: none) and (pointer: coarse) {
    .kiemai-category-toggle button:hover,
    .kiemai-category-toggle button:active,
    .kiemai-category-toggle button:focus,
    .kiemai-category-toggle a:hover,
    .kiemai-category-toggle a:active,
    .kiemai-category-toggle a:focus {
        background: transparent !important;
        filter: none !important;
        opacity: 1 !important;
        outline: none !important;
        box-shadow: none !important;
        transform: none !important;
    }
}

/* Persistent active color for the last tutorial title opened. */
.kiemai-category-toggle__tutorial-link.is-active-tutorial,
.kiemai-category-toggle__tutorial-link.is-active-tutorial:hover,
.kiemai-category-toggle__tutorial-link.is-active-tutorial:active,
.kiemai-category-toggle__tutorial-link.is-active-tutorial:focus {
    color: var(--brand) !important;
    background: color-mix(in srgb, var(--brand) 8%, transparent) !important;
    font-weight: 800 !important;
}

.kiemai-category-toggle__tutorial-link.is-active-tutorial > span {
    color: var(--brand) !important;
}
.kiemai-category-toggle__button[aria-expanded="true"]
.kiemai-category-toggle__symbol,

.kiemai-category-toggle__subcategory-button[aria-expanded="true"]
.kiemai-category-toggle__subcategory-symbol {
    color: var(--danger) !important;
}

/* View counters stay secondary; red is reserved for the open indicator. */
.kiemai-category-toggle__view-count {
    color: var(--muted) !important;
    font-size: .78rem;
    font-weight: 600;
}

.kiemai-category-toggle__view-count [data-view-count] {
    display: none !important;
}



/* Category metadata: prompt total and views on one muted line. */
.kiemai-category-toggle__view-count {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    color: var(--muted) !important;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Category icons: consistent outline style matching the approved sample. */
.kiemai-category-toggle__symbol,
.kiemai-category-toggle__subcategory-symbol {
    display: none !important;
}

.kiemai-category-toggle__button {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 20px;
    align-items: center;
    column-gap: 20px;
}

.kiemai-category-toggle__category-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #315aa8;
    pointer-events: none;
}

.kiemai-category-toggle__category-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kiemai-category-toggle__chevron,
.kiemai-category-toggle__subcategory-chevron {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #667085;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform .22s ease, color .22s ease;
}

.kiemai-category-toggle__button[aria-expanded="true"]
.kiemai-category-toggle__chevron,
.kiemai-category-toggle__subcategory-button[aria-expanded="true"]
.kiemai-category-toggle__subcategory-chevron {
    transform: rotate(-90deg);
    color: #e00000;
}

.kiemai-category-toggle__title-row {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.kiemai-category-toggle__tutorial-link .kiemai-category-toggle__view-count {
    margin-top: 4px;
}

.kiemai-category-toggle__tutorial-main {
    min-width: 0;
}

@media (max-width: 380px) {
    .kiemai-category-toggle__button {
        grid-template-columns: 26px minmax(0, 1fr) 20px;
        column-gap: 16px;
    }

    .kiemai-category-toggle__category-icon {
        width: 26px;
        height: 26px;
    }
}


/* Open subcategory: blue header with white content. */
.kiemai-category-toggle__subcategory-button[aria-expanded="true"],
.kiemai-category-toggle__subcategory-button[aria-expanded="true"]:hover,
.kiemai-category-toggle__subcategory-button[aria-expanded="true"]:active,
.kiemai-category-toggle__subcategory-button[aria-expanded="true"]:focus {
    background: var(--brand) !important;
    color: #fff !important;
}

.kiemai-category-toggle__subcategory-button[aria-expanded="true"] strong,
.kiemai-category-toggle__subcategory-button[aria-expanded="true"] small,
.kiemai-category-toggle__subcategory-button[aria-expanded="true"] .kiemai-category-toggle__view-count,
.kiemai-category-toggle__subcategory-button[aria-expanded="true"] [data-view-label-text] {
    color: #fff !important;
}

.kiemai-category-toggle__subcategory-button[aria-expanded="true"] small,
.kiemai-category-toggle__subcategory-button[aria-expanded="true"] .kiemai-category-toggle__view-count {
    opacity: .86;
}

.kiemai-category-toggle__subcategory-button[aria-expanded="true"]
.kiemai-category-toggle__subcategory-chevron {
    color: #fff !important;
}

@media (hover: none) and (pointer: coarse) {
    .kiemai-category-toggle__subcategory-button[aria-expanded="true"],
    .kiemai-category-toggle__subcategory-button[aria-expanded="true"]:hover,
    .kiemai-category-toggle__subcategory-button[aria-expanded="true"]:active,
    .kiemai-category-toggle__subcategory-button[aria-expanded="true"]:focus {
        background: var(--brand) !important;
        color: #fff !important;
    }
}

@media (max-width: 390px) {
    .kiemai-category-toggle__button {
        grid-template-columns: 26px minmax(0, 1fr) 20px;
        column-gap: 16px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .kiemai-category-toggle__category-icon {
        width: 26px;
        height: 26px;
    }
}