/* ======================================================================
 *  kaomoji-library.css · 颜文字库
 *  视觉：淡紫灰点阵纸 + 珊瑚橙；卡片像贴纸墙，点击有回弹
 *  作用域：.tsk.kao（前缀 kao-）
 * ====================================================================== */

.tsk.kao {
    --tsk-bg: #f6f5fb;
    --tsk-bg-2: #eeecf8;
    --tsk-card: #ffffff;
    --tsk-card-2: #f8f7fd;
    --tsk-ink: #211d33;
    --tsk-sub: #5c5675;
    --tsk-faint: #918ca8;
    --tsk-line: #e6e2f1;
    --tsk-line-2: #f0edf8;
    --tsk-brand: #6c5ce7;
    --tsk-brand-2: #f06595;
    --tsk-brand-soft: #efedfd;
    --tsk-brand-ink: #5546d6;
    --tsk-accent: #f76707;
    --tsk-ok: #2b9e6f;
    --tsk-ok-soft: #e8f8f0;
    --tsk-warn: #b36b00;
    --tsk-warn-soft: #fff4e0;
    --tsk-bad: #d6336c;
    --tsk-bad-soft: #fdeced;
    --tsk-info: #1971c2;
    --tsk-info-soft: #e8f2fc;
    --tsk-shadow-sm: 0 1px 2px rgba(33, 29, 51, .05), 0 6px 16px rgba(33, 29, 51, .05);
    --tsk-shadow: 0 2px 6px rgba(33, 29, 51, .07), 0 18px 44px rgba(33, 29, 51, .09);
    --tsk-shadow-lg: 0 6px 16px rgba(33, 29, 51, .09), 0 32px 72px rgba(33, 29, 51, .18);
    --tsk-r: 18px;
    --tsk-r-sm: 11px;
    background:
        radial-gradient(circle at 1px 1px, #e6e2f2 1px, transparent 0) 0 0 / 22px 22px,
        linear-gradient(180deg, #f7f6fc, #f4f2fa);
}

:root[data-theme="dark"] .tsk.kao {
    --tsk-bg: #14121d;
    --tsk-bg-2: #1a1726;
    --tsk-card: #1e1b2b;
    --tsk-card-2: #241f33;
    --tsk-ink: #ece9f8;
    --tsk-sub: #b0a9c8;
    --tsk-faint: #827b9a;
    --tsk-line: #302a43;
    --tsk-line-2: #262139;
    --tsk-brand: #9d8cff;
    --tsk-brand-2: #ff89b0;
    --tsk-brand-soft: rgba(157, 140, 255, .15);
    --tsk-brand-ink: #b5a8ff;
    --tsk-accent: #ffa94d;
    --tsk-ok: #5bd6a2;
    --tsk-ok-soft: rgba(91, 214, 162, .14);
    --tsk-warn: #ffc857;
    --tsk-warn-soft: rgba(255, 200, 87, .14);
    --tsk-bad: #ff8fb0;
    --tsk-bad-soft: rgba(255, 143, 176, .14);
    --tsk-info: #74b5f0;
    --tsk-info-soft: rgba(116, 181, 240, .14);
    --tsk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .3);
    --tsk-shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 18px 44px rgba(0, 0, 0, .4);
    --tsk-shadow-lg: 0 6px 16px rgba(0, 0, 0, .6), 0 32px 72px rgba(0, 0, 0, .5);
    background:
        radial-gradient(circle at 1px 1px, #2a2440 1px, transparent 0) 0 0 / 22px 22px,
        #14121d;
}

/* ---------- 1. 首屏栅格 ---------- */
.kao-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 394px;
    gap: 30px;
    padding: 30px 0 24px;
    align-items: stretch;
}
.kao-hero-l {
    display: flex;
    flex-direction: column;
}
.kao-hero-l > .tsk-hs {
    flex: 1 1 auto;
}
@media (max-width: 900px) {
    .kao-hero {
        grid-template-columns: 1fr;
    }
}
.kao-hero-r {
    min-width: 0;
}
.kao .tsk-h1 b {
    color: #5546d6;
    background: linear-gradient(180deg, transparent 60%, rgba(240, 101, 149, .22) 60%);
    padding: 0 2px;
}
.kao .tsk-kicker {
    background: #efedfd;
    color: #5546d6;
}
.kao .tsk-chips span {
    background: rgba(255, 255, 255, .86);
    border-color: #e6e2f1;
}

/* ---------- 2. 检索台 ---------- */
.kao-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--tsk-card);
    border: 1px solid var(--tsk-line);
    border-radius: 18px;
    box-shadow: var(--tsk-shadow);
    overflow: hidden;
}
.kao-panel-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    background: linear-gradient(100deg, #efedfd, #fdeef4);
    border-bottom: 1px solid #e6e0f6;
    font-size: 13.5px;
    font-weight: 800;
    color: #5546d6;
}
.kao-panel-hd i {
    font: 700 10px/1 var(--tsk-num);
    letter-spacing: .14em;
    color: #c23b78;
    opacity: .75;
}
.kao-panel-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px 17px 17px;
}

