.arthur-profile { width: 100%; max-width: 768px; margin: 0 auto; padding: 24px; color: #fafafa; font-family: var(--font-body, Inter, sans-serif); }
.arthur-profile *, .arthur-profile *::before, .arthur-profile *::after { box-sizing: border-box; }
.arthur-profile button, .arthur-profile input { font-family: inherit; }
.arthur-profile button { cursor: pointer; }
.arthur-profile button:disabled { cursor: wait; opacity: .5; }
.arthur-profile button:focus-visible { outline: 2px solid #dedede; outline-offset: 4px; }
.arthur-profile .arthur-profile-heading { margin-bottom: 32px; }
.arthur-profile .arthur-profile-heading h1 { margin: 0; color: #fafafa; font-size: 30px; font-weight: 700; line-height: 36px; }
.arthur-profile .arthur-profile-heading h1 span { font-family: var(--font-display, Inter, sans-serif); }
.arthur-profile .arthur-profile-heading > p { margin: 4px 0 0; color: #9e9e9e; font-size: 16px; line-height: 24px; }
.arthur-profile .arthur-profile-card { padding: 28px; border: 1px solid #262626; border-radius: 16px; background: rgb(17 17 17 / 65%); box-shadow: 0 1px 2px #0006, 0 12px 32px -10px #00000080; }
.arthur-profile .arthur-profile-identity { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid #262626; }
.arthur-profile .arthur-profile-avatar-control { position: relative; width: 64px; height: 64px; flex: 0 0 64px; }
.arthur-profile .arthur-profile-avatar { position: relative; display: flex; width: 64px; height: 64px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #d6d6d6; border-radius: 50%; background: linear-gradient(145deg, #fafafa, #c8c8c8); color: #171717; font-size: 24px; font-weight: 700; line-height: 32px; }
.arthur-profile .arthur-profile-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.arthur-profile .arthur-profile-avatar-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgb(20 20 20 / 65%); color: #fff; }
.arthur-profile .arthur-profile-camera { position: absolute; right: -3px; bottom: -3px; display: flex; width: 27px; height: 27px; align-items: center; justify-content: center; padding: 0; border: 2px solid #171717; border-radius: 50%; background: #ececec; color: #161616; box-shadow: 0 1px 4px rgb(0 0 0 / 25%); }
.arthur-profile .arthur-profile-camera:hover { background: #fff; }
.arthur-profile .arthur-profile-identity-text { min-width: 0; }
.arthur-profile .arthur-profile-name { margin: 0; color: #fafafa; font-size: 18px; font-weight: 600; line-height: 28px; overflow-wrap: anywhere; }
.arthur-profile .arthur-profile-role { margin: 0; color: #b9b9b9; font-size: 12px; line-height: 16px; }
.arthur-profile .arthur-profile-photo-remove { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 0; border: 0; background: transparent; color: #a9a9a9; font-size: 11px; line-height: 16px; text-align: left; }
.arthur-profile .arthur-profile-photo-remove:hover { color: #e5b6b6; }
.arthur-profile .arthur-profile-photo-preview, .arthur-profile .arthur-profile-photo-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: -8px 0 24px; padding: 13px; border: 1px solid #3d3d3d; border-radius: 10px; background: #1b1b1b; }
.arthur-profile .arthur-profile-photo-preview > div:first-child { min-width: 0; }
.arthur-profile .arthur-profile-photo-preview p, .arthur-profile .arthur-profile-photo-confirm p { margin: 0; color: #e5e5e5; font-size: 12px; line-height: 18px; }
.arthur-profile .arthur-profile-photo-preview > div > span { display: block; margin-top: 3px; color: #a4a4a4; font-size: 11px; line-height: 16px; overflow-wrap: anywhere; }
.arthur-profile .arthur-profile-photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.arthur-profile .arthur-profile-secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 6px 9px; border: 1px solid #4a4a4a; border-radius: 7px; background: #252525; color: #ddd; font-size: 11px; font-weight: 500; line-height: 18px; }
.arthur-profile .arthur-profile-secondary-button:hover { background: #363636; }
.arthur-profile .arthur-profile-secondary-button.is-primary { border-color: #ddd; background: #e8e8e8; color: #171717; }
.arthur-profile .arthur-profile-secondary-button.is-primary:hover { background: #fff; }
.arthur-profile .arthur-profile-secondary-button.is-danger { border-color: #724949; background: #3d2525; color: #f3cdcd; }
.arthur-profile .arthur-profile-fields { display: flex; flex-direction: column; gap: 20px; }
.arthur-profile .arthur-profile-fields label { display: block; margin-bottom: 6px; color: #fafafa; font-size: 14px; font-weight: 500; line-height: 20px; }
.arthur-profile .arthur-profile-name-field { position: relative; }
.arthur-profile .arthur-profile-name-field > svg { position: absolute; z-index: 1; top: 50%; left: 12px; flex-shrink: 0; color: #9e9e9e; pointer-events: none; transform: translateY(-50%); }
.arthur-profile .arthur-profile-input { display: block; width: 100%; min-width: 0; margin: 0; padding: 10px 14px; border: 1px solid #262626; border-radius: 6px; background: #141414; color: #fafafa; font-size: 14px; font-weight: 400; line-height: 20px; transition: border-color .2s ease, box-shadow .2s ease; }
.arthur-profile .arthur-profile-name-input { padding-left: 40px; }
.arthur-profile .arthur-profile-input:focus { border-color: #777; outline: none; box-shadow: 0 0 0 2px rgb(255 255 255 / 6%); }
.arthur-profile .arthur-profile-input:disabled { opacity: .6; }
.arthur-profile .arthur-profile-prices { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.arthur-profile .arthur-profile-save { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; padding: 12px 16px; border: 1px solid #e5e5e5; border-radius: 12px; background: linear-gradient(135deg, #fafafa, #dedede); color: #151515; font-size: 16px; font-weight: 600; line-height: 24px; transition: box-shadow .2s, background .2s; }
.arthur-profile .arthur-profile-save:hover { background: #fff; box-shadow: 0 0 20px rgb(255 255 255 / 8%); }
.arthur-profile .arthur-profile-message { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 20px; padding: 12px; border: 1px solid #444; border-radius: 9px; background: #242424; color: #dedede; font-size: 12px; line-height: 19px; overflow-wrap: anywhere; }
.arthur-profile .arthur-profile-form > .arthur-profile-message { margin: 16px 0 0; }
.arthur-profile .arthur-profile-message.is-error { border-color: #673e3e; background: #2b1e1e; color: #efbaba; }
.arthur-profile .arthur-profile-message.is-warning { border-color: #685b3a; background: #2a261c; color: #e6d6aa; }
.arthur-profile .arthur-profile-message.is-success { border-color: #3d5746; background: #1d2921; color: #badac3; }
.arthur-profile .arthur-profile-text-button { padding: 0; border: 0; background: transparent; color: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.arthur-profile .arthur-profile-spinner { animation: arthur-profile-spin .8s linear infinite; }
.arthur-profile .arthur-profile-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }
@keyframes arthur-profile-spin { to { transform: rotate(360deg); } }
@media (min-width: 768px) { .arthur-profile { padding: 40px; } }
@media (max-width: 399px) { .arthur-profile { padding: 24px 16px; } .arthur-profile .arthur-profile-card { padding: 22px 18px; } .arthur-profile .arthur-profile-prices { gap: 12px; } .arthur-profile .arthur-profile-fields label { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .arthur-profile *, .arthur-profile *::before, .arthur-profile *::after { animation: none !important; transition: none !important; } }