/* Dense inventory workspace: keep the collection table as the primary surface. */
.dashboard {
  display: block !important;
  margin: 3px 0 6px !important;
  padding: 5px 8px 6px !important;
}

.dashboard-topline { min-height: 15px !important; margin-bottom: 3px !important; }
.dashboard-topline .dashboard-title { font-size: 10px !important; }
.dashboard-topline b { font-size: 11px !important; }
.allocation-chart { height: 13px !important; margin-bottom: 4px !important; }
.allocation-segment { padding: 0 5px !important; font-size: 9px !important; }
.dashboard-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 4px !important; }
.dashboard-card { min-height: 31px !important; padding: 4px 6px !important; }
.dashboard-card-label { font-size: 10px !important; }
.dashboard-card b { font-size: 11px !important; }
.dashboard-card > strong { margin-top: 1px !important; font-size: 11px !important; }
.dashboard-card small { display: none !important; }
#processing-progress { display: none !important; }
main:has(#result:not([hidden])) #status:not(.error):not(.warn) { display: none; }

#profile-switcher {
  margin: 10px 0 5px;
}

#profile-switcher summary {
  width: max-content;
  cursor: pointer;
  color: #a8c6d4;
  font-size: 12px;
  font-weight: 650;
  list-style: none;
}

#profile-switcher summary::-webkit-details-marker { display: none; }
#profile-switcher summary::before { content: '+'; display: inline-block; width: 18px; color: #62c9ff; font-size: 16px; line-height: 12px; }
#profile-switcher[open] summary::before { content: '-'; }
#profile-switcher[open] summary { margin-bottom: 6px; }
#profile-switcher .profile-entry { margin: 0 !important; }

.app-header.app-header {
  position: relative;
  align-items: center;
  border-bottom: 1px solid #203846;
}

.app-header h1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-header h1::before {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 7px;
  background: #101d27 url('/static/brand-mark.svg') center / cover no-repeat;
  content: '';
}

