:root{
  --bg:#120b07; --bg2:#0f0a06;
  --paper:#1b120b; --txt:#f3e7d3; --mut:#cbb89b; --line:rgba(243,231,211,.12);
  --brass:#c8a14a; --copper:#b56a3a;
  --ok:#35d07f; --warn:#f2e06a; --mid:#f0b84a; --bad:#ef5a5a;
  --shadow: 0 14px 40px rgba(0,0,0,.55);
  --r:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--txt); font-family:"IM Fell English", serif;
  background:
    radial-gradient(900px 600px at 20% -10%, rgba(200,161,74,.18), transparent 55%),
    radial-gradient(900px 650px at 85% 10%, rgba(181,106,58,.15), transparent 55%),
    radial-gradient(700px 500px at 55% 95%, rgba(243,231,211,.06), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
.wrap{max-width:1180px;margin:0 auto;padding:14px}
.hero{
  position:relative;border:1px solid var(--line);
  border-radius: calc(var(--r) + 6px);overflow:hidden;
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.hd{
  padding:12px 14px;border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.title{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.title strong{font-family:"Cinzel",serif;font-size:16px;letter-spacing:.7px;text-transform:uppercase}
.small{font-size:12px;color:var(--mut);line-height:1.35}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(200,161,74,.18), rgba(0,0,0,.10));
  color:var(--txt);padding:8px 10px;border-radius:12px;font-weight:800;
  cursor:pointer;letter-spacing:.25px;
}
.btn:active{transform:translateY(1px)}
.btn.ghost{background: rgba(255,255,255,.03)}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 9px;border:1px solid var(--line);border-radius:999px;
  color:var(--mut);font-size:12px;background: rgba(0,0,0,.12);
}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.badge{
  padding:6px 10px;border-radius:999px;font-weight:950;font-size:12px;letter-spacing:.6px;
  border:1px solid var(--line);background: rgba(0,0,0,.14);
  display:inline-flex;align-items:center;gap:6px;
}
.badge.ok{color:var(--ok); border-color: rgba(53,208,127,.35); background: rgba(53,208,127,.12)}
.badge.warn{color:var(--warn); border-color: rgba(242,224,106,.35); background: rgba(242,224,106,.12)}
.badge.mid{color:var(--mid); border-color: rgba(240,184,74,.35); background: rgba(240,184,74,.12)}
.badge.bad{color:var(--bad); border-color: rgba(239,90,90,.35); background: rgba(239,90,90,.12)}

.bd{padding:14px}
.grid{display:grid;gap:12px}
@media(min-width:960px){.grid{grid-template-columns:1.1fr .9fr}}

.card{
  position:relative;border:1px solid var(--line);border-radius: var(--r);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.08)),
    radial-gradient(900px 300px at 30% 0%, rgba(200,161,74,.08), transparent 60%);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  overflow:hidden;
}
.cardHd{padding:10px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cardBd{padding:12px}

table{width:100%;border-collapse:collapse;font-size:12px}
th,td{padding:8px 7px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--mut);font-weight:800;font-family:"Cinzel",serif;letter-spacing:.4px}

.dayLists{display:grid;gap:10px}
.dayPanel{border:1px solid var(--line);border-radius:14px;background: rgba(0,0,0,.12);overflow:hidden}
.dayPanelTop{padding:10px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dayPanelTop .left{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dayPanelTop strong{font-size:12px;letter-spacing:.35px;font-family:"Cinzel",serif}
.dayScroll{max-height:230px;overflow:auto;padding:10px;border-top:1px solid var(--line)}
.detailLine{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed rgba(243,231,211,.10);font-size:12px}
.detailLine:last-child{border-bottom:none}

.gauge{height:10px;border-radius:999px;border:1px solid var(--line);background: rgba(0,0,0,.18);overflow:hidden;margin-top:8px}
.gauge > div{height:100%}
.gauge.ok > div{background: linear-gradient(90deg, rgba(53,208,127,.15), rgba(53,208,127,.55))}
.gauge.warn > div{background: linear-gradient(90deg, rgba(242,224,106,.15), rgba(242,224,106,.55))}
.gauge.mid > div{background: linear-gradient(90deg, rgba(240,184,74,.15), rgba(240,184,74,.55))}
.gauge.bad > div{background: linear-gradient(90deg, rgba(239,90,90,.15), rgba(239,90,90,.55))}

.ornament{height:14px;margin:10px 0 0;opacity:.75;background:
  radial-gradient(circle at 50% 50%, rgba(200,161,74,.35), transparent 55%),
  linear-gradient(90deg, transparent, rgba(243,231,211,.12), transparent);
  position:relative;
}
.ornament:before,.ornament:after{content:"";position:absolute;top:50%;width:32%;height:1px;background:rgba(200,161,74,.25)}
.ornament:before{left:0}.ornament:after{right:0}