/* ==========================================================================
   mxone.css — User Center Layout & Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grid & Container
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

/* Desktop: col-md-wide-* (>=992px) */
@media (min-width: 992px) {
  .col-md-wide-25 { width: 25%; padding: 0 10px; box-sizing: border-box; }
  .col-md-wide-75 { width: 75%; padding: 0 10px; box-sizing: border-box; }
  .col-md-wide-33 { width: 33.333%; padding: 0 10px; box-sizing: border-box; }
  .col-md-wide-50 { width: 50%; padding: 0 10px; box-sizing: border-box; }
  .col-md-wide-66 { width: 66.666%; padding: 0 10px; box-sizing: border-box; }
  .col-md-wide-100 { width: 100%; padding: 0 10px; box-sizing: border-box; }
  .hidden-md { display: none !important; }
}

/* Tablet: col-sm-wide-* (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .col-sm-wide-35 { width: 35%; padding: 0 10px; box-sizing: border-box; }
  .col-sm-wide-65 { width: 65%; padding: 0 10px; box-sizing: border-box; }
  .col-sm-wide-50 { width: 50%; padding: 0 10px; box-sizing: border-box; }
  .col-sm-wide-100 { width: 100%; padding: 0 10px; box-sizing: border-box; }
  .hidden-sm { display: none !important; }
  .visible-sm { display: block !important; }
}

/* Mobile: col-xs-1 = full width (<768px) */
@media (max-width: 767px) {
  .col-xs-1 { width: 100%; padding: 0 10px; box-sizing: border-box; }
  .hidden-xs { display: none !important; }
  .visible-xs { display: block !important; }
}

/* Default: hide visible-xs/visible-sm on larger screens */
@media (min-width: 768px) {
  .visible-xs { display: none !important; }
}
@media (min-width: 992px) {
  .visible-sm { display: none !important; }
}
@media (max-width: 767px) {
  .hidden-sm { display: none !important; }
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.padding-0 { padding: 0 !important; }
.margin-0  { margin: 0 !important; }
.text-red  { color: #e74c3c !important; }
.pull-left { float: left !important; }
.col-pd    { padding: 10px; }

.top-line-dot {
  border-top: 1px dashed rgba(128,128,128,0.2);
  padding-top: 8px;
  margin-top: 8px;
}

.xiang {
  display: inline-block;
  min-width: 80px;
  color: #888;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */
.mxone-pannel {
  margin-bottom: 16px;
  border-radius: 6px;
  overflow: hidden;
}

.mxone-pannel-bg {
  background: var(--module-bg, #fff);
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}

/* --------------------------------------------------------------------------
   User Sidebar — head.html
   -------------------------------------------------------------------------- */
.mxone-user__name {
  padding: 16px;
  text-align: center;
}

.mxone-user__name .face {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 10px;
  cursor: pointer;
  position: relative;
}

.mxone-user__name h3 {
  font-size: 15px;
  margin: 0 0 4px;
  line-height: 1.4;
}

.mxone-user__name h3 a {
  color: inherit;
  text-decoration: none;
}

.mxone-user__name .more.pull-right {
  float: right;
  line-height: 60px;
  opacity: 0.4;
}

.mxone-user__head {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mxone-user__head li a {
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s;
}

.mxone-user__head li a:hover {
  background: rgba(128,128,128,0.06);
  color: var(--text-color-main, inherit);
}

/* --------------------------------------------------------------------------
   User Profile — index.html
   -------------------------------------------------------------------------- */
.mxone-user__form {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mxone-user__form p {
  padding: 8px 0;
  font-size: 13px;
  line-height: 1.6;
  word-break: break-all;
}

.mxone-user__form .urlcopy {
  cursor: pointer;
  color: var(--text-color-main, #333);
  text-decoration: underline dotted;
}

/* --------------------------------------------------------------------------
   Navigation Tabs (navuser)
   -------------------------------------------------------------------------- */
.navuser.nav-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
}

.navuser.nav-tabs li a {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.navuser.nav-tabs li.active a,
.navuser.nav-tabs li a:hover {
  opacity: 1;
  background: rgba(128,128,128,0.1);
}

/* --------------------------------------------------------------------------
   Button: btn-default
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 6px 16px;
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s, opacity 0.15s;
  line-height: 1.5;
}

.btn-default {
  background: transparent;
  border-color: rgba(128,128,128,0.3);
  color: inherit;
  opacity: 0.7;
}

.btn-default:hover {
  opacity: 1;
  background: rgba(128,128,128,0.08);
}