/* ===========================================================================
   CustomOps — Base / reset / primitives
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html, body { height: 100%; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--line-strong) transparent;
}

body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }

/* Default size for inline icons. Deliberately a single class so that every
   component-scoped rule (.btn svg, .badge svg, .nav-item svg …) overrides it. */
.ico { width: 16px; height: 16px; flex-shrink: 0; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--brand-wash-2); color: var(--text); }

h1,h2,h3,h4,h5 { font-weight: var(--fw-semi); line-height: var(--lh-tight); letter-spacing: -0.011em; }
h1 { font-size: var(--fs-2xl); letter-spacing: -0.022em; }
h2 { font-size: var(--fs-xl); letter-spacing: -0.018em; }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }

/* ---- Scrollbars --------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-4); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

.scroll-y { overflow-y: auto; overscroll-behavior: contain; }
.scroll-x { overflow-x: auto; overscroll-behavior-x: contain; }

/* ---- Layout utilities --------------------------------------------------- */
.row   { display: flex; align-items: center; }
.row-t { display: flex; align-items: flex-start; }
.col   { display: flex; flex-direction: column; }
.wrap  { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center  { justify-content: center; align-items: center; }
.end     { justify-content: flex-end; }
.grow  { flex: 1 1 auto; min-width: 0; }
.shrink0 { flex-shrink: 0; }
.g1 { gap: var(--s-1);} .g2 { gap: var(--s-2);} .g3 { gap: var(--s-3);}
.g4 { gap: var(--s-4);} .g5 { gap: var(--s-5);} .g6 { gap: var(--s-6);}
.g7 { gap: var(--s-7);} .g8 { gap: var(--s-8);} .g9 { gap: var(--s-9);}
.g10{ gap: var(--s-10);}

.grid { display: grid; gap: var(--s-7); }
.gc2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.gc3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.gc4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.gc5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.gc6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
.auto-fit { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.auto-fit-lg { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.mt1{margin-top:var(--s-1)}.mt2{margin-top:var(--s-2)}.mt3{margin-top:var(--s-3)}
.mt4{margin-top:var(--s-4)}.mt5{margin-top:var(--s-5)}.mt6{margin-top:var(--s-6)}
.mt7{margin-top:var(--s-7)}.mt8{margin-top:var(--s-8)}.mt9{margin-top:var(--s-9)}
.mt10{margin-top:var(--s-10)}
.mb2{margin-bottom:var(--s-2)}.mb3{margin-bottom:var(--s-3)}.mb4{margin-bottom:var(--s-4)}
.mb6{margin-bottom:var(--s-6)}.mb7{margin-bottom:var(--s-7)}.mb9{margin-bottom:var(--s-9)}
.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}

/* ---- Text utilities ----------------------------------------------------- */
.t-2xs{font-size:var(--fs-2xs)} .t-xs{font-size:var(--fs-xs)} .t-sm{font-size:var(--fs-sm)}
.t-md{font-size:var(--fs-md)} .t-lg{font-size:var(--fs-lg)} .t-xl{font-size:var(--fs-xl)}
.t-2xl{font-size:var(--fs-2xl)} .t-3xl{font-size:var(--fs-3xl)} .t-4xl{font-size:var(--fs-4xl)}
.fw4{font-weight:400}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}
.dim  { color: var(--text-2); }
.dim2 { color: var(--text-3); }
.dim3 { color: var(--text-4); }
.brand-c { color: var(--brand); }
.mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: -0.02em; }
.upper { text-transform: uppercase; letter-spacing: .085em; font-weight: var(--fw-semi); }
.tabular { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.nowrap { white-space: nowrap; }
.tr { text-align: right; } .tc { text-align: center; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.eyebrow {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .13em;
  font-weight: var(--fw-bold); color: var(--text-3);
}

/* ---- Divider / rules ---------------------------------------------------- */
.hr { height:1px; background: var(--line); border:0; }
.hr-soft { height:1px; background: var(--line-soft); border:0; }
.vr { width:1px; align-self:stretch; background: var(--line); }

/* ---- Motion primitives -------------------------------------------------- */
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes riseIn { from { opacity:0; transform: translateY(8px) } to { opacity:1; transform:none } }
@keyframes popIn  { from { opacity:0; transform: scale(.96) } to { opacity:1; transform:none } }
@keyframes slideL { from { opacity:0; transform: translateX(18px) } to { opacity:1; transform:none } }
@keyframes shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes pulseDot {
  0%,100% { opacity:1; transform: scale(1) }
  50% { opacity:.45; transform: scale(.82) }
}
@keyframes ping {
  0% { transform: scale(1); opacity:.65 }
  80%,100% { transform: scale(2.4); opacity:0 }
}
@keyframes barGrow { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes dash { to { stroke-dashoffset: 0 } }

.anim-fade { animation: fadeIn var(--dur) var(--ease) both; }
.anim-rise { animation: riseIn var(--dur-slow) var(--ease-out) both; }
.anim-pop  { animation: popIn var(--dur) var(--ease-out) both; }
.stagger > * { animation: riseIn var(--dur-slow) var(--ease-out) both; }
.stagger > *:nth-child(1){animation-delay:0ms}   .stagger > *:nth-child(2){animation-delay:35ms}
.stagger > *:nth-child(3){animation-delay:70ms}  .stagger > *:nth-child(4){animation-delay:105ms}
.stagger > *:nth-child(5){animation-delay:140ms} .stagger > *:nth-child(6){animation-delay:175ms}
.stagger > *:nth-child(7){animation-delay:210ms} .stagger > *:nth-child(8){animation-delay:245ms}

.skeleton {
  background: var(--skeleton); background-size: 200% 100%;
  animation: shimmer 1.35s linear infinite; border-radius: var(--r-sm);
  color: transparent !important;
}

/* ---- Misc --------------------------------------------------------------- */
.pointer { cursor: pointer; }
.no-select { user-select: none; }
[hidden] { display: none !important; }
.dragging { opacity: .45; }