/* =========================================================
   Alex Otlacan — style.css
   Overlay sidebar + scroll bar + experience list
   ========================================================= */

/* Theme */
:root{
  --bg:#0f1226;
  --fg:#e7e9ff;
  --muted:#aeb3d1;

  /* Neutral accent + border (no blue) */
  --accent:#cfd2e8;
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.20);

  --text-outline:#00274C;   /* outline color */
  --text-outline-w:.8px;     /* outline width */

  --scrollbarBG:#2a2f52;     /* scrollbar track */
  --thumbBG:#cfd2e8;         /* scrollbar thumb now neutral */

  /* University of Michigan colors */
  --um-maize:#FFCB05;
  --um-blue:#00274C;

  /* Header offset for overlay sidebar. JS updates if needed. */
  --header-h:80px;

  /* Sidebar sizing and density */
  --tl-scale:1.35;
  --tl-height:56vh;
  --tl-gap:6px;
  /* Bottom safe area (no blur) */
  --footer-safe:44px;
}

/* Word coloring for “University of Michigan” */
.um-maize{ color:var(--um-maize); }
.um-blue{ color:var(--um-blue); }

/* Thin outline on UM words */
.um-maize,
.um-blue{
  -webkit-text-stroke: var(--text-outline-w) var(--text-outline);
  paint-order: stroke fill;
  /* Firefox fallback */
  text-shadow:
    0  0   0 var(--text-outline),
    0  1px 0 var(--text-outline),
    0 -1px 0 var(--text-outline),
    1px 0  0 var(--text-outline),
   -1px 0  0 var(--text-outline);
}

/* Base */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--fg); background:var(--bg);
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Smooth anchors and fixed-header offset */
html{ scroll-behavior:smooth; scroll-padding-top: var(--header-h); }

/* Professional textured black background, toned down */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  /* Add dark overlay on top of the image to reduce its presence */
  background-image:
    linear-gradient(rgba(0,0,0,.68), rgba(0,0,0,.68)),
    url("/assets/bg-texture.jpg?v=20250827_1");
  background-size:cover;
  background-position:center;
  /* Lower contrast and brightness so it sits back */
  filter:grayscale(100%) brightness(.35) contrast(1.05);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  /* Softer vignette */
  background: radial-gradient(120% 120% at 50% 0%,
              rgba(255,255,255,.02) 0%,
              rgba(0,0,0,.60) 55%,
              rgba(0,0,0,.78) 100%);
  pointer-events:none;
}

/* Cursor spotlight: brightens area around the pointer */
#spot{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(220px at var(--mx) var(--my),
              rgba(255,255,255,.08), rgba(255,255,255,0) 40%);
  mix-blend-mode: screen; /* subtle highlight under the cursor */
}
/* Ensure content is above the spotlight */
main, .site-header, .side-timeline, .side-toggle{ position:relative; z-index:1 }

/* Layout wrappers */
.wrap{ max-width:1100px; margin:0 auto; padding:72px 24px }
.section-title{ font-size:clamp(1.4rem,3.5vw,2rem); margin:0 0 16px 0 }
.muted{ color:var(--muted) }

/* Background glow (disabled; using textured background instead) */
.bg{ display:none !important; }
.bg img{ display:none !important; }

