.db-dashboard{display:grid;gap:14px}
.db-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.db-summary-card{position:relative;min-height:176px;padding:20px 22px;overflow:hidden;border:1px solid #e5eaf1;border-radius:14px;background:#fff;color:#17233d;text-align:left;box-shadow:0 5px 20px #25304a08}
.db-summary-card:hover{transform:translateY(-1px);border-color:#cfd8e5;box-shadow:0 9px 25px #25304a14}
.db-summary-title{position:relative;display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800}
.db-summary-title i{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#edf4ff;color:#1976f3;font-style:normal}
.db-summary-card.devices .db-summary-title i{background:#e9fbf5;color:#13ae7b}
.db-summary-card.service .db-summary-title i{background:#fff8e8;color:#edae16}
.db-summary-card>strong{position:relative;display:block;margin-top:17px;text-align:center;color:#0874f9;font-size:30px}
.db-summary-card>small{position:relative;display:block;margin-top:1px;text-align:center;color:#8490a4;font-size:10px}
.db-summary-card>em{position:absolute;top:61px;left:calc(50% + 33px);padding:3px 8px;border-radius:10px;background:#eaf9f4;color:#12a779;font-size:10px;font-style:normal}
.db-summary-note{position:absolute;right:20px;bottom:16px;left:20px;display:flex;justify-content:space-between;color:#728096;font-size:11px}
.db-summary-note strong{color:#26334b}.db-summary-note b{color:#0874f9}
.db-summary-wave{position:absolute;right:-5%;bottom:-44px;width:112%;height:112px;border-radius:50%;background:#f2f6fb;transform:rotate(-4deg)}
.db-summary-card.devices .db-summary-wave{background:#f1f8f7}.db-summary-card.service .db-summary-wave{background:#fffaf0}
.db-main-grid{display:grid;grid-template-columns:1.02fr 1fr 1fr;gap:14px}
.db-panel{margin:0!important;padding:20px;background:#fff;border:1px solid #e5eaf1;border-radius:14px;box-shadow:0 5px 20px #25304a08}
.db-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.db-panel-head h3{margin:0;color:#17233d;font-size:16px}
.db-panel-head p{margin:4px 0 0;color:#8792a5;font-size:10px}
.db-panel-head>button{padding:5px 8px;background:transparent;color:#0874f9;font-size:11px}
.db-panel-head>button:hover{text-decoration:underline}
.db-actions{display:flex;min-height:300px;flex-direction:column}
.db-action-tabs{display:flex;gap:4px;padding:0 0 9px;border-bottom:1px solid #e8edf3}
.db-action-tabs button{padding:8px 10px;border-radius:0;background:transparent;color:#77849b;font-size:11px}
.db-action-tabs button.active{border-bottom:2px solid #0874f9;color:#0874f9;font-weight:800}
.db-action-body{display:flex;flex:1;flex-direction:column;padding:18px 2px 0}
.db-action-body label{margin:0;color:#66738a;font-size:11px}
.db-action-body select{margin-top:7px}
.db-action-copy{display:flex;align-items:center;gap:13px;padding:15px 0}
.db-action-copy h4{margin:0 0 5px;color:#1d2b44;font-size:15px}
.db-action-copy p,.db-action-help{margin:0;color:#8490a4;font-size:11px;line-height:1.55}
.db-action-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:12px;background:#edf4ff;color:#0874f9;font-size:22px}
.db-action-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:auto;padding-top:18px}
.db-action-buttons button{min-width:110px}
.db-empty{display:grid;min-height:140px;place-items:center;color:#8792a5;font-size:12px}
.db-status-content{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:16px;min-height:230px}
.db-donut{position:relative;width:154px;height:154px;margin:auto;padding:0;border-radius:50%}
.db-donut:after{content:"";position:absolute;inset:24px;border-radius:50%;background:#fff}
.db-donut>span{position:absolute;z-index:1;inset:0;display:grid;place-content:center;text-align:center}
.db-donut b{color:#17233d;font-size:25px}.db-donut small{color:#8591a5;font-size:10px}
.db-status-list{display:grid;gap:8px}
.db-status-list button{display:grid;grid-template-columns:9px 1fr auto;align-items:center;gap:8px;padding:10px;background:#f8fafc;color:#637087;text-align:left}
.db-status-list button:hover{background:#eef5ff;color:#0874f9}
.db-status-list i,.db-map-status i{width:8px;height:8px;border-radius:50%;background:#cfd7e3}
.db-status-list i.online,.db-map-status i.online{background:#18b77e}
.db-status-list i.offline,.db-map-status i.offline{background:#ef6a67}
.db-status-list span{font-size:11px}.db-status-list b{font-size:13px}
.db-model-list{display:grid}
.db-model-row{display:grid;grid-template-columns:1fr 40px;gap:5px 12px;align-items:center;padding:12px 2px;background:#fff;border-bottom:1px solid #edf0f4;border-radius:0;text-align:left}
.db-model-row:hover b{color:#0874f9}
.db-model-row>span{display:flex;justify-content:space-between;gap:8px;color:#24324b}
.db-model-row small{color:#8b96a8;font-weight:400}
.db-model-row em{color:#637087;font-size:11px;font-style:normal;text-align:right}
.db-model-row>i{grid-column:1/-1;height:5px;overflow:hidden;border-radius:4px;background:#edf1f6}
.db-model-row>i span{display:block;height:100%;border-radius:4px;background:#0874f9}
.db-map-panel{position:relative;padding-bottom:14px}
#dashboard-map{height:330px;border-radius:10px;background:#eef2f7}
.db-map-status{position:absolute;right:28px;bottom:24px;z-index:500;display:flex;align-items:center;gap:4px;padding:4px;border-radius:8px;background:#fffe;box-shadow:0 4px 16px #24314b1c}
.db-map-status button{display:flex;align-items:center;gap:5px;padding:7px 9px;background:transparent;color:#66748b;font-size:10px}
.db-map-status button:hover{background:#edf4ff;color:#0874f9}.db-map-status b{color:#24324b}

@media(max-width:1200px){
  .db-main-grid{grid-template-columns:1fr 1fr}
  .db-models-panel{grid-column:1/-1}
}
@media(max-width:900px){
  .db-summary-grid{grid-template-columns:1fr}
  .db-summary-card{min-height:150px}
}
@media(max-width:760px){
  .db-main-grid{grid-template-columns:1fr}
  .db-models-panel{grid-column:auto}
  .db-status-content{grid-template-columns:1fr}
  .db-actions{min-height:280px}
  .db-action-tabs{overflow:auto}
  .db-action-buttons{flex-direction:column}
  .db-action-buttons button{width:100%}
  #dashboard-map{height:380px}
  .db-map-status{right:16px;bottom:20px;left:16px;justify-content:center}
}