/* 搜索框 */
.kao-search {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--tsk-line);
    border-radius: 12px;
    background: var(--tsk-card-2);
    padding: 0 10px;
    transition: .15s;
}
.kao-search:focus-within {
    border-color: #6c5ce7;
    background: var(--tsk-card);
    box-shadow: 0 0 0 3px #efedfd;
}
.kao-search span {
    color: #918ca8;
    font-size: 15px;
}
.kao-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 9px 0;
    font: 500 13.5px/1.5 var(--tsk-font);
    color: var(--tsk-ink);
    outline: none;
}
.kao-search input::placeholder {
    color: var(--tsk-faint);
}
.kao-search button {
    border: 0;
    background: transparent;
    color: var(--tsk-faint);
    font-size: 15px;
    cursor: pointer;
    padding: 2px 4px;
}
.kao-search button:hover {
    color: #6c5ce7;
}

/* 分类 */
.kao-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 132px;
    overflow: auto;
}
.kao-cats button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid var(--tsk-line);
    border-radius: 99px;
    background: var(--tsk-card-2);
    color: var(--tsk-sub);
    font: 600 11.5px/1.3 var(--tsk-font);
    cursor: pointer;
    transition: .15s;
    white-space: nowrap;
}
.kao-cats button b {
    font: 700 10.5px/1 var(--tsk-num);
    color: var(--tsk-faint);
}
.kao-cats button:hover {
    border-color: #6c5ce7;
    color: #5546d6;
}
.kao-cats button.on {
    background: #5546d6;
    border-color: #5546d6;
    color: #fff;
}
.kao-cats button.on b {
    color: rgba(255, 255, 255, .72);
}
:root[data-theme="dark"] .kao-cats button.on {
    color: #14121d;
}
:root[data-theme="dark"] .kao-cats button.on b {
    color: rgba(20, 18, 29, .7);
}

/* 排序 */
.kao-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--tsk-faint);
}
.kao-sort button {
    border: 0;
    background: transparent;
    color: var(--tsk-faint);
    font: 700 11.5px/1.4 var(--tsk-font);
    cursor: pointer;
    padding: 3px 0;
    border-bottom: 2px solid transparent;
}
.kao-sort button.on {
    color: #5546d6;
    border-bottom-color: #6c5ce7;
}
.kao-sort span {
    margin-left: auto;
    font: 600 10.5px/1 var(--tsk-num);
}

/* 随机展示 */
.kao-random {
    border: 1px solid #e9e4f6;
    border-radius: 13px;
    background: linear-gradient(180deg, #faf8ff, #fdf6f9);
    padding: 10px 12px 12px;
}
:root[data-theme="dark"] .kao-random {
    border-color: #2e2841;
    background: linear-gradient(180deg, #201c2d, #241a25);
}
.kao-random-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--tsk-sub);
}
.kao-random-hd span {
    font-size: 10.5px;
    color: var(--tsk-faint);
}
.kao-random-big {
    margin: 8px 0 10px;
    min-height: 66px;
    display: grid;
    place-items: center;
    font: 600 22px/1.5 var(--tsk-font);
    color: #4a3fd0;
    text-align: center;
    word-break: break-all;
    background: var(--tsk-card);
    border-radius: 9px;
    border: 1px dashed #ded7f2;
    padding: 6px 8px;
}
:root[data-theme="dark"] .kao-random-big {
    color: var(--tsk-brand-ink);
    border-color: #3a3354;
    background: #191624;
}
.kao-random-acts {
    display: flex;
    gap: 7px;
}
.kao-random-acts .tsk-btn {
    flex: 1 1 0;
    padding: 8px 10px;
    font-size: 12.5px;
}
.kao-foot {
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--tsk-faint);
    text-align: center;
}

