html, body { margin: 0; height: 100%; background: #050706; }

/* The terminal's outline, drawn by the browser from the first byte: the
   header, the coin list, the coin page and the trade column, in the
   terminal's own sizes and colours (lib/web_terminal.dart, ExfilSite), so
   the page isn't blank while Flutter's engine loads. boot.js removes
   it on Flutter's first frame. */
#boot {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  color: #F5F3F0; pointer-events: none;
}
#boot header {
  height: 64px; flex: none; display: flex; align-items: center; gap: 12px;
  padding: 0 24px; box-sizing: border-box;
}
#boot .logo { font: 800 20px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; }
#boot .tag {
  font: 600 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .1em; padding: 5px 9px;
  border-radius: 999px; border: 1px solid #2A3633; color: #B9F27C;
}
#boot .tag.beta { color: #F2B54E; }
#boot .search {
  flex: 1; max-width: 620px; height: 40px; margin-left: 24px;
  border-radius: 999px; border: 1px solid #1C2422;
}
#boot main {
  flex: 1; display: flex; gap: 12px; padding: 0 12px 48px; min-height: 0;
}
#boot section {
  border-radius: 20px; border: 1px solid #1C2422;
  background: linear-gradient(#121A18, #0B100F);
  display: flex; flex-direction: column; gap: 14px; padding: 20px;
  box-sizing: border-box; overflow: hidden;
}
#boot .coins { width: 264px; flex: none; }
#boot .page { flex: 1; }
#boot .trade { width: 344px; flex: none; }
#boot .bar {
  height: 14px; border-radius: 7px; background: #1C2422;
  animation: boot-glow 1.4s ease-in-out infinite;
}
#boot .bar.wide { height: 44px; border-radius: 12px; }
#boot .bar.chart { flex: 1; border-radius: 14px; }
#boot .bar.pill { height: 52px; border-radius: 999px; background: #2A3633; }
@keyframes boot-glow { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { #boot .bar { animation: none; } }
@media (min-width: 1440px) {
  #boot .coins { width: 312px; }
  #boot .trade { width: 384px; }
}
/* Under three columns the coin list folds into the search box. */
@media (max-width: 1179px) { #boot .coins { display: none; } }
@media (max-width: 760px) { #boot .trade { display: none; } #boot .search { display: none; } }

/* Edge's enhanced security note (boot.js), over the outline and the app
   alike: bottom left, above the status bar, inside the coin list's width
   (264 px, 312 px from 1440), clear of the app's own toasts (bottom right,
   lib/web_terminal.dart). */
#edge-note {
  position: fixed; left: 20px; bottom: 48px; z-index: 2147483647;
  width: min(248px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 14px 44px 14px 14px; border-radius: 14px;
  border: 1px solid #2A3633; background: #121A18; color: #F5F3F0;
  font: 400 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
#edge-note strong { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 700; color: #F2B54E; }
#edge-note p { margin: 0 0 12px; color: #A3ADA6; }
#edge-note button { font: inherit; cursor: pointer; }
#edge-note .reload {
  padding: 8px 16px; border: 0; border-radius: 999px;
  background: #B9F27C; color: #0E1808; font-weight: 700;
}
#edge-note .close {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
  border: 0; border-radius: 50%; background: none; color: #A3ADA6; font-size: 18px; line-height: 1;
}
#edge-note .close:hover { background: #1C2422; color: #F5F3F0; }
@media (min-width: 1440px) { #edge-note { width: 296px; } }
@media (max-width: 1179px) { #edge-note { width: min(320px, calc(100vw - 32px)); } }
@media (max-width: 760px) { #edge-note { left: 16px; bottom: 16px; } }