/* PRECI-DIP INSIDE - PWA diagnostic panel */
.pwa-debug {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 2147483647;
    width: min(520px, calc(100vw - 28px));
    max-height: min(82vh, 760px);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 14px;
    background: #fff;
    color: #191919;
    box-shadow: 0 18px 70px rgba(0,0,0,.28);
    font: 13px/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pwa-debug * { box-sizing: border-box; }

.pwa-debug-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 54px;
    padding: 10px 12px;
    background: #171717;
    color: #fff;
}

.pwa-debug-header > div { flex: 1; }
.pwa-debug-header strong { display: block; font-size: 14px; letter-spacing: .08em; }
.pwa-debug-header small { display: block; margin-top: 2px; opacity: .65; font-size: 10px; }
.pwa-debug-header button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font: 22px/1 system-ui, sans-serif;
    cursor: pointer;
}

.pwa-debug-content {
    max-height: calc(min(82vh, 760px) - 54px);
    overflow: auto;
    padding: 12px;
}

.pwa-debug.is-minimized { width: 190px; }
.pwa-debug.is-minimized .pwa-debug-content { display: none; }

.pwa-debug-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 8px;
}

.pwa-debug-actions button {
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    background: #f7f7f7;
    color: #161616;
    font: 600 11px/1.2 system-ui, sans-serif;
    cursor: pointer;
}

.pwa-debug-actions button:hover { background: #ededed; }

.pwa-debug-action-status {
    min-height: 18px;
    margin: 2px 0 8px;
    color: #665a48;
    font-size: 11px;
}

.pwa-debug-summary {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding: 9px 10px;
    border-radius: 9px;
    background: #edf8ee;
}

.pwa-debug-summary.has-errors { background: #fff1f0; }
.pwa-debug-summary span { opacity: .65; font-size: 11px; white-space: nowrap; }

.pwa-debug-line {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 9px;
    padding: 8px 2px;
    border-bottom: 1px solid #efefef;
}

.pwa-debug-dot {
    width: 9px;
    height: 9px;
    margin-top: 4px;
    border-radius: 50%;
    background: #a3a3a3;
}
.pwa-debug-dot.is-ok { background: #1f9d55; }
.pwa-debug-dot.is-warn { background: #d38b00; }
.pwa-debug-dot.is-bad { background: #d53b35; }
.pwa-debug-dot.is-neutral { background: #848484; }

.pwa-debug-line__body { min-width: 0; }
.pwa-debug-line__body strong { display: block; margin-bottom: 2px; font-size: 11px; }
.pwa-debug-line__body span,
.pwa-debug-line__body small {
    display: block;
    overflow-wrap: anywhere;
    font-size: 11px;
}
.pwa-debug-line__body span { color: #333; }
.pwa-debug-line__body small { margin-top: 2px; color: #777; }

.pwa-debug-errors {
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid #ffd3cf;
    border-radius: 9px;
    background: #fff5f4;
    color: #9d2620;
    font-size: 11px;
}
.pwa-debug-errors strong { display: block; margin-bottom: 5px; }
.pwa-debug-errors div + div { margin-top: 4px; }

.pwa-debug-raw { margin-top: 10px; }
.pwa-debug-raw summary { cursor: pointer; font-weight: 650; font-size: 11px; }
.pwa-debug-raw pre {
    max-height: 240px;
    overflow: auto;
    margin: 7px 0 0;
    padding: 9px;
    border-radius: 8px;
    background: #f3f3f3;
    font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.pwa-debug-loading { padding: 20px 4px; color: #666; text-align: center; }

@media (max-width: 520px) {
    .pwa-debug { left: 8px; bottom: 8px; width: calc(100vw - 16px); max-height: 86vh; }
    .pwa-debug-content { max-height: calc(86vh - 54px); }
}