.official-context-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(71, 85, 105, 0.45);
}

.official-context-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.official-context-eyebrow,
.official-context-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.28rem 0.55rem;
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.official-context-eyebrow { color: rgb(125 211 252); background: rgba(14, 116, 144, 0.14); border: 1px solid rgba(34, 211, 238, 0.24); }
.official-context-status { color: rgb(203 213 225); background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(100, 116, 139, 0.4); }
.official-context-status[data-state="available"] { color: rgb(110 231 183); border-color: rgba(16, 185, 129, 0.45); background: rgba(6, 78, 59, 0.2); }
.official-context-status[data-state="partial"] { color: rgb(253 224 71); border-color: rgba(234, 179, 8, 0.45); background: rgba(113, 63, 18, 0.2); }
.official-context-status[data-state="warning"] { color: rgb(253 186 116); border-color: rgba(249, 115, 22, 0.5); background: rgba(124, 45, 18, 0.22); }
.official-context-status[data-state="unavailable"] { color: rgb(252 165 165); border-color: rgba(239, 68, 68, 0.45); background: rgba(127, 29, 29, 0.18); }
.official-context-status[data-state="neutral"] { color: rgb(196 181 253); border-color: rgba(139, 92, 246, 0.45); background: rgba(76, 29, 149, 0.18); }

.official-context-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.48rem 0.7rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(59, 130, 246, 0.35);
    background: rgba(30, 64, 175, 0.2);
    color: rgb(191 219 254);
    font-size: 0.6rem;
    font-weight: 800;
    white-space: nowrap;
}
.official-context-action:hover { background: rgba(37, 99, 235, 0.32); }
.official-context-action:disabled { opacity: 0.55; cursor: wait; }

.official-context-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.9rem;
    padding: 0.75rem;
    border: 1px solid rgba(71, 85, 105, 0.38);
    border-radius: 0.7rem;
    background: rgba(15, 23, 42, 0.34);
    min-width: 0;
}
.official-context-strip > * { min-width: 0; }
.official-context-label { display: block; font-size: 0.5rem; color: rgb(100 116 139); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.official-context-name { display: block; color: var(--text-main); font-size: 0.78rem; overflow-wrap: anywhere; }
.official-context-meta { display: block; color: var(--text-sub); font-size: 0.58rem; margin-top: 0.18rem; overflow-wrap: anywhere; }
.official-context-link { display: inline-flex; align-items: center; gap: 0.25rem; color: rgb(125 211 252); font-size: 0.58rem; font-weight: 800; text-decoration: none; }
.official-context-link:hover { color: rgb(186 230 253); text-decoration: underline; }

.official-measure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; margin-top: 0.75rem; }
.official-measure-card { min-width: 0; border-radius: 0.7rem; border: 1px solid rgba(71, 85, 105, 0.34); background: rgba(15, 23, 42, 0.28); padding: 0.7rem; }
.official-measure-card strong { display: block; color: var(--text-main); font-size: 0.88rem; overflow-wrap: anywhere; }
.official-measure-card p { color: var(--text-sub); font-size: 0.53rem; margin-top: 0.22rem; line-height: 1.35; overflow-wrap: anywhere; }
.official-measure-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.35rem; }
.official-measure-pair span { display: block; padding: 0.4rem; border-radius: 0.45rem; background: rgba(2, 6, 23, 0.36); color: rgb(148 163 184); font-size: 0.5rem; min-width: 0; }
.official-measure-pair strong { font-size: 0.72rem; margin-top: 0.12rem; }
.official-measure-delta { display: block; margin-top: 0.35rem; font-size: 0.52rem; color: rgb(125 211 252); font-weight: 700; }
.official-gas-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; margin-top: 0.65rem; }
.official-context-method { margin-top: 0.75rem; padding-top: 0.65rem; border-top: 1px solid rgba(71, 85, 105, 0.3); color: var(--text-sub); font-size: 0.55rem; line-height: 1.5; }
.official-context-method summary { cursor: pointer; color: rgb(148 163 184); font-weight: 800; text-transform: uppercase; }
.official-context-source-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.55rem; }
.official-context-source-row a { color: rgb(125 211 252); font-weight: 700; }
.official-fire-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin-top: 0.8rem; }
.official-fire-card { min-width: 0; border: 1px solid rgba(249, 115, 22, 0.22); border-radius: 0.7rem; background: rgba(67, 20, 7, 0.12); padding: 0.75rem; }
.official-fire-card strong { display: block; color: var(--text-main); font-size: 0.76rem; line-height: 1.35; overflow-wrap: anywhere; }
.official-context-focus { animation: official-context-pulse 2.1s ease-out; }
@keyframes official-context-pulse { 0%, 45% { box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.65), 0 0 2.2rem rgba(14, 165, 233, 0.35); } 100% { box-shadow: none; } }

@media (max-width: 767px) {
    .official-context-header, .official-context-strip { align-items: stretch; flex-direction: column; }
    .official-context-action { width: 100%; }
    .official-gas-grid, .official-fire-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
    .official-measure-grid, .official-measure-pair, .official-gas-grid, .official-fire-grid { grid-template-columns: minmax(0, 1fr); }
}