/* ZIBADISPLAY — visual + content consolidation v1
   Uses the same Vitrail design logic as the approved Yottabyte reference.
   Site identity remains purple; geometry, spacing and hierarchy are normalized. */

:root{
  --accent:#8d4be8;
  --accent2:#8d4be8;
  --ent:#8d4be8;
  --ent2:#a860f0;
  --ent-s:rgba(141,75,232,.075);
  --ref-panel:var(--surface);
  --ref-line:var(--border-card);
  --ref-muted:var(--soft);
}

/* Keep the page visually quiet and reference-led. */
body{background:var(--paper);color:var(--ink)}
.page-wash{
  background:
    radial-gradient(circle at 16% 8%,rgba(141,75,232,.075),transparent 29rem),
    radial-gradient(circle at 90% 30%,rgba(40,199,217,.05),transparent 32rem),
    radial-gradient(circle at 72% 88%,rgba(224,169,53,.045),transparent 26rem)!important;
}
[data-theme="dark"] .page-wash{
  background:
    radial-gradient(circle at 16% 8%,rgba(141,75,232,.045),transparent 29rem),
    radial-gradient(circle at 90% 30%,rgba(40,199,217,.03),transparent 32rem)!important;
}
.rainbow-line{height:3px!important;margin:0!important;border:0!important;opacity:.75}

/* Home hero. */
.hero-split{padding:46px 0 40px;border-bottom:1px solid var(--thin)}
.hero-grid{min-height:430px;gap:28px}
.hero-copy{padding:44px 38px 44px 0;display:flex;flex-direction:column;justify-content:center}
[dir="rtl"] .hero-copy{padding:44px 0 44px 38px}
.hero-copy h1{max-width:720px;font-size:clamp(2.35rem,5.2vw,4.8rem);line-height:1.02;letter-spacing:-.045em}
[dir="rtl"] .hero-copy h1{letter-spacing:-.025em}
.hero-copy .lead{max-width:690px;margin-top:18px;font-size:.96rem;line-height:2}
.hero-visual .frame{min-height:430px;background:var(--paper2);border-color:var(--line)}
.hero-visual .frame::before{background:var(--paper2)}
.hero-keyvisual{width:min(82%,430px)!important;max-width:430px!important}
.hero-stats{margin-top:34px}
.hero-stat b{font-size:1.22rem}
.hero-stat span{font-size:.72rem;letter-spacing:.04em;text-transform:none}

/* Home directory. */
.zb-directory{padding-top:44px}
.zb-directory .section-head{align-items:end;margin-bottom:22px}
.zb-directory .section-head h2{font-size:clamp(1.7rem,3vw,2.65rem);margin:0}
.zb-directory .section-head p{line-height:1.85}
.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0}
.category-card{
  position:relative;display:grid;grid-template-columns:48px 1fr;align-items:start;gap:15px;
  min-height:170px;padding:26px 24px;border:2px solid var(--border-card);background:var(--surface);
  color:inherit;text-decoration:none;overflow:hidden;transition:transform var(--dur-base),border-color var(--dur-base),background var(--dur-base)
}
.category-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.82}
.category-card::after{content:"";position:absolute;width:120px;height:120px;inset:auto -45px -54px auto;border:1px solid var(--faint);transform:rotate(18deg);pointer-events:none}
.category-card:hover{transform:translateY(-3px);border-color:var(--line);background:var(--paper2)}
.category-card-icon{width:46px;height:46px;margin:0;display:grid;place-items:center;border:1px solid var(--thin);background:var(--paper2);font-size:1.45rem}
.category-card h3{margin:0 0 6px;font-size:1.08rem}
.category-card p{margin:0;color:var(--soft);font-size:.82rem;line-height:1.75}
.category-card-count{grid-column:2;display:block;margin-top:8px;color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.02em}

/* Reference -> application CTA. */
.entertain-cta{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:28px;
  margin:36px 0 0;padding:28px 30px;border:2px solid var(--line);background:var(--surface);overflow:hidden
}
.entertain-cta::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;background:linear-gradient(var(--accent),var(--violet),var(--gold))}
.entertain-cta-copy{min-width:0}
.entertain-cta-copy .eyebrow{color:var(--accent)!important;margin-bottom:7px}
.entertain-cta-copy h3{margin:0 0 7px;font-size:1.2rem}
.entertain-cta-copy p{max-width:760px;margin:0;color:var(--soft);font-size:.84rem;line-height:1.9}
.entertain-cta-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:2px solid var(--line);background:var(--ink);color:var(--paper);font-size:.79rem;font-weight:700;text-decoration:none;white-space:nowrap;transition:var(--dur-fast)}
.entertain-cta-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
[data-theme="dark"] .entertain-cta-btn{background:var(--ink);color:var(--paper)}