/* Smooth transform for tilt */
.tilt{
  will-change: transform;
  transition: transform 300ms cubic-bezier(.03,.98,.52,.99);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.tilt{ transition: transform 140ms ease; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);
  background:rgba(15,18,38,.45);
}
.brand{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:10px;
  font-weight:900; text-decoration:none; color:#06122b;
  /* Neutral gradient rather than blue */
  background:linear-gradient(135deg, var(--accent), #eaecf6);
  border:1px solid var(--border);
}
.menu-btn{ display:none }
.nav{ display:flex; gap:18px; flex-wrap:wrap }
.nav a{ color:var(--fg); text-decoration:none; opacity:.9 }
.nav a:hover{ opacity:1 }

/* Hero */
.hero{ min-height:60vh; text-align:center }
.title{ font-size:clamp(2.2rem,6vw,3.8rem); margin:0 0 6px 0 }
.subtitle{ margin:0 0 18px 0; color:var(--muted) }
.actions{ display:flex; gap:12px; justify-content:center; margin-top:6px }
.hero .badges{ margin-bottom:24px }
.hero .actions{ margin-top:24px }

.btn{
  display:inline-block; padding:12px 18px; border-radius:14px;
  background:var(--um-maize);          /* maize */
  color:var(--um-blue);                /* UM blue text */
  font-weight:800; text-decoration:none;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 4px 18px rgba(255,203,5,.18);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow:0 8px 22px rgba(255,203,5,.26); }
.btn:active{ transform: translateY(0); box-shadow:0 4px 18px rgba(255,203,5,.18); }

/* keep ghost button neutral */
.btn.ghost{ background:transparent; color:var(--fg); border:1px solid var(--border) }

/* Optional white text variant for maize buttons, with crisp outer shadow */
.btn.on-maize{
  color:#ffffff;
  -webkit-text-stroke: 0 transparent; /* remove stroke to avoid gray fill artifacts */
  text-shadow:
    0 2px 2px rgba(0,0,0,.35), /* soft outer shadow below */
    0 0 6px rgba(0,0,0,.25);   /* gentle glow for contrast */
}

/* Grid and cards */
.grid{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
/* CAD: stack cards vertically (featured above practices) */
#cad .grid{ grid-template-columns:1fr }
.card{
  padding:16px; border-radius:16px; background:var(--card); border:1px solid var(--border);
  transform:translateY(18px); opacity:0; will-change:transform,opacity,box-shadow,transform-style; perspective:1000px;
  overflow:hidden;
}
.card h3{ margin:8px 0 6px 0 }
.card p{ margin:6px 0 10px 0; color:var(--muted) }

/* Tags and badges */
.tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px }
.tags span{
  font-size:.85rem; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid var(--border);
}
.badges{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-start;
}
.badges span{
  font-size:.9rem; padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid var(--border);
}
#overview .badges{ justify-content:center; margin-left:auto; margin-right:auto }
#skills .badges{ justify-content:flex-start }

/* Links */
.links a{ color:var(--accent) }

/* Media handling */
.card img{ display:block; width:100%; max-width:100%; height:auto; border-radius:12px }
.video{ aspect-ratio:16/9; overflow:hidden; border-radius:12px; border:1px solid var(--border); }
.video iframe{ display:block; width:100%; height:100%; border:0 }

/* Gallery */
.gallery{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin:8px 0;
}
.gallery.contain{
  --tile-min:320px;
  grid-template-columns:repeat(auto-fit,minmax(var(--tile-min),1fr));
}
.gallery.contain img{
  width:100%; height:100%;
  aspect-ratio:4/3;
  object-fit:contain;
  padding:8px; box-sizing:border-box;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:12px;
}
@media (min-width:1280px){
  .gallery.contain{ --tile-min:200px }
}

/* Carousel */
.carousel{
  position:relative;
  margin-bottom:16px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  transition:height 240ms ease;
  min-height:200px;
}
.carousel-track{
  position:relative;
}
.carousel-track img{
  display:none;
  width:100%;
  height:auto;
  object-fit:contain;
  background:rgba(255,255,255,.02);
}
.carousel-track img.is-active{ display:block; }
.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:999px;
  border:0;
  background:rgba(20,22,40,.6);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background 150ms ease;
}
.carousel-btn::before{
  content:'';
  display:block;
  width:12px;
  height:12px;
  mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  background:currentColor;
}
.carousel-btn.prev{ left:12px; }
.carousel-btn.prev::before{ mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="15 18 9 12 15 6"/%3E%3C/svg%3E'); }
.carousel-btn.next{ right:12px; }
.carousel-btn.next::before{ mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="9 18 15 12 9 6"/%3E%3C/svg%3E'); }
.carousel-btn:hover{ background:rgba(20,22,40,.9); }
.carousel-dots{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
}
.carousel-dots button{
  width:10px;
  height:10px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.4);
  cursor:pointer;
  padding:0;
}
.carousel-dots button[aria-selected="true"]{
  background:var(--accent);
}

.project-meta ul{
  margin:8px 0 16px;
  padding-left:18px;
}
.project-meta li+li{
  margin-top:4px;
}
.project-meta strong{
  color:var(--accent);
}

/* Placeholder */
.ph{
  display:grid; place-items:center; color:#8f95b8;
  background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:12px;
  aspect-ratio:4/3; font-size:.9rem;
}

/* ---------------------------------------------------------
   Legacy timeline card styles (kept in case you reuse later)
   --------------------------------------------------------- */
.timeline{ position:relative; margin:18px 0 }
.timeline::before{ content:""; position:absolute; left:14px; top:0; bottom:0; width:2px; background:linear-gradient(#2a2f52, transparent) }
.t-item{ position:relative; padding-left:48px; margin:20px 0 }
.t-dot{ position:absolute; left:8px; top:10px; width:14px; height:14px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 4px rgba(255,255,255,.18) }
.t-card{ padding:14px; border-radius:14px; background:var(--card); border:1px solid var(--border) }
.t-card h3{ margin:0 0 4px 0 }
.t-card small{ color:var(--muted) }

/* Footer */
.site-footer{ padding:40px 24px; color:var(--muted); border-top:1px solid var(--border) }

/* Reveal on enter */
.reveal{ opacity:0; transform:translateY(18px) }
.reveal.visible{ opacity:1; transform:none; transition:transform 600ms cubic-bezier(.2,.6,.2,1), opacity 600ms }

/* Mobile nav */
@media (max-width:760px){
  .menu-btn{ display:inline-block; background:transparent; color:var(--fg); border:1px solid var(--border); padding:8px 10px; border-radius:10px }
  .nav{ display:none }
  .nav.open{
    display:flex; flex-direction:column; position:absolute; right:16px; top:56px;
    background:rgba(15,18,38,.92); padding:12px; border:1px solid var(--border); border-radius:12px
  }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important; animation-iteration-count:1 !important;
    transition-duration:0.001ms !important; scroll-behavior:auto !important;
  }
}

/* =========================================================
   Overlay LEFT sidebar (no page padding, no layout shift)
   ========================================================= */
.side-timeline{
  position:fixed;
  left:0;
  top:var(--header-h);
  bottom:24px;
  width:clamp(190px,16vw,260px);
  padding-left:14px;
  z-index:50;
  pointer-events:none;
  display:flex; align-items:center;
  transition:transform .25s ease, opacity .2s ease;
  --collapse-shift:-260px;
}
.side-timeline .rail{
  position:absolute; left:24px; top:16px; bottom:16px; width:2px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border-radius:2px;
}
.tl-list{
  --row-count:6;
  position:relative; list-style:none; margin:0; padding:0; width:100%;
  height:var(--tl-height);
  display:grid; grid-template-rows:repeat(var(--row-count),1fr);
  align-content:start; justify-items:start;
}
.tl-item{
  position:relative; pointer-events:auto;
  display:grid; grid-template-columns:18px 1fr; align-items:center;
  gap:var(--tl-gap);
  padding:2px 0;
  isolation:isolate;
  z-index:0;
}
.tl-dot{
  width:calc(16px * var(--tl-scale));
  height:calc(16px * var(--tl-scale));
  border-radius:999px;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 0 3px rgba(255,255,255,.10);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.tl-dot::before{
  content:attr(data-step);
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:calc(10px * var(--tl-scale));
  font-weight:700; color:#06122b;
}
.tl-link{
  color:var(--muted);
  text-decoration:none;
  font-size:calc(.95rem * var(--tl-scale));
  white-space:nowrap;
  max-width:calc(150px * var(--tl-scale));
  overflow:hidden; text-overflow:ellipsis;
  opacity:.85;
  transition:opacity .18s ease, color .18s ease;
  position:relative;
  padding:4px 8px;
  border-radius:8px;
  background:rgba(15,18,38,.70);
  backdrop-filter:blur(4px);
  border:1px solid var(--border);
  z-index:1;
}
.tl-item:hover .tl-link,
.side-timeline:hover .tl-link{ opacity:1; }
.tl-item.active .tl-link{ color:var(--fg); opacity:1; font-weight:600; }
.tl-item.active .tl-dot{
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(255,255,255,.22); /* neutral glow */
  transform:scale(1.1)
}
.tl-item:hover .tl-dot, .tl-item:focus-within .tl-dot{ background:var(--accent) }

/* Prevent number/dot bleed-through between stacked items */
.tl-item:hover{ z-index:2; }
.tl-item.active{ z-index:3; }
.side-timeline.collapsed{ transform:translateX(var(--collapse-shift)); opacity:0; pointer-events:none }

/* Hamburger toggle */
.side-toggle{
  position:fixed; left:8px; top:calc(var(--header-h) + 8px); z-index:60;
  display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0;
  background:rgba(15,18,38,.90); border:1px solid var(--border); border-radius:10px; cursor:pointer;
}
.side-toggle .bar{ width:22px; height:2px; border-radius:2px; background:var(--fg); opacity:.9 }
.side-timeline.collapsed ~ .side-toggle .bar:nth-child(1){ transform: translateY(6px) rotate(45deg) }
.side-timeline.collapsed ~ .side-toggle .bar:nth-child(2){ opacity:0 }
.side-timeline.collapsed ~ .side-toggle .bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg) }

/* Hide sidebar and toggle on small screens */
@media (max-width:1099px){
  .side-timeline, .side-toggle{ display:none }
}

/* Global link colors */
:root{
  --link:#d7dbeb;
  --link-hover:#ebedf6;
  --link-active:#ffffff;
}
a{
  color:var(--link);
  text-decoration:underline;
  text-decoration-color:rgba(215,219,235,.45);
  text-underline-offset:2px;
}
a:visited{ color:var(--link); }
a:hover,
a:focus-visible{
  color:var(--link-hover);
  text-decoration-color:currentColor;
}
a:active{ color:var(--link-active); }

/* Scrollbars */
html{
  scrollbar-width:thin;
  scrollbar-color:var(--thumbBG) var(--scrollbarBG);
}
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:var(--scrollbarBG) }
::-webkit-scrollbar-thumb{
  background-color:var(--thumbBG);
  border-radius:10px;
  border:2px solid var(--scrollbarBG);
}

