.dap-page { padding: 30px clamp(22px, 4vw, 70px) 64px; color: #231b1a; }
.dap-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin:0 0 24px; }
.dap-hero h1 { margin:5px 0 7px; font-family:var(--base-display, sans-serif); font-size:clamp(38px, 4vw, 58px); line-height:1; }
.dap-hero p { max-width:820px; margin:0; color:#745f59; font-size:15px; }
.dap-status { display:flex; align-items:center; gap:9px; flex:0 0 auto; padding:10px 14px; border:1px solid #e1d5c8; border-radius:999px; background:#fff; color:#6b5651; font-size:12px; font-weight:700; }
.dap-status span { width:8px; height:8px; border-radius:50%; background:#4caf70; box-shadow:0 0 0 4px rgba(76,175,112,.12); }
.dap-status-waiting span { background:#c8943d; box-shadow:0 0 0 4px rgba(200,148,61,.12); }
.dap-filter-panel { margin-bottom:20px; padding:20px 22px 14px; border:1px solid #ded2c7; border-radius:18px; background:#fff; box-shadow:0 10px 28px rgba(57,28,27,.07); }
.dap-filter-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:14px; }
.dap-filter-heading h2 { margin:2px 0 0; font-size:22px; }
.dap-filter-heading p { margin:0; color:#806b65; font-size:12px; }
.dap-filter-kicker { color:#8a6045; font-size:10px; font-weight:800; letter-spacing:1.5px; }
.dap-filter-grid { display:grid; grid-template-columns:1.25fr 1.35fr repeat(4, 1fr); gap:13px; align-items:end; }
.dap-filter-grid .form-group { margin-bottom:5px; }
.dap-filter-grid label { color:#644e49; font-size:11px; letter-spacing:.45px; text-transform:uppercase; }
.dap-filter-grid .form-control, .dap-filter-grid .selectize-input { min-height:40px; border-color:#dfd4ca; border-radius:9px; box-shadow:none; }
.dap-metric-grid { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:13px; margin-bottom:20px; }
.dap-metric-card { position:relative; overflow:hidden; min-height:112px; padding:18px; border:1px solid #ded2c7; border-radius:15px; background:#fff; box-shadow:0 7px 19px rgba(57,28,27,.055); }
.dap-metric-card:before { content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:linear-gradient(90deg,#501214,#d7bd8a); }
.dap-metric-label { color:#806b65; font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.dap-metric-value { margin-top:12px; color:#501214; font-size:29px; font-weight:800; line-height:1; }
.dap-two-column { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.dap-panel { min-width:0; margin-bottom:20px; border:1px solid #ded2c7; border-radius:18px; background:#fff; box-shadow:0 10px 28px rgba(57,28,27,.065); overflow:hidden; }
.dap-two-column .dap-panel { margin-bottom:0; }
.dap-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:19px 22px 16px; border-bottom:1px solid #e7ddd4; }
.dap-panel-head h3 { margin:0 0 4px; color:#501214; font-family:var(--base-display, sans-serif); font-size:22px; }
.dap-panel-head p { margin:0; color:#806b65; font-size:12px; }
.dap-panel-body { padding:18px 22px 21px; }
.dap-panel .reactable { font-size:13px; }
.dap-panel .rt-thead { background:#501214; color:white; }
.dap-panel .rt-th { border-color:rgba(255,255,255,.12); font-size:10px; letter-spacing:.55px; text-transform:uppercase; }
.dap-panel .rt-td { border-color:#eee5dc; }
.dap-empty-notice { margin:0 0 18px; padding:14px 16px; border-radius:10px; background:#fff2df; color:#76501f; }
.dap-attribution-intro { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(520px,1.2fr); gap:28px; align-items:center; margin:4px 0 16px; padding:24px 26px; border:1px solid #d9cbbd; border-radius:18px; background:linear-gradient(135deg,#fff 0%,#f7f0e7 100%); box-shadow:0 9px 24px rgba(57,28,27,.06); }
.dap-attribution-intro h2 { margin:4px 0 7px; color:#501214; font-family:var(--base-display,sans-serif); font-size:27px; }
.dap-attribution-intro p { margin:0; color:#735f59; font-size:13px; line-height:1.55; }
.dap-attribution-methods { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.dap-attribution-methods > div { min-height:105px; padding:15px; border:1px solid #e0d5ca; border-radius:12px; background:rgba(255,255,255,.78); }
.dap-attribution-methods strong { display:block; margin-bottom:8px; color:#501214; font-size:10px; letter-spacing:1px; }
.dap-attribution-methods span { color:#715d58; font-size:11px; line-height:1.45; }
.dap-attribution-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-bottom:20px; }
.dap-attribution-key { display:grid; gap:5px; color:#6f5c56; font-size:12px; line-height:1.5; }
.dap-attribution-key p { margin:0; padding:8px 10px; border-radius:8px; background:#faf6f1; }
.dap-attribution-key strong { color:#501214; }
.dap-method-note { margin-top:22px; padding:18px 20px; border-left:4px solid #d7bd8a; border-radius:0 12px 12px 0; background:#f0e8dd; color:#695650; }
.dap-method-note strong { color:#501214; }
.dap-method-note p { margin:5px 0 0; font-size:12px; line-height:1.65; }
@media (max-width:1200px) { .dap-filter-grid { grid-template-columns:repeat(3,1fr); } .dap-metric-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:1000px) { .dap-attribution-intro { grid-template-columns:1fr; } }
@media (max-width:850px) { .dap-page { padding:22px 16px 45px; } .dap-hero,.dap-filter-heading { align-items:flex-start; flex-direction:column; } .dap-filter-grid,.dap-two-column { grid-template-columns:1fr; } .dap-metric-grid { grid-template-columns:repeat(2,1fr); } .dap-attribution-methods,.dap-attribution-metrics { grid-template-columns:1fr; } }