* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Georgia', serif; }
:root {
  --navy: #0d1b2a; --navy2: #1a2d42; --red: #c0392b; --red2: #e74c3c;
  --gold: #f39c12; --white: #f8f9fa; --gray: #8899aa;
  --green: #27ae60; --border: rgba(255,255,255,0.1);
}
body { background: var(--navy); color: var(--white); min-height: 100vh; }
.login-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:2rem; }
.login-logo { font-size:28px; font-weight:700; letter-spacing:2px; color:var(--red2); margin-bottom:4px; }
.login-sub { font-size:12px; color:var(--gray); letter-spacing:3px; text-transform:uppercase; margin-bottom:2rem; }
.login-card { background:var(--navy2); border:1px solid var(--border); border-radius:12px; padding:2rem; width:100%; max-width:380px; }
.login-title { font-size:16px; color:var(--white); margin-bottom:1.5rem; text-align:center; font-weight:400; letter-spacing:1px; }
.field { margin-bottom:1rem; }
.field label { display:block; font-size:11px; color:var(--gray); letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.field input { width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:6px; padding:10px 14px; color:var(--white); font-size:14px; outline:none; }
.field input:focus { border-color:var(--red); }
.btn-primary { width:100%; background:var(--red); border:none; color:white; padding:12px; border-radius:6px; font-size:14px; cursor:pointer; letter-spacing:1px; margin-top:0.5rem; }
.btn-primary:hover { background:var(--red2); }
.error-msg { background:rgba(192,57,43,0.2); border:1px solid var(--red); border-radius:6px; padding:10px 14px; font-size:12px; color:var(--red2); margin-top:1rem; text-align:center; }
.app { min-height:100vh; display:flex; flex-direction:column; }
.topbar { background:var(--navy2); border-bottom:1px solid var(--border); padding:0 1.5rem; height:56px; display:flex; align-items:center; justify-content:space-between; }
.topbar-brand { font-size:18px; font-weight:700; color:var(--red2); letter-spacing:2px; }
.topbar-right { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.role-badge { font-size:10px; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:20px; }
.badge-admin { background:rgba(192,57,43,0.2); color:var(--red2); border:1px solid var(--red); }
.badge-obs { background:rgba(243,156,18,0.15); color:var(--gold); border:1px solid var(--gold); }
.badge-postor { background:rgba(39,174,96,0.15); color:var(--green); border:1px solid var(--green); }
.topbar-user { font-size:12px; color:var(--gray); }
.logout-btn { background:none; border:1px solid var(--border); color:var(--gray); padding:5px 12px; border-radius:6px; cursor:pointer; font-size:11px; }
.logout-btn:hover { border-color:var(--red); color:var(--red2); }
.content { flex:1; padding:1.5rem; max-width:1100px; width:100%; margin:0 auto; }
.card { background:var(--navy2); border:1px solid var(--border); border-radius:10px; padding:1.5rem; margin-bottom:1rem; }
.card-title { font-size:11px; text-transform:uppercase; letter-spacing:2px; color:var(--gray); margin-bottom:0.75rem; }
.timer-row { display:flex; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.timer-box { flex:1; min-width:140px; background:var(--navy2); border:1px solid var(--border); border-radius:10px; padding:1rem; text-align:center; }
.timer-val { font-size:36px; font-weight:700; color:var(--red2); font-family:monospace; }
.timer-label { font-size:10px; color:var(--gray); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }
.timer-status { font-size:11px; padding:4px 12px; border-radius:20px; display:inline-block; margin-top:8px; }
.status-waiting { background:rgba(243,156,18,0.15); color:var(--gold); border:1px solid var(--gold); }
.status-open { background:rgba(39,174,96,0.15); color:var(--green); border:1px solid var(--green); }
.status-closed { background:rgba(192,57,43,0.2); color:var(--red2); border:1px solid var(--red); }
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-card { background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:8px; padding:1rem; text-align:center; }
.stat-val { font-size:24px; font-weight:700; color:var(--white); }
.stat-label { font-size:10px; color:var(--gray); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }
.bids-table { width:100%; border-collapse:collapse; font-size:13px; }
.bids-table th { text-align:left; padding:10px 12px; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--gray); border-bottom:1px solid var(--border); font-weight:400; }
.bids-table td { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.05); }
.bids-table tr:last-child td { border-bottom:none; }
.bids-table tr.top-bid { background:rgba(39,174,96,0.08); }
.winner-tag { font-size:10px; background:rgba(39,174,96,0.15); color:var(--green); border:1px solid var(--green); padding:2px 8px; border-radius:10px; }
.amount-cell { color:var(--white); font-weight:700; font-size:14px; }
.company-cell { color:var(--white); }
.time-cell { color:var(--gray); font-size:11px; }
.bid-form { display:flex; flex-direction:column; gap:1rem; }
.bid-input-row { display:flex; gap:1rem; align-items:flex-end; flex-wrap:wrap; }
.bid-field { flex:1; min-width:180px; }
.bid-field label { display:block; font-size:11px; color:var(--gray); letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.bid-field input, .bid-field textarea { width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:6px; padding:10px 14px; color:var(--white); font-size:14px; outline:none; }
.bid-field input:focus, .bid-field textarea:focus { border-color:var(--green); }
.bid-field textarea { resize:vertical; min-height:60px; }
.btn-bid { background:var(--green); border:none; color:white; padding:12px 24px; border-radius:6px; font-size:13px; cursor:pointer; white-space:nowrap; letter-spacing:1px; }
.btn-bid:hover { background:#2ecc71; }
.bid-success { background:rgba(39,174,96,0.15); border:1px solid var(--green); border-radius:6px; padding:10px 14px; font-size:13px; color:var(--green); margin-top:0.5rem; }
.bid-error { background:rgba(192,57,43,0.15); border:1px solid var(--red); border-radius:6px; padding:10px 14px; font-size:13px; color:var(--red2); margin-top:0.5rem; }
.base-price-note { font-size:12px; color:var(--gray); margin-top:6px; }
.my-bids-list { display:flex; flex-direction:column; gap:8px; }
.my-bid-row { display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:6px; padding:10px 14px; }
.my-bid-row.is-best { border-color:var(--green); background:rgba(39,174,96,0.08); }
.my-bid-amount { font-size:16px; font-weight:700; color:var(--white); }
.my-bid-time { font-size:11px; color:var(--gray); }
.best-tag { font-size:10px; color:var(--green); }
.tabs { display:flex; margin-bottom:1.5rem; border-bottom:1px solid var(--border); }
.tab { padding:10px 20px; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--gray); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab.active { color:var(--red2); border-bottom-color:var(--red2); }
.reg-form { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.users-table { width:100%; border-collapse:collapse; font-size:13px; }
.users-table th { text-align:left; padding:8px 12px; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--gray); border-bottom:1px solid var(--border); font-weight:400; }
.users-table td { padding:8px 12px; border-bottom:1px solid rgba(255,255,255,0.05); color:var(--white); }
.winner-card { background:rgba(39,174,96,0.1); border:2px solid var(--green); border-radius:12px; padding:2rem; text-align:center; margin-bottom:1rem; }
.winner-name { font-size:22px; font-weight:700; color:var(--white); margin-bottom:0.25rem; }
.winner-amount { font-size:36px; font-weight:700; color:var(--green); }
.winner-sub { font-size:12px; color:var(--gray); margin-top:0.5rem; }
.section-title { font-size:20px; font-weight:400; color:var(--white); margin-bottom:0.25rem; }
.section-sub { font-size:12px; color:var(--gray); margin-bottom:1.5rem; letter-spacing:1px; }
.empty-state { text-align:center; padding:2rem; color:var(--gray); font-size:13px; }
.dot-live { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); margin-right:6px; animation:pulse 1.5s infinite; }
.loading { text-align:center; padding:2rem; color:var(--gray); font-size:13px; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
@media(max-width:600px) { .reg-form{grid-template-columns:1fr;} .topbar-user{display:none;} .timer-val{font-size:26px;} }