/* Google Sheets hub: a published CSV link chip travels from an online sheet to the editor, rows become address labels. */
.hub-anim.ha-google-sheets-labels .ha-stage { background: #e4f3ea radial-gradient(circle, #bfe0cb 1.3px, transparent 1.6px) 0 0 / 18px 18px; border: 1px solid #cfe6d8; }
.hub-anim.ha-google-sheets-labels .hg-scene { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(110px, 0.55fr) minmax(0, 0.9fr); align-items: center; gap: 0; max-width: 900px; margin: 0 auto; font-family: Inter, system-ui, sans-serif; color: #12261b; }
.hub-anim.ha-google-sheets-labels .hg-sheet { position: relative; z-index: 1; background: #fff; border: 1.5px solid #12261b; border-radius: 14px; box-shadow: 6px 7px 0 #bfe0cb, 0 18px 30px -22px rgba(18, 38, 27, 0.5); overflow: hidden; transform: rotate(-1.2deg); }
.hub-anim.ha-google-sheets-labels .hg-bar { display: flex; gap: 5px; padding: 8px 11px; background: #f3f7f4; border-bottom: 1px solid #dfe9e2; }
.hub-anim.ha-google-sheets-labels .hg-bar i { width: 8px; height: 8px; border-radius: 50%; background: #c9d8ce; }
.hub-anim.ha-google-sheets-labels .hg-title { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; font: 700 13.5px/1.2 Manrope, Inter, sans-serif; }
.hub-anim.ha-google-sheets-labels .hg-ico { width: 16px; height: 16px; border-radius: 4px; background: #1d7a4c linear-gradient(#fff, #fff) 50% 50% / 1.5px 100% no-repeat; box-shadow: inset 0 0 0 3px #1d7a4c; position: relative; }
.hub-anim.ha-google-sheets-labels .hg-ico::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.5px; margin-top: -0.75px; background: #fff; }
.hub-anim.ha-google-sheets-labels .hg-grid { border-top: 1px solid #dfe9e2; }
.hub-anim.ha-google-sheets-labels .hg-row { display: grid; grid-template-columns: 22px 1.15fr 1.4fr 1fr 0.7fr; font-size: 11.5px; line-height: 1.2; border-bottom: 1px solid #e7efe9; }
.hub-anim.ha-google-sheets-labels .hg-row > * { padding: 8px 7px; border-left: 1px solid #e7efe9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hub-anim.ha-google-sheets-labels .hg-row > b { border-left: 0; background: #f3f7f4; color: #7a8f81; font-weight: 600; font-size: 10px; text-align: center; padding-left: 0; padding-right: 0; }
.hub-anim.ha-google-sheets-labels .hg-head span { font-weight: 700; background: #f8fbf9; }
.hub-anim.ha-google-sheets-labels .hg-tab { display: inline-block; margin: 8px 0 10px 12px; padding: 5px 11px; border-radius: 6px; background: #dff1e6; color: #1d6b45; font: 700 10.5px/1 Inter, system-ui, sans-serif; }

.hub-anim.ha-google-sheets-labels .hg-rail { position: relative; height: 40px; z-index: 2; }
.hub-anim.ha-google-sheets-labels .hg-rail::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; border-top: 2px dashed #6fb68b; }
.hub-anim.ha-google-sheets-labels .hg-chip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg); display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: #1d6b45; color: #fff; font: 700 12px/1 Inter, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 8px 16px -8px rgba(18, 60, 38, 0.7), inset 0 0 0 2px rgba(255, 255, 255, 0.18); }
.hub-anim.ha-google-sheets-labels .hg-chip svg { width: 14px; height: 14px; flex: none; }

.hub-anim.ha-google-sheets-labels .hg-editor { position: relative; z-index: 1; background: #fff; border: 1.5px solid #12261b; border-radius: 14px; padding: 12px 12px 14px; box-shadow: -6px 7px 0 #bfe0cb, 0 18px 30px -22px rgba(18, 38, 27, 0.5); transform: rotate(1deg); }
.hub-anim.ha-google-sheets-labels .hg-ehead { font: 800 11px/1 Inter, system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #5c7366; margin-bottom: 10px; }
.hub-anim.ha-google-sheets-labels .hg-field small { display: block; font: 600 11px/1.2 Inter, system-ui, sans-serif; color: #12261b; margin-bottom: 5px; }
.hub-anim.ha-google-sheets-labels .hg-input { position: relative; height: 32px; border: 1.5px solid #cfe0d5; border-radius: 9px; background: #f8fbf9; }
.hub-anim.ha-google-sheets-labels .hg-input > span { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px/1 Inter, system-ui, sans-serif; white-space: nowrap; }
.hub-anim.ha-google-sheets-labels .hg-ph { color: #9aaba0; opacity: 0; }
.hub-anim.ha-google-sheets-labels .hg-ok { color: #1d6b45; padding: 5px 9px 5px 7px; margin-left: -4px; border-radius: 999px; background: #dff1e6; }
.hub-anim.ha-google-sheets-labels .hg-ok svg { width: 12px; height: 12px; }
.hub-anim.ha-google-sheets-labels .hg-labels { display: grid; gap: 8px; margin-top: 12px; justify-items: center; }
.hub-anim.ha-google-sheets-labels .hg-label { display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; max-width: 220px; aspect-ratio: 2.63 / 1; padding: 0 14px; box-sizing: border-box; background: #fffef8; border: 1px solid #d7ded9; border-radius: 8px; box-shadow: 0 6px 12px -8px rgba(18, 38, 27, 0.45); font-size: 11px; line-height: 1.25; color: #1f2a24; }
.hub-anim.ha-google-sheets-labels .hg-label b { font: 800 12.5px/1.2 Manrope, Inter, sans-serif; color: #0f1a14; }
.hub-anim.ha-google-sheets-labels .hg-l1 { transform: rotate(-1deg); }
.hub-anim.ha-google-sheets-labels .hg-l2 { transform: rotate(0.8deg); position: relative; left: 6px; }
.hub-anim.ha-google-sheets-labels .hg-l3 { transform: rotate(-0.4deg); }

@media (max-width: 760px) {
    .hub-anim.ha-google-sheets-labels .hg-scene { grid-template-columns: minmax(0, 1fr); max-width: 340px; }
    .hub-anim.ha-google-sheets-labels .hg-st { display: none; }
    .hub-anim.ha-google-sheets-labels .hg-row { grid-template-columns: 20px 1.25fr 1.1fr 0.62fr; font-size: 11px; }
    .hub-anim.ha-google-sheets-labels .hg-rail { height: 78px; }
    .hub-anim.ha-google-sheets-labels .hg-rail::before { left: 50%; right: auto; top: 6px; bottom: 6px; border-top: 0; border-left: 2px dashed #6fb68b; }
    .hub-anim.ha-google-sheets-labels .hg-sheet, .hub-anim.ha-google-sheets-labels .hg-editor { box-shadow: 4px 5px 0 #bfe0cb, 0 18px 30px -22px rgba(18, 38, 27, 0.5); }
    .hub-anim.ha-google-sheets-labels .hg-label { max-width: 230px; }
    .hub-anim.ha-google-sheets-labels .hg-row > * { padding: 8px 5px; }
}

@media (max-width: 380px) {
    .hub-anim.ha-google-sheets-labels .hg-row { grid-template-columns: 16px minmax(0, 1.3fr) minmax(0, 1.1fr) 42px; font-size: 10.5px; }
    .hub-anim.ha-google-sheets-labels .hg-row > * { padding: 7px 4px; text-overflow: clip; }
}

@media (prefers-reduced-motion: no-preference) {
    .hub-anim.ha-google-sheets-labels .hg-chip { animation: hagsChip 10s ease-in-out infinite; }
    .hub-anim.ha-google-sheets-labels .hg-ph { animation: hagsPh 10s linear infinite; }
    .hub-anim.ha-google-sheets-labels .hg-ok { animation: hagsOk 10s ease-out infinite; }
    .hub-anim.ha-google-sheets-labels .hg-input { animation: hagsInput 10s ease-out infinite; }
    .hub-anim.ha-google-sheets-labels .hg-label { animation: hagsLabel 10s cubic-bezier(.3, 1.4, .5, 1) infinite; }
    .hub-anim.ha-google-sheets-labels .hg-l2 { animation-delay: 0.8s; }
    .hub-anim.ha-google-sheets-labels .hg-l3 { animation-delay: 1.6s; }
    .hub-anim.ha-google-sheets-labels .hg-row:not(.hg-head) > span { animation: hagsRow 10s ease-out infinite; }
    .hub-anim.ha-google-sheets-labels .hg-r2 > span { animation-delay: 0.8s; }
    .hub-anim.ha-google-sheets-labels .hg-r3 > span { animation-delay: 1.6s; }
    .hub-anim.ha-google-sheets-labels .hg-tab { animation: hagsTab 10s ease-out infinite; }

    @keyframes hagsTab { 0%, 4%, 18%, 100% { box-shadow: 0 0 0 0 rgba(29, 107, 69, 0); } 8%, 12% { box-shadow: 0 0 0 4px rgba(29, 107, 69, 0.25); } }
    @keyframes hagsChip {
        0%, 8% { left: 0%; opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-3deg); }
        13% { left: 0%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
        34% { left: 100%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(3deg); }
        39%, 100% { left: 100%; opacity: 0; transform: translate(-50%, -50%) scale(0.7) rotate(3deg); }
    }
    @keyframes hagsPh { 0%, 34% { opacity: 1; } 35.5%, 95% { opacity: 0; } 97%, 100% { opacity: 1; } }
    @keyframes hagsOk { 0%, 37% { opacity: 0; transform: translateY(-50%) scale(0.7); } 41% { opacity: 1; transform: translateY(-50%) scale(1.06); } 44%, 93% { opacity: 1; transform: translateY(-50%) scale(1); } 96%, 100% { opacity: 0; transform: translateY(-50%) scale(1); } }
    @keyframes hagsInput { 0%, 35% { border-color: #cfe0d5; } 38%, 46% { border-color: #1d6b45; box-shadow: 0 0 0 3px rgba(29, 107, 69, 0.18); } 52%, 100% { border-color: #cfe0d5; box-shadow: none; } }
    @keyframes hagsLabel { 0%, 44% { opacity: 0; translate: 0 12px; scale: 0.9; } 50%, 90% { opacity: 1; translate: 0 0; scale: 1; } 95%, 100% { opacity: 0; translate: 0 0; scale: 1; } }
    @keyframes hagsRow { 0%, 43%, 56%, 100% { background-color: transparent; } 46%, 51% { background-color: #d8f0e1; } }

    @media (max-width: 760px) {
        .hub-anim.ha-google-sheets-labels .hg-chip { animation-name: hagsChipV; }
        @keyframes hagsChipV {
            0%, 8% { top: 0%; opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-3deg); }
            13% { top: 0%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
            34% { top: 100%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(3deg); }
            39%, 100% { top: 100%; opacity: 0; transform: translate(-50%, -50%) scale(0.7) rotate(3deg); }
        }
    }
}