.oc-rating-widget {
    --oc-rating-blue: #2878ee;
    --oc-rating-blue-dark: #135ed1;
    --oc-rating-ink: #14213d;
    --oc-rating-muted: #77849b;
    --oc-rating-line: #e8eef7;
    max-width: 980px;
    width: 100%;
    box-sizing: border-box;
    margin: 28px auto;
    overflow: hidden;
    border: 1px solid rgba(92, 145, 223, .18);
    border-radius: 22px;
    background: linear-gradient(145deg, #eff7ff 0%, #dbeeff 48%, #eff8ff 100%);
    box-shadow: 0 20px 55px rgba(45, 110, 190, .12);
    color: var(--oc-rating-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    container-type: inline-size;
}
.oc-rating-widget *,
.oc-rating-widget *::before,
.oc-rating-widget *::after { box-sizing: border-box; }
.oc-rating-widget--widget { max-width: none; margin: 0; border-radius: 14px; box-shadow: none; }
.oc-rating-widget--widget .oc-rating-hero { padding: 24px 15px 20px; }
.oc-rating-widget--widget .oc-rating-hero::after { right: 3%; width: 120px; height: 16px; border-bottom-width: 7px; }
.oc-rating-widget--widget .oc-rating-hero h2 { font-size: clamp(23px, 7vw, 34px); font-size: clamp(23px, 7cqw, 34px); }
.oc-rating-widget--widget .oc-rating-hero p { font-size: 12px; }
.oc-rating-widget--widget .oc-rating-summary,
.oc-rating-widget--widget .oc-rating-form-card { margin-right: 10px; margin-left: 10px; }
.oc-rating-widget--widget .oc-rating-summary { display: block; padding: 10px; }
.oc-rating-widget--widget .oc-rating-score-card { min-height: 100px; }
.oc-rating-widget--widget .oc-rating-breakdown { margin-top: 12px; gap: 7px; }
.oc-rating-widget--widget .oc-rating-form-card { padding: 14px; }
.oc-rating-widget--widget .oc-rating-form-heading { display: block; }
.oc-rating-widget--widget .oc-rating-form-hint { display: block; margin-top: 6px; }
.oc-rating-widget--widget .oc-rating-emotions { gap: 4px; }
.oc-rating-widget--widget .oc-rating-emotion { font-size: 10px; }
.oc-rating-widget--widget .oc-rating-input-row { display: block; }
.oc-rating-widget--widget .oc-rating-star-picker { justify-content: center; margin-bottom: 8px; }
.oc-rating-widget--widget .oc-rating-recommend { width: 100%; }
.oc-rating-widget--widget .oc-rating-recommend button { flex: 1; padding: 0 8px; }
.oc-rating-widget--widget .oc-rating-actions { display: block; }
.oc-rating-widget--widget .oc-rating-submit { width: 100%; margin-top: 8px; }
.oc-rating-widget--widget .oc-rating-status { display: block; }
.oc-rating-hero {
    position: relative;
    padding: 38px 24px 28px;
    text-align: center;
}
.oc-rating-hero::after {
    position: absolute;
    right: 8%;
    bottom: 15px;
    width: 210px;
    height: 24px;
    border-bottom: 10px solid rgba(36, 137, 247, .85);
    border-radius: 50%;
    content: '';
    transform: rotate(-5deg);
    z-index: 0;
}
.oc-rating-hero > * { position: relative; z-index: 1; }
.oc-rating-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--oc-rating-blue-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}
.oc-rating-hero h2 {
    margin: 0;
    color: #0e1830;
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 900;
    letter-spacing: -.06em;
    line-height: 1.08;
}
.oc-rating-hero p {
    margin: 13px 0 0;
    color: #202e48;
    font-size: 15px;
    font-weight: 700;
}
.oc-rating-summary,
.oc-rating-form-card {
    position: relative;
    margin: 0 20px 18px;
    border: 1px solid rgba(52, 108, 191, .12);
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 24px rgba(26, 69, 127, .08);
}
.oc-rating-summary {
    display: grid;
    grid-template-columns: minmax(180px, .85fr) 1.6fr;
    gap: 28px;
    align-items: center;
    padding: 18px;
}
.oc-rating-summary.is-simple { grid-template-columns: 1fr; }
.oc-rating-score-card {
    display: flex;
    min-height: 124px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 12px;
    background: linear-gradient(145deg, #69a7ff, #2478eb);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.oc-rating-score-label,
.oc-rating-count { font-size: 12px; opacity: .9; }
.oc-rating-score {
    margin: 4px 0 0;
    font-size: 44px;
    line-height: 1;
}
.oc-rating-stars { display: inline-flex; gap: 1px; color: #d7dee9; }
.oc-rating-star.is-active { color: #ffc72c; }
.oc-rating-stars-large { margin: 8px 0 3px; font-size: 17px; }
.oc-rating-breakdown { display: grid; gap: 10px; }
.oc-rating-breakdown-row {
    display: grid;
    grid-template-columns: 42px minmax(80px, 1fr) 42px;
    gap: 9px;
    align-items: center;
    color: var(--oc-rating-muted);
    font-size: 12px;
}
.oc-rating-progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1f6;
}
.oc-rating-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffc72c, #ffdd67);
    transition: width .3s ease;
}
.oc-rating-breakdown-count { text-align: right; }
.oc-rating-form-card { padding: 22px; }
.oc-rating-form-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--oc-rating-line);
}
.oc-rating-form-heading h3 { margin: 0; font-size: 18px; }
.oc-rating-form-hint { color: var(--oc-rating-muted); font-size: 12px; }
.oc-rating-emotions {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 19px 0;
}
.oc-rating-emotion,
.oc-rating-pick-star,
.oc-rating-recommend button,
.oc-rating-submit {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    cursor: pointer;
    font: inherit;
}
.oc-rating-emotion {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    border-radius: 12px;
    background: #f7faff;
    color: #768399;
    font-size: 12px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.oc-rating-emotion:hover,
.oc-rating-emotion.is-selected { background: #e7f1ff; color: var(--oc-rating-blue-dark); transform: translateY(-2px); }
.oc-rating-face {
    position: relative;
    width: 28px;
    height: 28px;
    border: 2px solid currentColor;
    border-radius: 50%;
}
.oc-rating-face::before { position: absolute; top: 7px; left: 6px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; box-shadow: 10px 0 currentColor; content: ''; }
.oc-rating-face::after { position: absolute; left: 7px; bottom: 5px; width: 10px; height: 5px; border-bottom: 2px solid currentColor; border-radius: 50%; content: ''; }
.oc-rating-face-1::after { bottom: 8px; border-bottom: 0; border-top: 2px solid currentColor; border-radius: 50%; }
.oc-rating-face-2::after { bottom: 7px; border-radius: 0; }
.oc-rating-face-4::after { bottom: 6px; transform: rotate(3deg); }
.oc-rating-face-5::after { height: 7px; bottom: 4px; background: currentColor; border: 0; border-radius: 0 0 8px 8px; }
.oc-rating-input-row,
.oc-rating-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.oc-rating-star-picker { display: flex; gap: 1px; }
.oc-rating-pick-star { padding: 2px 5px; color: #c9d1df; background: transparent; font-size: 28px; line-height: 1; }
.oc-rating-pick-star:hover,
.oc-rating-pick-star.is-selected { color: #ffc72c; }
.oc-rating-recommend { display: flex; overflow: hidden; border-radius: 9px; background: #f2f7fd; }
.oc-rating-recommend button { padding: 0 18px; color: #70809a; background: transparent; font-size: 13px; }
.oc-rating-recommend button.is-selected:first-child { color: #0c9b66; background: #e1f8ed; }
.oc-rating-recommend button.is-selected:last-child { color: #d24d67; background: #fff0f1; }
.oc-rating-actions { margin-top: 18px; }
.oc-rating-status { min-height: 20px; color: var(--oc-rating-muted); font-size: 12px; }
.oc-rating-submit { padding: 0 22px; border-radius: 10px; color: #fff; background: var(--oc-rating-blue); font-size: 14px; font-weight: 700; transition: background .2s ease, transform .2s ease; }
.oc-rating-submit:hover { background: var(--oc-rating-blue-dark); transform: translateY(-1px); }
.oc-rating-submit:disabled { cursor: wait; opacity: .65; transform: none; }
.oc-rating-emotion:focus-visible,
.oc-rating-pick-star:focus-visible,
.oc-rating-recommend button:focus-visible,
.oc-rating-submit:focus-visible { outline: 3px solid rgba(40, 120, 238, .3); outline-offset: 2px; }
.io-black-mode .oc-rating-widget { --oc-rating-ink: #e9eef7; --oc-rating-muted: #a9b5c7; --oc-rating-line: rgba(255, 255, 255, .1); background: linear-gradient(145deg, #172b4d, #1d3c67); }
.io-black-mode .oc-rating-hero h2 { color: #fff; }
.io-black-mode .oc-rating-hero p { color: #dbe7f7; }
.io-black-mode .oc-rating-summary,
.io-black-mode .oc-rating-form-card { border-color: rgba(255, 255, 255, .1); background: rgba(21, 31, 48, .88); }
.io-black-mode .oc-rating-emotion { background: rgba(255, 255, 255, .06); }
@media (max-width: 640px) {
    .oc-rating-widget { max-width: 100%; margin: 20px 0; border-radius: 16px; }
    .oc-rating-hero { padding: 30px 16px 22px; }
    .oc-rating-summary { grid-template-columns: 1fr; gap: 16px; margin: 0 12px 12px; }
    .oc-rating-form-card { margin: 0 12px 12px; padding: 16px; }
    .oc-rating-emotions { gap: 4px; }
    .oc-rating-emotion { padding: 4px 0; font-size: 10px; }
    .oc-rating-form-heading { align-items: start; flex-direction: column; }
    .oc-rating-input-row { align-items: stretch; flex-direction: column; gap: 8px; }
    .oc-rating-star-picker { justify-content: center; }
    .oc-rating-recommend { justify-content: center; }
    .oc-rating-recommend button { flex: 1; }
    .oc-rating-actions { align-items: stretch; flex-direction: column; }
    .oc-rating-submit { width: 100%; }
}
@container (max-width: 640px) {
    .oc-rating-widget:not(.oc-rating-widget--widget) { margin: 18px 0; border-radius: 16px; }
    .oc-rating-widget:not(.oc-rating-widget--widget) .oc-rating-summary { grid-template-columns: 1fr; gap: 16px; margin-right: 12px; margin-left: 12px; }
    .oc-rating-widget:not(.oc-rating-widget--widget) .oc-rating-form-card { margin-right: 12px; margin-left: 12px; padding: 16px; }
    .oc-rating-widget:not(.oc-rating-widget--widget) .oc-rating-emotions { gap: 4px; }
    .oc-rating-widget:not(.oc-rating-widget--widget) .oc-rating-emotion { padding: 4px 0; font-size: 10px; }
    .oc-rating-widget:not(.oc-rating-widget--widget) .oc-rating-form-heading { align-items: start; flex-direction: column; }
    .oc-rating-widget:not(.oc-rating-widget--widget) .oc-rating-input-row { align-items: stretch; flex-direction: column; gap: 8px; }
    .oc-rating-widget:not(.oc-rating-widget--widget) .oc-rating-star-picker { justify-content: center; }
    .oc-rating-widget:not(.oc-rating-widget--widget) .oc-rating-recommend { justify-content: center; }
    .oc-rating-widget:not(.oc-rating-widget--widget) .oc-rating-recommend button { flex: 1; }
    .oc-rating-widget:not(.oc-rating-widget--widget) .oc-rating-actions { align-items: stretch; flex-direction: column; }
    .oc-rating-widget:not(.oc-rating-widget--widget) .oc-rating-submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .oc-rating-progress span,
    .oc-rating-emotion,
    .oc-rating-submit { transition: none; }
}

.oc-rating-mode-score .oc-rating-breakdown,
.oc-rating-mode-score .oc-rating-emotions,
.oc-rating-mode-score .oc-rating-recommend,
.oc-rating-mode-distribution .oc-rating-emotions,
.oc-rating-mode-distribution .oc-rating-recommend,
.oc-rating-mode-emotion .oc-rating-star-picker,
.oc-rating-mode-emotion .oc-rating-recommend,
.oc-rating-mode-recommend .oc-rating-emotions,
.oc-rating-mode-recommend .oc-rating-star-picker {
    display: none;
}
.oc-rating-mode-score .oc-rating-summary,
.oc-rating-mode-distribution .oc-rating-summary { grid-template-columns: 1fr; }
.oc-rating-mode-emotion .oc-rating-input-row,
.oc-rating-mode-recommend .oc-rating-input-row { display: block; }
.oc-rating-mode-emotion .oc-rating-input-row { display: none; }
.oc-rating-mode-recommend .oc-rating-recommend { display: flex; width: 100%; }
.oc-rating-mode-recommend .oc-rating-recommend button { flex: 1; }
.oc-rating-pending .oc-rating-summary { display: none !important; }
.oc-rating-pending .oc-rating-form-card { display: block !important; }
.oc-rating-submitted .oc-rating-form-card { display: none !important; }