:root{
  --bg:#f6f6f6;
  --card:#ffffff;
  --text:#1a1a1a;
  --muted:#666;
  --line:#e5e5e5;
  --accent:#c40000; /* darts-red vibe */
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.wrap{max-width:980px;margin:0 auto;padding:18px}

.site-header .header-image{
  width:100%;
  height:440px;
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
  border-bottom:1px solid var(--line);
  background-color:#000;
}

select{
  width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;
  outline:none;background:#fff
}
select:focus{border-color:#bbb}

.muted{color:var(--muted);font-size:.9rem;margin-bottom:6px}
.value{font-weight:800;font-size:1.1rem}
.card h2{margin:0 0 10px 0}

.header-bar{background:#fff;border-bottom:1px solid var(--line)}
.header-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-logo{display:flex;align-items:center}
.brand-logo img{display:block;max-width:50%;height:auto}
.nav a{color:var(--text);text-decoration:none;margin-left:14px;padding:10px 0;display:inline-block}
.nav a.active{border-bottom:3px solid var(--accent)}

.page-title{margin:18px 0 6px 0}
.page-sub{margin:0 0 18px 0;color:var(--muted)}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tabs{display:flex;border-bottom:1px solid var(--line);background:#fafafa}
.tab{flex:1;padding:14px 12px;border:0;background:transparent;font-weight:700;cursor:pointer}
.tab.active{background:#fff;border-bottom:3px solid var(--accent)}

.tabpanes{padding:16px}
.pane{display:none}
.pane.active{display:block}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
label span{display:block;font-size:.9rem;margin-bottom:6px;color:var(--muted)}
input{
  width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;
  outline:none;background:#fff
}
input:focus{border-color:#bbb}

.btn{
  background:var(--accent);color:#fff;border:0;border-radius:10px;
  padding:12px 16px;font-weight:800;cursor:pointer
}
.btn:hover{filter:brightness(.95)}

.alert{padding:12px 14px;border-radius:10px;margin:10px 0}
.alert-error{background:#ffecec;border:1px solid #ffb3b3}
.alert-ok{background:#ecfff0;border:1px solid #a7f0b5}

.hint{margin:10px 0 0 0;color:var(--muted);font-size:.95rem}

@media (max-width:720px){
  .grid{grid-template-columns:1fr}
  .site-header .header-image{height:170px}
}