/* BIM Middle East web theme for the pages this backend serves (login,
   auth/complete, download). Values taken from bim-me.com's own stylesheets:
     header   : near-black band (#000 -> #191919), 4px #3F3F3F rule beneath
     content  : light grey wash fading to white (bg-content.png)
     accent   : #BF1F25 red (headings, links, white-on-red title bars), #B50007 darker
     text     : #3F3F3F dark, #727272 body, Arial
     footer   : #F4F4F4 with a #CCCCCC rule
   The site is light-only, so there is no dark variant. */

:root {
  --red: #bf1f25;
  --red-dark: #b50007;
  --red-soft: rgba(191, 31, 37, .10);
  --ink: #191919;
  --dark: #3f3f3f;
  --text: #727272;
  --text-strong: #3f3f3f;
  --line: #c9cfcd;
  --line-soft: #e0e0e0;
  --page: #ffffff;
  --footer: #f4f4f4;
  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--font); font-size: 13px; line-height: 1.5;
  color: var(--text); background: var(--page);
  -webkit-font-smoothing: antialiased;
}

/* Header band, as on the site: black, dark-grey rule below, and the site's
   brand block as its body.css lays it out (.Display-LogoSlogan): the logo
   (91x100, served at 2x from the high-resolution artwork) and, 5px to its
   right, the site's slogan image (75x44) centred on the logo's height. */
.site-header {
  background: linear-gradient(#000000 0, #191919 10px, #191919 60%, #2a2a2a 80%, #191919 100%);
  border-bottom: 4px solid var(--dark);
}
.site-header .inner {
  max-width: 980px; margin: 0 auto; padding: 24px 24px 20px;
  display: flex; align-items: flex-start;
}
.site-header .brand { display: flex; align-items: center; }
.site-header .brand a { display: block; line-height: 0; }
.site-header .brand .logo img { width: 82px; height: 100px; }
.site-header .brand .slogan { margin: 0 0 0 5px; }
.site-header .brand .slogan img { width: 75px; height: 44px; }
/* The site's top links: Verdana 11px #727272, 30px down from the top. */
.site-header .site-link {
  margin-left: auto; margin-top: 30px;
  font-family: Verdana, Arial, sans-serif; font-size: 11px; color: #727272; text-decoration: none;
}
.site-header .site-link:hover { text-decoration: underline; }

/* Content area: the site's grey wash fading to white. */
.site-main {
  flex: 1; display: flex; align-items: flex-start; justify-content: center;
  padding: 44px 24px 56px;
  background: linear-gradient(#c9c9c9 0, #c8c8c8 60px, rgba(178,178,178,.55) 300px, #ffffff 487px);
}

/* Card */
.card {
  width: 100%; max-width: 400px; background: #ffffff;
  border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,.10);
  padding: 26px 30px 30px; text-align: left;
}
.card .title {
  margin: 0 0 6px; font-size: 18px; font-weight: bold; color: var(--red);
  text-transform: capitalize;
}
.card .lead { margin: 0 0 20px; font-size: 13px; color: var(--text); }
.card.centered { text-align: center; }

/* Red title bar with white text (the site's section headers). */
.bar {
  background: var(--red); color: #ffffff; font-weight: bold; font-size: 14px;
  padding: 0 15px; height: 44px; line-height: 44px; margin: 0 0 18px;
}

/* Form */
.lbl { display: block; font-size: 12px; font-weight: bold; color: var(--text-strong); margin: 0 0 5px; }
.field + .lbl, .pw + .lbl { margin-top: 14px; }
.field {
  width: 100%; padding: 9px 10px; font-family: var(--font); font-size: 13px;
  color: var(--ink); background: #ffffff; border: 1px solid var(--line);
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.field::placeholder { color: #b3b3b3; }
.field:focus { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-soft); }
.pw { position: relative; }
.pw .field { padding-right: 60px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  padding: 5px 8px; background: transparent; color: var(--text);
  font-family: var(--font); font-size: 11px; font-weight: bold;
  border: none; cursor: pointer;
}
.pw-toggle:hover { color: var(--red); text-decoration: underline; }

/* Buttons: white bold text on the site red. */
.btn {
  display: block; width: 100%; margin-top: 20px; padding: 11px 20px;
  font-family: var(--font); font-size: 14px; font-weight: bold; color: #ffffff;
  background: var(--red); border: none; text-align: center; text-decoration: none;
  cursor: pointer; transition: background-color .15s ease;
}
.btn:hover { background: var(--red-dark); }
.btn:active { background: #8f0006; }
.btn:disabled { opacity: .6; cursor: default; }

/* Messages */
.err { display: none; margin-top: 12px; color: var(--red); font-size: 12px; font-weight: bold; text-align: center; }
.hint { margin-top: 14px; text-align: center; font-size: 11px; color: var(--text); }
.hint a { color: var(--red); text-decoration: none; }
.hint a:hover { text-decoration: underline; }

/* Status (auth/complete) */
.ring {
  width: 40px; height: 40px; margin: 6px auto 16px; border-radius: 50%;
  border: 3px solid var(--line-soft); border-top-color: var(--red);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.badge { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px; display: none; align-items: center; justify-content: center; font-size: 26px; font-weight: bold; }
.badge.ok { background: #e6f4ea; color: #1f7a33; }
.badge.bad { background: var(--red-soft); color: var(--red); }
.status-title { margin: 0 0 6px; font-size: 18px; font-weight: bold; color: var(--text-strong); }
.status-detail { margin: 0; font-size: 13px; color: var(--text); }

/* Download details */
.meta { margin: 0; padding: 12px 14px; background: #f4f4f4; border: 1px solid var(--line-soft); font-size: 12px; }
.meta dt { font-weight: bold; color: var(--text-strong); margin-top: 8px; }
.meta dt:first-child { margin-top: 0; }
.meta dd { margin: 2px 0 0; color: var(--ink); }
.hash { font-family: Consolas, "Courier New", monospace; font-size: 11px; word-break: break-all; color: var(--text); }
.steps { margin: 16px 0 0; padding-left: 18px; font-size: 12px; color: var(--text); }
.steps li { margin-bottom: 4px; }
.ready { display: none; }

/* Footer, as on the site. */
.site-footer {
  background: var(--footer); border-top: 1px solid #cccccc;
  padding: 16px 24px; font-size: 11px; color: var(--text); text-align: center;
}
.site-footer a { color: var(--red); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

@media (max-width: 520px) {
  .site-header .inner { padding: 16px 16px 14px; }
  .site-header .site-link { display: none; }
  .site-main { padding: 28px 16px 40px; }
  .card { padding: 22px 20px 24px; }
}