/* Taxonomy pages. */
.section:has(.tax-hero){padding:48px 0 34px;border-bottom:1px solid var(--faint)}
.tax-hero{padding:0 0 18px;max-width:820px}
.tax-hero .eyebrow{color:var(--accent)!important;margin-bottom:10px}
.tax-hero h1{font-size:clamp(2rem,4vw,3.6rem);line-height:1.06;letter-spacing:-.035em}
[dir="rtl"] .tax-hero h1{letter-spacing:-.02em}
.tax-hero .lead{max-width:720px;font-size:.92rem;line-height:1.9}
.tax-hero .hero-stats{margin-top:24px}
.tax-filters{display:flex;gap:7px;flex-wrap:wrap;padding:18px 0 22px;border-top:1px solid var(--faint)}
.tax-chip{min-height:36px;padding:7px 11px;border:1px solid var(--thin);border-radius:0;background:var(--paper2);color:var(--soft);font-size:.74rem;font-weight:600;cursor:pointer;font-family:inherit;transition:var(--dur-fast)}
.tax-chip:hover{border-color:var(--line);color:var(--ink)}
.tax-chip.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tax-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-bottom:10px}
.tax-card{position:relative;min-height:148px;padding:22px 18px;text-align:start;border:2px solid var(--border-card);border-radius:0;background:var(--surface);overflow:hidden;transition:transform var(--dur-base),border-color var(--dur-base)}
.tax-card::after{content:"";position:absolute;inset-inline-start:0;top:0;width:3px;height:100%;background:var(--accent);opacity:.65}
.tax-card:hover{transform:translateY(-2px);border-color:var(--line)}
.tax-card-icon{width:38px;height:38px;display:grid;place-items:center;margin:0 0 12px;border:1px solid var(--thin);background:var(--paper2);font-size:1.2rem}
.tax-card h3{margin:0 0 8px;font-size:.94rem}
.tax-card-count{color:var(--soft);font-size:.76rem}

/* Static examples must read as reference samples, not personal user data. */
.zb-sample-section{padding-top:30px!important;padding-bottom:30px!important}
.zb-sample-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}
.zb-sample-head .lead{margin:6px 0 0;font-size:.84rem}
.zb-sample-note{font-size:.72rem;color:var(--muted);border:1px solid var(--thin);padding:6px 9px;background:var(--paper2)}
.zb-sample-section .card{background:var(--surface);border-color:var(--border-card)}
.zb-sample-row{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--faint);font-size:.84rem}
.zb-sample-row:last-child{border-bottom:0}
.zb-sample-row .num{font-family:var(--font-en);font-size:.68rem;color:var(--muted)}
.zb-sample-row .meta{font-size:.72rem;color:var(--muted)}

/* Data/relations extension — converted from rounded dark-app styling to Vitrail geometry. */
.ref-bridge{width:min(var(--max),calc(100% - 40px));max-width:none;margin:14px auto 0;padding:0}
.ref-bridge-inner{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:8px;border:1px solid var(--thin);border-radius:0;background:var(--paper2)}
.ref-bridge-label{padding:7px 10px;color:var(--muted);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.ref-bridge a{padding:7px 10px;border:1px solid transparent;border-radius:0;color:var(--soft);text-decoration:none;font-size:.76rem}
.ref-bridge a:hover,.ref-bridge a.active{background:var(--surface);border-color:var(--thin);color:var(--ink)}
.ref-bridge-arrow{color:var(--muted);opacity:.75}

.ref-architecture,.ref-context,.ref-explorer,.ref-network,.ref-connect{width:min(var(--max),calc(100% - 40px));max-width:none;margin:34px auto 0;padding:0}
.ref-context{margin-bottom:58px}.ref-explorer{margin-bottom:58px}.ref-network{margin-top:28px}.ref-connect{margin-top:36px}
.ref-architecture-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ref-card,.ref-connect-group,.ref-result{position:relative;border:2px solid var(--border-card);border-radius:0;background:var(--surface);padding:22px;overflow:hidden}
.ref-card::before,.ref-connect-group::before,.ref-result::before{content:"";position:absolute;inset-inline-start:0;top:0;width:3px;height:100%;background:var(--accent);opacity:.55}
.ref-card h2,.ref-card h3,.ref-connect-group h3,.ref-result h3{margin:0 0 9px}
.ref-card p,.ref-context-head p,.ref-explorer-head p,.ref-network-head p,.ref-connect-head p,.ref-result p{margin:0;color:var(--soft);line-height:1.85}
.ref-eyebrow{margin-bottom:8px;color:var(--accent);font-family:var(--font-en);font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.ref-flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:16px}
.ref-flow span,.ref-tag,.ref-result-meta span{border:1px solid var(--thin);border-radius:0;background:var(--paper2);padding:6px 8px;font-size:.71rem}
.ref-flow i{font-style:normal;color:var(--accent)}
.ref-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}
.ref-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:0;background:var(--paper2);color:var(--ink);text-decoration:none;font-size:.75rem;font-weight:700}
.ref-btn:hover{background:var(--ink);color:var(--paper)}
.ref-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.ref-context-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px}
.ref-context-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ref-list{margin:0;padding:0;list-style:none;display:grid;gap:0}
.ref-list li{padding:9px 0;border-bottom:1px solid var(--faint);line-height:1.65;font-size:.82rem}
.ref-list li:last-child{border-bottom:0}
.ref-tags{display:flex;flex-wrap:wrap;gap:7px}
.ref-tag{display:inline-flex;color:inherit;text-decoration:none}

