:root {
  --bg: #15171b;
  --panel: #20242a;
  --panel-2: #252a31;
  --line: #3b414b;
  --text: #f4f4f2;
  --muted: #aeb5bf;
  --orange: #f6a23a;
  --orange-2: #ffd08a;
  --green: #62d97b;
  --red: #ff6b6b;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% -10%, #2b2f36, var(--bg) 42%); color: var(--text); font-family: "Segoe UI", Arial, sans-serif; overflow: hidden; }
.dashboard-shell { width: 100vw; height: 100vh; padding: 8px 18px 14px; display: grid; grid-template-rows: 38px 1fr; gap: 8px; }
.topbar { display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 14px; border-bottom: 1px solid #0c0d10; box-shadow: 0 1px 0 #333941; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 32px; height: 28px; display: grid; place-items: center; color: var(--orange); font-weight: 1000; font-size: 24px; transform: skew(-10deg); }
.brand h1 { margin: 0; font-size: 18px; line-height: 1; letter-spacing: .3px; }
.brand p, .clock-box span { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.clock-box { justify-self: start; display: grid; line-height: 1; }
.clock-box strong { font-size: 15px; letter-spacing: .8px; }
.top-actions { display: flex; align-items: center; gap: 18px; color: #d7dce3; }
.top-actions a { color: inherit; text-decoration: none; }
.content { min-height: 0; display: grid; grid-template-rows: 126px 1fr; gap: 8px; }
.chart-panel, .data-panel { background: linear-gradient(180deg, #23272e, #1c2026); border: 1px solid var(--line); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 18px 50px rgba(0,0,0,.25); position: relative; overflow: hidden; }
.section-title { position: absolute; top: 6px; left: 10px; z-index: 1; font-weight: 800; font-size: 15px; text-shadow: 0 1px 2px #000; }
#yieldChart { width: 100%; height: 100%; display: block; }
.data-panel { padding-top: 24px; display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; padding: 0 10px 8px; }
.summary-grid div { border: 1px solid #3a414b; border-radius: 8px; background: #1b1f25; padding: 8px 12px; }
.summary-grid span { display: block; color: var(--muted); font-size: 12px; }
.summary-grid strong { display: block; margin-top: 2px; color: var(--orange-2); font-size: 18px; }
.table-wrap { min-height: 0; overflow: auto; border-top: 1px solid var(--line); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
th, td { border-right: 1px solid #3c424b; border-bottom: 1px solid #343a43; padding: 5px 10px; white-space: nowrap; }
th { position: sticky; top: 0; z-index: 2; background: linear-gradient(180deg, #3a3f47, #2f343c); color: #f6f6f6; text-align: left; font-weight: 900; }
td { background: rgba(35, 39, 45, .92); color: #f0f0ef; }
tr:nth-child(even) td { background: rgba(29, 33, 39, .95); }
tr.report-row { cursor: pointer; }
tr.report-row:hover td { background: rgba(55, 63, 73, .98); }
td.num, th.num { text-align: right; }
td.center { text-align: center; }
.status { display: inline-flex; align-items: center; justify-content: center; min-width: 86px; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 800; color: #15171b; background: var(--orange-2); }
.status.done { background: var(--green); }
.status.wait { background: #adb5bd; }
.report-context-menu { position: fixed; z-index: 80; min-width: 150px; border: 1px solid #4c5562; border-radius: 10px; background: #242a31; box-shadow: 0 18px 42px rgba(0,0,0,.45); padding: 6px; }
.report-context-menu[hidden] { display: none; }
.report-context-menu button { width: 100%; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-weight: 800; text-align: left; padding: 10px 12px; cursor: pointer; }
.report-context-menu button:hover { background: rgba(246,162,58,.18); color: var(--orange-2); }
.detail-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(6, 8, 12, .72); padding: 18px; }
.detail-modal[hidden] { display: none; }
.detail-card { width: min(96vw, 1480px); max-height: 88vh; display: grid; grid-template-rows: auto 1fr; background: linear-gradient(180deg, #252a31, #181c22); border: 1px solid #4b5563; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.55); overflow: hidden; }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.detail-head h2 { margin: 0; font-size: 20px; }
.detail-head p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.detail-head button { border: 1px solid #56606d; border-radius: 9px; background: #303740; color: var(--text); padding: 8px 14px; font-weight: 800; cursor: pointer; }
.detail-head button:hover { border-color: var(--orange); color: var(--orange-2); }
.detail-table-wrap { min-height: 0; max-height: 72vh; overflow: auto; }
.detail-table { min-width: 1680px; font-size: 13px; }
.detail-table th:first-child, .detail-table td:first-child { position: sticky; left: 0; z-index: 3; }
.detail-table td:first-child { background: #232932; }
.detail-table th:first-child { background: linear-gradient(180deg, #3a3f47, #2f343c); }
@media (max-width: 900px) { body { overflow: auto; } .dashboard-shell { height: auto; min-height: 100vh; } .topbar { grid-template-columns: 1fr; height: auto; padding-bottom: 8px; } .content { grid-template-rows: 160px 1fr; } .summary-grid { grid-template-columns: repeat(2, 1fr); } }