.site-nav {
  display: flex;
  gap: 14px;
  margin-left: auto;
  margin-right: 325px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.site-nav a, .site-footer a { color: #9bc7dc; text-decoration: none; }
.site-nav a:hover, .site-footer a:hover { color: #dff4ff; }

.site-footer {
  display: grid;
  grid-template-columns: minmax(170px, .8fr) minmax(280px, 1.5fr) auto;
  align-items: center;
  gap: 20px;
  margin-top: 9px;
  padding: 12px 0 15px;
  border-top: 1px solid #203846;
  color: #7993a0;
  font-size: 11px;
  line-height: 1.45;
}

.site-footer-brand { display: grid; gap: 1px; }
.site-footer-brand strong { color: #c9e4ef; font-size: 12px; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; white-space: nowrap; }

.summary div, .dashboard, .chart-panel, .inventory-panel {
  box-shadow: 0 10px 24px rgba(0, 0, 0, .09);
}

.active-profile {
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.inventory-panel tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 #f6b655;
}

.inventory-panel tbody tr.selected {
  background: #203b4c;
}

@media (prefers-reduced-motion: no-preference) {
  .app-header, .summary div, .dashboard, .chart-panel, .inventory-panel, .site-footer {
    animation: rise-in .42s ease both;
  }
  .summary div:nth-child(2) { animation-delay: .04s; }
  .summary div:nth-child(3) { animation-delay: .08s; }
  .summary div:nth-child(4) { animation-delay: .12s; }
  .dashboard { animation-delay: .1s; }
  .workspace { animation: rise-in .45s ease .15s both; }
  button, .profile-chip, .dashboard-card, .allocation-segment { transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
  button:not(:disabled):hover { transform: translateY(-1px); }
  .profile-chip:hover, .dashboard-card:hover { transform: translateY(-1px); border-color: #4e7890; box-shadow: 0 5px 14px rgba(0, 0, 0, .18); }
  .allocation-segment:hover { filter: brightness(1.1); }
  @keyframes rise-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

  .app-header::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: #62c9ff;
    content: '';
    opacity: .42;
    transform-origin: left;
    animation: header-line 2.8s ease-in-out infinite;
  }

  .app-header h1::before { animation: mark-settle .55s cubic-bezier(.2,.8,.2,1) both, mark-glow 3s ease-in-out .6s infinite; }

  .site-nav a { position: relative; transition: color .18s ease; }
  .site-nav a::after {
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    height: 1px;
    background: #62c9ff;
    content: '';
    opacity: 0;
    transform: scaleX(0);
    transition: opacity .18s ease, transform .18s ease;
  }
  .site-nav a:hover::after { opacity: 1; transform: scaleX(1); }

  .summary div, .dashboard-card, .profile-chip { will-change: transform; }
  button { position: relative; isolation: isolate; overflow: hidden; }
  button::after {
    position: absolute;
    z-index: 0;
    top: -40%;
    width: 28%;
    height: 180%;
    background: #ffffff;
    content: '';
    opacity: 0;
    pointer-events: none;
    transform: translateX(-260%) skewX(-18deg);
    transition: opacity .1s ease, transform .38s ease;
  }
  button:not(:disabled):hover::after { opacity: .12; transform: translateX(560%) skewX(-18deg); }
  button:not(:disabled):active { transform: translateY(0) scale(.98); }
  input, select { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
  input:focus, select:focus { border-color: #62c9ff; box-shadow: 0 0 0 3px rgba(98, 201, 255, .12); }

  #profile-switcher[open] .profile-entry { animation: profile-reveal .28s ease both; }
  #auth-dialog[open] .auth-form { animation: dialog-in .24s ease both; }
  .active-profile img { animation: profile-ring 2.6s ease-in-out infinite; }
  .dashboard-meter i { transform-origin: left; animation: meter-fill .65s ease both; }
  .allocation-segment { transition: opacity .18s ease, filter .18s ease, flex-basis .24s ease; }
  .site-footer a { transition: color .16s ease, transform .16s ease; }
  .site-footer a:hover { transform: translateY(-1px); }
  .inventory-panel tbody tr { animation: row-in .34s ease both; }
  .inventory-panel tbody tr:nth-child(1) { animation-delay: .03s; }
  .inventory-panel tbody tr:nth-child(2) { animation-delay: .06s; }
  .inventory-panel tbody tr:nth-child(3) { animation-delay: .09s; }
  .inventory-panel tbody tr:nth-child(4) { animation-delay: .12s; }
  .inventory-panel tbody tr:nth-child(5) { animation-delay: .15s; }
  .inventory-panel tbody tr:nth-child(6) { animation-delay: .18s; }
  .inventory-panel tbody tr:nth-child(7) { animation-delay: .21s; }
  .inventory-panel tbody tr:nth-child(8) { animation-delay: .24s; }
  .inventory-panel tbody tr:nth-child(9) { animation-delay: .27s; }
  .inventory-panel tbody tr:nth-child(10) { animation-delay: .30s; }

  .inventory-panel tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 #62c9ff; }
  .table-wrap { scroll-behavior: smooth; scrollbar-color: #365b70 #0c171f; scrollbar-width: thin; }
  .table-wrap::-webkit-scrollbar { width: 9px; height: 9px; }
  .table-wrap::-webkit-scrollbar-track { background: #0c171f; border-radius: 9px; }
  .table-wrap::-webkit-scrollbar-thumb { background: #365b70; border: 2px solid #0c171f; border-radius: 9px; }
  .table-wrap::-webkit-scrollbar-thumb:hover { background: #4c819b; }

  #status:not(:empty) { animation: status-in .25s ease both; }
  .processing-progress progress { animation: progress-pulse 1.8s ease-in-out infinite; }
  .chart-wrap canvas { animation: chart-in .55s ease .18s both; }

  @keyframes row-in { from { opacity: 0; transform: translateX(4px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes status-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes chart-in { from { opacity: 0; transform: scaleY(.985); } to { opacity: 1; transform: scaleY(1); } }
  @keyframes header-line { 0%, 100% { opacity: .2; transform: scaleX(.25); } 50% { opacity: .65; transform: scaleX(.72); } }
  @keyframes progress-pulse { 0%, 100% { opacity: .76; } 50% { opacity: 1; } }
  @keyframes profile-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes profile-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(98, 201, 255, .22); } 50% { box-shadow: 0 0 0 5px rgba(98, 201, 255, 0); } }
  @keyframes meter-fill { from { transform: scaleX(.04); } to { transform: scaleX(1); } }
  @keyframes mark-settle { from { opacity: 0; transform: rotate(-12deg) scale(.7); } to { opacity: 1; transform: rotate(0) scale(1); } }
  @keyframes mark-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(98, 201, 255, 0); } 50% { box-shadow: 0 0 0 4px rgba(98, 201, 255, .13); } }
}

.summary {
  margin: 3px 0 6px !important;
  gap: 6px !important;
}

.summary div {
  min-height: 46px !important;
  padding: 6px 10px !important;
}

.summary span { font-size: 11px !important; }
.summary strong { margin-top: 1px !important; font-size: 18px !important; }

.workspace.workspace {
  grid-template-columns: minmax(235px, 255px) minmax(0, 1fr) !important;
  gap: 8px !important;
}

.chart-panel { padding: 9px !important; }
.chart-panel .chart-heading { margin-bottom: 4px; }
.chart-panel .selected-name { min-height: 34px; font-size: 13px; }
.chart-panel .chart-wrap canvas { height: 168px !important; }
.chart-panel .market-analysis { margin-top: 7px; padding: 7px; }
.chart-panel .metrics { margin: 6px 0; }

.chart-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin: -4px 0 8px;
  padding: 3px;
  border: 1px solid #294656;
  border-radius: 6px;
  background: #0c171f;
}

.chart-mode button {
  padding: 5px 7px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #91aebb;
  font-size: 11px;
}

.chart-mode button.active { background: #21475c; color: #eff9ff; }
.analysis-confidence { margin-left: 6px; color: #9eb5c0; font-size: 11px; }
.analysis-note { margin: 7px 0; color: #b8ccd6; font-size: 12px; }

.inventory-panel { padding: 10px !important; }
.inventory-heading { margin-bottom: 5px !important; }
.inventory-heading h2 { font-size: 18px !important; }
.toolbar { grid-template-columns: minmax(210px, 1fr) 145px 130px 150px auto 38px auto auto !important; }
.table-wrap { margin-top: 7px !important; }
.inventory-panel th, .inventory-panel td { padding: 9px 7px !important; }

@media (max-width: 1180px) {
  .workspace.workspace { grid-template-columns: 1fr !important; }
  .chart-panel .chart-wrap canvas { height: 210px !important; }
}

@media (max-width: 720px) {
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .summary strong { font-size: 16px !important; }
  .toolbar { grid-template-columns: 1fr !important; }
  .site-nav { display: none; }
  .site-footer { grid-template-columns: 1fr; gap: 8px; }
  .site-footer nav { justify-content: flex-start; }
}

.welcome-copy {
  max-width: 760px;
  margin: 13px 0 2px;
  padding-left: 12px;
  border-left: 2px solid var(--blue);
}

.welcome-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.2;
}

.welcome-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.welcome-copy .welcome-note {
  color: #b8c8d0;
  font-size: 12px;
}

main:has(#result:not([hidden])) .welcome-copy {
  display: none;
}

@media (max-width: 720px) {
  .welcome-copy {
    margin-top: 10px;
    padding-left: 10px;
  }

  .welcome-copy h2 { font-size: 16px; }
  .welcome-copy p { font-size: 12px; }
}

body {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.profile-entry {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 7px !important;
  margin: 12px 0 6px !important;
  padding: 10px !important;
  border: 1px solid #315164;
  border-radius: 8px;
  background: #101b25;
}

.profile-entry .profile-label {
  display: block !important;
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  color: #a9c3cf;
  font-size: 12px;
  font-weight: 650;
}

.profile-entry #url { height: 42px; border-color: #35566a; background: #0c171f; }
.profile-entry [type="submit"] { min-width: 172px; height: 42px; }
.profile-entry #save-profile { height: 42px; white-space: nowrap; }
main:has(#result[hidden]) #save-profile { display: none; }
#status:empty { display: none; }

.seo-guide {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 64px 0 58px;
  border-top: 1px solid #203846;
}

.seo-guide-heading { max-width: 780px; }
.seo-guide h2 { margin: 7px 0 10px; color: #f2f8fa; font-size: 28px; letter-spacing: 0; }
.seo-guide-heading > p:last-child { margin: 0; color: #a9bdc8; font-size: 16px; line-height: 1.6; }

.seo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 42px;
  margin-top: 34px;
  border-top: 1px solid #203846;
}

.seo-grid article { padding: 24px 0; border-bottom: 1px solid #203846; }
.seo-grid h3, .faq h3 { margin: 0 0 8px; color: #dff4ff; font-size: 17px; letter-spacing: 0; }
.seo-grid p, .faq p { margin: 0; color: #9fb5c0; line-height: 1.7; }

.faq { max-width: 820px; margin-top: 42px; }
.faq > h3 { margin-bottom: 14px; font-size: 21px; }
.faq details { border-top: 1px solid #294351; }
.faq details:last-child { border-bottom: 1px solid #294351; }
.faq summary { padding: 17px 0; color: #dcebf2; font-weight: 700; cursor: pointer; }
.faq details p { padding: 0 0 18px; }

.site-footer {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 24px 0 34px;
}

.noscript-note { margin: 12px 0; color: var(--gold); }

@media (max-width: 720px) {
  .profile-entry { grid-template-columns: 1fr !important; }
  .profile-entry .profile-label { grid-column: auto !important; }
  .profile-entry [type="submit"], .profile-entry #save-profile { width: 100%; }
  .seo-guide, .site-footer { width: min(100% - 28px, 1180px); }
  .seo-guide { padding: 44px 0 40px; }
  .seo-guide h2 { font-size: 23px; }
  .seo-grid { grid-template-columns: 1fr; gap: 0; margin-top: 26px; }
  .seo-grid article { padding: 20px 0; }
}