/* Reference-led layout and motion. DarkUGC's measured surfaces, pill navigation,
   coverflow geometry, 550ms transitions and 520ms spring are adapted to markets. */
:root {
  --noir-out:cubic-bezier(.23,1,.32,1);
  --noir-spring:linear(0,.076,.2463,.4458,.6338,.7894,.9054,.9833,1.029,1.0505,1.0555,1.0506,1.0409,1.0298,1.0195,1.011,1.0048,1.0006,.9982,.9971,.9972,.9984,1);
  --noir-surface:linear-gradient(180deg,#141519,#0d0e11);
}
body.noir { --sidebar:0px; background-image:none; }
.noir .app-shell { margin-left:0; }
.noir .topbar { height:92px; padding:12px 32px; position:relative; display:grid; grid-template-columns:1fr auto 1fr; gap:25px; background:linear-gradient(180deg,#0a0a0cf0,#0a0a0cc7 70%,transparent); border:0; z-index:20; }
.masthead-brand { display:flex; gap:12px; align-items:center; min-width:0; }
.wordmark { display:flex; gap:8px; align-items:center; font-size:23px; font-weight:700; letter-spacing:-1.2px; white-space:nowrap; }
.wordmark .icon { width:24px; height:24px; color:#e5e7eb; }
.wordmark-caption { border-left:1px solid var(--line); padding-left:13px; color:var(--muted); font-size:11px; white-space:nowrap; }
.noir .topbar .mobile-menu { display:none; }
.topbar-pill { position:relative; display:flex; align-items:center; gap:3px; border:1px solid #ffffff1f; border-radius:999px; padding:5px; background:#16171bb8; box-shadow:inset 0 1px 0 #ffffff0d,0 12px 40px #00000073; isolation:isolate; }
.topbar-pill>a { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:7px; height:36px; padding:0 17px; border-radius:999px; color:#9a9ca3; font-size:13.5px; font-weight:500; letter-spacing:-.0675px; }
.topbar-pill>a:hover { color:#fff; }
.topbar-pill>a.active { color:#fff; }
.nav-count { font-size:10px; color:#92969e; }
.nav-slider,.sliding-pill { position:absolute; top:-1px; left:-1px; background:radial-gradient(110% 100% at 50% 0,#45464c 0,#202125 62%); border-radius:999px; box-shadow:inset 0 1px 0 #ffffff24,0 6px 16px #0008; pointer-events:none; transition:transform .52s var(--noir-spring),width .52s var(--noir-spring),height .52s var(--noir-spring); }
.noir .header-actions { justify-self:end; gap:15px; }
.noir .header-actions .icon-button { color:#c3c6cd; }
.account-pill { height:36px; padding:3px 11px 3px 4px; border:1px solid #ffffff1f; background:#ffffff08; border-radius:999px; display:flex; align-items:center; gap:8px; font-size:11px; color:#d6d8dd; }
.account-pill>.icon,.account-pill>[data-icon]>.icon { height:11px; width:11px; }
.account-pill .header-avatar { height:27px; width:27px; background:linear-gradient(180deg,#33363c,#191a20); }
.noir .sidebar { inset:77px auto auto 16px; width:248px; max-height:calc(100dvh - 95px); padding:22px 14px 0; border:1px solid #ffffff14; border-radius:24px; background:linear-gradient(180deg,#18191d,#0e0f12); box-shadow:0 30px 70px #0009; transform:translateX(calc(-100% - 25px)); transition:transform .4s var(--noir-out),opacity .3s; opacity:0; overflow-y:auto; }
.noir.sidebar-open .sidebar { transform:translateX(0); opacity:1; }
.noir.sidebar-open .sidebar-scrim { display:block; position:fixed; inset:0; z-index:25; background:#0009; backdrop-filter:blur(3px); }
.noir .sidebar .brand { font-size:20px; gap:8px; justify-content:flex-start; }
.noir .sidebar .nav-label { display:block; margin-top:25px; }
.noir .sidebar .main-nav { margin-top:0; }
.noir .sidebar .main-nav a { font-size:12px; justify-content:flex-start; gap:11px; }
.noir .sidebar .sidebar-bottom { margin-top:30px; }
.noir .sidebar-session,.noir .sidebar .nav-ai { display:flex; }
.noir .sidebar .profile { justify-content:flex-start; }
.noir .sidebar .profile>span:not(.avatar) { display:block; }
.noir .sidebar .profile>[data-icon] { display:flex; }
.noir .sidebar .help-link { font-size:11px; padding:15px 12px 22px; justify-content:flex-start; }
.noir main { max-width:1536px; padding:14px 32px 30px; min-height:calc(100dvh - 160px); }
.noir main:not(.home-dashboard) { padding-top:35px; }
.noir .app-footer { max-width:1536px; width:100%; margin:15px auto 0; padding:20px 32px; font:10px var(--font); border-top:1px solid #ffffff0b; }
.noir .app-footer .status-dot { background:#7d838d; }
.noir .toast { left:50%; }
/* The large feature occupies the same position and proportions as the reference hero. */
.featured-hero { position:relative; isolation:isolate; overflow:hidden; border-radius:28px; padding:24px 28px 22px 36px; background:radial-gradient(50% 75% at 68% 42%,#98d6fb3d,transparent 70%),linear-gradient(180deg,#141519,#0d0e11); box-shadow:inset 0 1px 0 #ffffff0d,0 40px 80px -40px #000f; animation:surface-enter .75s var(--noir-out) both; }
.feature-topline { position:relative; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:15px; }
.feature-topline>p { display:flex; align-items:center; gap:9px; font-size:12px; color:#bac0ca; }
.feature-topline .icon { width:18px; height:18px; color:#d4d9e3; }
.carousel-toggle { border:1px solid #ffffff14; background:#ffffff05; color:#b4b9c3; border-radius:50%; height:28px; width:28px; display:grid; place-items:center; font-size:11px; }
.carousel-toggle:hover { background:#ffffff0d; color:#fff; }
.feature-stage { position:relative; height:360px; display:flex; align-items:center; }
.feature-copy { width:45%; position:relative; z-index:3; padding:22px 0 18px; pointer-events:none; }
.feature-copy button,.feature-copy a { pointer-events:auto; }
.feature-eyebrow { display:flex; align-items:center; gap:8px; color:#c3c6cd; font-size:12px; margin-bottom:14px; }
.feature-asset-mark { display:inline-flex; }
.feature-asset-mark .asset-logo { height:26px; width:26px; border-radius:8px; font-size:15px; }
.feature-asset-mark .asset-logo svg { width:17px; height:17px; }
.feature-copy h1 { font-size:clamp(44px,5vw,72px); font-weight:650; letter-spacing:-3.5px; line-height:1.05; background:linear-gradient(180deg,#fff 0%,#e6e8ec 40%,#8f949d 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.feature-description { color:#8d929b; font-size:12px; margin-top:13px; }
.feature-description span { margin:0 7px; color:#646974; }
.feature-stats { display:flex; gap:25px; margin-top:27px; }
.feature-stats>div { display:flex; flex-direction:column; gap:6px; }
.feature-stats strong { font-size:21px; font-weight:600; letter-spacing:-.6px; }
.feature-stats small { color:#8d929b; font-size:10px; }
.feature-ctas { margin-top:25px; display:flex; gap:10px; align-items:center; }
.noir .button { min-height:40px; padding:0 19px; font-size:12px; }
.noir .button-primary { background:linear-gradient(180deg,#f6f7f9,#c9ccd2); color:#0b0c0e; box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #00000026,0 8px 22px -10px #ffffff59; }
.noir .button-secondary { background:radial-gradient(120% 140% at 50% -40%,#ffffff1a,transparent 60%),#18191d; color:#c3c6cd; border:0; box-shadow:inset 0 1px 0 #ffffff14,0 0 0 1px #ffffff0f; }
.feature-disclaimer { display:flex; align-items:center; gap:6px; color:#747b87; font-size:9px; margin-top:16px; }
.feature-disclaimer .status-dot { width:4px; height:4px; background:#8d929b; }
.feature-flow { position:absolute; right:-28px; top:-12px; bottom:-10px; width:66%; perspective:1300px; transform-style:preserve-3d; mask-image:linear-gradient(90deg,transparent,#000 16%,#000 93%,transparent); }
.feature-card { --lift:0px; position:absolute; top:50%; left:54%; width:210px; height:300px; margin:-150px 0 0 -105px; text-align:left; padding:16px; border:1px solid #ffffff1f; border-radius:20px; overflow:hidden; background:radial-gradient(100% 80% at 50% 0,#98d6fb14,transparent),linear-gradient(180deg,#1d2530,#10151d); box-shadow:0 30px 50px -24px #000f; transform:translateX(calc(var(--k)*144px)) translateY(var(--lift)) translateZ(calc(var(--abs)*-140px)) rotateY(calc(var(--k)*-22deg)) scale(calc(1 - var(--abs)*.03)); opacity:1; filter:brightness(calc(1 - var(--abs)*.10)); z-index:calc(10 - var(--abs)); transition:transform .55s var(--noir-out),filter .3s,border-color .3s,box-shadow .55s,opacity .55s; }
.feature-card.is-front { border-color:#98d6fbbf; box-shadow:0 0 0 1px #98d6fb22,0 0 0 6px #98d6fb0a,0 0 100px -12px #98d6fb55,0 30px 60px -24px #000f; }
.feature-card:hover { --lift:-10px; border-color:#b8ddf7; filter:brightness(1.12); }
.feature-card-top { display:flex; align-items:center; gap:7px; }
.feature-card-top .asset-info { margin-right:auto; }
.feature-card-top .asset-info strong { font-size:11px; }
.feature-card-top .asset-info small { font-size:8px; max-width:98px; }
.feature-card-top .asset-logo { height:27px; width:27px; }
.card-timeframe { color:#8b98a9; font-size:8px; border:1px solid #ffffff1a; border-radius:5px; padding:3px; }
.feature-card-price { display:block; font-size:27px; font-weight:600; letter-spacing:-.9px; margin-top:20px; }
.feature-card-change { display:block; font-size:10px; margin-top:6px; }
.feature-card-change>span { color:#8d929b; font-size:8px; margin-left:3px; }
.market-artwork { display:block; width:100%; color:#c0c8d5; }
.feature-card>.market-artwork { height:155px; margin:0 -3px; width:calc(100% + 6px); }
.feature-card-bottom { display:flex; justify-content:space-between; align-items:center; gap:5px; font-size:7px; color:#8d9aab; margin-top:4px; }
.feature-card-bottom>span { display:flex; align-items:center; gap:3px; }
.feature-card-bottom .icon { width:9px; height:9px; }
.featured-bottom { display:flex; align-items:center; gap:18px; position:relative; z-index:4; border-top:1px solid #ffffff09; padding-top:17px; }
.feature-ranks { display:flex; gap:8px; min-width:0; overflow-x:auto; scrollbar-width:none; flex:1; padding:2px; mask-image:linear-gradient(90deg,#000 94%,transparent); }
.feature-ranks::-webkit-scrollbar { display:none; }
.rank-pill { flex:0 0 auto; display:flex; align-items:center; gap:10px; border-radius:16px; padding:10px 13px 10px 10px; min-width:139px; text-align:left; position:relative; overflow:hidden; color:#d8dbe1; background:#ffffff0a; box-shadow:inset 0 0 0 1px #ffffff14; transition:background .2s,box-shadow .3s,transform .3s var(--noir-out); }
.rank-pill:hover { background:#ffffff12; transform:translateY(-2px); }
.rank-pill.active { background:#98d6fb29; box-shadow:inset 0 0 0 1px #98d6fb99; }
.rank-number { width:24px; height:24px; border-radius:8px; display:grid; place-items:center; background:#ffffff08; color:#8d929b; font-size:10px; }
.rank-pill.active .rank-number { color:#c2e6ff; background:#98d6fb1f; }
.rank-details { min-width:0; }
.rank-details strong { display:block; font-size:11px; font-weight:600; }
.rank-details small { display:block; margin-top:4px; font-size:8px; color:#909aa7; max-width:97px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.rank-progress { position:absolute; bottom:0; left:10px; right:10px; height:2px; background:#98d6fb99; transform:scaleX(0); transform-origin:left; opacity:0; }
.rank-pill.active .rank-progress { opacity:1; animation:feature-progress 9s linear forwards; }
.motion-paused .rank-progress { animation-play-state:paused; }
.carousel-arrows { display:flex; gap:7px; }
.carousel-arrows .icon-button { width:30px; height:30px; border:1px solid #ffffff14; border-radius:50%; background:#ffffff05; }
.carousel-arrows .icon-button:first-child .icon { transform:rotate(180deg); }
.carousel-arrows .icon-button .icon { width:13px; height:13px; }
/* Recessed search, sliding filters, and a library-style market grid. */
.market-library { padding-top:34px; }
.library-heading { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:23px; animation:surface-enter .7s .1s var(--noir-out) both; }
.library-heading h2 { font-size:25px; font-weight:600; letter-spacing:-.85px; }
.library-heading h2>span { color:#8d929b; }
.library-heading p { color:#8d929b; margin-top:8px; font-size:12px; }
.library-heading>.text-button { font-size:11px; }
.library-toolbar { display:flex; align-items:center; gap:18px; margin-bottom:25px; }
.library-search { display:flex; align-items:center; gap:10px; flex:1; height:43px; min-width:150px; padding:0 15px; border-radius:999px; background:#070809; box-shadow:inset 0 1px 2px #0009,0 0 0 1px #ffffff0f,0 1px 0 #ffffff08; transition:box-shadow .25s; }
.library-search:focus-within { box-shadow:0 0 0 1px #9dbdff99,0 0 0 4px #8fb4ff14,inset 0 1px 2px #0009; }
.library-search>.icon { width:16px; height:16px; color:#8d929b; }
.library-search input { width:100%; background:none; color:#f3f4f6; border:0; padding:0; outline:0; min-width:0; font-size:12px; }
.library-search input::placeholder { color:#737984; }
.library-search kbd { color:#606773; font:10px var(--font); white-space:nowrap; }
.library-filter-row { display:flex; gap:9px; align-items:center; }
.library-tabs { display:flex; position:relative; border:1px solid #ffffff0f; padding:4px; border-radius:999px; background:#16171b80; }
.library-tabs button { position:relative; z-index:1; color:#8d929b; border-radius:999px; font-size:11px; padding:8px 11px; }
.library-tabs button.active { color:#fff; }
.saved-filter,.library-sort { display:flex; align-items:center; gap:6px; height:37px; padding:0 13px; border-radius:999px; color:#c3c6cd; background:radial-gradient(120% 140% at 50% -40%,#ffffff1a,transparent 60%),#18191d; box-shadow:inset 0 1px 0 #ffffff14,0 0 0 1px #ffffff0f; font-size:11px; white-space:nowrap; }
.saved-filter>.icon { width:12px; height:12px; }
.saved-filter>span { color:#727986; font-size:9px; }
.saved-filter.active { color:#bed8ff; box-shadow:inset 0 1px 0 #ffffff14,0 0 0 1px #8fb4ff66; background:#1a2338; }
.library-sort { gap:4px; padding-right:10px; }
.library-sort select { appearance:none; color:inherit; padding:0; border:0!important; background:none!important; box-shadow:none!important; font-size:11px; cursor:pointer; }
.library-sort>.icon { width:11px; height:11px; }
.market-library-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 20px; }
.market-tile { min-width:0; animation:tile-enter .6s calc(var(--i)*35ms) var(--noir-out) both; }
.tile-art { position:relative; isolation:isolate; border-radius:20px; background:linear-gradient(160deg,#1d242d,#11141b 65%); border:1px solid #ffffff0d; box-shadow:0 6px 16px -10px #000e; overflow:hidden; transition:transform .5s var(--noir-out),box-shadow .5s,border-color .3s; }
.tile-art:before { content:''; position:absolute; inset:0; z-index:1; opacity:0; background:radial-gradient(75% 75% at 60% 10%,#8fb4ff22,transparent); pointer-events:none; transition:opacity .5s; }
.market-tile:hover .tile-art { transform:translateY(-5px); border-color:#ffffff29; box-shadow:0 20px 40px -20px #000e,0 0 0 1px #8fb4ff14; }
.market-tile:hover .tile-art:before { opacity:1; }
.tile-open { width:100%; text-align:left; display:block; padding:20px 18px 10px; position:relative; overflow:hidden; }
.tile-art-top { display:flex; align-items:center; gap:8px; }
.tile-art-top>.asset-logo { height:32px; width:32px; border-radius:10px; font-size:18px; }
.tile-art-top>span:last-child { font-size:13px; font-weight:600; }
.tile-art-top small { display:block; color:#737e8d; font-size:8px; margin-top:4px; letter-spacing:.3px; }
.tile-price { display:block; margin-top:26px; font-size:28px; font-weight:600; letter-spacing:-1px; }
.tile-change { display:block; font-size:11px; margin-top:6px; }
.tile-open>.market-artwork { height:190px; width:100%; margin-top:2px; transition:transform .6s var(--noir-out); }
.market-tile:hover .market-artwork { transform:scale(1.035); }
.tile-save { position:absolute; z-index:3; top:14px; right:14px; width:30px; height:30px; padding:8px; display:grid; place-items:center; border-radius:50%; background:#1d1d1deb; border:1px solid #ffffff30; box-shadow:0 2px 10px #0004; color:#a1a6b0; transition:transform .4s var(--noir-spring),background .2s,color .2s; }
.tile-save .icon { width:13px; height:13px; }
.tile-save:hover { transform:scale(1.12); color:#fff; }
.tile-save.saved { color:#d8e5ff; }
.tile-save.saved .icon { fill:#9dbdff33; }
.tile-overlay { position:absolute; bottom:18px; left:50%; transform:translate(-50%,8px); opacity:0; z-index:3; display:flex; align-items:center; gap:7px; white-space:nowrap; font-size:11px; background:#0a0b0de6; backdrop-filter:blur(10px); border:1px solid #ffffff24; padding:9px 14px; border-radius:999px; transition:opacity .3s,transform .4s var(--noir-out); }
.tile-overlay .icon { width:13px; height:13px; }
.tile-open:hover .tile-overlay,.tile-open:focus-visible .tile-overlay { opacity:1; transform:translate(-50%,0); }
.tile-caption { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:13px 2px 0; }
.tile-caption>div { min-width:0; }
.tile-caption strong { display:block; color:#d8dbe1; font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile-caption small { display:block; color:#777f8c; font-size:10px; margin-top:6px; }
.tile-caption small>span { margin:0 5px; }
.tile-caption>span { color:#aab0ba; text-align:right; font-size:11px; flex-shrink:0; }
.tile-caption>span small { font-size:8px; }
.library-foot { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:30px; padding-top:20px; border-top:1px solid #ffffff0b; font-size:10px; color:#777f8c; }
.library-foot>span>span { padding:0 5px; }
.library-empty { padding:70px 20px; grid-column:1/-1; text-align:center; color:#8d929b; font-size:13px; }
.chart-disabled { min-height:190px; display:grid; place-items:center; font-size:11px; color:#747e8b; }
/* Whole-page rhythm and modal transitions, rather than a static recolor. */
.noir main:not(.home-dashboard)>.page-heading { animation:surface-enter .6s var(--noir-out) both; margin-bottom:30px; }
.noir .page-heading h1 { font-size:36px; font-weight:600; letter-spacing:-1.3px; background:linear-gradient(180deg,#fff,#e6e8ec 40%,#8f949d); background-clip:text; -webkit-background-clip:text; color:transparent; }
.noir .page-heading p { font-size:13px; }
.noir .scan-layout { grid-template-columns:minmax(0,1fr) 340px; gap:24px; animation:surface-enter .7s .08s var(--noir-out) both; }
.noir .scan-panel { padding:0 25px 22px; }
.noir .scan-panel .section-bar { padding:23px 0 14px; }
.noir .scan-panel .panel-title h2 { font-size:16px; }
.noir .scanner-intro { font-size:12px; margin-bottom:22px; }
.noir .scan-layout .drop-zone { min-height:375px; border-radius:20px; border-color:#ffffff17; background:radial-gradient(70% 80% at 50% 10%,#8fb4ff08,transparent),#08090b; transition:border-color .3s,background .3s,box-shadow .3s; }
.noir .drop-zone:hover { border-color:#ffffff30; }
.noir .drop-zone.dragging { border-color:#9dbdff; box-shadow:0 0 0 5px #8fb4ff12,inset 0 0 70px #8fb4ff0a; }
.noir .scan-layout .upload-icon { width:64px; height:64px; border:1px solid #ffffff12; background:linear-gradient(180deg,#1b1d23,#101116); border-radius:20px; box-shadow:inset 0 1px 0 #ffffff0a,0 10px 25px #0005; transition:transform .5s var(--noir-spring); }
.noir .drop-zone:hover .upload-icon { transform:translateY(-4px) rotate(-3deg); }
.noir .scan-layout .drop-zone h3 { font-size:20px; font-weight:500; }
.noir .scan-layout .drop-zone p { font-size:12px; }
.noir .scan-meta { font-size:10px; margin-top:18px; }
.noir .scan-meta .text-button { font-size:11px; }
.noir .recommend-panel,.noir .steps-panel { padding:23px; }
.noir .recommend-panel>p { font-size:13px; }
.noir .scan-step strong { font-size:12px; }
.noir .scan-step p { font-size:11px; }
.noir .report { animation:surface-enter .6s var(--noir-out) both; }
.noir .settings-panel { max-width:950px; animation:surface-enter .65s .08s var(--noir-out) both; }
.noir .setting-row strong { font-size:13px; }
.noir .setting-row p { font-size:12px; }
.noir dialog { border-radius:32px; max-width:650px; border:1px solid #ffffff0f; background:linear-gradient(180deg,#1b1b1d,#121212 32%); box-shadow:0 30px 70px -30px #000f; }
.noir dialog[open] { animation:modal-enter .25s cubic-bezier(.22,1,.36,1) both; }
.noir dialog[open]::backdrop { animation:backdrop-enter .25s cubic-bezier(.22,1,.36,1) both; background:#0009; backdrop-filter:blur(12px); }
.noir dialog.is-closing { animation:modal-exit .15s cubic-bezier(.65,0,.35,1) both; }
.noir dialog.is-closing::backdrop { animation:backdrop-exit .15s ease both; }
.noir .dialog-heading h2 { font-size:21px; letter-spacing:-.6px; }
.noir .dialog-heading .icon-button { border-radius:50%; border:1px solid #ffffff14; }
.noir .chart-dialog { max-width:1000px; padding:20px; }
.noir .chart-dialog .trading-panel { border-radius:24px; }
.noir .chart-dialog .trading-panel:before { display:none; }
.noir .chart-dialog #trading-chart { height:clamp(250px,40vh,420px); }
.noir .search-input { font-size:13px; padding:14px; border-radius:999px; }
.noir .search-result { padding-block:17px; }
.noir .search-result .asset-info strong { font-size:13px; }
.noir .search-result .asset-info small { font-size:10px; }
.noir .search-result>span { font-size:12px; }
.noir .search-result .button { min-height:31px; padding:0 13px; font-size:11px; }
.noir .button,.noir .icon-button,.noir .account-pill { transition:transform .45s var(--noir-spring),filter .25s,background .25s,box-shadow .25s; }
.noir .button:hover { transform:translateY(-2px); filter:brightness(1.08); }
.noir .button:active,.noir .icon-button:active { transform:scale(.96); }
.motion-settled { animation:none!important; }
.copy-enter { animation:copy-enter .55s var(--noir-out) both; }
@keyframes surface-enter { from { opacity:0; transform:translateY(16px); filter:blur(4px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes copy-enter { from { opacity:0; transform:translateY(9px); filter:blur(3px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes tile-enter { from { opacity:0; transform:translateY(18px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes feature-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes modal-enter { from { opacity:0; transform:translateY(12px) scale(.96); filter:blur(4px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@keyframes modal-exit { to { opacity:0; transform:translateY(7px) scale(.98); filter:blur(3px); } }
@keyframes backdrop-enter { from { opacity:0; backdrop-filter:blur(0); } to { opacity:1; backdrop-filter:blur(12px); } }
@keyframes backdrop-exit { to { opacity:0; backdrop-filter:blur(0); } }
@media(min-width:1550px) { .feature-stage { height:400px; } .feature-card { width:235px; height:330px; margin:-165px 0 0 -117px; } .feature-card>.market-artwork { height:180px; } }
@media(max-width:1200px) { .wordmark-caption { display:none; } .account-pill>span:not(.header-avatar),.account-pill>[data-icon] { display:none; } .account-pill { padding:3px; } .noir .topbar { grid-template-columns:1fr auto 1fr; gap:15px; } .library-toolbar { flex-wrap:wrap; gap:16px; } .library-search { min-width:280px; } .library-filter-row { flex:0 0 auto; } .market-library-grid { gap:25px 16px; } .tile-price { font-size:25px; } .tile-open { padding:17px 14px 8px; } .feature-copy h1 { font-size:60px; } .feature-stats { gap:21px; } .feature-flow { width:64%; } }
@media(max-width:1000px) { .noir .topbar { padding-inline:24px; } .noir main { padding-inline:24px; } .feature-copy { width:48%; } .feature-copy h1 { font-size:52px; letter-spacing:-2.5px; } .feature-stats strong { font-size:18px; } .feature-stats { gap:18px; } .feature-ctas { gap:8px; } .noir .feature-ctas .button { font-size:11px; padding-inline:14px; } .feature-flow { right:-70px; } .feature-card { width:185px; height:280px; margin:-140px 0 0 -92px; transform:translateX(calc(var(--k)*120px)) translateY(var(--lift)) translateZ(calc(var(--abs)*-140px)) rotateY(calc(var(--k)*-22deg)) scale(calc(1 - var(--abs)*.03)); padding:14px; } .feature-card-price { font-size:24px; } .feature-card>.market-artwork { height:145px; } .card-timeframe { display:none; } .feature-card-bottom { font-size:6px; } .market-library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .noir .scan-layout { grid-template-columns:minmax(0,1fr) 280px; } .library-toolbar { flex-direction:column; align-items:stretch; } .library-search { flex:0 0 43px; } .library-filter-row { justify-content:flex-start; } .library-sort { margin-left:auto; } }
@media(max-width:700px) {
  .noir .topbar { height:112px; padding:12px 18px 9px; grid-template-columns:1fr auto; grid-template-rows:30px 45px; gap:12px 10px; }
  .noir .topbar .mobile-menu { display:inline-flex; width:25px; height:25px; margin-left:-3px; }
  .masthead-brand { gap:8px; }
  .wordmark { font-size:19px; gap:6px; letter-spacing:-.85px; }
  .wordmark .icon { width:21px; height:21px; }
  .noir .header-actions { gap:9px; }
  .noir .header-actions .icon-button { width:25px; height:25px; }
  .noir .header-actions #notifications { display:none; }
  .account-pill { height:29px; padding:2px; }
  .account-pill .header-avatar { height:23px; width:23px; font-size:8px; }
  .topbar-pill { grid-row:2; grid-column:1/-1; justify-self:center; padding:4px; gap:1px; }
  .topbar-pill>a { height:31px; font-size:12px; padding-inline:22px; }
  .nav-count { font-size:9px; }
  .noir main,.noir main:not(.home-dashboard) { padding:10px 16px 25px; }
  .noir main:not(.home-dashboard) { padding-top:24px; }
  .featured-hero { padding:17px 18px 16px; border-radius:24px; }
  .feature-topline>p { font-size:9px; gap:6px; }
  .feature-topline .icon { width:14px; height:14px; }
  .carousel-toggle { height:24px; width:24px; font-size:9px; }
  .feature-stage { height:505px; align-items:flex-start; }
  .feature-copy { padding-top:23px; padding-bottom:0; width:100%; }
  .feature-eyebrow { font-size:10px; margin-bottom:11px; gap:7px; }
  .feature-asset-mark .asset-logo { height:22px; width:22px; border-radius:7px; }
  .feature-copy h1 { font-size:48px; letter-spacing:-2.5px; }
  .feature-description { font-size:10px; margin-top:9px; }
  .feature-stats { margin-top:18px; gap:22px; }
  .feature-stats strong { font-size:18px; letter-spacing:-.5px; }
  .feature-stats small { font-size:8px; }
  .feature-ctas { margin-top:19px; }
  .noir .feature-ctas .button { min-height:35px; padding-inline:15px; font-size:10px; }
  .feature-disclaimer { display:none; }
  .feature-flow { top:260px; bottom:-5px; width:calc(100% + 36px); right:-18px; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
  .feature-card { top:50%; left:50%; width:165px; height:230px; padding:12px; margin:-115px 0 0 -82.5px; transform:translateX(calc(var(--k)*105px)) translateY(var(--lift)) translateZ(calc(var(--abs)*-130px)) rotateY(calc(var(--k)*-22deg)) scale(calc(1 - var(--abs)*.03)); }
  .feature-card-top .asset-logo { width:23px; height:23px; }
  .feature-card-top .asset-info strong { font-size:10px; }
  .feature-card-top .asset-info small { font-size:6px; max-width:95px; margin-top:3px; }
  .feature-card-price { font-size:23px; margin-top:14px; }
  .feature-card-change { font-size:8px; margin-top:4px; }
  .feature-card>.market-artwork { height:118px; }
  .feature-card-bottom { font-size:5px; margin-top:0; }
  .feature-card-bottom .icon { width:7px; height:7px; }
  .featured-bottom { padding-top:14px; gap:9px; }
  .feature-ranks { gap:7px; mask-image:linear-gradient(90deg,#000 88%,transparent); }
  .rank-pill { min-width:113px; padding:9px; gap:7px; border-radius:13px; }
  .rank-number { width:21px; height:21px; font-size:8px; border-radius:7px; }
  .rank-details strong { font-size:10px; }
  .rank-details small { font-size:7px; margin-top:4px; max-width:70px; }
  .carousel-arrows { gap:5px; }
  .carousel-arrows .icon-button { height:25px; width:25px; }
  .carousel-arrows .icon-button .icon { width:11px; height:11px; }
  .market-library { padding-top:27px; }
  .library-heading { margin-bottom:20px; }
  .library-heading h2 { font-size:23px; letter-spacing:-.8px; }
  .library-heading p { font-size:10px; line-height:1.7; margin-top:7px; }
  .library-heading>.text-button { display:none; }
  .library-toolbar { gap:13px; margin-bottom:20px; }
  .library-search { min-width:0; height:42px; padding-inline:13px; }
  .library-search input { font-size:11px; }
  .library-search kbd { display:none; }
  .library-filter-row { gap:8px; flex-wrap:wrap; }
  .library-tabs { padding:3px; }
  .library-tabs button { font-size:10px; padding:7px 10px; }
  .saved-filter { height:33px; font-size:10px; padding-inline:10px; gap:5px; }
  .saved-filter>.icon { width:11px; height:11px; }
  .library-sort { display:flex; margin-left:0; height:31px; padding-inline:10px; }
  .library-sort select { font-size:10px; }
  .market-library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:21px 12px; }
  .tile-art { border-radius:16px; }
  .tile-open { padding:13px 11px 4px; }
  .tile-art-top { gap:6px; }
  .tile-art-top>.asset-logo { height:25px; width:25px; border-radius:8px; font-size:14px; }
  .tile-art-top>span:last-child { font-size:10px; }
  .tile-art-top small { font-size:6px; margin-top:3px; }
  .tile-price { font-size:22px; margin-top:22px; letter-spacing:-.8px; }
  .tile-change { font-size:9px; margin-top:5px; }
  .tile-open>.market-artwork { height:132px; margin-top:3px; }
  .tile-save { height:24px; width:24px; padding:5px; right:9px; top:9px; }
  .tile-save .icon { height:10px; width:10px; }
  .tile-caption { padding-top:10px; gap:5px; }
  .tile-caption strong { font-size:10px; max-width:115px; }
  .tile-caption small { font-size:8px; margin-top:5px; }
  .tile-caption>span { font-size:9px; }
  .tile-caption>span small { font-size:6px; }
  .tile-caption small>span { margin-inline:2px; }
  .tile-overlay { display:none; }
  .library-foot { align-items:flex-start; flex-direction:column; gap:9px; margin-top:25px; padding-top:18px; font-size:9px; }
  .noir .app-footer { padding:17px 16px; font-size:8px; }
  .noir .app-footer>span:last-child { display:none; }
  .noir .page-heading h1 { font-size:30px; }
  .noir .page-heading p { font-size:11px; }
  .noir .scan-layout { grid-template-columns:1fr; gap:18px; }
  .noir .scan-panel { padding:0 20px 20px; }
  .noir .scan-layout .drop-zone { min-height:320px; }
  .noir .scan-layout .drop-zone h3 { font-size:18px; }
  .noir .scan-layout .drop-zone p { font-size:10px; }
  .noir .scanner-intro { font-size:11px; }
  .noir .scan-meta { font-size:9px; }
  .noir .scan-meta .text-button { font-size:10px; }
  .noir .scan-side { grid-template-columns:1fr; }
  .noir .recommend-panel,.noir .steps-panel { padding:21px; }
  .noir .recommend-panel .panel-title h2 { font-size:14px; }
  .noir .scan-panel .panel-title>.icon { display:block; }
  .noir .recommend-panel .asset-info small { font-size:9px; }
  .noir .recommend-panel .asset-info strong { font-size:12px; }
  .noir .settings-panel { padding-inline:20px; }
  .noir .setting-row p { font-size:10px; }
  .noir .setting-row strong { font-size:12px; }
  .noir dialog { padding:20px; border-radius:26px; }
  .noir .dialog-heading h2 { font-size:18px; }
  .noir .chart-dialog { padding:13px; }
  .noir .chart-dialog .dialog-heading { margin:2px 3px 16px; }
  .noir .chart-dialog .dialog-heading h2 { font-size:15px; }
  .noir .chart-dialog .instrument-quote>strong { font-size:28px; }
  .noir .chart-dialog .chart-filters { padding:3px; }
  .noir .chart-dialog .chart-filters button { padding-inline:7px; }
  .noir .chart-dialog .chart-type-label { display:none; }
}
@media(max-width:360px) { .noir main { padding-inline:12px; } .noir .topbar { padding-inline:14px; } .topbar-pill>a { padding-inline:18px; } .feature-copy h1 { font-size:43px; } .feature-stats { gap:17px; } .feature-stats strong { font-size:16px; } .feature-ctas { gap:7px; } .noir .feature-ctas .button { font-size:9px; padding-inline:12px; } .feature-topline>p { font-size:8px; } .tile-price { font-size:19px; } .tile-caption>span { display:none; } .library-tabs button { padding-inline:8px; } .saved-filter { padding-inline:8px; } }
@media(prefers-reduced-motion:reduce) {
  .noir *,.noir *:before,.noir *:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .noir .rank-progress { display:none; }
  .noir .market-tile:hover .tile-art,.noir .button:hover { transform:none; }
}

/* App-wide compact copy and spacing. */
.noir:not(.live-view) main:not(.home-dashboard) { padding-top:20px; }
.noir main:not(.home-dashboard)>.page-heading { margin-bottom:20px; }
.noir .page-heading h1 { font-size:28px; letter-spacing:-.9px; }
.noir .sidebar .main-nav { margin-top:22px; }
.feature-topline { position:absolute; inset:18px 18px auto auto; z-index:5; }
.feature-stage { height:330px; }
.feature-exchange { color:#6e7886; font-size:9px; letter-spacing:.6px; margin-left:4px; }
.noir .scan-layout .scan-panel { padding:24px; }
.noir .scan-layout .drop-zone { min-height:350px; }
.noir .scan-meta { justify-content:flex-end; margin-top:15px; }
.noir .scan-meta .text-button { color:#8d929b; }
.noir .report-heading { padding:20px 22px; }
.noir .report-heading h2 { margin:0; }
.noir .report-levels { padding:22px; }
.noir .settings-panel { max-width:820px; }
.noir .settings-section { padding:24px 0; }
.noir .settings-section .setting-row:first-child { margin-top:0; }
.noir .settings-section .setting-row+.setting-row { border-top:1px solid var(--line); padding-top:22px; margin-top:22px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; }
.dialog-actions .button { margin-top:0; }
.shortcut-list>div { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:15px 0; font-size:12px; border-bottom:1px solid var(--line); color:var(--sub); }
.shortcut-list>div:last-child { border:0; }
.shortcut-list kbd { font:11px var(--font); padding:5px 8px; color:var(--ink); background:var(--soft); border:1px solid var(--line); border-radius:6px; }
@media(max-width:700px) {
  .noir:not(.live-view) main:not(.home-dashboard) { padding-top:16px; }
  .noir .page-heading h1 { font-size:24px; }
  .feature-stage { height:460px; }
  .feature-flow { top:225px; }
  .feature-topline { inset:15px 15px auto auto; }
  .feature-exchange { font-size:8px; }
  .noir .scan-layout .scan-panel { padding:18px; }
  .noir .scan-layout .drop-zone { min-height:290px; }
  .noir .report-heading { padding:18px; }
  .noir .report-levels { padding:18px; }
  .noir .settings-section { padding:20px 0; }
}

/* Scanner: focused upload surface and a three-step guide. */
.market-scanner { margin-top:34px; padding:28px 30px 30px; border:1px solid #ffffff0e; border-radius:22px; background:linear-gradient(120deg,#15171c 0%,#101115 48%,#111216); box-shadow:inset 0 1px 0 #ffffff05; scroll-margin-top:24px; }
.scanner-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; }
.scanner-heading h2 { color:#e3e5e9; font-size:22px; font-weight:500; letter-spacing:-.6px; }
.scanner-heading-icon { color:#545d6d; }
.scanner-heading-icon>.icon { width:20px; height:20px; }
.scanner-workspace { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(245px,1fr); align-items:stretch; gap:36px; }
.noir .market-scanner .scanner-upload { min-width:0; padding:0; border:0; border-radius:12px; background:none; box-shadow:none; }
.noir .market-scanner .drop-zone { min-height:330px; height:100%; padding:18px 24px 44px; gap:16px; justify-content:center; position:relative; border:1px solid #ffffff10; border-radius:12px; background:#0c0e12; transition:border-color .25s,background .25s; }
.noir .market-scanner .drop-zone:hover { border-color:#ffffff25; background-color:#0d0f14; }
.noir .market-scanner .drop-zone.dragging { border-color:#a3b8d9; background:#131b28; }
/* Soft patterned terrain sits only at the foot of the upload area. */
.noir .market-scanner .drop-zone:not(.has-preview) { overflow:hidden; isolation:isolate; background:#0f1014; border-style:dashed; border-color:#ffffff1b; border-radius:18px; }
.scanner-upload-bg { position:absolute; inset:auto 0 0; height:46%; z-index:0; opacity:.42; pointer-events:none; overflow:hidden; border-radius:0 0 18px 18px; }
.scanner-upload-bg>svg { display:block; width:100%; height:100%; }
.noir .market-scanner .drop-zone>.drop-copy,.noir .market-scanner .drop-zone>.button { position:relative; z-index:1; }
.scanner-upload-formats { z-index:1; }
.noir .market-scanner .drop-zone h3 { color:#dadde4; font-size:20px; font-weight:500; letter-spacing:-.5px; }
.noir .market-scanner .drop-zone p { color:#747d8d; font-size:11px; line-height:1.5; margin-top:7px; }
.noir .market-scanner .drop-zone>.button { display:flex; gap:16px; min-height:36px; padding:9px 18px; border-radius:9px; background:linear-gradient(180deg,#eceef2,#c2c7d1); color:#12151c; border:1px solid #ffffff30; font-size:11px; box-shadow:inset 0 1px 0 #ffffff88,0 3px 10px #0005; }
.noir .market-scanner .drop-zone>.button>.icon { width:12px; height:12px; }
.scanner-upload-formats { position:absolute; bottom:15px; left:20px; right:20px; display:flex; justify-content:space-between; gap:12px; color:#515c6c; font-size:8px; letter-spacing:.15px; }
.scanner-guide { padding:6px 0 0; min-width:0; align-self:center; }
.scanner-guide>h3 { color:#818998; font-size:10px; font-weight:500; letter-spacing:1.3px; text-transform:uppercase; margin:0 0 23px; }
.scanner-guide ol { list-style:none; margin:0; padding:0; }
.scanner-guide li { position:relative; display:flex; align-items:flex-start; gap:17px; min-height:76px; }
.scanner-guide li:not(:last-child):after { content:''; position:absolute; left:16px; top:38px; bottom:6px; width:1px; background:linear-gradient(#ffffff15,#ffffff06); }
.scanner-step-number { display:grid; place-items:center; flex-shrink:0; width:33px; height:33px; border-radius:50%; border:1px solid #ffffff12; color:#737e91; font-size:10px; font-weight:500; background:#13151b; }
.scanner-step-number>.icon { width:14px; height:14px; }
.scanner-guide h4 { margin:1px 0 6px; color:#abb2bf; font-size:12px; font-weight:500; }
.scanner-guide p { color:#636e80; font-size:10px; line-height:1.7; margin:0; }
.scanner-guide li.current .scanner-step-number { border-color:#a7bbdc5c; color:#dce6f6; background:#a2b9df0c; box-shadow:0 0 0 4px #a2b9df04; }
.scanner-guide li.current h4 { color:#e0e4ec; }
.scanner-guide li.complete .scanner-step-number { color:#8db8a1; border-color:#8db8a126; }
.noir .market-scanner .has-preview { gap:12px; padding:18px; }
.market-scanner .chart-preview,.market-scanner .has-preview>.sample-chart { width:100%; max-height:240px; object-fit:contain; border-radius:6px; }
.market-scanner .preview-name { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; color:#858f9f; }
.market-scanner .upload-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; }
.market-scanner .upload-actions .button { display:flex; align-items:center; gap:10px; min-height:33px; padding:8px 14px; font-size:10px; border-radius:7px; }
.market-scanner .upload-actions .button>.icon { width:12px; height:12px; }
.scanner-results { margin-top:24px; }
.noir .scanner-results .report { margin:0; border-radius:12px; background:#0d0e12; box-shadow:none; }
.noir .scanner-results .report-heading { padding:18px 22px; gap:14px; }
.scanner-results .report-heading h2 { font-size:13px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.noir .scanner-results .report-levels { padding:20px 22px; }
@media(max-width:700px) {
  .market-scanner { margin-top:24px; padding:22px 18px; border-radius:18px; scroll-margin-top:16px; }
  .scanner-heading { margin-bottom:20px; }
  .scanner-heading h2 { font-size:20px; }
  .scanner-workspace { grid-template-columns:1fr; gap:25px; }
  .noir .market-scanner .drop-zone { min-height:320px; padding:18px 18px 42px; }
  .scanner-guide { padding:0 4px; }
  .scanner-guide>h3 { margin-bottom:20px; }
  .scanner-guide li { min-height:72px; }
  .scanner-guide li:last-child { min-height:40px; }
  .scanner-guide p { font-size:11px; }
  .scanner-guide h4 { font-size:13px; }
  .scanner-results .report-heading { flex-wrap:wrap; }
}