/* ─────────────────────────────────────────────────────────────────────────────         TOP-NAV      ───────────────────────────────────────────────────────────────────────────── */
        .top-nav {
          position: fixed;
          top: 0; left: 0; right: 0;
          height: 50px;
          background: #111;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
          z-index: 1000;
          overflow: visible;
          overflow-x: visible;
        }
        .top-nav a {
          padding: 12px 20px;
          background: #222;
          color: #ffa460;
          border: 1px solid #ffa460;
          border-radius: 6px;
          font-size: 16px;
          text-decoration: none;
          transition: all .3s ease;
        }
        .top-nav a:hover {
          background: #ff3c00;
          color: #fff;
          box-shadow: 0 0 8px #ff3c00;
        }
        .nav-links {
          display: flex;
          gap: 8px;
          flex: 1;
          min-width: 0;
          overflow-x: auto;
          white-space: nowrap;
        }
        :root {
          --nav-height: 50px;
        }
        body {
          padding-top: var(--nav-height);
        }
        
          /* ─────────────────────────────────────────────────────────────────────────────         USER INFO      ───────────────────────────────────────────────────────────────────────────── */
        .user-info {
          display: flex;
          align-items: center;
          gap: 12px;
          flex: 0 0 auto;
        }
        .user-info .avatar {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          object-fit: cover;
          border: 2px solid #ffa460;
        }
        .user-details {
          display: flex;
          flex-direction: column;
          line-height: 1.1;
        }
        .username {
          font-size: 1.1rem;
          color: #ffa460;
        }
        .permission {
          font-size: 0.75rem;
          color: #ccc;
        }
        .status {
          font-size: 0.75rem;
          color: #aaa;
          font-style: italic;
        }
        .user-info a.login,
        .user-info a.register,
        .user-info a.logout {
          font-size: 0.85rem;
          color: #ffa460;
          text-decoration: none;
          padding: 4px 8px;
          border: 1px solid #ffa460;
          border-radius: 4px;
          transition: background .2s ease;
        }
        .user-info a.login:hover,
        .user-info a.register:hover,
        .user-info a.logout:hover {
          background: #ff3c00;
          color: #fff;
        }
    
        /* ─────────────────────────────────────────────────────────────────────────────      Bottom-Corner Dashboards Tab    ───────────────────────────────────────────────────────────────────────────── */
        .dashboard-tab {
          position: fixed;
          bottom: 20px;
          right: 20px;
          z-index: 2000;
          font-family: 'Oswald', sans-serif;
        }
        .dash-toggle {
          background: #222;
          color: #ffa460;
          border: 1px solid #ffa460;
          border-radius: 6px 6px 0 0;
          padding: 6px 12px;
          cursor: pointer;
          font-size: 0.85rem;
          box-shadow: 0 0 8px #ff3c00;
          transition: background 0.2s ease, color 0.2s ease;
        }
        .dash-toggle:hover {
          background: #ff3c00;
          color: #fff;
        }
        .dashboard-panel {
          display: none;
          position: absolute;
          bottom: 100%;
          right: 0;
          background: #222;
          border: 1px solid #ffa460;
          border-radius: 0 0 6px 6px;
          box-shadow: 0 0 10px #ff3c00;
          min-width: 180px;
        }
        .dashboard-tab.open .dashboard-panel {
          display: block;
        }
        .dashboard-panel a {
          display: block;
          padding: 8px 12px;
          color: #ffa460;
          font-size: 0.85rem;
          text-decoration: none;
          transition: background 0.2s ease, color 0.2s ease;
        }
        .dashboard-panel a:hover {
          background: #ff3c00;
          color: #fff;
        }
        .dashboard-panel a.disabled {
          color: #555;
          pointer-events: none;
          cursor: default;
        }