Added TopBarAuthstateView

ShopAdmin/Components/Layout/MainLayout.razor

@@ -15,6 +15,8 @@
             <span class="payoff-line">Shop Administration &amp; Monitoring</span>
         </div>
     </a>
+
+    <TopBarAuthstateView IsAuthenticated="false" />
 </header>
 
 <NavShelf IsOpen="isShelfExpanded" IsOpenChanged="OnShelfStateChanged" @rendermode="InteractiveServer" />

ShopAdmin/Components/TopBarAuthstateView.razor

@@ -0,0 +1,37 @@
+<div class="auth-state-container">
+    @if (!IsAuthenticated)
+    {
+        <div class="auth-indicator unauthenticated">
+            <svg class="security-lock-vector" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                    <filter id="amber-cyber-glow" x="-30%" y="-30%" width="160%" height="160%">
+                        <feGaussianBlur stdDeviation="3.5" result="blur" />
+                        <feComposite in="SourceGraphic" in2="blur" operator="over" />
+                    </filter>
+                </defs>
+
+                <g class="lock-chassis" filter="url(#amber-cyber-glow)">
+                    <path d="M 32,45 V 24 L 38,18 H 62 L 68,24 V 45" stroke="#ffd166" stroke-width="3.5" fill="none" stroke-linecap="square" stroke-linejoin="miter" />
+
+                    <rect x="20" y="45" width="60" height="32" fill="#03090b" stroke="#ffd166" stroke-width="3.5" stroke-linejoin="miter" />
+
+                    <polygon points="47,54 53,54 55,60 45,60" fill="#ffd166" />
+                    <rect x="48.5" y="60" width="3" height="10" fill="#ffd166" />
+                </g>
+            </svg>
+        </div>
+    }
+    else
+    {
+        <div class="auth-indicator authenticated">
+            <div class="user-meta-stack">
+                <span class="meta-row-primary">ADMIN_OPERATOR</span>
+                <span class="meta-row-secondary">ID: 409-CLUSTER</span>
+            </div>
+        </div>
+    }
+</div>
+
+@code {
+    [Parameter] public bool IsAuthenticated { get; set; } = false;
+}

ShopAdmin/Components/TopBarAuthstateView.razor.css

@@ -0,0 +1,87 @@
+/* TopBarAuthstateView.razor.css */
+
+.auth-state-container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    /* REMOVED min-width: 160px; -> Let the box collapse to exactly the icon's width */
+    width: auto;
+    height: 100%;
+    /* Sliced down to a tight, crisp margin from the right browser edge */
+    padding-right: 6px;
+    box-sizing: border-box;
+    /* Keeps it anchored to the far right side of your header layout layout */
+    margin-left: auto;
+}
+
+.auth-indicator {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: center;
+    height: 100%;
+    width: auto; /* Collapses container layout tight */
+}
+
+/* Pristine yellow security lock vector */
+.security-lock-vector {
+    width: auto;
+    height: 48px; /* Preserved your ideal visual size */
+    overflow: visible;
+}
+
+/* Subtle hardware-accelerated technological power-hum pulse */
+.unauthenticated .lock-chassis {
+    animation: clean-cyber-pulse 4s ease-in-out infinite;
+}
+
+/* PRE-STRUCTURED TEXT STACKS: Active right-aligned layout framework */
+.user-meta-stack {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: right;
+    font-family: inherit;
+    gap: 4px;
+}
+
+.meta-row-primary {
+    font-size: 14px;
+    font-weight: 700;
+    color: #ffffff;
+    letter-spacing: 0.5px;
+}
+
+.meta-row-secondary {
+    font-size: 11px;
+    font-weight: 400;
+    color: #4dabff;
+    opacity: 0.8;
+}
+
+/* Mixed weighting classes pre-staged for detailed user metadata strings */
+.meta-row-large-bold {
+    font-size: 15px;
+    font-weight: 700;
+    color: #ffffff;
+    line-height: 1.2;
+    letter-spacing: 0.25px;
+}
+
+.meta-row-small-regular {
+    font-size: 11px;
+    font-weight: 400;
+    color: #4dabff;
+    opacity: 0.85;
+    line-height: 1;
+}
+
+@keyframes clean-cyber-pulse {
+    0%, 100% {
+        filter: drop-shadow(0px 0px 4px rgba(255, 209, 102, 0.35));
+    }
+
+    50% {
+        filter: drop-shadow(0px 0px 14px rgba(255, 209, 102, 0.65));
+    }
+}