/* ABN Wall v3.2 */
:root {
    --abn-theme: #2563eb;
    --abn-theme-dark: #1d4ed8;
    --abn-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

#abn-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(10,12,20,.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .3s ease;
    font-family: var(--abn-font);
}
#abn-overlay.abn-on { opacity: 1; }

#abn-dialog {
    display: flex;
    width: 100%;
    max-width: 900px;
    min-height: 480px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 32px 80px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.16);
    overflow: hidden;
    animation: abn-in .35s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes abn-in { from{transform:translateY(24px) scale(.97);opacity:0} to{transform:none;opacity:1} }

/* ── Sidebar ── */
#abn-sidebar {
    width: 210px; flex-shrink: 0;
    background: #f8f9fb; border-right: 1px solid #eaecf0;
    overflow-y: auto; padding: 20px 0;
}
#abn-sidebar-hd {
    font-size: 11px; font-weight: 700; color: #9ca3af;
    letter-spacing: .07em; text-transform: uppercase; padding: 0 18px 12px;
}
.abn-item {
    display: flex; align-items: center; gap: 11px; padding: 9px 18px;
    cursor: pointer; border-left: 3px solid transparent;
    transition: background .15s, border-color .15s;
    font-size: 13.5px; color: #374151; font-weight: 500;
}
.abn-item:hover { background: #f0f2f5; }
.abn-item.abn-active { background: #eff6ff; border-left-color: var(--abn-theme); color: var(--abn-theme); }
.abn-icon { flex-shrink:0; width:30px; height:30px; display:flex; align-items:center; }
.abn-icon svg, .abn-icon img { width:30px; height:30px; border-radius:6px; display:block; }

/* ── Main content ── */
#abn-body {
    flex: 1; display: flex; flex-direction: column;
    padding: 30px 34px 28px; position: relative; overflow: hidden;
    min-width: 0;
}
#abn-body::before {
    content:''; position:absolute; top:-60px; right:-60px;
    width:200px; height:200px; border-radius:50%;
    background:var(--abn-theme); opacity:.05; pointer-events:none;
}
#abn-site  { font-size:11px; font-weight:700; color:#9ca3af; letter-spacing:.08em; text-transform:uppercase; margin-bottom:5px; }
#abn-title { font-size:20px; font-weight:700; color:#111827; line-height:1.3; margin:0 0 10px; }
#abn-desc  { font-size:14px; color:#4b5563; line-height:1.6; margin-bottom:20px; }

/* ── Demo area (animation/screenshot) ── */
#abn-demo {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    flex-shrink: 0;
    position: relative;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#abn-demo img, #abn-demo video {
    width: 100%;
    height: 100%;
    max-height: 200px;
    object-fit: contain;
    display: block;
}
/* SVG inline step diagram shown when no custom media */
#abn-demo-svg {
    width: 100%;
    padding: 16px 20px;
}
.abn-demo-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
}
.abn-demo-step:last-child { border-bottom: none; }
.abn-demo-num {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--abn-theme);
    color: #fff;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.abn-demo-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}

/* ── Actions ── */
#abn-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top: auto; padding-top: 4px; }
#abn-reload {
    display:inline-flex; align-items:center; gap:8px; padding:11px 22px;
    background:var(--abn-theme); color:#fff; border:none; border-radius:10px;
    font-size:14px; font-weight:600; cursor:pointer;
    transition:background .15s, transform .1s; font-family:var(--abn-font);
}
#abn-reload:hover { background:var(--abn-theme-dark); transform:translateY(-1px); }
#abn-close {
    padding:11px 18px; background:transparent; color:#6b7280;
    border:1.5px solid #d1d5db; border-radius:10px; font-size:14px;
    font-weight:500; cursor:pointer; transition:border-color .15s,color .15s; font-family:var(--abn-font);
}
#abn-close:hover:not(:disabled) { border-color:#9ca3af; color:#374151; }
#abn-close:disabled { opacity:.45; cursor:not-allowed; }

#abn-x {
    position:absolute; top:14px; right:14px; width:30px; height:30px;
    border:none; background:#f3f4f6; border-radius:50%; cursor:pointer;
    display:none; align-items:center; justify-content:center;
    color:#6b7280; font-size:15px; transition:background .15s;
}
#abn-x:hover { background:#e5e7eb; }
#abn-x.abn-x-on { display:flex; }

/* ── Mobile ── */
@media (max-width: 620px) {
    #abn-dialog { flex-direction:column; min-height:unset; max-height:95vh; overflow-y:auto; }
    #abn-sidebar { width:100%; border-right:none; border-bottom:1px solid #eaecf0; padding:10px 0; display:flex; overflow-x:auto; flex-shrink:0; }
    #abn-sidebar-hd { display:none; }
    .abn-item { flex-direction:column; gap:3px; padding:7px 12px; font-size:11px; white-space:nowrap; border-left:none; border-bottom:3px solid transparent; min-width:64px; justify-content:center; }
    .abn-item.abn-active { border-left-color:transparent; border-bottom-color:var(--abn-theme); }
    #abn-body { padding:20px 18px 18px; }
    #abn-title { font-size:17px; }
    #abn-demo { min-height:120px; }
}