/* Cabeçalho compacto compartilhado pelos editores de blocos. */
header {
    display: grid !important;
    grid-template-columns: auto minmax(220px, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 68px !important;
    height: auto !important;
    padding: 5px clamp(12px, 2.5vw, 34px) !important;
    color: #fff !important;
    background: #ff8c00 !important;
    box-shadow: 0 2px 5px #0002;
    flex-shrink: 0;
}

header > .header-logo { grid-column: 1; grid-row: 1; }
header > .support-card { grid-column: 2; grid-row: 1; }
header > nav { grid-column: 3; grid-row: 1; }

header .header-logo {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    text-decoration: none;
    line-height: 1;
}

header .header-logo img {
    display: block;
    width: 158px;
    height: 47px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

header .support-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 12px;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: rgba(255,255,255,.94) !important;
    background: transparent !important;
    font-size: .68rem !important;
    line-height: 1.24;
}

header .support-card > div { flex: 1 1 auto; min-width: 0; }
header .support-card strong {
    display: block;
    margin: 0 0 2px !important;
    color: #fff !important;
    font-size: .75rem;
    line-height: 1.15;
}
header .support-card > div > span { display: block; color: rgba(255,255,255,.88); }

header .support-card .youtube-subscribe {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 7px;
    color: #b7371f !important;
    background: #fff !important;
    font-size: .73rem;
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform .16s ease, box-shadow .16s ease;
}

header .support-card .youtube-subscribe:hover,
header .support-card .youtube-subscribe:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(80,35,0,.2);
    outline: 2px solid rgba(255,255,255,.5);
}

header .youtube-subscribe svg { display: block; width: 18px; height: 13px; color: #e62117; }

header .header-links,
header .header-tools {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    color: #fff;
    font-size: .75rem;
    flex-wrap: nowrap;
}

header .header-links a,
header .header-tools a { color: #fff; }

header .language-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.96);
    font-size: .74rem;
    white-space: nowrap;
}

header .language-control select {
    min-height: 31px;
    padding: 5px 8px;
    border: 0;
    border-radius: 6px;
    color: #172033;
    background: #fff;
    font-size: .76rem;
}

header #visit-counter {
    max-width: 165px;
    padding: 6px 9px;
    overflow: hidden;
    border-radius: 6px;
    color: #fff;
    background: rgba(120,55,0,.3);
    font-size: .67rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    header {
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-template-areas: "brand links" "support support";
        column-gap: 14px !important;
        row-gap: 5px !important;
        padding: 6px 16px !important;
    }
    header > .header-logo { grid-area: brand; }
    header > .support-card { grid-area: support; }
    header > nav { grid-area: links; }
    header .header-links,
    header .header-tools { gap: 8px; flex-wrap: wrap; }
}

@media (max-width: 760px) {
    header {
        grid-template-columns: auto minmax(0, 1fr) !important;
        column-gap: 8px !important;
        row-gap: 5px !important;
        padding: 5px 10px !important;
    }
    header .header-logo img { width: 120px; height: 39px; }
    header .header-links,
    header .header-tools { justify-self: end; gap: 6px; flex-wrap: wrap; }
    header .language-control { gap: 4px; font-size: .68rem; }
    header .language-control select { min-height: 29px; max-width: 130px; padding: 4px 6px; font-size: .7rem; }
    header #visit-counter { max-width: 118px; padding: 5px 6px; font-size: .61rem; }
    header .support-card { gap: 8px; font-size: .65rem !important; }
    header .support-card strong { font-size: .7rem; }
    header .support-card .youtube-subscribe { gap: 5px; padding: 6px 8px; font-size: .66rem; }
    header .youtube-subscribe svg { width: 16px; height: 12px; }
}

/* O M2003 mantém todos os controles acessíveis sem roubar altura do workspace. */
@media (max-width: 760px) {
    body.page-m2003 .container {
        width: 100%;
        margin: 6px auto;
        padding: 0 9px;
    }
    body.page-m2003 .intro { padding: 8px 10px; }
    body.page-m2003 .intro h1 { margin-bottom: 3px; font-size: 1.02rem; }
    body.page-m2003 .intro p { font-size: .79rem; line-height: 1.3; }
    body.page-m2003 #toolbar {
        display: flex;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 6px;
        max-width: 100%;
        padding: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    body.page-m2003 #toolbar > * { flex: 0 0 auto; }
    body.page-m2003 #toolbar button,
    body.page-m2003 #toolbar select {
        min-height: 36px;
        padding: 7px 9px;
        font-size: 11px;
        white-space: nowrap;
    }
    body.page-m2003 #toolbar #board-mode-label { gap: 5px; padding: 0 6px; font-size: 11px; }
    body.page-m2003 #main-container { min-height: 0; flex: 1 1 0; }
    body.page-m2003 #blocklyDiv { min-width: 0; min-height: 0; }
}