.official-status {
    display: flex;
    width: min(760px, 100%);
    margin: 38px auto 0;
    padding: 18px 22px;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid #b9d5f6;
    border-radius: 17px;
    background: #f1f7ff;
}

.official-status .status-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    margin-top: 5px;
    border-radius: 50%;
    background: #e9a23b;
    box-shadow: 0 0 0 5px rgba(233, 162, 59, .14);
}

.official-status strong { font-size: 14px; }
.official-status p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.install-widget {
    margin-top: 30px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 60px rgba(20, 70, 140, .09);
}

.service-tabs {
    display: grid;
    padding: 10px;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    border-bottom: 1px solid var(--line);
    background: #f7faff;
}

.service-tabs button {
    display: flex;
    min-width: 0;
    min-height: 76px;
    padding: 13px 16px;
    align-items: center;
    gap: 12px;
    border: 1px solid transparent;
    border-radius: 17px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}

.service-tabs button:hover { background: rgba(255, 255, 255, .72); }
.service-tabs button[aria-selected="true"] { border-color: #b9d5f6; background: #fff; box-shadow: 0 8px 24px rgba(20, 70, 140, .09); transform: translateY(-1px); }
.service-tabs button:focus-visible { outline: 3px solid rgba(21, 87, 213, .24); outline-offset: 2px; }
.service-tabs button > span:last-child { display: grid; gap: 4px; min-width: 0; }
.service-tabs strong { font-size: 15px; }
.service-tabs small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.service-mark {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.chatgpt-mark { background: var(--blue); }
.claude-mark { background: #0b2854; }
.gemini-mark { background: linear-gradient(145deg, #4285f4, #9b72cb); }

.service-panel {
    min-height: 430px;
    padding: 46px;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 70px;
    align-items: start;
    background: linear-gradient(145deg, #fff, #f8fbff);
}

.service-panel:not([hidden]) { display: grid; }
.service-panel[hidden] { display: none; }
.service-intro h3 { margin: 24px 0 14px; font-size: 32px; line-height: 1.15; }
.service-intro > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.service-intro code { color: var(--blue); }
.service-intro .availability { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; }
.label.gemini { background: #e7f4ff; color: #3568d4; }

.service-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.service-steps li { display: grid; padding: 17px 18px; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.service-steps li > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--pale); color: var(--blue); font-size: 12px; font-weight: 800; }
.service-steps strong { font-size: 14px; }
.service-steps p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.service-config > p { margin: 0; font-size: 14px; }
.service-config .terminal { margin: 14px 0 16px; }
.service-config .terminal pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.config-note { color: var(--muted); font-size: 13px !important; line-height: 1.55; }

html[data-theme="dark"] .official-status { border-color: #315981; background: #102139; }
html[data-theme="dark"] .install-widget { background: #0d1b2e; }
html[data-theme="dark"] .service-tabs { background: #0a1727; }
html[data-theme="dark"] .service-tabs button:hover { background: #102139; }
html[data-theme="dark"] .service-tabs button[aria-selected="true"] { border-color: #315981; background: #132840; }
html[data-theme="dark"] .service-panel { background: linear-gradient(145deg, #0d1b2e, #102139); }
html[data-theme="dark"] .service-steps li { background: #13253c; }
html[data-theme="dark"] .service-steps li > span { background: #17365b; }
html[data-theme="dark"] .label.gemini { background: #17365b; color: #9fc4ff; }

@media (max-width: 850px) {
    .service-panel { padding: 36px; grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 600px) {
    .official-status { margin-top: 28px; padding: 16px 17px; }
    .service-tabs { grid-template-columns: 1fr; }
    .service-tabs button { min-height: 62px; }
    .service-tabs small { white-space: normal; }
    .service-panel { min-height: 0; padding: 27px 21px; }
    .service-intro h3 { font-size: 27px; }
    .service-steps li { padding: 15px; }
}