/* Clean, unified stylesheet for the docs page
   - centered large site title
   - horizontal tabs bar with sliding indicator
   - responsive card grid with reveal animation
   - modal for card details
*/

:root{
    --brand-1: #3b82f6;
    --brand-2: #60a5fa;
    --muted: #6b7280;
    --bg: linear-gradient(180deg,#f7fbff 0%,#f7fff6 50%,#fffaf6 100%);
}

*{ box-sizing: border-box }

body{
    margin:0; padding:0; font-family: 'Poppins', "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    color:#10233f; background: var(--bg);
}

/* Header — canonical rule */
header{
    padding:18px 24px; background:linear-gradient(135deg,rgba(255,255,255,0.6),#f1fbff);
    border-bottom:1px solid rgba(18,50,60,0.04);
    display:flex; align-items:center;
    position:relative; min-height:76px; overflow:visible;
    margin-top:30px;
}
/* h1: absolute, centered on both axes */
header h1{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0; font-weight:800; font-size:3.3rem; text-align:center; letter-spacing:0.6px; white-space:nowrap; pointer-events:none; z-index:1 }

/* Search box in header: fixed to far right, small, pastel, glassy */
.search-container{ position:absolute; right:24px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; gap:8px; z-index:3; flex-shrink:0 }
.site-search{ min-width:240px; max-width:420px; padding:8px 12px; border-radius:999px; border:1px solid rgba(16,35,63,0.06); background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,255,252,0.9)); box-shadow:0 8px 20px rgba(8,18,30,0.04); font-size:0.95rem; color:#072033 }
.site-search::placeholder{ color:#9aaecf }
.search-clear{ background:transparent; border:none; font-size:0.95rem; cursor:pointer; padding:6px; border-radius:6px; color:#6b7280 }
.search-clear:hover{ color:#234 }
.visually-hidden{ position: absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

@media (max-width:720px){ .site-search{ min-width:140px; max-width:220px; font-size:0.88rem } .search-container{ right:16px } }
@media (max-width:520px){ header h1{ font-size:2rem } .site-search{ min-width:100px; max-width:160px } .search-container{ right:10px } }

/* Page section */
.header-section{ width:min(1100px,96%); margin:22px auto; padding:18px 0 22px; text-align:left }
.header-section .section-heading-title{ margin:0 0 12px 0; padding-left:12px; border-left:4px solid rgba(59,130,246,0.12); font-size:1.35rem }

/* Tabs bar */
.tabs-bar{ display:flex; gap:10px; align-items:center; justify-content:flex-start; position:relative; padding:6px 4px 14px; overflow:auto }
.tabs-bar-button{ background:linear-gradient(90deg,#f6fbff,#fff9f6); border:none; padding:8px 14px; border-radius:999px; cursor:pointer; color:#234; font-weight:600; box-shadow:0 6px 14px rgba(18,50,60,0.04); white-space:nowrap }
.tabs-bar-button.active{ background:linear-gradient(90deg,var(--brand-1),var(--brand-2)); color:#fff; box-shadow:0 12px 30px rgba(59,130,246,0.14); transform:translateY(-2px) }
.tabs-indicator{ position:absolute; height:3px; background:linear-gradient(90deg,var(--brand-1),var(--brand-2)); bottom:6px; left:0; width:0; border-radius:3px; transition: transform .28s cubic-bezier(.2,.9,.2,1), width .28s cubic-bezier(.2,.9,.2,1); pointer-events:none }

/* Grid */
.grid-container{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:18px; padding:8px; list-style:none; margin:0 }

/* Card */
.card{ list-style:none; border-radius:12px; background:#fff; box-shadow:0 10px 30px rgba(18,50,60,0.06); padding:12px 14px; display:flex; align-items:center; gap:12px; min-height:86px; opacity:0; transform:translateY(10px); transition:transform .38s cubic-bezier(.2,.9,.2,1), opacity .38s ease }
.card.card--visible{ opacity:1; transform:none }
.card:hover{ transform:translateY(-6px) }
.card-body{ display:flex; align-items:center; gap:12px; width:100% }
.card-body img{ width:56px; height:56px; border-radius:50%; object-fit:cover; padding:6px; background:linear-gradient(135deg,#f0f8ff,#fff0f6); box-shadow:0 6px 18px rgba(18,50,60,0.04); flex-shrink:0 }
.card-content{ display:flex; flex-direction:column; justify-content:center; text-align:left; min-width:0; overflow:hidden; width:100% }
.card .title{ font-size:1rem; font-weight:700; color:#10233f; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.card .description{ font-size:0.92rem; color:var(--muted); margin:6px 0 0; white-space:normal; max-height:3.6rem; overflow:hidden }
.expand-btn{ margin-left:auto; background:linear-gradient(90deg,#fff,#f3f9ff); border:1px solid rgba(18,50,60,0.06); padding:6px 8px; border-radius:8px; cursor:pointer; font-size:0.82rem }

/* Hover highlighted state to mimic attached image effect */
.card--hover{ transform:translateY(-8px); box-shadow:0 28px 60px rgba(59,130,246,0.12); border:2px solid #ff6b6b; }

/* Bottom detail bar shown on card hover */
.card-detail-bar{ position:fixed; left:50%; transform:translateX(-50%); bottom:72px; z-index:2200; display:none; max-width:1100px; width:92%; background:#fff; border-radius:10px; padding:18px 20px; box-shadow:0 20px 50px rgba(3,12,24,0.12); border:1px solid rgba(0,0,0,0.04); }
.card-detail-bar.open{ display:block; animation: slideUp .28s cubic-bezier(.2,.9,.2,1); }
.card-detail-bar .detail-title{ font-size:1.05rem; font-weight:700; color:#10233f; margin:0 0 6px 0 }
.card-detail-bar .detail-desc{ font-size:1.02rem; color:#6b7280; margin:0 }

@keyframes slideUp{ from{ transform: translate(-50%, 12px); opacity:0 } to{ transform: translate(-50%,0); opacity:1 } }

.tab-pager{ display:flex; justify-content:center; margin-top:12px }
.load-more{ background:linear-gradient(90deg,#e8f6ff,#fff0f6); border:1px solid rgba(18,50,60,0.06); padding:8px 14px; border-radius:999px; cursor:pointer }
.load-more[disabled]{ opacity:0.5; cursor:default }

/* Modal */
.card-modal{ display:none }
.card-modal.open{ display:block; position:fixed; inset:0; z-index:2000 }
.card-modal-backdrop{ position:absolute; inset:0; background:rgba(3,12,24,0.36) }
.card-modal-panel{ position:relative; width:min(720px,96%); margin:6vh auto; background:#fff; border-radius:14px; box-shadow:0 30px 60px rgba(3,12,24,0.2); overflow:hidden }
.card-modal-close{ position:absolute; right:10px; top:6px; background:transparent; border:none; font-size:1.4rem; cursor:pointer }
.card-modal-inner{ padding:22px; display:flex; gap:18px; align-items:flex-start }
.card-modal-image{ width:92px; height:92px; object-fit:cover; border-radius:10px; flex-shrink:0 }
.card-modal-title{ margin:0 0 6px 0; font-size:1.15rem }
.card-modal-desc{ margin:0 0 12px 0; color:var(--muted); line-height:1.6 }

/* Variants and helpers */
.header-tabs-container { display:flex; gap:10px; align-items:center }
.header-tabs-container button{ margin:0; padding:8px 14px; border:none; background:linear-gradient(90deg,#ffd6e8,#cde8ff); color:#123; cursor:pointer; border-radius:999px; box-shadow:0 6px 14px rgba(29,78,120,0.06) }
.header-tabs-container button.active{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(29,78,120,0.09) }

.card--floaty { animation: floaty 6s ease-in-out infinite }
@keyframes floaty { 0% { transform: translateY(0) } 50% { transform: translateY(-6px) } 100% { transform: translateY(0) } }

/* Responsive tweaks */
@media (max-width:880px){
    .tabs-bar{ overflow:auto }
    .grid-container{ grid-template-columns: repeat(auto-fit,minmax(200px,1fr)) }
    .card-body img{ width:48px; height:48px }
}

@media (max-width:520px){
    /* duplicate removed: keep the first responsive rule near top */
    .card .title{ font-size:0.96rem }
    .card .description{ font-size:0.86rem }
}
/* === Designer-grade card: refined visual language === */
:root{
    --card-radius:14px;
    --card-elevation: 0 18px 50px rgba(16,35,63,0.06);
    --card-elevation-hover: 0 28px 80px rgba(16,35,63,0.08);
    --accent: #2f9af4;
    --muted-2: #6b7280;
}

/* card minimal, airy, readable */
.card{
    border-radius: var(--card-radius);
    background: linear-gradient(180deg, rgba(255,255,255,0.96), #fbfeff);
    border: 1px solid rgba(16,35,63,0.04);
    box-shadow: var(--card-elevation);
    padding: 14px 16px;
    display:flex; gap:14px; align-items:center; transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease, border-color .22s ease;
}

.card .avatar{
    width:68px; height:68px; border-radius:50%; overflow:hidden; flex:0 0 68px; display:inline-block; position:relative;
}
.card .avatar img{ width:100%; height:100%; object-fit:cover; display:block }
.card .avatar::after{ content:''; position:absolute; inset: -4px; border-radius:50%; background: linear-gradient(135deg, rgba(47,154,244,0.12), rgba(96,165,250,0.08)); z-index:-1 }

.card .card-content{ display:flex; flex-direction:column; gap:6px; min-width:0; overflow:hidden; width:100% }
.card .title{ font-size:1.04rem; font-weight:700; color:#072033; margin:0; line-height:1.18; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis }
.card .description{ font-size:0.94rem; color:var(--muted-2); margin:0; line-height:1.4; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.card .meta-row{ display:flex; gap:8px; align-items:center; margin-top:6px }
.card .tag{ font-size:0.78rem; color:var(--accent); background: rgba(47,154,244,0.08); padding:4px 8px; border-radius:999px }

.expand-btn{ margin-left:auto; background:linear-gradient(90deg,#fff,#f6fbff); border:1px solid rgba(16,35,63,0.06); padding:8px 10px; border-radius:10px; font-weight:600; color:#0f2a44 }

.card:focus-within, .card:hover{ transform: translateY(-6px); box-shadow: var(--card-elevation-hover); border-color: rgba(47,154,244,0.12) }
.card--hover{ box-shadow: 0 38px 100px rgba(16,35,63,0.10); border-color: rgba(47,154,244,0.16) }

/* responsive tweaks */
@media (max-width:520px){
    .card{ padding:10px }
    .card .avatar{ width:52px; height:52px; flex:0 0 52px }
    .card .description{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal }
}

/* ensure card layer clipping and precedence */
.grid-container .card{ background-clip:padding-box }

/* Layout override: comfortable 3/2/1 columns grid */
.grid-container{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
    gap:22px !important;
    padding:12px !important;
}
@media (max-width:1100px){
    .grid-container{ grid-template-columns: repeat(2, minmax(220px, 1fr)) !important; }
}
@media (max-width:720px){
    .grid-container{ grid-template-columns: repeat(1, minmax(200px, 1fr)) !important; }
}

/* Final compact typography override */
.grid-container .card .title{
    font-size:0.92rem !important;
    font-weight:600 !important;
}
.grid-container .card .description{
    font-size:0.86rem !important;
    color:#4e5a61 !important;
}
.grid-container .card .avatar{ width:48px !important; height:48px !important; flex:0 0 48px !important }
.card{ padding:10px 12px !important }

/* === Comfort override: final spacing, type and shadow tuning === */
.card{
    padding:12px 14px !important;
    border-radius:12px !important;
    box-shadow: 0 6px 20px rgba(8,18,30,0.045) !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}
.card:hover{ transform: translateY(-4px) !important; box-shadow: 0 16px 40px rgba(8,18,30,0.07) !important }
.card-body{ gap:10px !important }
.card .avatar{ width:56px; height:56px; flex:0 0 56px }
.card .title{ font-size:0.98rem !important; font-weight:600 !important; color:#0b2b36 !important }
.card .description{ font-size:0.9rem !important; color:#546069 !important }
.card .actions{ align-items:center; gap:8px }
.expand-btn{ padding:6px 10px; border-radius:8px }
.bookmark-btn{ width:32px; height:32px; border-radius:8px }

/* soften illustration accents for calmer look */
.card::after{ opacity:0.07 !important }
.card .avatar::before{ opacity:0.7 !important; transform: translateZ(0) scale(0.95) }

/* give title a subtle comfortable baseline offset */
.card .title{ margin-top:0 }

@media (max-width:640px){
    .card{ padding:10px }
    .card .avatar{ width:48px; height:48px; flex:0 0 48px }
}

/* === Typographic refinement for cards (final polish) === */
:root{
    --type-base: 16px;
    --type-scale-1: 1.0625rem; /* ~17px */
    --type-scale-2: 0.9375rem; /* ~15px */
    --type-line: 1.28;
    --muted-3: #5f6b78;
}

/* use grid to keep avatar, content and actions perfectly aligned */
.card-body{
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    width:100%;
}

.card .card-content{ display:flex; flex-direction:column; gap:6px; min-width:0 }

/* Title: two lines, tighter leading, subtle contrast */
.card .title{
    font-family: Inter, Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: var(--type-scale-1);
    line-height: 1.18;
    font-weight: 700;
    color: #052033;
    margin: 0;
    -webkit-font-smoothing:antialiased;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Description: slightly smaller, softer color, max 2 lines on desktop */
.card .description{
    font-size: var(--type-scale-2);
    line-height: var(--type-line);
    color: var(--muted-3);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tag styling: small caps, subtle pill */
.card .tag{ font-size:0.75rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase }

/* Actions area: keep minimal and aligned */
.card .actions{ display:flex; gap:8px; align-items:center }

/* Focus outlines for keyboard users */
.card:focus-within{ outline: 3px solid rgba(47,154,244,0.12); outline-offset:4px }

/* Mobile adjustments: stack actions under content to save horizontal space */
@media (max-width:640px){
    .card-body{ grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
    .card .actions{ grid-column: 1 / -1; justify-content:flex-end }
}

/* Micro interaction: title underline on hover */
.card .title::after{ content:''; display:block; height:2px; width:0; background:linear-gradient(90deg,#2f9af4,#60a5fa); transition:width .28s ease }
.card:hover .title::after{ width:36px }

/* Ensure specificity wins over earlier rules */
.grid-container .card .title, .grid-container .card .description { will-change: transform }

/* === Illustration accents for cards === */
.card{ position:relative; overflow:visible }
.card::after{
    content: '';
    position: absolute;
    right: 10px;
    top: 8px;
    width: 84px;
    height: 52px;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'><defs><linearGradient id='g' x1='0' x2='1'><stop offset='0' stop-color='%23C7F9D8'/><stop offset='1' stop-color='%23D6F0FF'/></linearGradient></defs><circle cx='26' cy='36' r='20' fill='%23B9F6C9'/><circle cx='56' cy='20' r='14' fill='%23D6F0FF'/><path d='M88 60c-12-10-30-12-40-4' stroke='%2386C9FF' stroke-width='6' stroke-linecap='round' fill='none'/></svg>");
    background-repeat:no-repeat; background-size:contain; opacity:0.18; transform: translateZ(0);
}

/* gentle float for illustration */
@keyframes illustrationFloat{ 0%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } 100%{ transform: translateY(0) } }
.card::after{ animation: illustrationFloat 6s ease-in-out infinite }

/* small decorative sticker in avatar corner */
.card .avatar::before{
    content: '';
    position: absolute;
    right: -6px; top: -6px; width:18px; height:18px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.6)), linear-gradient(135deg,#ffd6e8,#cde8ff);
    box-shadow:0 6px 10px rgba(16,35,63,0.06);
}

/* header banner illustration */
/* header position:relative & overflow:visible — see canonical rule at top */
header::before{
    content:''; position:absolute; left:50%; top:-28px; transform:translateX(-50%);
    width:100%; height:140px; pointer-events:none; z-index:0; opacity:0.9;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 280'><defs><linearGradient id='a' x1='0' x2='1'><stop offset='0' stop-color='%23E6FBF0'/><stop offset='1' stop-color='%23F0F6FF'/></linearGradient></defs><g fill='none'><rect width='1400' height='280' fill='url(%23a)' rx='18'/><g transform='translate(60,36)'><path d='M0 180 C120 40 340 40 480 160 C620 280 840 240 1040 140 C1180 80 1400 60 1400 60' stroke='%2394D3FF' stroke-width='18' stroke-linecap='round' fill='none' opacity='0.25'/><circle cx='110' cy='120' r='44' fill='%23C7F9D8' /><circle cx='320' cy='68' r='34' fill='%23D6F0FF' /><path d='M540 150 C580 130 640 120 700 140' stroke='%2386C9FF' stroke-width='8' stroke-linecap='round' opacity='0.35'/></g></g></svg>");
    background-repeat:no-repeat; background-size:cover; background-position:center top;
}

/* ensure header text layer above illustration */
/* duplicate removed: consolidated header h1 rules */

/* === Card — Third-round polish: glass + illustration float + bookmark === */
.card{
    background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(250,255,255,0.78));
    backdrop-filter: blur(6px) saturate(120%);
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 10px 30px rgba(12,24,40,0.06);
    border-radius: 18px;
    padding: 14px 16px;
    transition: transform .24s cubic-bezier(.2,.9,.2,1), box-shadow .24s ease, border-color .24s ease;
    overflow: visible;
}
.card:hover{ transform: translateY(-8px) scale(1.01); box-shadow: 0 28px 80px rgba(12,24,40,0.12); }

.card .avatar{ box-shadow: 0 8px 30px rgba(12,24,40,0.08); border-radius:50%; overflow:hidden; position:relative }
.card .avatar::before{
    content: '';
    position: absolute; left: -28px; top: -24px; width:120px; height:120px; z-index: -1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><defs><linearGradient id='b' x1='0' x2='1'><stop offset='0' stop-color='%23FFD6E8'/><stop offset='1' stop-color='%23CDE8FF'/></linearGradient></defs><path d='M10 60 Q40 10 80 30 T110 60 Q78 92 40 86 T10 60 Z' fill='url(%23b)' opacity='0.95'/></svg>");
    background-repeat:no-repeat; background-size:contain; opacity:0.95; transform: translateZ(0); filter: drop-shadow(0 6px 16px rgba(12,24,40,0.06));
    animation: illustrationFloat 8s ease-in-out infinite;
}

.bookmark-btn{ width:36px; height:36px; border-radius:10px; border:1px solid rgba(12,24,40,0.06); background:linear-gradient(180deg,#ffffff,#f7fbff); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; margin-left:8px }
.bookmark-btn svg{ width:16px; height:16px; fill: #9aaecf }
.bookmark-btn.active{ background: linear-gradient(90deg,#ffe6f0,#dff0ff); border-color: rgba(47,154,244,0.12) }
.bookmark-btn.active svg{ fill: #2f9af4 }

.card .title{ font-size:1.06rem; font-weight:700; color:#061827; margin:0; line-height:1.18; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.card .description{ font-size:0.92rem; color:var(--muted); margin:6px 0 0; line-height:1.36; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }

.card .actions{ margin-left:auto; display:flex; gap:8px; align-items:center }

/* ensure illustration pseudo elements don't clip */
.card::after{ opacity:0.14 }
/* Polished, left-aligned styles with indicator and animations */
:root{
    --brand-1: #3b82f6;
    --brand-2: #60a5fa;
/* ── Search results panel ────────────────────── */
.search-results .section-heading-title{ color:#3b82f6 }
.search-results mark{ background:rgba(59,130,246,0.12); color:inherit; border-radius:3px; padding:0 2px; font-style:normal }
p.muted{ text-align:center; color:#6b7280; padding:32px; font-size:1rem }

/* ── Tabs content panel ──────────────────────── */
.tabs-content{ padding-top:4px }