/* ==========================================================================
   👤 EXECUTIVE STUDIO WORKSPACE HOUSING CORE COMPONENT ARRAYS
   ========================================================================== */

/* Header alignment blocks row context attributes */
.studio-header-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 16px 10px 16px;
    width: 100%;
    box-sizing: border-box;
}

.header-brand-title {
    font-size: 26px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -1px;
    text-transform: uppercase;
}

/* ➕ PURE CSS HAND-DRAWN ACTION PLUS TOOL TRIGGER (NO EMBEDDED STICKERS) */
.action-trigger-circle {
    width: 44px;
    height: 44px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
    transition: transform 0.2s;
}

.action-trigger-circle:active {
    transform: scale(0.92);
}

.vector-plus-icon {
    width: 16px;
    height: 16px;
    position: relative;
}

.vector-plus-icon::before, .vector-plus-icon::after {
    content: '';
    position: absolute;
    background-color: #000000;
    border-radius: 2px;
}

.vector-plus-icon::before {
    top: 7px;
    left: 0;
    width: 16px;
    height: 2px;
}

.vector-plus-icon::after {
    top: 0;
    left: 7px;
    width: 2px;
    height: 16px;
}

/* ==========================================================================
   💎 PREMIUM NEAT PERSONAL USER IDENTITY ACCOUNT CARD LAYOUTS
   ========================================================================== */

.profile-executive-card {
    background-color: #09090b;
    border: 1px solid #27272a;
    border-radius: 16px;
    padding: 24px;
    width: 92%;
    margin: 12px auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.profile-avatar-circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: #cbd5e1;
    background-image: url('https://unsplash.com'); /* Premium baseline human headshot frame asset */
    background-size: cover;
    background-position: center;
    border: 3px solid #18181b;
    box-shadow: 0 0 0 2px #27272a;
}

.meta-identity-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.meta-name-string {
    font-size: 20px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.3px;
}

.meta-sub-row {
    font-size: 13px;
    font-weight: 700;
    color: #a1a1aa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meta-location-badge {
    background-color: #18181b;
    border: 1px solid #27272a;
    color: #38bdf8;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    width: max-content;
    margin: 6px auto 0 auto;
    letter-spacing: 0.3px;
}

/* ==========================================================================
   📦 CREATOR MODAL POP-UP SYSTEM CONTAINER RULES
   ========================================================================== */

.modal-overlay-shield {
    display: none; /* Managed completely via active step state click actions toggles */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal-content-box {
    background-color: #ffffff;
    width: 100%;
    max-width: 440px;
    border-radius: 20px;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f4f4f5;
    padding-bottom: 12px;
}

.modal-header-block h3 {
    color: #000000 !important;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
}

/* Precise CSS hand-drawn closure vector cross shapes (X) */
.btn-modal-close-vector {
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer;
}

.btn-modal-close-vector::before, .btn-modal-close-vector::after {
    content: '';
    position: absolute;
    top: 11px;
    left: 3px;
    width: 18px;
    height: 2px;
    background-color: #a1a1aa;
    border-radius: 1px;
}

.btn-modal-close-vector::before { transform: rotate(45deg); }
.btn-modal-close-vector::after { transform: rotate(-45deg); }

/* Form Control Input Groups layout modules definitions */
.form-element-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.form-element-container label {
    font-size: 11px;
    font-weight: 800;
    color: #71717a !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-input-field, .modal-select-field, .modal-textarea-field {
    width: 100%;
    background-color: #f4f4f5 !important;
    color: #000000 !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    outline: none;
    box-sizing: border-box;
}

.modal-textarea-field {
    height: 60px;
    resize: none;
}

/* ==========================================================================
   🎥 COMPULSORY DUAL VERIFICATION MEDIA WIDGET CONSTRUCTORS
   ========================================================================== */

.mandatory-media-dropzone-row {
    display: flex;
    gap: 12px;
    width: 100%;
}

.media-box-widget {
    flex: 1;
    background-color: #09090b;
    border: 2px dashed #27272a;
    border-radius: 10px;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-align: center;
}

.media-box-widget span {
    font-size: 10px;
    font-weight: 800;
    color: #a1a1aa !important;
    text-transform: uppercase;
}

/* Pure CSS structural calculation outlines drawing your custom image camera asset */
.icon-draw-camera {
    width: 18px;
    height: 12px;
    border: 2px solid #a1a1aa;
    border-radius: 2px;
    position: relative;
    margin-top: 4px;
}

.icon-draw-camera::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 4px;
    width: 6px;
    height: 2px;
    background-color: #a1a1aa;
}

/* Pure CSS structural calculation outlines drawing your custom vector video camcorder asset */
.icon-draw-video {
    width: 14px;
    height: 12px;
    border: 2px solid #a1a1aa;
    border-radius: 2px;
    position: relative;
}

.icon-draw-video::before {
    content: '';
    position: absolute;
    right: -8px;
    top: 2px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #a1a1aa;
}

.btn-modal-submit-execution {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100%;
    cursor: pointer;
    margin-top: 4px;
}