:root {
  --ci-gap: 14px;
  --ci-radius: 6px;
  --ci-preview-size: 260px;
  --ci-border: rgba(0, 0, 0, .16);
  --ci-shadow: 0 8px 22px rgba(0, 0, 0, .08);
}
.ci-preview { margin-bottom: 8px; }
.ci-usercp-layout { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: var(--ci-gap); align-items: start; }
.ci-usercp-main { display: grid; gap: var(--ci-gap); min-width: 0; }
.ci-panel { overflow: hidden; border-radius: var(--ci-radius); box-shadow: var(--ci-shadow); }
.ci-panel h1, .ci-panel h2 { margin: 0; font-size: inherit; }
.ci-elements { display: grid; }
.ci-row { display: grid; grid-template-columns: minmax(180px, .8fr) 1.2fr; gap: var(--ci-gap); padding: var(--ci-gap); }
.ci-row > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ci-avatar-signature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ci-gap); padding: var(--ci-gap); }
.ci-avatar-signature > div { display: flex; flex-direction: column; gap: 8px; }
.ci-usercp-menu { display: flex; flex-direction: column; overflow: hidden; margin-bottom: var(--ci-gap); }
.ci-usercp-menu > * { padding: 9px; }
.plugin-usercp-navigation { display: flex; flex-direction: column; overflow: hidden; }
.plugin-usercp-navigation > div, .plugin-usercp-navigation > nav > div { padding: 8px; }
.plugin-usercp-navigation nav { display: flex; flex-direction: column; }
.ci-preview img { max-width: min(100%, var(--ci-preview-size)); max-height: var(--ci-preview-size); border: 1px solid var(--ci-border); border-radius: var(--ci-radius); box-shadow: var(--ci-shadow); object-fit: contain; }
.ci-row input[type="file"] { max-width: 100%; }
.ci-actions { display: flex; flex-wrap: wrap; gap: var(--ci-gap); }
@media (max-width: 720px) { .ci-usercp-layout, .ci-row, .ci-avatar-signature { grid-template-columns: 1fr; } }