/* ---------- 3. 结果区 ---------- */
.kao-result {
    margin-top: 4px;
    background: var(--tsk-card);
    border: 1px solid var(--tsk-line);
    border-radius: 18px;
    box-shadow: var(--tsk-shadow-sm);
    padding: 16px 18px 18px;
}
.kao-result-hd {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--tsk-line);
}
.kao-sub {
    margin-top: 3px;
    font-size: 12px;
    color: var(--tsk-faint);
}
.kao-result-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.kao-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
    gap: 9px;
    margin-top: 14px;
}
.kao-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 84px;
    padding: 14px 10px 10px;
    border: 1px solid var(--tsk-line);
    border-radius: 12px;
    background: var(--tsk-card-2);
    cursor: pointer;
    transition: transform .14s, border-color .14s, box-shadow .14s, background .14s;
    overflow: hidden;
}
.kao-item:hover {
    transform: translateY(-2px);
    border-color: #b9b0f0;
    background: var(--tsk-card);
    box-shadow: 0 10px 20px rgba(85, 70, 214, .12);
}
.kao-item:active {
    transform: scale(.97);
}
.kao-item.copied {
    border-color: #9adcc0;
    background: var(--tsk-ok-soft);
}
.kao-em {
    font: 600 16px/1.45 var(--tsk-font);
    color: var(--tsk-ink);
    text-align: center;
    word-break: break-all;
}
.kao-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--tsk-faint);
}
.kao-item-meta .cnt {
    font: 700 10px/1 var(--tsk-num);
    color: #c23b78;
}
.kao-item-meta .copied-tip {
    color: var(--tsk-ok);
    font-weight: 700;
}
.kao-heart {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #b9b3cc;
    font-size: 13px;
    cursor: pointer;
    opacity: .55;
    transition: .15s;
}
.kao-heart:hover,
.kao-heart.fav {
    opacity: 1;
    color: #f06595;
    background: #fff0f5;
}
:root[data-theme="dark"] .kao-heart:hover,
:root[data-theme="dark"] .kao-heart.fav {
    background: rgba(240, 101, 149, .16);
}
.kao-empty {
    margin-top: 16px;
    padding: 26px 10px;
    text-align: center;
    font-size: 13px;
    color: var(--tsk-faint);
    border: 1px dashed var(--tsk-line);
    border-radius: 12px;
}

/* ---------- 4. 收藏条 ---------- */
.kao-favbar {
    margin-top: 16px;
    border: 1px solid #f4d8e4;
    border-radius: 15px;
    background: linear-gradient(180deg, #fff7fa, #fffdfd);
    padding: 13px 15px;
}
:root[data-theme="dark"] .kao-favbar {
    border-color: #3a262c;
    background: linear-gradient(180deg, #211619, #1b1215);
}
.kao-favbar-hd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--tsk-faint);
}
.kao-favbar-hd b {
    font-size: 13px;
    color: #c23b78;
}
.kao-favbar-hd b span {
    font: 800 11.5px/1 var(--tsk-num);
}
.kao-fav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}
.kao-fav-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 99px;
    background: var(--tsk-card);
    border: 1px solid #f0d9e2;
    font: 600 13px/1.3 var(--tsk-font);
    color: var(--tsk-sub);
}
:root[data-theme="dark"] .kao-fav-chip {
    border-color: #462b33;
    background: #2a1b20;
}
.kao-fav-chip button {
    border: 0;
    background: transparent;
    color: #b98c9c;
    font-size: 12px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}
.kao-fav-chip button:hover {
    color: #d6336c;
}