.ref-explorer-head{display:grid;grid-template-columns:1fr minmax(280px,.52fr);gap:20px;align-items:end;padding-top:10px}
.ref-explorer-head h1{margin:0 0 10px;font-size:clamp(2.15rem,4.5vw,4rem);line-height:1.04}
.ref-search{width:100%;min-height:48px;padding:11px 14px;border:2px solid var(--border-card);border-radius:0;background:var(--surface);color:var(--ink);font:inherit;outline:none}
.ref-search:focus{border-color:var(--accent);box-shadow:none}
.ref-filterbar{display:flex;gap:7px;flex-wrap:wrap;margin:22px 0}
.ref-filter{min-height:36px;padding:7px 11px;border:1px solid var(--thin);border-radius:0;background:var(--paper2);color:var(--soft);cursor:pointer;font:inherit;font-size:.75rem}
.ref-filter:hover{color:var(--ink);border-color:var(--line)}
.ref-filter.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ref-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ref-result p{font-size:.78rem}.ref-result-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.ref-result a{display:inline-block;margin-top:13px;color:var(--accent);font-size:.76rem;font-weight:700;text-decoration:none}.ref-empty{grid-column:1/-1;padding:30px;border:1px dashed var(--thin);color:var(--soft);text-align:center}

.ref-network-head,.ref-connect-head{max-width:760px;margin-bottom:16px}.ref-network-head h2,.ref-connect-head h2{margin:0 0 8px}
.ref-network-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.ref-network-card{position:relative;display:block;min-height:116px;padding:17px;border:1px solid var(--thin);border-radius:0;background:var(--surface);color:inherit;text-decoration:none;overflow:hidden;transition:transform var(--dur-fast),border-color var(--dur-fast)}
.ref-network-card:hover{transform:translateY(-2px);border-color:var(--dot,var(--accent))}
.ref-network-dot{display:block;width:18px;height:3px;border-radius:0;background:var(--dot,var(--accent));box-shadow:none;margin-bottom:13px}
.ref-network-card strong{display:block;margin-bottom:5px;font-size:.79rem}.ref-network-card span{display:block;color:var(--soft);font-size:.7rem;line-height:1.6}
.ref-connect-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

/* Footer should not visually merge into generated extension sections. */
.site-links-footer{margin-top:48px}

@media(max-width:1000px){
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tax-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ref-context-grid,.ref-results{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ref-network-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr!important;min-height:auto}
  .hero-copy,[dir="rtl"] .hero-copy{padding:30px 0 10px}
  .hero-visual .frame{min-height:330px}
  .ref-architecture-grid,.ref-explorer-head{grid-template-columns:1fr}
  .ref-connect-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .hero-split{padding-top:28px}
  .hero-copy h1{font-size:clamp(2rem,11vw,3.25rem)}
  .hero-visual .frame{min-height:270px}
  .entertain-cta{grid-template-columns:1fr;padding:22px 20px;gap:18px}
  .entertain-cta-btn{width:100%}
  .category-grid,.tax-grid,.ref-context-grid,.ref-results{grid-template-columns:1fr}
  .category-card{min-height:145px;padding:21px 19px}
  .tax-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:14px;scrollbar-width:thin}
  .tax-chip{flex:0 0 auto;white-space:nowrap}
  .ref-bridge,.ref-architecture,.ref-context,.ref-explorer,.ref-network,.ref-connect{width:min(100% - 24px,var(--max))}
  .ref-bridge-inner{align-items:stretch;gap:3px}
  .ref-bridge-label{width:100%}.ref-bridge-arrow{display:none}.ref-bridge a{flex:1 1 140px}
  .ref-network-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zb-sample-head{display:block}.zb-sample-note{display:inline-block;margin-top:10px}
  .zb-sample-row{grid-template-columns:30px 1fr}.zb-sample-row .meta{grid-column:2}
}