/* Top scroll progress bar */
#scroll-progress{
  position:fixed;
  left:0;
  top:calc(env(safe-area-inset-top, 0px));
  height:4px;
  width:0%;
  z-index:1000;
  background:linear-gradient(90deg, #cfd2e8, #eaecf6);
  box-shadow:0 0 12px rgba(0,0,0,.25);
  transform-origin:left center;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  #scroll-progress{ transition:none }
}

/* Bottom page blur overlay */
#bottom-blur{
  position:fixed;
  left:0; right:0; bottom:0;
  height:11vh; min-height:84px;
  pointer-events:none;
  z-index:9;
  /* Pure backdrop blur; taper is controlled by mask only */
  background: transparent;
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  /* Taper using mask: fully visible near bottom, fades to transparent toward the top */
  -webkit-mask-image: linear-gradient(to top, black 52%, transparent 100%);
          mask-image: linear-gradient(to top, rgba(255,255,255,1) 52%, rgba(255,255,255,0) 100%);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  opacity:1; transition: opacity .25s ease;
}

/* =========================================================
   Experience timeline — alternating cards (Apple Glass vibe)
   ========================================================= */
.exp-list{
  position:relative;
  list-style:none;
  margin:32px auto 24px;
  padding:0 0 24px;
  max-width:1100px;
}
.exp-list::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border-radius:2px;
}

