/* ============================================================
   DHDMS-OS · 专业应用共享样式（apps/common/apps-common.css）
   配合 apps-common.js 使用；CSS 变量由主题系统注入
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: var(--t-bg, #0b1026);
  color: var(--t-text, #e8ecf8);
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 13px;
  overflow: hidden;
}
#app-root { display: flex; flex-direction: column; width: 100%; height: 100%; }

/* ---------------- 顶栏 ---------------- */
.dapp-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px;
  background: linear-gradient(180deg, var(--t-panel2, #1a2442), var(--t-panel, #121a33));
  border-bottom: 1px solid var(--t-border, rgba(255,255,255,0.09));
  flex: 0 0 auto; z-index: 50;
}
.dapp-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dapp-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--t-accent, #00d4ff), var(--t-accent2, #7b2ff7));
  box-shadow: 0 0 10px var(--t-accent, #00d4ff);
  flex: 0 0 auto;
}
.dapp-title { font-size: 14px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dapp-tools { display: flex; align-items: center; gap: 8px; position: relative; flex: 0 0 auto; }
.dapp-btn {
  background: var(--t-panel2, #1a2442);
  color: var(--t-text, #e8ecf8);
  border: 1px solid var(--t-border, rgba(255,255,255,0.09));
  border-radius: 8px; padding: 5px 12px; cursor: pointer; font-size: 12px;
  transition: border-color .15s;
}
.dapp-btn:hover { border-color: var(--t-accent, #00d4ff); }
.dapp-swatch {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.35); flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: transform .15s;
}
.dapp-swatch:hover { transform: scale(1.12); }
.dapp-theme-panel {
  position: absolute; top: 34px; right: 0; width: 248px; padding: 10px;
  background: var(--t-panel, #121a33);
  border: 1px solid var(--t-border, rgba(255,255,255,0.12));
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  display: none; z-index: 100;
}
.dapp-theme-panel.open { display: block; }
.dapp-theme-label { font-size: 12px; color: var(--t-muted, #93a0c0); margin-bottom: 8px; }
.dapp-theme-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.dapp-color {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform .12s;
}
.dapp-color:hover { transform: scale(1.15); }
.dapp-color.active { border-color: #fff; box-shadow: 0 0 0 2px var(--t-accent, #00d4ff); }

/* ---------------- 主体 ---------------- */
.dapp-main {
  flex: 1 1 auto; overflow: auto;
  padding: 14px 16px;
  background:
    radial-gradient(900px 500px at 10% 0%, color-mix(in srgb, var(--t-accent, #00d4ff) 6%, transparent), transparent 60%),
    var(--t-bg, #0b1026);
}
.dapp-status {
  flex: 0 0 auto; display: flex; justify-content: space-between;
  padding: 5px 14px; font-size: 11px; color: var(--t-muted, #93a0c0);
  border-top: 1px solid var(--t-border, rgba(255,255,255,0.07));
  background: var(--t-panel, #121a33);
}

/* ---------------- 组件 ---------------- */
.dpanel {
  background: var(--t-panel, #121a33);
  border: 1px solid var(--t-border, rgba(255,255,255,0.09));
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
}
.dpanel-title {
  font-size: 13px; font-weight: 600; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.dstat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.dstat-card {
  background: var(--t-panel, #121a33);
  border: 1px solid var(--t-border, rgba(255,255,255,0.09));
  border-left: 3px solid var(--dstat-accent, var(--t-accent, #00d4ff));
  border-radius: 10px; padding: 10px 12px;
}
.dstat-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dstat-label { font-size: 11px; color: var(--t-muted, #93a0c0); margin-top: 2px; }

.dtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dtable th {
  text-align: left; padding: 8px 10px; font-size: 11.5px; color: var(--t-muted, #93a0c0);
  border-bottom: 1px solid var(--t-border, rgba(255,255,255,0.12));
  position: sticky; top: 0; background: var(--t-panel, #121a33); z-index: 2;
  white-space: nowrap;
}
.dtable td { padding: 7px 10px; border-bottom: 1px solid var(--t-border, rgba(255,255,255,0.05)); vertical-align: top; }
.dtable tbody tr:hover { background: color-mix(in srgb, var(--t-accent, #00d4ff) 6%, transparent); }
.dtable .dcell-first { font-weight: 600; white-space: nowrap; }

.dbadge {
  display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px;
  border: 1px solid var(--t-border, rgba(255,255,255,0.15));
}
.dbadge.accent { background: color-mix(in srgb, var(--t-accent, #00d4ff) 16%, transparent); color: var(--t-accent, #00d4ff); }
.dbadge.ok { background: rgba(39,174,96,.16); color: #2ecc71; }
.dbadge.warn { background: rgba(241,196,15,.16); color: #f1c40f; }
.dbadge.err { background: rgba(231,76,60,.16); color: #e74c3c; }
.dbadge.muted { color: var(--t-muted, #93a0c0); }

.dsearch {
  background: var(--t-panel2, #1a2442); color: var(--t-text, #e8ecf8);
  border: 1px solid var(--t-border, rgba(255,255,255,0.12)); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; width: 100%; margin-bottom: 10px; outline: none;
}
.dsearch:focus { border-color: var(--t-accent, #00d4ff); }

.dtabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.dtab {
  background: var(--t-panel2, #1a2442); color: var(--t-muted, #93a0c0);
  border: 1px solid var(--t-border, rgba(255,255,255,0.1)); border-radius: 8px;
  padding: 5px 14px; cursor: pointer; font-size: 12px; transition: all .15s;
}
.dtab.active { color: var(--t-accent, #00d4ff); border-color: var(--t-accent, #00d4ff); background: color-mix(in srgb, var(--t-accent, #00d4ff) 10%, transparent); }

.dgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dgrid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1100px) { .dgrid2, .dgrid3 { grid-template-columns: 1fr; } }

.dlist { list-style: none; }
.dlist li { padding: 7px 10px; border-bottom: 1px solid var(--t-border, rgba(255,255,255,0.05)); font-size: 12.5px; }
.dlist li:last-child { border-bottom: none; }
.dkbd {
  font-family: Consolas, monospace; font-size: 11px;
  background: var(--t-panel2, #1a2442); border: 1px solid var(--t-border, rgba(255,255,255,0.12));
  border-radius: 5px; padding: 1px 6px;
}
.mono { font-family: Consolas, "Cascadia Code", monospace; font-size: 12px; }
.small { font-size: 11.5px; color: var(--t-muted, #93a0c0); }
.mt8 { margin-top: 8px; } .mb8 { margin-bottom: 8px; }