/* SOMER Blink v1 — dark EVE-space UI.
   Anchors: body #2d2d2d, cards #1d1d1d, deep #0d0d0d / raised #3d3d3d,
   gold #f5c518 (ticker in literal gold), link blue #039/#0f5799,
   bright blue #57aeff. Arial UI, Georgia serif display, Consolas timers. */
body { background: #2d2d2d; color: #fff; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; margin: 0; font-size: 14px; }
a { color: #57aeff; text-decoration: none; }
a:hover { text-decoration: underline; }
.serif, h1.serif, h2.serif, h3.serif { font-family: Cambria, Georgia, serif; }
.dim { color: #8d8d8d; }
.gold-italic { color: gold; font-style: italic; }
#page { max-width: 760px; margin: 0 auto; padding: 12px 12px 80px; }

#site-header { text-align: center; margin-bottom: 8px; }
.wordmark img { max-width: 420px; width: 90%; height: auto; }
#main-nav { margin: 8px 0; }
#main-nav a { margin: 0 10px; color: #57aeff; }
#account-bar { background: #1d1d1d; border-radius: 8px; padding: 6px 12px; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.acct-name { font-weight: bold; }
.isk-amount { color: #fff; font-family: Consolas, "Lucida Console", monospace; }
.credit-amount { color: gold; font-family: Consolas, "Lucida Console", monospace; }
.inline-form { display: inline; margin: 0; }
.faucet-btn { background: #0f5799; color: #fff; border: 1px solid #57aeff; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-weight: bold; }
.link-btn { background: none; border: none; color: #57aeff; cursor: pointer; font-size: 14px; }

#ticker { background: #0d0d0d; border: 1px solid #3d3d3d; border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
#ticker .coin { color: gold; }
#winnings big { color: gold !important; font-family: Consolas, "Lucida Console", monospace; }
.ticker-latest { margin-left: 12px; color: #8d8d8d; }
#blink_systemmessage { background: #3d3d3d; border-left: 4px solid gold; padding: 8px 12px; margin: 8px 0; border-radius: 0 8px 8px 0; }

.blink-card { background: #1d1d1d; border: 1px solid #3d3d3d; border-radius: 10px; margin: 14px 0; padding: 12px; overflow: hidden; }
.winner-banner { background: #0d0d0d; border-bottom: 2px solid gold; margin: -12px -12px 10px; padding: 8px 12px; display: flex; gap: 10px; align-items: center; }
.winner-name { font-weight: bold; color: gold; }
.blink-main { display: flex; gap: 12px; }
.blink-render { border-radius: 6px; background: #0d0d0d; flex-shrink: 0; }
.blink-title { margin: 0 0 6px; font-size: 16px; font-family: Cambria, Georgia, serif; }
.blink-title a { color: #fff; }
.active-count { font-family: Consolas, "Lucida Console", monospace; color: #57aeff; }
.prize-value { color: gold; }
.completed-in { font-family: Consolas, "Lucida Console", monospace; color: #fff; }
.show-info-btn { background: #3d3d3d; color: #fff; border: 1px solid #5d5d5d; border-radius: 4px; cursor: pointer; }
.item-desc { color: #bdbdbd; font-size: 13px; }

.tickets { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0; margin: 10px 0 0; }
.ticket { background: #0d0d0d; border: 1px solid #3d3d3d; border-radius: 6px; padding: 6px; text-align: center; min-height: 44px; }
.ticket.open { border-style: dashed; }
.ticket.taken { border-color: #0f5799; }
.ticket.me { border-color: gold; box-shadow: 0 0 4px gold; }
.ticket.winner { border-color: gold; background: #2a2305; }
.ticket-num { display: block; font-family: Consolas, "Lucida Console", monospace; color: #8d8d8d; }
.ticket strong { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.winner-mark { color: gold; font-size: 18px; }
.blink-btn { background: #f5c518; border: none; border-radius: 4px; padding: 4px 12px; font-weight: bold; cursor: pointer; }
.pay-toggle select { background: #3d3d3d; color: #fff; border: 1px solid #5d5d5d; border-radius: 4px; }
.open-mark { color: #5d5d5d; font-style: italic; }
/* Roulette sides: blue column, gold column, single black ticket. */
.roulette-grid .tickets { grid-template-columns: repeat(3, 1fr); }
.ticket.side-blue { border-left: 4px solid #1a8ac9; }
.ticket.side-gold { border-left: 4px solid gold; }
.ticket.side-black { border-left: 4px solid #000; background: #000; }

.avatar { display: inline-block; width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 4px; background: #0f5799; color: #fff; font-weight: bold; border: 1px solid #57aeff; vertical-align: middle; }
.avatar-lg { width: 48px; height: 48px; line-height: 48px; font-size: 20px; }

/* Blinkbar: 30px strip pinned to the bottom; drawer slides up. */
#blinkbar-strip { position: fixed; left: 0; right: 0; bottom: 0; height: 30px; background: #0d0d0d; border-top: 1px solid gold; text-align: center; z-index: 50; }
#blinkbar-toggle { background: none; border: none; color: #fff; height: 30px; cursor: pointer; font-size: 14px; }
#blinkbar-toggle .add-icon { color: gold; font-weight: bold; }
#blinkbar-drawer { position: fixed; left: 50%; transform: translateX(-50%); bottom: 30px; width: min(720px, 96vw); max-height: 62vh; overflow: auto; background: #1d1d1d; border: 1px solid gold; border-radius: 10px 10px 0 0; z-index: 51; padding: 10px; }
#blinkbar-drawer-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #3d3d3d; padding-bottom: 6px; margin-bottom: 8px; }
.close-btn { background: #8a1f11; color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; }
.blinkbar-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.blinkbar-col { background: #0d0d0d; border-radius: 6px; padding: 6px; max-height: 44vh; overflow: auto; }
.group-list, .item-list { list-style: none; margin: 6px 0 0; padding: 0; }
.group-list button, .item-list button { display: flex; gap: 8px; align-items: center; width: 100%; background: none; border: none; color: #fff; text-align: left; padding: 4px; cursor: pointer; border-radius: 4px; }
.group-list button:hover, .item-list button:hover, .item-list button.selected { background: #0f5799; }
#just_a_quickie_search { width: 100%; box-sizing: border-box; background: #3d3d3d; border: 1px solid #5d5d5d; color: #fff; border-radius: 4px; padding: 4px; }
.details-panel .open-btn, .details-panel .roulette-btn, .details-panel .random-btn { display: block; width: 100%; margin: 6px 0; padding: 8px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
.open-btn { background: #f5c518; color: #1d1d1d; }
.roulette-btn { background: #0f5799; color: #fff; }
.random-btn { background: #3d3d3d; color: gold; border: 1px solid gold; }

/* Achievements: five tabs, yellow progress bars, credit labels. */
.ach-tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.ach-tab { background: #3d3d3d; color: #fff; padding: 6px 12px; border-radius: 6px 6px 0 0; }
.ach-tab.active { color: gold; background: #1d1d1d; border-bottom: 2px solid gold; }
.achievement { display: flex; justify-content: space-between; gap: 12px; background: #1d1d1d; border: 1px solid #3d3d3d; border-radius: 6px; padding: 10px; margin: 8px 0; }
.achievement.gold { border-color: gold; }
.ach-main { flex: 1; }
.ach-name { display: block; font-size: 15px; }
.ach-desc { color: #bdbdbd; font-size: 13px; }
.progress { background: #0d0d0d; border-radius: 4px; height: 14px; margin-top: 6px; overflow: hidden; }
.progress-fill { background: #ffee00; height: 100%; }
.progress-label { color: #5d5d5d; font-size: 12px; font-family: Consolas, "Lucida Console", monospace; }
.ach-credit { color: #fff; font-size: 18px; text-align: right; white-space: nowrap; }
.earned-mark { color: gold; margin-left: 8px; }

/* Toasts (jGrowl's descendant). */
#toasts { position: fixed; top: 12px; right: 12px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #0d0d0d; border: 1px solid gold; border-radius: 6px; padding: 10px 14px; max-width: 320px; box-shadow: 0 2px 10px #000; }
.toast-error { border-color: #8a1f11; }

.auth-form { background: #1d1d1d; border-radius: 8px; padding: 16px; max-width: 420px; margin: 20px auto; }
.auth-form label { display: block; margin: 8px 0; }
.auth-form input { display: block; width: 100%; box-sizing: border-box; background: #0d0d0d; border: 1px solid #5d5d5d; color: #fff; border-radius: 4px; padding: 6px; margin-top: 4px; }
.auth-form button { background: #f5c518; border: none; border-radius: 4px; padding: 8px 20px; font-weight: bold; cursor: pointer; margin-top: 8px; }
.form-error { color: #ff8a8a; background: #2a0d0d; padding: 8px; border-radius: 4px; }
.profile-stats { background: #1d1d1d; border-radius: 8px; padding: 12px; }
.win-history, .winner-cards { list-style: none; padding: 0; }
.winner-card { display: flex; gap: 10px; background: #1d1d1d; border: 1px solid #3d3d3d; border-radius: 8px; padding: 10px; margin: 8px 0; }
#site-footer { margin-top: 24px; color: #5d5d5d; font-size: 12px; text-align: center; }