/* Each item sits on one side of the center line */
.exp-item{
  position:relative;
  width:50%;
  padding:12px 40px;
}

/* Odd = left, Even = right */
.exp-item:nth-child(odd){ left:0; text-align:left; }
.exp-item:nth-child(even){ margin-left:50%; text-align:left; }

/* Connector dot on the center rail */
/* Year bubble replaces the rail dot */
.exp-item::before{
  content: attr(data-year);
  position:absolute;
  top:32px;                 /* aligns with date label center */
  left:100%;
  transform:translate(-50%, -50%);
  padding:4px 8px;
  font-size:.8rem;
  line-height:1;
  color:var(--fg);
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  border-radius:999px;
  backdrop-filter:blur(6px) saturate(120%);
  -webkit-backdrop-filter:blur(6px) saturate(120%);
  z-index:1;
  white-space:nowrap;
}
.exp-item:nth-child(even)::before{
  left:0%;
  transform:translate(-50%, -50%);
}

/* Glassy card */
.exp-body{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px 16px 12px 16px;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow:
    0 10px 30px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.10); /* soft inner highlight */
}

/* Move date to the side opposite the card for readability */
/* Move date to the side opposite the card for readability */
.exp-meta{
  position:absolute;
  top:31px;                 /* align vertically with year bubble */
  transform:translateY(-50%); /* keep vertical centering */
  z-index:2;
  background:transparent;
  white-space:nowrap;
  font-size:.95rem;
  color:var(--muted);
  opacity:.95;
}
/* Odd item has card on the left, so put meta on the RIGHT of the rail */
.exp-item:nth-child(odd) .exp-meta{
  left:calc(100% + 28px);
  right:auto;
  text-align:left;
}
/* Even item has card on the right, so put meta on the LEFT of the rail */
.exp-item:nth-child(even) .exp-meta{
  right:calc(100% + 28px);
  left:auto;
  text-align:right;
}

 
.exp-body h3.exp-role{
  margin:0 0 8px 0;
  font-size:clamp(1.05rem,2vw,1.25rem);
}
.exp-role a{ text-decoration:underline }

