.moodCard {
    --mood-panel: #ffffff;
    --mood-bg: #fbfaf8;
    --mood-ink: #171512;
    --mood-text: #4a4a4a;
    --mood-muted: #8a8578;
    --mood-line: #e4e2da;
    --mood-accent: #319795;
    --mood-accent-dark: #218c82;
    --mood-on-accent: #ffffff;
    --mood-chip: rgba(49, 151, 149, 0.08);
    background: var(--mood-panel);
    border: 1px solid var(--mood-line);
    border-radius: 6px;
    color: var(--mood-ink);
    overflow: hidden;
    animation: moodCardIn 0.35s ease-out;
}

@keyframes moodCardIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

.moodCard,
.moodCard * {
    box-sizing: border-box;
    letter-spacing: 0;
}

.moodCard [hidden] {
    display: none !important;
}

.moodHead {
    align-items: baseline;
    border-bottom: 1px solid var(--mood-line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    padding: 14px 20px 10px;
}

.moodTitle {
    display: inline;
    font-size: 17px;
    font-weight: 800;
    margin: 0;
}

.moodKicker {
    color: var(--mood-muted);
    font-size: 10px;
    margin-right: 10px;
    text-transform: uppercase;
    letter-spacing: 0;
}

.moodHeadRight {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.moodSub {
    color: var(--mood-muted);
    font-size: 12px;
}

.moodManageToggle,
.moodAdminClose,
.moodAdminAction {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--mood-muted);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: 36px;
    min-width: 36px;
    padding: 0;
}

.moodManageToggle:hover,
.moodManageToggle:focus-visible,
.moodAdminClose:hover,
.moodAdminClose:focus-visible,
.moodAdminAction:hover,
.moodAdminAction:focus-visible {
    color: var(--mood-accent-dark);
    outline: 2px solid var(--mood-accent);
    outline-offset: -2px;
}

.moodManageToggle .icon,
.moodAdminClose .icon,
.moodAdminAction .icon {
    margin: 0;
}

.moodNotice {
    background: var(--mood-chip);
    border-bottom: 1px solid var(--mood-line);
    color: var(--mood-text);
    font-size: 12px;
    min-height: 38px;
    padding: 10px 20px;
}

.moodNotice.error {
    background: #fff4f2;
    color: #9f3a38;
}

.moodActions {
    border-bottom: 1px dashed var(--mood-line);
    display: grid;
    gap: 8px;
    padding: 12px 20px;
    transition: opacity 0.2s;
}

.moodActions.isSettling {
    opacity: 0.68;
    pointer-events: none;
}

.moodActionBar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.moodOpportunityDone,
.moodReadonly {
    align-items: center;
    border-left: 3px solid var(--mood-accent);
    color: var(--mood-text);
    display: flex;
    font-size: 12px;
    font-weight: 700;
    min-height: 44px;
    padding: 8px 11px;
}

.moodReadonly {
    border-left-color: var(--mood-line);
    color: var(--mood-muted);
    font-weight: 500;
}

.moodSeg {
    border: 1px solid var(--mood-line);
    border-radius: 6px;
    display: flex;
    overflow: hidden;
}

.moodSeg button {
    background: transparent;
    border: 0;
    color: var(--mood-muted);
    cursor: pointer;
    font-size: 13px;
    min-height: 44px;
    padding: 8px 18px;
}

.moodSeg button + button {
    border-left: 1px solid var(--mood-line);
}

.moodSeg button:hover,
.moodSeg button:focus-visible {
    background: var(--mood-chip);
    color: var(--mood-accent-dark);
    outline: 2px solid var(--mood-accent);
    outline-offset: -2px;
}

.moodCustomRow {
    align-items: center;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 8px;
    min-width: min(100%, 220px);
}

.moodInputWrap {
    display: flex;
    flex: 1;
    min-width: 160px;
    position: relative;
}

.moodInput {
    background: transparent;
    border: 1px solid var(--mood-line);
    border-radius: 6px;
    color: var(--mood-ink);
    flex: 1;
    font-size: 13px;
    min-height: 44px;
    outline: 0;
    padding: 8px 52px 8px 12px;
    width: 100%;
}

.moodInput:focus,
.moodInput:focus-visible {
    border-color: var(--mood-accent);
    outline: 2px solid var(--mood-accent);
    outline-offset: 1px;
}

.moodCharCount {
    color: var(--mood-muted);
    font-size: 11px;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.moodSend {
    background: var(--mood-accent);
    border: 0;
    border-radius: 6px;
    color: var(--mood-on-accent);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    min-height: 44px;
    padding: 8px 18px;
}

.moodSend:hover,
.moodSend:focus-visible {
    background: var(--mood-accent-dark);
    outline: 2px solid var(--mood-accent);
    outline-offset: 2px;
}

.moodSend:active {
    transform: scale(0.97);
}

.moodSend:disabled {
    cursor: default;
    opacity: 0.55;
}

.moodSrOnly {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.moodAdminPanel {
    background: var(--mood-bg);
    border-bottom: 1px dashed var(--mood-line);
    padding: 10px 20px 12px;
}

.moodAdminHead {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 36px;
}

.moodAdminHead strong {
    font-size: 13px;
}

.moodAdminList {
    border-top: 1px solid var(--mood-line);
}

.moodAdminRow {
    align-items: center;
    border-bottom: 1px solid var(--mood-line);
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 46px;
}

.moodAdminRow:last-child {
    border-bottom: 0;
}

.moodAdminWord {
    min-width: 0;
    overflow-wrap: anywhere;
}

.moodAdminMeta {
    color: var(--mood-muted);
    font-size: 11px;
    white-space: nowrap;
}

.moodAdminActions {
    display: flex;
}

.moodAdminAction.danger:hover,
.moodAdminAction.danger:focus-visible {
    color: #b0302f;
    outline-color: #b0302f;
}

.moodStage {
    background: transparent;
    height: 640px;
    outline: none;
    overflow: hidden;
    position: relative;
    transition: height 0.24s;
}

.moodStage:focus-visible {
    box-shadow: inset 0 0 0 2px var(--mood-accent);
}

.moodStage.empty {
    height: 150px !important;
}

.moodEmpty {
    align-items: center;
    bottom: 0;
    color: var(--mood-muted);
    display: flex;
    flex-direction: column;
    font-size: 13px;
    gap: 5px;
    justify-content: center;
    left: 0;
    padding: 20px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}

.moodEmpty strong {
    color: var(--mood-ink);
    font-size: 14px;
}

.moodCloudWords {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.moodWord {
    position: absolute;
    transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1), top 0.55s cubic-bezier(0.22, 1, 0.36, 1), width 0.45s, height 0.45s;
}

.moodWordInner {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: default;
    display: inline-flex;
    font-weight: 800;
    height: 100%;
    justify-content: center;
    line-height: 1;
    min-height: 44px;
    min-width: 44px;
    padding: 0;
    position: relative;
    touch-action: manipulation;
    transition: font-size 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s;
    user-select: none;
    white-space: nowrap;
    width: 100%;
}

.moodWordInner.actable {
    cursor: pointer;
}

.moodWordInner.actable:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.moodWordInner.actable:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--mood-accent);
    outline-offset: 3px;
}

.moodWordText {
    display: inline-block;
    position: relative;
}

.moodMked .moodWordText::after {
    animation: moodSweep 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    background: var(--mood-accent);
    border-radius: 2px;
    bottom: -0.15em;
    content: "";
    height: 0.09em;
    left: 0;
    position: absolute;
    right: 0;
    transform: skew(-14deg);
    transform-origin: left;
}

@keyframes moodSweep {
    from {
        transform: scaleX(0) skew(-14deg);
    }
}

.moodCnt {
    color: var(--mood-muted);
    font-family: system-ui, "Noto Sans SC", "PingFang SC", sans-serif;
    font-size: max(10px, min(0.28em, 24px));
    font-weight: 700;
    position: absolute;
    right: -0.55em;
    top: -0.35em;
}

.moodMked .moodCnt {
    color: var(--mood-accent);
}

.moodMine {
    background: var(--mood-accent);
    border-radius: 3px;
    color: var(--mood-on-accent);
    font-family: system-ui, "Noto Sans SC", "PingFang SC", sans-serif;
    font-size: max(9px, min(0.24em, 20px));
    font-weight: 700;
    left: 0;
    line-height: 1.4;
    padding: 0.05em 0.25em;
    position: absolute;
    top: 0;
}

.moodRing {
    border: 3px solid var(--mood-accent);
    border-radius: 48% 52% 45% 55% / 58% 44% 56% 42%;
    opacity: 0.82;
    pointer-events: none;
    position: absolute;
    transform: rotate(-3deg);
    transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.45s, height 0.45s;
}

.moodStage.listMode {
    height: auto !important;
    min-height: 150px;
    overflow: visible;
    padding: 18px;
}

.moodStage.listMode .moodCloudWords {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    min-width: 0;
    position: static;
    width: 100%;
}

.moodStage.listMode .moodWord {
    height: auto !important;
    left: auto !important;
    max-width: 100%;
    min-height: 48px;
    min-width: 0;
    position: relative;
    top: auto !important;
    width: 100% !important;
}

.moodStage.listMode .moodWordInner {
    border-bottom: 1px solid var(--mood-line);
    font-family: system-ui, "Noto Sans SC", "PingFang SC", sans-serif !important;
    font-size: 16px !important;
    justify-content: flex-start;
    line-height: 1.3;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0 34px 0 8px;
    text-align: left;
    white-space: normal;
}

.moodStage.listMode .moodWordText {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: break-word;
}

.moodStage.listMode .moodCnt {
    font-size: 11px;
    right: -1.1em;
    top: -0.55em;
    transform: none;
}

.moodStage.listMode .moodMine {
    font-size: 9px;
    left: 4px;
    top: 2px;
}

.moodStage.listMode .moodTopWord .moodWordText::before {
    border: 2px solid var(--mood-accent);
    border-radius: 50%;
    bottom: -7px;
    content: "";
    left: -8px;
    pointer-events: none;
    position: absolute;
    right: -12px;
    top: -7px;
    transform: rotate(-1deg);
}

.moodFoot {
    color: var(--mood-muted);
    font-size: 12px;
    padding: 8px 20px 12px;
}

.moodFoot b {
    color: var(--mood-ink);
    font-weight: 700;
}

@media (max-width: 767px) {
    .moodHead,
    .moodActions,
    .moodAdminPanel {
        padding-left: 14px;
        padding-right: 14px;
    }

    .moodHeadRight {
        margin-left: 0;
        width: 100%;
    }

    .moodActionBar {
        align-items: stretch;
    }

    .moodCustomRow,
    .moodInputWrap {
        flex-basis: 100%;
    }

    .moodStage {
        height: 520px;
    }

    .moodStage.empty {
        height: 136px !important;
    }

    .moodStage.listMode .moodCloudWords {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .moodCard,
    .moodMked .moodWordText::after {
        animation: none;
    }

    .moodActions,
    .moodRing,
    .moodStage,
    .moodWord,
    .moodWordInner {
        transition: none;
    }
}