/* ---------- 5. 拼接器 ---------- */
.kao-sec-sub {
    margin-left: auto;
    font-size: 12px;
    color: var(--tsk-faint);
}
.kao-builder {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--tsk-line);
    border-radius: 16px;
    overflow: hidden;
    background: var(--tsk-card);
    box-shadow: var(--tsk-shadow-sm);
}
.kao-builder-opts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    padding: 18px 20px;
    border-right: 1px dashed var(--tsk-line);
    align-content: start;
}
.kao-builder-opts label {
    display: block;
    min-width: 0;
}
.kao-builder-opts label span {
    display: block;
    margin-bottom: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tsk-sub);
}
.kao-builder-opts select {
    width: 100%;
    border: 1.5px solid var(--tsk-line);
    border-radius: 9px;
    background: var(--tsk-card-2);
    color: var(--tsk-ink);
    font: 500 13px/1.5 var(--tsk-font);
    padding: 7px 8px;
    outline: none;
}
.kao-builder-opts select:focus {
    border-color: #6c5ce7;
    box-shadow: 0 0 0 3px #efedfd;
}
.kao-builder-opts label:nth-child(5) {
    grid-column: 1 / -1;
}
.kao-builder-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 18px;
    background:
        radial-gradient(circle at 1px 1px, #ebe7f7 1px, transparent 0) 0 0 / 16px 16px,
        linear-gradient(180deg, #faf9ff, #f4f1fc);
    text-align: center;
}
:root[data-theme="dark"] .kao-builder-stage {
    background:
        radial-gradient(circle at 1px 1px, #2b2540 1px, transparent 0) 0 0 / 16px 16px,
        linear-gradient(180deg, #1f1b2c, #1a1727);
}
.kao-builder-tip {
    font: 700 10.5px/1 var(--tsk-num);
    letter-spacing: .12em;
    color: var(--tsk-faint);
    text-transform: uppercase;
}
.kao-builder-preview {
    font: 600 26px/1.5 var(--tsk-font);
    color: #4a3fd0;
    min-height: 62px;
    display: grid;
    place-items: center;
    word-break: break-all;
}
:root[data-theme="dark"] .kao-builder-preview {
    color: var(--tsk-brand-ink);
}
.kao-builder-acts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}
.kao-builder-acts .tsk-btn {
    padding: 8px 14px;
    font-size: 12.5px;
}

/* ---------- 5.1 使用场景 ---------- */
.kao-usage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 11px;
}
.kao-usage-card {
    position: relative;
    padding: 15px 16px 14px 18px;
    border: 1px solid var(--tsk-line);
    border-radius: 12px;
    background: var(--tsk-card);
    box-shadow: var(--tsk-shadow-sm);
    overflow: hidden;
}
.kao-usage-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #6c5ce7, #f06595);
}
.kao-usage-card b {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}
.kao-usage-card p {
    font-size: 12.5px;
    color: var(--tsk-sub);
    line-height: 1.75;
}

/* ---------- 6. 经验卡 ---------- */
.kao-tips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: 11px;
}
.kao-tip {
    display: flex;
    gap: 11px;
    padding: 14px 15px;
    border: 1px solid var(--tsk-line);
    border-radius: 11px;
    background: var(--tsk-card);
    box-shadow: var(--tsk-shadow-sm);
    border-bottom: 3px solid #6c5ce7;
}
.kao-tip > span {
    font: 800 16px/1 var(--tsk-num);
    color: var(--tsk-brand-ink);
    opacity: .55;
    padding-top: 2px;
}
.kao-tip b {
    display: block;
    font-size: 13px;
    margin-bottom: 3px;
}
.kao-tip p {
    font-size: 12.5px;
    color: var(--tsk-sub);
    line-height: 1.75;
}

/* ---------- 7. 响应式 ---------- */
@media (max-width: 820px) {
    .kao-builder {
        grid-template-columns: 1fr;
    }
    .kao-builder-opts {
        border-right: 0;
        border-bottom: 1px dashed var(--tsk-line);
    }
}
@media (max-width: 640px) {
    .kao-result-hd {
        align-items: flex-start;
    }
    .kao-grid {
        grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    }
    .kao-em {
        font-size: 14px;
    }
    .kao-random-big {
        font-size: 19px;
    }
    .kao-builder-opts {
        grid-template-columns: 1fr;
    }
    .kao-tip > span {
        display: none;
    }
}

/* ---------- 8. 深色微调 ---------- */
:root[data-theme="dark"] .kao .tsk-chips span {
    background: #1e1b2b;
    border-color: #302a43;
}
:root[data-theme="dark"] .kao-search:focus-within {
    box-shadow: 0 0 0 3px rgba(157, 140, 255, .16);
}
:root[data-theme="dark"] .kao-item:hover {
    border-color: var(--tsk-brand);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .35);
}
:root[data-theme="dark"] .kao-builder-opts select:focus {
    box-shadow: 0 0 0 3px rgba(157, 140, 255, .16);
}
:root[data-theme="dark"] .kao-panel-hd {
    background: linear-gradient(100deg, #241f33, #2b1e2b);
    border-bottom-color: #332a48;
    color: var(--tsk-brand-ink);
}

/* ---------- 9. 打印与减少动效 ---------- */
@media print {
    .kao-panel,
    .kao-result-acts,
    .kao-favbar,
    .kao-heart,
    .kao-builder-acts {
        display: none;
    }
    .kao-item {
        break-inside: avoid;
    }
}
@media (prefers-reduced-motion: reduce) {
    .kao-item {
        transition: none;
    }
}