.drill-hero { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 190px); gap: 12px; margin-bottom: 12px; } .drill-title-card { position: relative; min-height: 118px; padding: 18px; border: 1px solid rgba(91, 180, 255, 0.28); border-radius: var(--radius); background: linear-gradient(135deg, rgba(13, 80, 126, 0.95), rgba(3, 26, 53, 0.92)), repeating-linear-gradient(0deg, rgba(108, 205, 255, 0.04), rgba(108, 205, 255, 0.04) 1px, transparent 1px, transparent 9px); box-shadow: var(--shadow); overflow: hidden; } .drill-title-card h2 { position: relative; margin: 0; font-size: 28px; line-height: 1.2; } .drill-title-card p { position: relative; margin: 10px 0 0; color: #a9cfe5; font-size: 13px; line-height: 1.5; } .drill-card { position: relative; min-height: 118px; padding: 14px; border: 1px solid rgba(91, 180, 255, 0.24); border-radius: var(--radius); background: linear-gradient(180deg, rgba(19, 84, 126, 0.88), rgba(3, 32, 61, 0.92)); box-shadow: var(--shadow); } .drill-card-label { color: #a8cbe1; font-size: 13px; } .drill-card-value { margin-top: 10px; font-family: var(--num); font-size: 32px; font-weight: 900; color: white; } .drill-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(420px, 0.8fr); gap: 12px; align-items: stretch; } .drill-grid.equal { grid-template-columns: 1fr 1fr; } .drill-panel { min-height: 690px; } .rank-list { position: relative; z-index: 1; display: grid; gap: 9px; max-height: 600px; overflow-y: auto; padding-right: 4px; } .rank-row { display: grid; grid-template-columns: 42px 1fr 94px; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid rgba(91, 180, 255, 0.16); border-radius: 13px; background: rgba(1, 21, 42, 0.42); cursor: pointer; } .rank-row:hover { border-color: rgba(91, 214, 255, 0.46); background: rgba(12, 62, 98, 0.62); } .rank-row:not([data-indicator-enterprise]) { cursor: default; } .rank-index { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 10px; background: rgba(93, 147, 255, 0.2); color: #dff7ff; font-family: var(--num); font-weight: 900; } .rank-name { color: #f0fbff; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rank-bars { display: grid; gap: 6px; margin-top: 7px; } .rank-value { text-align: right; font-family: var(--num); color: white; font-size: 18px; font-weight: 900; } .drill-modal[hidden] { display: none; } .drill-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 34px; background: rgba(0, 10, 24, 0.72); backdrop-filter: blur(8px); } .drill-modal-panel { width: min(1780px, calc(100vw - 68px)); height: min(960px, calc(100vh - 68px)); border: 1px solid rgba(91, 214, 255, 0.44); border-radius: 24px; background: linear-gradient(180deg, rgba(8, 49, 83, 0.98), rgba(1, 18, 36, 0.98)), repeating-linear-gradient(0deg, rgba(108, 205, 255, 0.04), rgba(108, 205, 255, 0.04) 1px, transparent 1px, transparent 9px); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.1); overflow: hidden; display: grid; grid-template-rows: auto 1fr; } .drill-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid rgba(91, 180, 255, 0.22); background: linear-gradient(180deg, rgba(22, 102, 151, 0.72), rgba(4, 38, 72, 0.72)); } .drill-modal-title { color: #f2fbff; font-size: 20px; font-weight: 900; letter-spacing: 0.02em; } .drill-modal-actions { display: flex; align-items: center; gap: 10px; } .modal-close { width: 34px; height: 34px; border: 1px solid rgba(147, 221, 255, 0.38); border-radius: 999px; color: white; background: rgba(5, 41, 76, 0.84); cursor: pointer; font-size: 20px; line-height: 1; } .modal-close:hover { background: rgba(24, 117, 166, 0.9); } .drill-modal-body { padding: 16px; overflow: auto; } .drill-modal-body .drill-panel { min-height: 600px; } .drill-modal-body .rank-list { max-height: 510px; } .panel-tools { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; } .more-btn { border: 1px solid rgba(91, 214, 255, 0.42); border-radius: 999px; padding: 7px 13px; color: #e3f8ff; background: linear-gradient(180deg, rgba(28, 153, 217, 0.82), rgba(5, 72, 118, 0.86)); cursor: pointer; font-size: 12px; font-weight: 900; box-shadow: 0 0 16px rgba(73, 214, 255, 0.18); } .more-btn:hover { filter: brightness(1.12); } .table-status { position: relative; z-index: 1; margin-bottom: 10px; padding: 8px 12px; border: 1px solid rgba(91, 214, 255, 0.28); border-radius: 8px; color: #dff7ff; background: rgba(4, 35, 64, 0.72); font-size: 13px; font-weight: 700; } .table-status.error { border-color: rgba(255, 92, 102, 0.4); color: #ffd6d9; background: rgba(99, 24, 36, 0.42); } table { width: 100%; border-collapse: collapse; min-width: 760px; color: #dcefff; font-size: 13px; } th { position: sticky; top: 0; z-index: 2; padding: 11px 10px; background: linear-gradient(180deg, rgba(28, 153, 217, 0.96), rgba(5, 72, 118, 0.96)); color: white; text-align: left; border-bottom: 1px solid rgba(147, 221, 255, 0.38); white-space: nowrap; } td { padding: 10px; border-bottom: 1px solid rgba(147, 221, 255, 0.12); color: #cfe7f6; white-space: nowrap; } tr:hover td { background: rgba(39, 126, 178, 0.16); } tr.summary-row td { color: #ffffff; font-weight: 900; background: rgba(73, 214, 255, 0.14); } tr.green-row td { color: #d9fff1; background: rgba(94, 225, 181, 0.18); } tr.clickable-row { cursor: pointer; } .num { font-family: var(--num); color: white; font-size: 15px; font-weight: 800; } .delta-up { color: #7df5c5; } .delta-down { color: #ff9d94; } .status-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; } .status-pill.ok { color: #bdf9e4; background: rgba(94, 225, 181, 0.14); border: 1px solid rgba(94, 225, 181, 0.36); } .status-pill.warn { color: #ffe2ad; background: rgba(255, 200, 87, 0.14); border: 1px solid rgba(255, 200, 87, 0.36); } .status-pill.bad { color: #ffc2c7; background: rgba(255, 92, 102, 0.14); border: 1px solid rgba(255, 92, 102, 0.36); }