/* Bullet points and tech tags keep neutral borders */
.exp-points{ margin:0 0 10px 0; padding-left:18px }
.exp-points li{ margin:6px 0 }
.exp-tech{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; margin:0; padding:0;
}
.exp-tech li{
  font-size:.85rem; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid var(--border);
}

/* Fix clipping: ensure enough spacing between items */
.exp-item + .exp-item{ margin-top:28px }

/* Mobile: collapse to single column, rail on the left */
@media (max-width:900px){
  .exp-list::before{ left:32px; transform:none }
  .exp-item{ width:100%; margin-left:0; padding-left:64px }
  .exp-item::before{ left:32px; transform:translate(-50%,0) }
  .exp-meta{
    position:relative;
    top:auto; right:auto; left:auto;
    transform:none;
    margin:0 0 8px 0;
    text-align:left;
    display:block;
  }
}

/* CAD viewers: fix clipping and responsive sizing */
.video.cad-embed,
.video.cad-3d{
  position:relative;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  border-radius:12px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
}
.video.cad-embed iframe,
.video.cad-3d model-viewer{
  width:100%; height:100%; display:block; border:0;
}
.cad-list{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:8px 0 0 0; padding:0;
}
.cad-list a{
  display:inline-block; padding:6px 10px; border-radius:999px; text-decoration:none;
  background:rgba(255,255,255,.08); border:1px solid var(--border); color:var(--fg);
}
.cad-list a.active{ background:rgba(255,255,255,.16); }
.cad-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:999px; border:1px solid var(--border);
  background:rgba(15,18,38,.75); color:var(--fg); cursor:pointer; z-index:2;
}
.cad-nav{ font-size:0; line-height:36px; text-align:center; }
.cad-nav.prev::before{ content:'<'; font-size:16px; }
.cad-nav.next::before{ content:'>'; font-size:16px; }
.cad-nav.prev{ left:10px }
.cad-nav.next{ right:10px }

/* Hide legacy GLB viewer UI (removed) */
#cad .cad-3d,
#cad model-viewer {
  display: none !important;
}

/* Fusion dropdown */
.cad-select-wrap{ margin-top:8px }
.cad-select{
  background:#fff;
  border:1px solid var(--border);
  color:#000;
  padding:8px 12px;
  border-radius:8px;
}
.cad-select option{ color:#000; background:#fff; }